xây dựng website thương mại điện tử kinh doanh thiết bị di động

Và đặt biệt trong thời gian đại dịch bùng nổ dịch bệnh vừa qua, số thiết bị di động trên đầu người tăng chóng mặt số lượng số thiết bị di động có sóng kết nối là 145.8 triệu vượt hơ

SVTH:

Tp Hồ Chí Minh, tháng 12/2023

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

KINH DOANH THIẾT BỊ DI ĐỘNG

GVHD: ThS NGUYỄN TRẦN THI VĂN

LÊ HOÀNG LỘC ĐẶNG LÊ QUANG

S K L 0 1 2 5 3 5

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

-🙞🙞🙞🙞🙞 -

KHÓA LUẬN TỐT NGHIỆP

NHÓM SINH VIÊN: Lê Hoàng Lộc 19110237

Đặng Lê Quang 19110270

Tp Hồ Chí Minh, tháng 12 năm 2023 XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ KINH

DOANH THIẾT BỊ DI ĐỘNG

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CỘNG NGHỆ THÔNG TIN

Đặng Lê Quang 19110270

Tp Hồ Chí Minh, tháng 12 năm 2023

Đồ án tốt nghiệp

PHIẾU GIAO ĐỀ TÀI CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

*******

Tp Hồ Chí Minh, 20 tháng 12 năm 2023

PHIẾU GIAO ĐỀ TÀI

Ngành: Công Nghệ Thông Tin Giảng viên hướng dẫn: Ths Nguyễn Trần Thi Văn Ngày nhận đề tài: … / … / 2023 Ngày nộp đề tài: … / … / 2023 Tên đề tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ KINH DOANH THIẾT BỊ DI ĐỘNG

Nội dung thực hiện đề tài: - Tìm hiểu NodeJS

- Tìm hiểu về ReactJS

- Tìm hiểu về ExpressJS

- Tìm hiểu về MongoDB

- Xây dựng website

Thời gian thực hiện: 15 tuần (Bắt đầu từ //2023 đến //2023)

Chữ ký của SV: ……… Chữ ký của SV: ………

Khoa ĐT CLC – ĐH SPKT TP.HCM

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

*******

Tp Hồ Chí Minh, 20 tháng 12 năm 2023

Ngành: Công Nghệ Thông Tin Giảng viên hướng dẫn: Ths Nguyễn Trần Thi Văn Tên đề tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ KINH DOANH THIẾT BỊ DI ĐỘNG

Về nội dung đề tài và khối lượng thực hiện

Ưu điểm:

Khuyết điểm:

Đề nghị cho bảo vệ hay không?

Đánh giá loại:

Điểm:

Khoa ĐT CLC – ĐH SPKT TP.HCM

Đồ án tốt nghiệp

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

*******

Tp Hồ Chí Minh, 20 tháng 12 năm 2023

Ngành: Công Nghệ Thông Tin Giảng viên phản biện: Ths Nguyễn Minh Đạo Tên đề tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ KINH DOANH THIẾT BỊ DI ĐỘNG

Về nội dung đề tài và khối lượng thực hiện

Ưu điểm:

Khuyết điểm:

Đề nghị cho bảo vệ hay không?

Đánh giá loại:

Điểm:

Khoa ĐT CLC – ĐH SPKT TP.HCM

KẾ HOẠCH THỰC HIỆN, PHÂN CÔNG NHIỆM VỤ

thực hiện

Ghi chú

Tuần 1

Xác định chức năng,yêu cầu hệ thốngLên kế hoạch

Cả nhóm

Tuần 2

Thiết kế và phát triển giao diện trang người dùng

Thiết kế và phát triển giao diện trang người dùng

máy tính bảng

Tuần 5

Thiết kế và phát triển giao diện trang người dùng

Thiết kế và phát triển giao diện trang người dùng

hàng

Đồ án tốt nghiệp

Tuần 6

Tuần 7

Thiết kế và phát triển giao diện trang người dùng

người dùng

Tuần 8

Xử lý và hoàn thiện chức năng đăng nhập, đăng ký

Quang

Xử lý và hoàn thiện chức năng quản lý sản

Tuần 9

Xử lý và hoàn thiện chức năng lọc sản phẩm, giỏ hàng, cập nhật thông tin người dùng

Quang

Xử lý và hoàn thiện chức năng quản lý

Tuần 10

Xử lý và hoàn thiện chức năng tìm kiếm, thanh toán và lịch sử đơn hàng

Xử lý và hoàn thiện chức năng đánh giá, hỏi đáp

Xử lý và hoàn thiện chức năng sự kiện đặc biệt, mã khuyến mãi

Quang

Xử lý và hoàn thiện chức năng quản lý

Tuần 13

Kiểm tra sản phẩm và viết báo cáo Cả nhóm

Tuần 14

Kiểm tra sản phẩm và viết báo cáo Cả nhóm

Tuần 15

Kiểm tra sản phẩm lần cuốiBáo cáo

Cả nhóm

Đồ án tốt nghiệp

LỜI CẢM ƠN

Để hoàn thành đề tài khóa luận chuyên ngành của nhóm, lời cảm ơn đầu tiên em muốn gửi đến Ths Nguyễn Trần Thi Văn, thầy đã luôn theo dõi và đồng hành cùng nhóm em trong suốt khoản thời gian hoàn thành đề tài từ giai đoạn lên ý tưởng cho đến giai đoạn triển khai trang web Dù thầy phải hướng dẫn cho một số lượng sinh viên không nhỏ nhưng thầy vẫn luôn tận tình bám sát theo nhóm toàn bộ quá trình hoàn thành đề tài của nhóm

Ngoài ra, em muốn gửi lời cảm ơn đến toàn thể các thầy, cô trong Khoa đào tạo Chất lượng cao trường Đại học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh, đã cung cấp một nền tảng kiến thức vững chắc để hoàn thành được đề tài khóa luận chuyên ngành của nhóm Hiện tại chúng em rất tự tin với lượng kiến thức mà thầy, cô đã cung cấp trong suốt quá trình học tại trường

Để hoàn thành đề tài này, là một sự nỗ lực không hề nhỏ của từng cá nhân thành viên trong nhóm, nhưng do vẫn còn rất nhiều hạn chế về kinh nghiệm nên không thể tránh khỏi những thiếu sót ngoài ý muốn, vì vậy những lần góp ý và giúp đỡ của thầy, cô với kinh nghiệm và kiến thức chuyên ngành dày dặn là rất quý báu đối với nhóm em

Cuối cùng, nhóm em muốn gửi lời chúc sức khỏe, hạnh phúc, thành công, những điều tốt đẹp nhất ở hiện tại và tương lai đến thầy, cô và gia đình

TP Hồ Chí Minh, ngày 29 tháng 12 năm 2023

Người đại diện nhóm

Lộc Lê Hoàng Lộc

LỜI NÓI ĐẦU

Trong những năm vừa qua, với sự phát triển nhanh chóng của Công Nghệ Thông Tin đang mang lại những thành tựu và sự tiến hóa vượt bật trên toàn thế giới Không ngoại lệ Việt Nam cũng là một trong những nước đang phát triển mạnh mẽ trong lĩnh vực này và đặc biệt là chuyên ngành công nghệ phần mềm

Và đặt biệt trong thời gian đại dịch bùng nổ dịch bệnh vừa qua, số thiết bị di động trên đầu người tăng chóng mặt số lượng số thiết bị di động có sóng kết nối là 145.8 triệu vượt hơn cả số 96.9 triệu dân Việt Nam Tất nhiên lượng thiết bị điện tử tăng quá nhanh như vậy đi đôi với lượng truy cập vào các website cũng không thể tránh khỏi tăng nhanh với 68.17 triệu tại Việt Nam(Nguồn: Thống kê kết nối Việt Nam)

Nhanh chóng nhận thấy được những con số hấp dẫn này, nhóm em quyết định sẽ chọn đề

tài làm một trang web thương mại điện tử cung cấp thiết bị di động và có một sự lựa

chọn về công cụ thiết kế website an toàn là những công nghệ thiết kế web đang rất nổi trội

trên toàn thế giới hiện nay là MERN-STACK để đảm bảo được vần để rút ngắn thời gian

phát triển nhưng kết quả đầu ra vẫn đạt được kì vọng cuả nhóm

Trang 3 Đồ án tốt nghiệp

MỤC LỤC

2.1 Khảo sát hiện trạng 28

Trang 5 Đồ án tốt nghiệp

DANH MỤC BẢNG

Bảng 1 Bộ phận khách hàng 51

Bảng 2 Bộ phận quản lý người dùng 52

Bảng 3 Bộ phận quản lý kho 52

Bảng 4 Bộ phận quản lý bán hàng 53

Bảng 5 Yêu cầu chức năng hệ thống 54

Bảng 6 Yêu cầu phi chức năng 55

Bảng 7 Usecase đăng ký 59

Bảng 8 Usecase đăng nhập 61

Bảng 9 Usecase xem danh sách sản phẩm 62

Bảng 10 Usecase tìm sản phẩm 63

Bảng 11 Usecase lọc sản phẩm theo hãng 65

Bảng 12 Usecase lọc sản phẩm theo giá 66

Bảng 13 Usecase xem chi tiết sản phẩm 68

Bảng 14 Usecase đăng xuất 70

Bảng 15 Usecase thêm sản phẩm vào giỏ hàng 72

Bảng 16 Usecase xem giỏ hàng 73

Bảng 17 Usecase cập nhật số lượng 75

Bảng 18 Usecase xoá sản phẩm 75

Bảng 19 Usecase đặt hàng 76

Bảng 20 Usecase đánh giá 77

Bảng 21 Usecase hỏi đáp sản phẩm 78

Bảng 22 Usecase xem thông tin tài khoản 79

Bảng 38 Thành phần trang chủ 95

Bảng 39 Thành phần thanh header 96

Bảng 40 Thành phần Event2 97

Bảng 41 Các thành phần khác: Trendy, discount, P003 98

Bảng 42 Các thành phần khác: Service Recommended, P004 100

Bảng 43 Các thành phần còn lại: News, P005 101

Trang 7 Đồ án tốt nghiệp

Bảng 48 Đánh giá sản phẩm 107

Bảng 49 Chi tiết đơn hàng đã mua 112

Bảng 50 Trang đăng ký 112

Bảng 51 Form đăng ký 113

Bảng 52 Trang đăng nhập 114

Bảng 53 Thành phần thêm địa chỉ mới 117

Bảng 54 Thành phần xoá địa chỉ 118

Bảng 55 Trang chủ (Admin) 121

Bảng 56 Menu chưa xác thực 122

Bảng 57 Menu đã xác thực 122

Bảng 58 Thành phần thông tin đơn hàng gần nhất 125

Bảng 59 Trang quản lý người dùng 126

Bảng 60 Trang đăng nhập (Admin) 127

Bảng 61 Trang danh sách người dùng đã xoá 128

Bảng 62 Trang quản lý sản phẩm 130

Bảng 63 Trang chỉnh sửa thông tin sản phẩm 131

Bảng 64 Trang danh sách sản phẩm đã xoá 132

Bảng 65 Trang thêm sản phẩm 134

Bảng 66 Trang quản lý đơn hàng 135

Bảng 67 Trang chi tiết đơn hàng 137

Bảng 68 Kiểm thử chức năng phía người dùng 146

Bảng 69 Kiểm thử chức năng phía Admin 147

DANH MỤC HÌNH ẢNH

Hình 1 Quy trình cơ bản đạt được 18

Hình 2 Mô hình virtual DOM 19

Hình 3 Quản lý state React 20

Hình 10 Danh sách sản phẩm Hoangha 30

Hình 11Danh sách sản phẩm Hoangha 2 30

Hình 12 Danh sách sản phẩm Hoangha 3 31

Hình 13 Danh mục sản phẩm Hoangha 31

Hình 14 Trải nghiệm mua hàng Hoangha 32

Hình 15 Chi tiết sản phẩm Hoangha 33

Hình 16 Phần trao đổi, đánh giá về sản phẩm Hoangha 33

Hình 17 Modal mua hàng Hoangha 34

Hình 18 Modal mua hàng Hoangha 34

Trang 9 Đồ án tốt nghiệp

Hình 29 Giới thiệu dịch vụ 30Shine 45

Hình 30 Trang web thương mại điện tử 30 shop 46

Hình 31 Chi tiết sản phẩm 30 shop 46

Hình 32 Trang tìm kiếm địa chỉ 30 shop 47

Hình 38 Usecase đăng nhập 60

Hình 39 Usecase xem danh sách sản phẩm 61

Hình 40 Usecase tìm sản phẩm 62

Hình 41 Usecase lọc sản phẩm theo hãng 64

Hình 42 Usecase xem chi tiết sản phẩm 67

Hình 43 Usecase đăng xuất 69

Hình 44 Usecase thêm sản phẩm vào giỏ hàng 71

Hình 45 Usecase xem giỏ hàng 72

Hình 46 Đánh giá 77

Hình 47 Usecase hỏi đáp sản phẩm 78

Hình 48 Usecase xem thông tin tài khoản 79

Hình 58 Thanh header sau khi xác thực 96

Hình 59 Thanh header trước khi xác thực 96

Hình 70 Thành phần thông tin giao nhận hàng 109

Hình 71 Thành phần thông tin thanh toán 110

Hình 72 Lịch sử đơn hàng 110

Hình 73 Thành phần đơn hàng đã mua 111

Trang 11 Đồ án tốt nghiệp

Hình 74 Chi tiết đơn hàng đã mua 111

Hình 75 Trang đăng ký 112

Hình 76 Form đăng ký 113

Hình 77 Trang đăng nhập 114

Hình 78 Trang thông tin người dùng 115

Hình 79 Thành phần cập nhật ảnh đại diện 115

Hình 80 Thành phần cập nhật thông tin 116

Hình 81 Thành phần cập nhật địa chỉ 116

Hình 82 Thành phần thêm địa chỉ mới 117

Hình 83 So sánh sản phẩm 119

Hình 84 Chi tiết so sánh sản phẩm 120

Hình 85 Trang chủ (Admin) 121

Hình 86 Menu chưa xác thực 121

Hình 87 Menu đã xác thực 122

Hình 88 Thành phần P003 122

Hình 89 Biểu đồ thống kê theo số lượng đơn hàng 123

Hình 90 Biểu đồ thống kê theo doanh thu 123

Hình 91 Biểu đồ thống kê số lượng bán theo danh mục 124

Hình 92 Thành phần danh sách người dùng có chi tiêu cao 124

Hình 93 Thành phần thông tin đơn hàng gần nhất 125

Hình 94 Trang quản lý người dùng 126

Hình 95 Trang đăng nhập (Admin) 127

Hình 96 Trang danh sách người dùng đã xoá 128

Hình 97 Trang quản lý sản phẩm 129

Hình 98 Trang chỉnh sửa thông tin sản phẩm 130

Hình 99 Trang danh sách sản phẩm đã xoá 132

Hình 100 Trang thêm sản phẩm 133

Hình 101 Trang quản lý đơn hàng 135

Hình 102 Trang chi tiết đơn hàng 136

Trang 13 Đồ án tốt nghiệp

PHẦN MỞ ĐẦU 1 Tính cấp thiết của đề tài

Trong thập kỷ gần đây, Công nghệ thông tin và viễn thông (CNTT) đã phát triển mạnh mẽ trở thành một xu hướng toàn cầu Các lĩnh vực khác cũng nhanh chóng áp dụng CNTT vào hoạt động kinh doanh và phát triển nhanh chóng Sự gặp gỡ giữa hai lĩnh vực hàng đầu thế giới, CNTT và thương mại, đã tạo ra một lĩnh vực mới là Thương mại điện tử - một lĩnh vực tiềm năng và đã trở thành một xu hướng của thời đại toàn cầu hóa

Việt Nam cũng không nằm ngoài xu hướng này, với sự gia tăng nhanh chóng của kết nối Internet tạo ra một làn sóng tìm kiếm thông tin trên toàn quốc Các doanh nghiệp lớn và nhỏ đều đã nhận thấy và nhanh chóng đưa thông tin về sản phẩm, liên lạc và các thông tin khác của doanh nghiệp lên Internet để tiến hành buôn bán Thương mại điện tử, với tính nhanh chóng, tiện lợi và tiết kiệm, đã trở thành một giải pháp tối ưu và thậm chí là bắt buộc đối với mọi doanh nghiệp muốn phát triển

Với mức doanh số 21 tỷ USD và tiềm năng tiếp tục tăng lên 39 tỷ USD tại Việt Nam vào năm 2019, Thương mại điện tử đã trở thành một phần không thể thiếu trong doanh nghiệp ở Việt Nam Việc sử dụng điện thoại thông minh tại Việt Nam đang ngày càng gia tăng, với hơn 61 triệu người sử dụng Với sự gia tăng không ngừng này, việc tạo ra một trang web Thương mại điện tử, đặc biệt là cho điện thoại thông minh, sẽ mang lại giá trị kinh tế và tiềm năng phát triển không ngừng trong tương lai

Sự phát triển của các ngôn ngữ lập trình cho phép các kỹ sư CNTT xây dựng các ứng dụng web, nơi người dùng có thể dễ dàng thực hiện giao dịch mua bán sản phẩm Thương mại điện tử bằng nhiều hình thức khác nhau Và khi JavaScript trở thành một ngôn ngữ lập trình phổ biến trên toàn thế giới trong lĩnh vực lập trình web, thì MERN - một bộ công nghệ sử dụng JavaScript phổ biến hàng đầu - đã trở thành lựa chọn hàng đầu để xây dựng trang web vào thời điểm hiện tại (11/2022) MERN bao gồm MongoDB, ExpressJS, ReactJS và NodeJS: ExpressJS là một framework web phía máy chủ, NodeJS là một runtime JavaScript phổ biến nhất hiện nay và khi nhắc đến NodeJS và ExpressJS thì không thể thiếu MongoDB - một cơ sở dữ liệu không quan hệ được xây dựng cho việc tổ chức dữ liệu linh hoạt, khác biệt hoàn toàn so với cơ sở dữ liệu quan hệ Bộ 3 M-E-N cung cấp một

cách tiếp cận làm việc với JavaScript và JSON đáng lựa chọn nhất ReactJS là một framework phía máy khách được lựa chọn hàng đầu cho việc phát triển giao diện người dùng cho trang web sử dụng công nghệ MERN

2 Mục đích đề tài

Đề tài “Xây dựng hệ thống kinh doanh các sản phẩm công nghệ” sẽ bao gồm các mục tiêu sau:

o Xây dựng web site cung cấp giao diện cho người dùng có nhu cầu sử dụng hệ thống “Website cung cấp thiết bị di động” (Customer-Buyer)

o Xây dựng hệ thống quản lý cho doanh nghiệp (CMS-Administrator) o Phát triển các phần tốt nhất của dự án môn TLCN sử dụng công nghệ MERN, và

thêm các chức năng đã thống nhất và được phép chuyển khai từ trước o Dựa vào các kiến thức và báo cáo các môn học khác để tạo thành một báo cáo

hoàn chỉnh và đầy đủ nhất

2.1 Phía Frontend:

Người mua:

o Thiết kế và xây dựng giao diện sử dụng ReactJS (Thiết kế Figma):

▪ Trang chủ: Feature products, hero banner, events, cooperate brands advertises

▪ Xác thực bằng tài khoản (đăng ký, đăng nhập, quên mật khẩu, đổi mật khẩu)

▪ Xác thực sử dụng bên cung cấp thứ ba (Google, Facebook) ▪ Phiên đăng nhập, sử dụng JWT đảm bảo an toàn và tự động tạo lại token

khi đạt các điều kiện bảo mật ▪ Danh sách sản phẩm theo danh mục, chi tiết sản phẩm ▪ Giỏ hàng: Tương tác sản phẩm trong giỏ hàng, vouchers, dùng API GHN

tính phí ship từ địa chỉ người dùng ▪ Lịch sử mua hàng, chi tiết một đơn hàng ▪ Thông tin người dùng: Lưu trữ hình ảnh người dùng cloudinary, sử dụng

API GHN để liệt kê các tỉnh thành ở VN

Trang 15 Đồ án tốt nghiệp

▪ So sánh sản phẩm

Quản trị viên:

o Đảm bảo các chức năng cơ bản (Giao diện dùng template):

▪ Quản lý người dùng ▪ Quản lý sản phẩm ▪ Quản lý đơn hàng (+Duyệt đơn hàng) ▪ Cuộc hội thoại giữa QTV (Tuỳ chọn)

Hệ thống:

o Tối ưu hóa mã nguồn, xây dựng các component có thể tái sử dụng o Trải nghiệm và áp dụng các công nghệ mới nhất hiện nay vào hệ thống o Áp dụng công nghệ lấy dữ liệu mới nhất hiện nay của RTK: queryRTK

o Thanh toán Momo (Tuỳ chọn)

3 Cách tiếp cận và nghiên cứu 3.1 Đối tượng nghiên cứu

3.1.1 Người bán – Doanh nghiệp

o Có các mặt hàng cơ bản: Điện thoại, Laptop, Tablet, khác, … o Phủ khắp rộng lớn có các chi nhanh rải đều ở các khu vực trên toàn lãnh thổ Việt

Nam như: TGDĐ, CellPhoneS, HoangHa Mobile, … o Có độ uy tín cao để tiện cho việc lấy dữ liệu trong tương lai o Có tuổi đời lâu năm

o Có trang web TMĐT hoạt động tốt, đầy đủ chức năng: và nổi trội trong cùng lĩnh vực

3.1.2 Người mua

o Tất cả tệp khách hàng (tất cả độ tuổi) có nhu cầu mua, sử dụng hay tìm kiếm thông tin về các sản phẩm thiết bị di động

3.2 Phạm vi nghiên cứu

3.2.1 Về mặt lý thuyết

3.2.1 Tổng quan về website kinh doanh sản phẩm công nghệ

o Tìm hiểu về website kinh doanh sản phẩm côngn ghệ và vai trò của nó trong thị trường hiện nay

o Phân tích các yếu tố quan trọng trong việc thiết kế và phát triển website kinh doanh sản phẩm công nghệ

3.2.2 MERN stack

o Tìm hiểu đánh gía, giải thích cấu trúc và thành phần của MERN stack (MongoDB, Express.JS, ReactJS, NodeJS)

o Phân tích lợi ích và ưu điểm của việc sử dụng MERN stack trong phát triển web

3.2.3 Về mặt lập trình

3.2.3.1 Quản lý Sản phẩm và Danh mục:

o Cho phép người dùng thêm, sửa đổi và xóa sản phẩm từ cơ sở dữ liệu.o Cung cấp chức năng quản lý danh mục để nhóm sản phẩm thành các nhóm liên

quan

3.2.3.2 Giao diện Người dùng Thân thiện

o Thiết kế giao diện người dùng dễ sử dụng và thân thiện, đảm bảo trải nghiệm người dùng tốt

3.2.3.3 Chức năng Tìm kiếm và Lọc Sản phẩm

o Cung cấp tính năng tìm kiếm để người dùng có thể nhanh chóng tìm kiếm sản phẩm theo các tiêu chí khác nhau

Trang 17 Đồ án tốt nghiệp

o Cho phép người dùng lọc sản phẩm dựa trên các thuộc tính như giá, danh mục, đánh giá, v.v

3.2.3.4 Giỏ hàng và Thanh toán

o Thêm sản phẩm vào giỏ hàng và quản lý số lượng cần mua.o Cung cấp chức năng thanh toán an toàn và đáng tin cậy với các phương thức

thanh toán phổ biến

3.2.3.5 Quản lý Người dùng và Đăng nhập

o Cho phép người dùng đăng ký, đăng nhập và quản lý tài khoản của mình.o Bảo mật thông tin người dùng và quản lý quyền truy cập

3.2.3.6 Bảo mật và Quản lý Phiên

o Đảm bảo an toàn thông tin người dùng và các giao dịch.o Quản lý phiên đăng nhập để đảm bảo tính bảo mật

4 Kết quả đạt được 4.1 Quy trình cơ bản phải đạt được

Hình 1 Quy trình cơ bản đạt được

4.2 Giao diện

o Quy trình phải rõ ràng, cụ thể, dễ dùng hoạt động tốt, bắt mắt.o Tránh giao diện không thân thiện với người dùng phổ thông, trải nghiệm sử

dụng tệ.o Tránh đưa sản phẩm trên hệ thống chỉ mang tính chất trưng bày và quảng bá

4.3 Xử lý Back-end

o Đáp ứng đầy đủ CRUD cho các chức năng phần Front-end.o Tuy dùng NoSQL nhưng thiết kế cơ sở dữ liệu phải rõ ràng cụ thể, phải có ràng

buộc nhưng không qua cứng như thiết kế RDBMS.o Hỗ trợ đăng nhập bằng tài khoản Google, Facebook

Trang 19 Đồ án tốt nghiệp

PHẦN NỘI DUNG Chương I: Cơ sở lý thuyết 1.1 ReactJS

ReactJS là một thư viện mã nguồn mở viết bằng ngôn ngữ JavaScript và được tạo ra bởi Facebook để xây dựng các thành phần giao diện phía người dùng (User Interface) Các thành phần này được gọi là Component và chúng có thể thể được tái sử dụng

Một trong những điểm mạnh của ReactJS đó là việc render dữ liệu sẽ được kiểm tra rất kỹ xem đó là sự thay đổi dữ liệu của thành phần nào trong DOM nhằm mục đích hạn chế tối đa việc render lại tất cả dữ liệu trong DOM từ đó nâng cao hiệu suất và tối ưu hoá tốc độ tải trang Để làm được điều này thì ReactJS hỗ trợ chúng ta một DOM khác gọi là DOM ảo (virtual DOM)

DOM ảo có cấu trúc tương tự DOM chính, ReactJS sẽ dùng DOM ảo này để kiểm tra, so sánh và tìm đúng thành phần của DOM chính cần cập nhật lại khi có sự kiện làm thành phần đó bị thay đổi và chỉ cập nhật đúng phần có sự thay đổi đó chứ không cập nhật lại cả DOM

Thông thường, các trang web sẽ dùng trực tiếp HTML để render DOM cho chính nó, nếu các website thiên về hiển thị thông tin cho người dùng mà không có quá nhiều tương tác của người dùng hoặc có ít trang thì cách làm thông thường này không có vấn đề gì nhưng khi một website có nhiều tương tác của người dùng (client và server giao tiếp nhiều) thì website sẽ gặp vấn đề rất lớn về mặt hiệu năng vì DOM sẽ được render lại toàn bộ mỗi lần người dùng thực hiện chức năng có reload lại trang

Hình 2 Mô hình virtual DOM

ReactJS cho phép người lập trình viết HTML hoặc cũng có thể viết CSS trực tiếp trong JavaScript bằng cú pháp JSX, dễ dàng và thuận tiện hơn trong việc xem kết quả đầu ra ngay lập tức

ReactJS có cấu trúc tổ chức theo dạng thành phần (Component) cho phép các Component này lồng vào nhau và có mối quan hệ cha-con (parent-child), các Component cha-con này có thể liền kết truyền dữ liệu từ Component cha sang Component con thông qua các Properties của Component con, có nghĩa là một Component cha có thể có nhiều Component con và dữ liệu của các Component con có thể được sử dụng, biến đổi mà không ảnh hưởng đến Component cha

1.2 Redux

Redux là một thư viện Javascript giúp quản lý các trạng thái (State) của ứng dụng, giúp người lập trình xử lý luồng hoạt động một cách nhất quán và dễ dàng để kiểm tra Nếu một ứng dụng có ít component thì việc truyền dữ liệu giữa các component là tương đối dễ dàng và không có vấn đề gì nhưng khi ứng dụng có nhiều component thì câu chuyện trở nên phức tạp hơn rất nhiều Trong react, để chia sẻ dữ liệu giữa các component thì chúng phải có quan hệ cha con (parent-child) và truyền dưới dạng

Hình 3 Quản lý state React

Trang 21 Đồ án tốt nghiệp

Properties Vấn đề được đặt ra là khi giữa các component đó không có quan hệ cha con nhưng lại cần chia sẻ dữ liệu với nhau thì sẽ như thế nào

Để có thể truyền dữ liệu một cách tối ưu và đơn giản hơn chúng ta sẽ lưu dữ liệu vào một một nơi chứa chung, từ đó truyền dữ liệu cho các component cần dùng Lúc này, nơi chứa này sẽ đóng vai trò trung gian, nó có nhiệm vụ lưu trữ và phân phát dữ liệu

Redux sẽ hỗ trợ việc chia sẻ dữ liệu giữa các component Redux sẽ có 3 thành phần: Actions, Reducers và Store

- Actions: Là các events và chúng là cách thức cần thiết để gửi dữ liệu từ ứng dụng đến Store Data là dữ liệu tương tác bởi user hoặc lấy APIs

- Reducers: Là những function, các function này sử dụng state hiện tại của ứng dụng sau đó hiện một action rồi cập nhật lại một state mới Các states này sẽ được lưu trữ dưới dạng objects và quy định rõ các state của ứng dụng thay đổi khi phản hồi một action gửi đến store

- Store: Là nơi lưu trạng thái ứng dụng Store cho phép việc truy cập tới các state đã được lưu trong nó

- Redux hoạt động theo nguyên lý như sau: - Sau khi một action được thực thi, dispatcher (thành phần trong store) sẽ được gọi để kích hoạt và gửi đến reducer một action Lúc này reducer thực hiện hành động được định nghĩa dựa vào action tương ứng được gửi đến Sau đó sẽ đồng thời lưu lại giá trị của state mới vào trong store và trả về state mới đó

Hình 4 Mô hình Redux

1.3 Các thư viện hỗ trợ Front-End

- QueryRTK: là một thư viện thực hiện các yêu cầu HTTP được công bố vào quí 1 năm 2021, là một công cụ mạnh mẽ tích hợp cùng với bộ thư viện quản lý state Redux Tool kit đây được xem là một công nghệ đối đầu trực tiếp với axios cho các ứng dụng sử dụng Redux

- Material UI: là một thư viện có các React Component được tạo ra bởi Google, cung cấp cho lập trình viên các Component được xây dựng sẵn giúp cho các lập trình viên có thể sử dụng, tiết kiệm thời gian phải dựng HTML và viết style CSS

- GoogleAPI: là một thư viện cung cấp các hàm cần thiết để hỗ trợ lập trình viên sử dụng các dịch vụ của Google

- Và một số thư viện khác: SASS, React dropzone, React slick, bootstrap, …

1.4 Nodejs 1.4.1 Giới thiệu Nodejs

Node js là một nền tảng runtime cung cấp đầy đủ các công cụ giúp bạn xây dựng nên một server sử dụng JS

NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viết bằng c++ và Javascript Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009 Node.js ra đời khi các developer đời đầu của JavaScript mở rộng nó từ một thứ bạn chỉ chạy được trên trình duyệt thành một thứ bạn có thể chạy trên máy của mình dưới dạng ứng dụng độc lập Giờ đây bạn có thể làm được nhiều thứ với JavaScript hơn là chỉ tương tác với các website

Cả trình duyệt JavaScript và Node.js đều chạy trên JavaScript runtime V8 engine Công cụ này lấy code JavaScript của bạn và convert nó sang mã máy (bytecode) cho việc thực thi nhanh hơn Mã máy là loại code thấp cấp hơn để máy tính có thể chạy mà không cần biên dịch nó

Trang 23 Đồ án tốt nghiệp

1.4.2 Kiến trúc NodeJS

Hình 5 Kiến trúc NodeJS

o Người dùng gửi các yêu cầu (đồng bộ hoặc bất đồng bộ) đến máy chủ để thực hiện các hoạt động

o Các yêu cầu nhập vào Hàng đợi Sự kiện trước tại phía máy chủ o Hàng đợi Sự kiện chuyển các yêu cầu theo tuần tự đến Event loop Event loop

kiểm tra tính chất của yêu cầu (đồng bộ hoặc bất đồng bộ) o Vòng lặp Sự kiện xử lý các yêu cầu bất đồng bộ không yêu cầu tài nguyên bên

ngoài và trả lại phản hồi cho các khách hàng tương ứng o Đối với các yêu cầu đồng bộ, một luồng duy nhất được gán cho quá trình để

hoàn thành tác vụ bằng cách sử dụng tài nguyên bên ngoài o Sau khi hoàn thành hoạt động, yêu cầu được chuyển hướng đến Vòng lặp Sự

kiện, sau đó cung cấp phản hồi trở lại cho khách hàng

Hình 6 Môi trường chạy Javascript

1.4.3 Các thành phần của Kiến trúc Node.js

o Yêu cầu (Request): Tùy thuộc vào các hành động mà người dùng cần thực hiện, yêu cầu đến máy chủ có thể là đồng bộ (phức tạp) hoặc bất đồng bộ (đơn giản) o Máy chủ Node.js: Máy chủ Node.js chấp nhận yêu cầu từ người dùng, xử lý

chúng và trả kết quả về cho người dùng o Hàng đợi Sự kiện (Event Queue): Chức năng chính của hàng đợi sự kiện là lưu

trữ các yêu cầu đến từ khách hàng và chuyển chúng theo tuần tự đến Vòng lặp Sự kiện

o Nhóm Luồng (Thread Pool): Nhóm luồng trong máy chủ Node.js chứa các luồng có sẵn để thực hiện các hoạt động cần thiết để xử lý yêu cầu

o Vòng lặp Sự kiện (Event Loop): Vòng lặp sự kiện nhận yêu cầu từ hàng đợi sự kiện và gửi phản hồi đến khách hàng

o Nguồn tài nguyên Bên ngoài (External Resources): Để xử lý yêu cầu đồng bộ từ khách hàng, nguồn tài nguyên bên ngoài được sử dụng Chúng có thể là bất kỳ loại nào (tính toán, lưu trữ, v.v.)

Trang 25 Đồ án tốt nghiệp

1.4.1 NPM

NPM là viết tắt của Node package manager là một công cụ tạo và quản lý các thư viện lập trình Javascript cho Node.js Trong cộng đồng Javascript, các lập trình viên chia sẻ hàng trăm nghìn các thư viện với các đoạn code đã thực hiện sẵn một chức năng nào đó Nó giúp cho các dự án mới tránh phải viết lại các thành phần cơ bản, các thư viện lập trình hay thậm chí cả các framework

Hình 7 NPM

1.5 MongoDB 1.5.1 Khái niệm

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở được viết bằng C++ và thuộc dạng CSDL NoSQL (Not Only SQL) Nó có thể hỗ trợ trên nhiều nền tảng khác nhau và được thiết kế với mục đích hướng đến đối tượng MongoDB hoạt động dựa vào các khái niệm là Collection (tương ứng với table trong CSDL quan hệ) và Document (tương ứng với row trong CSDL quan hệ) Đồng thời, nó có hiệu suất cao cùng với tính khả dụng tốt và dễ dàng mở rộng

Các Collection trong MongoDB có cấu trúc cực kỳ linh hoạt Điều này cho phép dữ liệu không cần theo một cấu trúc nhất định Vì thế, MongoDB có thể lưu trữ những dữ liệu có cấu trúc đa dạng và phức tạp Dữ liệu trong MongoDB được lưu bằng định dạng kiểu JSON

1.5.2 Các tính năng

Đây được xem là tính năng tốt nhất của MongoDB Nó có tác dụng hỗ trợ truy vấn bằng các trường, phạm vi, kết hợp cùng việc tìm kiếm biểu thức nhằm trả về kết quả tài liệu cụ thể với kích thước nhất định

MongoDB cung cấp Replica Set cho phép nhân bản một hoặc nhiều bản sao của dữ liệu Đồng thời, mỗi bản sao lại đóng vai trò chính và phụ Việc này giúp cho các cơ sở dữ liệu có nhu cầu lưu trữ lớn, đòi hỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài ý muốn

Khi nhân bản, toàn bộ dữ liệu khi ghi và đọc được thực hiện trên bản sao chính Bản sao thứ cấp sẽ dùng bản sao tích hợp để có thể duy trì các bản sao dữ liệu Trong trường hợp có bất kỳ bản sao chính nào bị thất bại thì Replica set sẽ chọn một bản sao thứ cấp để thay thế làm bản sao chính tiếp theo Trong quá trình nhân rộng, Replica thứ cấp được tùy ý chọn các hoạt động nhưng dữ liệu cuối cùng vẫn phải tuân theo mặc định

- Tập hợp (Aggregation) Tính năng này chính là chương trình mang đến ba giải pháp để thực hiện tập hợp gồm Aggregation Pipeline, Mapreduce và Single-purpose Aggregation Trong đó, Aggregation Pipeline được đánh giá là có hiệu suất tốt nhất

Các phép toán tập hợp nhóm các giá trị từ nhiều document lại với nhau, và có thể thực hiện nhiều phép toán đa dạng trên dữ liệu đó để trả về kết quả

MongoDB cân bằng tải bằng cách dựa vào các Shard key để chia dữ liệu thành các phạm vi và phân phối đồng đều Chúng có thể chạy trên nhiều máy chủ khác nhau và thực hiện chức năng sao chép dữ liệu hay cân bằng tải nhằm giữ hệ thống hoạt động liên tục trong trường hợp phát sinh lỗi về phần cứng

- Giới hạn kích thước collection Các collection được MongoDB hỗ trợ thường có kích thước cố định hay còn gọi là các collection giới hạn Với kích cỡ cố định, kết hợp cùng việc theo sau thứ tự chèn giúp tăng hiệu suất của các hoạt động liên quan đến dữ liệu Nên khi dữ liệu vượt giới hạn thì những tài liệu cũ hơn sẽ tự động bị xóa mà không cần thực thi bất kỳ dòng lệnh nào

Trang 27 Đồ án tốt nghiệp

1.5.3 Ưu điểm

Các ưu điểm của MongoDB có thể kể đến như sau: - Có thể lưu trữ dữ liệu với nhiều kích cỡ khác nhau và thoải mái thêm bất cứ thông tin nào phù hợp với nhu cầu sử dụng

- Tiết kiệm thời gian khi thao tác xóa hoặc chỉnh sửa dữ liệu bởi vì MongoDB không có các ràng buộc phức tạp

- Dễ dàng mở rộng mà không phải lo về các vấn đề như các ràng buộc, khóa ngoại, khóa chính

- Tốc độ truy vấn dữ liệu nhanh vì dữ liệu được ghi đệm lên RAM nên các lần truy vấn sau sẽ diễn ra nhanh hơn

- Không lo sợ bị mất dữ liệu vì MongoDB là cơ sở dữ liệu mang tính lịch sử

1.6 Json Web Token

JWT (Json Web Token) là 1 tiêu chuẩn mở định nghĩa cách thức truyền tin an toàn giữa hai phía Client – Server, thông tin trong chuỗi JWT được định dạng bằng JSON Trong đó, chuỗi Token phải có 3 phần là header, payload và chữ ký được ngăn bằng dấu “.”

Hình 8 Mô hình Json web token

Các thông tin được gửi đi này được xác thực và đánh dấu tin cậy dựa vào phần “chữ ký” Phần “chữ ký” của JWT sẽ được mã hóa lại bằng HMAC hoặc RSA Dựa vào điều này, JWT được áp dụng trong việc xác thực và phân quyền người dùng Khi người dùng đăng nhập thì mỗi yêu cầu người dùng gửi về phía BE sẽ kèm them JWT ở Header, từ đó phía BE có thể dễ dàng xác định được quyền và các tài nguyên người dùng đó được phép truy cập

Chương II: Khảo sát hiện trạng và mô hình hoá yêu cầu 2.1 Khảo sát hiện trạng

- Tìm ra các điểm mạnh yếu khác nhau để cải thiện, duy trì ở hệ thống của nhóm

- Phát thảo sơ lược về hệ thống trên các biểu đồ UML - Tham khảo ý kiến của các thành viên trong nhóm về cái nhìn tổng quan về các trang web được khảo sát

2.1.1 Khảo sát các trang web cùng lĩnh vực

2.1.1.1 Khảo sát trang web Hoanghamobile.com

4.3.1 2.1.1.1.1 Bố cục trang chủ

1 Đánh giá phần bố cục

- Về phần bố cục trang web hoanghamobile.com chia các phần rõ ràng, chi tiết giúp người dùng dễ dàng phân biệt các phần nội dung giúp cải thiện trải nghiệm người dùng

Trang 29 Đồ án tốt nghiệp

Hình 9 Hoanghamobile.com

2 Đánh giá phần danh mục

- Đến phần product thì web chia thành các danh mục sản phẩm đa dạng khác nhau, đầy đủ các danh mục mà nhóm cần để thực hiện cho dự án này, một số danh mục tiêu biểu:

o Apple Authorised Reseller

Hình 10 Danh sách sản phẩm Hoangha

o Điện thoại nổi bật

Hình 11Danh sách sản phẩm Hoangha 2

o Máy tính bảng nổi bật

Trang 31 Đồ án tốt nghiệp

Hình 12 Danh sách sản phẩm Hoangha 3

- Phần chuyển hướng phụ kiện cũng rất được làm rất chi tiết và bắt mắt :

Hình 13 Danh mục sản phẩm Hoangha

3 Trải nghiệm mua hàng

1 Xem danh sách sản phẩm