Đồ án xây dựng website bán quần áo

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

XÂY DỰNG WEBSITE BÁN QUẦN ÁO

GV HƯỚNG DẪN:
THS. TRẦN THỊ HỒNG YẾN
SV THỰC HIỆN:
TRẦN ĐÌNH KHƠI - 20520224
BÙI MINH TUẤN - 20520342

TP. HỒ CHÍ MINH, 2023


LỜI CẢM ƠN
Đồ án “Xây dựng website bán quần áo online” là một sản phẩm mà nhóm đã
bỏ nhiều tâm huyết để hồn thiện. Bên cạnh đó, khơng thể khơng nhắc đến những sự
hỗ trợ, đóng góp từ quý thầy cơ.
Nhóm muốn gửi lời cảm ơn sâu sắc đến Ths.Trần Thị Hồng Yến đã tận tình
hướng dẫn, đưa ra những góp ý, định hướng để nhóm có thể hồn thành đồ án. Chúng
em sẽ luôn biết ơn và ghi nhớ những bài học đó.
Ngồi ra, nhóm cũng xin gửi lời cảm ơn đến quý thầy cô trường Đại học Công
nghệ Thông tin - những người đã mang đến cho chúng em những kỹ năng, kiến thức
cần thiết góp phần khơng nhỏ vào quá trình thực hiện đồ án.
Trong quá trình thực hiện đồ án, nhóm có thể gặp những sai sót, vì thế chúng
em rất mong nhận được những góp ý, hỗ trợ từ cơ để có thể hồn thiện đồ án 1 hơn
nữa và có thể là đồ án 2 trong tương lai.

TP.HCM, ngày 29 tháng 06 năm 2023
Nhóm sinh viên thực hiện
Trần Đình Khơi - Bùi Minh Tuấn


MỤC LỤC
TÓM TẮT ĐỒ ÁN .......................................................................................... 1
Chương 1. GIỚI THIỆU CHUNG................................................................. 2
1.1. Lý do chọn đề tài: .............................................................................................2
1.2. Mục đích: .........................................................................................................3
1.3. Đối tượng: ........................................................................................................3
1.4. Phạm vi nghiên cứu:.........................................................................................3
1.5. Hiện trạng: ........................................................................................................4
1.6. Giải quyết vấn đề: ............................................................................................5

Chương 2. CƠ SỞ LÝ THUYẾT ................................................................... 6
2.1. NextJS: .............................................................................................................6
2.1.1. Giới thiệu: .................................................................................................6
2.1.2. Lý do sử dụng: ..........................................................................................8
2.2. ReactJS: ............................................................................................................9
2.2.1. Giới thiệu: .................................................................................................9
2.2.2. Lý do sử dụng: ........................................................................................10
2.3. NodeJS: ..........................................................................................................11
2.3.1. Giới thiệu: ...............................................................................................11
2.3.2. Lý do sử dụng: ........................................................................................12
2.4. ExpressJS: ......................................................................................................13
2.4.1. Giới thiệu: ...............................................................................................13
2.4.2. Lý do sử dụng: ........................................................................................14
2.5. MongoDB: ......................................................................................................15

2.5.1. Giới thiệu: ...............................................................................................15
2.5.2. Lý do sử dụng: ........................................................................................16
2.6. Socket.io: ........................................................................................................17
2.6.1. Giới thiệu: ...............................................................................................17
2.6.2. Lý do sử dụng: ........................................................................................18
2.7. Redux: ............................................................................................................19
2.7.1. Giới thiệu: ...............................................................................................19
2.7.2. Lý do sử dụng: ........................................................................................21

Chương 3. THIẾT KẾ HỆ THỐNG: .......................................................... 22
3.1. Kiến trúc hệ thống: .........................................................................................22
3.1.1. Sơ đồ kiến trúc: .......................................................................................22
3.1.2. Mô tả hệ thống: .......................................................................................23
3.2. Phân tích yêu cầu: ..........................................................................................24
3.3. Thiết kế hệ thống:...........................................................................................30
3.3.1. Sơ đồ use case: ........................................................................................30
3.3.2. Danh sách actor: ......................................................................................31
3.3.3. Danh sách use case: .................................................................................32
3.3.4. Đặc tả Use Case: .....................................................................................35
3.4. Thiết kế dữ liệu: .............................................................................................70
3.4.1. Sơ đồ logic: .............................................................................................70
3.4.2. Mô tả các bảng dữ liệu: ...........................................................................71
3.4.2.1. Bảng Account: ..................................................................................71
3.4.2.2. Bảng Customer:................................................................................71
3.4.2.3. Bảng Cart: ........................................................................................72


3.4.2.4. Bảng Address: ..................................................................................72
3.4.2.5. Bảng Category:.................................................................................73

3.4.2.6. Bảng Type: .......................................................................................73
3.4.2.7. Bảng Order: ......................................................................................74
3.4.2.8. Bảng Product: ...................................................................................75
3.4.2.9. Bảng Promotion: ..............................................................................76
3.4.2.10. Bảng Receipt: .................................................................................76
3.4.2.11. Bảng Role: ......................................................................................77
3.4.2.12. Bảng Staff: .....................................................................................77
3.4.2.13. Bảng ProductImage: .......................................................................78
3.4.2.14. Bảng ProductSize: ..........................................................................78
3.4.2.15. Bảng ProductReceipt: ....................................................................78

Chương 4. TRIỂN KHAI ỨNG DỤNG ...................................................... 79
4.1. Danh sách màn hình: ......................................................................................79
4.2. Thiết kế màn hình: .........................................................................................82
4.2.1. Màn hình Đăng nhập: ..............................................................................82
4.2.2. Màn hình Qn mật khẩu: .......................................................................83
4.2.3. Màn hình Khơi phục mật khẩu:...............................................................83
4.2.4. Màn hình Dashboard: ..............................................................................84
4.2.5. Màn hình Quản lý nhân viên: ..................................................................85
4.2.6. Màn hình Quản lý khách hàng: ...............................................................86
4.2.7. Màn hình Quản lý sản phẩm: ..................................................................87
4.2.8. Màn hình Quản lý danh mục sản phẩm: .................................................89
4.2.9. Màn hình Quản lý phiếu nhập kho: .........................................................90


4.2.10. Màn hình Quản lý đơn hàng: ................................................................92
4.2.11. Màn hình Quản lý mã khuyến mãi: .......................................................94
4.2.12. Màn hình Quản lý thơng tin cá nhân: ....................................................95
4.2.13. Màn hình Trang chủ: .............................................................................96
4.2.14. Màn hình Đăng nhập: ............................................................................97

4.2.15. Màn hình Đăng ký: ...............................................................................98
4.2.16. Màn hình Khơi phục mật khẩu:.............................................................99
4.2.17. Màn hình Cập nhật mật khẩu mới: ........................................................99
4.2.18. Màn hình Giỏ hàng: ............................................................................100
4.2.19. Màn hình Danh sách u thích:...........................................................101
4.2.20. Màn hình Thanh tốn: .........................................................................102
4.2.21. Màn hình Tìm kiếm sản phẩm: ...........................................................106
4.2.22. Màn hình Chi tiết sản phẩm: ...............................................................107
4.2.23. Màn hình Gửi yêu cầu tư vấn:.............................................................108
4.2.24. Màn hình Quản lý thơng tin cá nhân: ..................................................109
4.2.25. Màn hình Bộ lọc sản phẩm: ................................................................112
4.2.26. Màn hình Danh sách sản phẩm theo loại: ...........................................113
4.2.27. Màn hình Chương trình khuyến mãi: ..................................................114

Chương 5. TỔNG KẾT............................................................................... 115
5.1. Kết luận: .......................................................................................................115
5.1.1. Kết quả đạt được: ..................................................................................115
5.1.2. Ưu điểm:................................................................................................116
5.1.3. Nhược điểm: ..........................................................................................117
5.2. Hướng phát triển: .........................................................................................117


TÀI LIỆU THAM KHẢO .......................................................................... 118


PHỤ LỤC HÌNH
Hình 2.1 Logo Next.js .................................................................................................6
Hình 2.2 Logo ReactJS ...............................................................................................9
Hình 2.3 Logo NodeJS ..............................................................................................11
Hình 2.4 Logo ExpressJS ..........................................................................................13

Hình 2.5 Logo MongoDB .........................................................................................15
Hình 2.6 Logo Socket.io ...........................................................................................17
Hình 2.7 Logo Redux ................................................................................................19
Hình 2.8 Kiến trúc của Redux ...................................................................................20
Hình 3.1 Kiến trúc hệ thống ......................................................................................22
Hình 3.2 Sơ đồ UseCase phía Admin .......................................................................30
Hình 3.3 Sơ đồ UseCase phía Client .........................................................................31
Hình 3.4 Sơ đồ logic .................................................................................................70
Hình 4.1 Màn hình Đăng nhập ..................................................................................82
Hình 4.2 Màn hình Qn mật khẩu ...........................................................................83
Hình 4.3 Màn hình Khơi phục mật khẩu ...................................................................83
Hình 4.4 Màn hình Dashboard ..................................................................................84
Hình 4.5 Màn hình Danh sách nhân viên ..................................................................85
Hình 4.6 Màn hình Thêm nhân viên .........................................................................85
Hình 4.7 Màn hình Chỉnh sửa thơng tin nhân viên ...................................................86
Hình 4.8 Màn hình Danh sách khách hàng ...............................................................86
Hình 4.9 Màn hình Thơng tin chi tiết khách hàng ....................................................87
Hình 4.10 Màn hình Quản lý sản phẩm ....................................................................87
Hình 4.11 Màn hình thêm sản phẩm .........................................................................88
Hình 4.12 Màn hình Chỉnh sửa thơng tin sản phẩm .................................................89
Hình 4.13 Màn hình Danh sách danh mục sản phẩm................................................89
Hình 4.14 Màn hình Thêm Danh mục sản phẩm ......................................................89
Hình 4.15 Màn hình Chỉnh sửa danh mục sản phẩm ................................................90
Hình 4.16 Màn hình Danh sách phiếu nhập kho .......................................................90


Hình 4.17 Màn hình Thêm phiếu nhập kho ..............................................................91
Hình 4.18 Màn hình Chỉnh sửa phiếu nhập kho .......................................................91
Hình 4.19 Màn hình Danh sách đơn hàng.................................................................92
Hình 4.20 Màn hình Cập nhật trạng thái đơn hàng ...................................................93

Hình 4.21 Màn hình Danh sách mã khuyến mãi .......................................................94
Hình 4.22 Màn hình Thêm mã khuyến mãi ..............................................................94
Hình 4.23 Màn hình Chỉnh sửa mã khuyến mãi .......................................................95
Hình 4.24 Màn hình quản lý thơng tin cá nhân .........................................................95
Hình 4.25 Màn hình Trang chủ .................................................................................96
Hình 4.26 Màn hình Đăng nhập ................................................................................97
Hình 4.27 Màn hình đăng ký.....................................................................................98
Hình 4.28 Màn hình Khơi phục mật khẩu .................................................................99
Hình 4.29 Màn hình Cập nhật mật khẩu mới ............................................................99
Hình 4.30 Màn hình Giỏ hàng.................................................................................100
Hình 4.31 Màn hình Danh sách u thích ...............................................................101
Hình 4.32 Màn hình Đăng nhập khi thanh tốn ......................................................102
Hình 4.33 Màn hình Cung cấp thơng tin đặt hàng ..................................................103
Hình 4.34 Màn hình Lựa chọn phương thức thanh tốn và ưu đãi .........................104
Hình 4.35 Màn hình Thanh tốn thành cơng ..........................................................105
Hình 4.36 Màn hình Tìm kiếm sản phẩm ...............................................................106
Hình 4.37 Màn hình Chi tiết sản phẩm ...................................................................107
Hình 4.38 Màn hình Gửi yêu cầu tư vấn .................................................................108
Hình 4.39 Màn hình Quản lý thơng tin cá nhân ......................................................109
Hình 4.40 Màn hình Lịch sử mua hàng...................................................................110
Hình 4.41 Màn hình Địa chỉ mua hàng ...................................................................110
Hình 4.42 Màn hình Ưu đãi của bạn .......................................................................111
Hình 4.43 Màn hình Bộ lọc sản phẩm ....................................................................112
Hình 4.44 Màn hình Danh sách sản phẩm theo loại ...............................................113
Hình 4.45 Màn hình Chương trình khuyến mãi ......................................................114


PHỤ LỤC BẢNG
Bảng 3.1 Danh sách actor..........................................................................................31
Bảng 3.2 Danh sách Use Case...................................................................................32

Bảng 3.3 Use Case Đăng nhập. .................................................................................35
Bảng 3.4 Use Case Quên mật khẩu ...........................................................................36
Bảng 3.5 Use Case Quản lý nhân viên ......................................................................37
Bảng 3.6 Use Case Quản lý khách hàng ...................................................................39
Bảng 3.7 Use Case Quản lý sản phẩm ......................................................................40
Bảng 3.8 UseCase Quản lý danh mục sản phẩm.......................................................42
Bảng 3.9 Use Case Quản lý khuyến mãi ...................................................................44
Bảng 3.10 Use Case Quản lý đơn hàng.....................................................................46
Bảng 3.11 Use Case Quản lý doanh thu....................................................................47
Bảng 3.12 Use Case Quản lý thông tin cá nhân ........................................................48
Bảng 3.13 Use Case Thay đổi mật khẩu ...................................................................49
Bảng 3.14 Use Case Đăng nhập ................................................................................50
Bảng 3.15 Use Case Đăng ký ....................................................................................51
Bảng 3.16 UseCase Quên mật khẩu ..........................................................................52
Bảng 3.17 Use Case Thêm sản phẩm vào giỏ hàng ..................................................54
Bảng 3.18 Use Case Thêm sản phẩm vào Danh sách yêu thích ...............................55
Bảng 3.19 Use Case Xóa sản phẩm khỏi giỏ hàng ...................................................56
Bảng 3.20 Use Case Xóa sản phẩm khỏi Danh sách u thích .................................57
Bảng 3.21 Use Case Thanh toán ...............................................................................58
Bảng 3.22 Use Case Quản lý mã khuyến mãi ...........................................................60
Bảng 3.23 Use Case Tìm kiếm sản phẩm .................................................................61
Bảng 3.24 Use Case Xem danh sách sản phẩm ........................................................62
Bảng 3.25 Use Case Xem chi tiết sản phẩm .............................................................63
Bảng 3.26 Use Case Gửi yêu cầu tư vấn ...................................................................64
Bảng 3.27 Use Case Quản lý thông tin cá nhân ........................................................65
Bảng 3.28 Use Case Quản lý địa chỉ giao hàng ........................................................66


Bảng 3.29 Use Case Xem lịch sử mua hàng .............................................................67
Bảng 3.30 Use Case Lưu mã khuyến mãi .................................................................68

Bảng 3.31 Mô tả chi tiết bảng Account ....................................................................71
Bảng 3.32 Mô tả chi tiết bảng Customer ..................................................................71
Bảng 3.33 Mô tả chi tiết bảng Cart ...........................................................................72
Bảng 3.34 Mô tả chi tiết bảng Address .....................................................................72
Bảng 3.35 Mô tả chi tiết bảng Category ...................................................................73
Bảng 3.36 Mô tả chi tiết bảng Type ..........................................................................73
Bảng 3.37 Mô tả chi tiết bảng Order .........................................................................74
Bảng 3.38 Mô tả chi tiết bảng Product......................................................................75
Bảng 3.39 Mô tả chi tiết bảng Promotion .................................................................76
Bảng 3.40 Mô tả chi tiết bảng Receipt ......................................................................76
Bảng 3.41 Mô tả chi tiết bảng Role...........................................................................77
Bảng 3.42 Mô tả chi tiết bảng Staff ..........................................................................77
Bảng 3.43 Mô tả chi tiết bảng ProductImage............................................................78
Bảng 3.44 Mô tả chi tiết bảng ProductSize ...............................................................78
Bảng 3.45 Mô tả chi tiết bảng ProductReceipt .........................................................78
Bảng 4.1 Danh sách màn hình...................................................................................79


TÓM TẮT ĐỒ ÁN
Đồ án “Xây dựng website bán quần áo” tập trung xây dựng một nền tảng mua
hàng trực tuyến cho cửa hàng thời trang và admin dashboard hỗ trợ công tác quản lý.
Lĩnh vực chủ yếu mà đề tài hướng đến là mua sắm thời trang, cụ thể là các mặt hàng
quần áo cho nam và nữ. Đề tài với mục đích giúp nâng cao trải nghiệm mua sắm của
người dùng, thu hút nhiều khách hàng tiềm năng đến với cửa hàng. Hơn nữa, cửa
hàng cịn có thể tối ưu hóa khâu quản lý bằng một trang admin dashboard.
Để hiện thực đề tài, nhóm đã khảo sát hiện trạng các trang web đang có trên
thị trường, xác định các vấn đề và những hạn chế cần được khắc phục. Dựa trên kết
quả khảo sát, nhóm đề ra các chức năng cần có cũng như những cơng nghệ phù hợp
cho trang web.
Dưới đây nhóm xin trình bày về q trình mà nhóm đã thực hiện thơng qua

báo cáo gồm có 5 chương, cụ thể:
• Chương 1: Trình bày sơ lược về đề tài, lý do chọn phát triển đề tài, mục đích
hướng đến, đối tượng mà đề tài tiếp cận và phạm vi nghiên cứu. Bên cạnh đó
cũng nêu lên hiện trạng của những trang web hiện nay và đề xuất giải pháp để
giải quyết vấn đề.
• Chương 2: Giới thiệu các công nghệ được áp dụng trong đề tài và lý do lựa
chọn.
• Chương 3: Mơ tả kiến trúc hệ thống, phân tích các yêu cầu của ứng dụng, thiết
kế hệ thống và dữ liệu.
• Chương 4: Mơ tả cách mà nhóm triển khai ứng dụng bao gồm danh sách các
màn hình, giải thích ý nghĩa chi tiết và luồng tương tác trên màn hình.
• Chương 5: Trình bày kết quả mà nhóm đã đạt được trong quá trình phát triển
đề tài, nhìn ra những ưu điểm, những mặt còn hạn chế của đồ án và đề ra hướng
phát triển trong tương lai.

1


Chương 1. GIỚI THIỆU CHUNG
1.1. Lý do chọn đề tài:
Xu hướng mua sắm quần áo trực tuyến đang ngày càng phát triển mạnh mẽ và trở
thành một phần không thể thiếu trong cuộc sống hiện đại, đi kèm với sự tăng trưởng
không ngừng của ngành công nghệ thông tin và ứng dụng của nó đã thay đổi cách
thức mua sắm trực tuyến. Có nhiều lý do dẫn đến sự tăng trưởng của xu hướng này.
Đầu tiên, sự tiện lợi là một yếu tố quan trọng. Mua sắm quần áo trực tuyến cho
phép khách hàng lựa chọn và mua hàng từ bất kỳ đâu và bất kỳ khi nào mà không cần
phải di chuyển đến cửa hàng truyền thống. Người mua có thể duyệt qua các sản phẩm
trên mạng, so sánh giá cả và đặt mua chỉ trong vài cú nhấp chuột. Điều này tiết kiệm
thời gian và công sức cho người tiêu dùng.
Bên cạnh đó, sự đa dạng và phong phú của sản phẩm. Trên các trang web mua

sắm quần áo, khách hàng có thể tìm thấy một loạt các thương hiệu, kiểu dáng, màu
sắc và kích thước khác nhau. Các trang web này thường cập nhật thường xuyên các
xu hướng thời trang mới nhất và luôn cung cấp sự đa dạng để khách hàng có thể lựa
chọn theo ý thích của mình.
Hơn nữa, các chính sách bán hàng linh hoạt và dịch vụ khách hàng tốt. Các trang
web bán quần áo trực tuyến thường cung cấp chính sách đổi trả hàng linh hoạt và dễ
dàng. Điều này giúp người mua tự tin hơn khi mua hàng mà không phải lo lắng về
việc khơng phù hợp về kích cỡ hoặc màu sắc. Ngoài ra, các trang web cũng thường
xuyên cập nhật thông tin về đơn hàng và hỗ trợ khách hàng thơng qua dịch vụ chăm
sóc khách hàng trực tuyến.
Ngồi ra, xu hướng mua sắm quần áo trực tuyến cũng được thúc đẩy bởi sự phổ
biến của mạng xã hội. Người dùng có thể tham khảo ý kiến và gợi ý từ các blogger
thời trang, influencers và cộng đồng trực tuyến. Việc chia sẻ trực tiếp về trải nghiệm
mua sắm và nhận xét về sản phẩm giúp người mua có cái nhìn tồn diện hơn về sản
phẩm và thương hiệu.

2


Từ những lợi ích to lớn, sự hiệu quả và sức ảnh hưởng kể trên mà một trang web
mua sắm mang lại, nhóm đã quyết định chọn đề tài “Xây dựng website bán quần áo”
để tạo nên một nền tảng giúp cải thiện trải nghiệm mua sắm của người dùng.
1.2. Mục đích:
-

Hiểu về NextJS, ReactJS, NodeJS cũng như có thể áp dụng những công nghệ
này vào đồ án.

-

Tạo nên một ứng dụng có giao diện trực quan, dễ sử dụng, dễ tiếp cận người
dùng, có khả năng mở rộng cao.

-

Xây dựng được phần mềm đáp ứng các nhu cầu cơ bản cho người dùng mang
đến sự thuận lợi và tiết kiệm thời gian trong việc mua sắm.

-

Sản phẩm tạo ra có tính ứng dụng cao, có khả năng đưa vào sử dụng thực tế.

1.3. Đối tượng:
• Client: Khách hàng có nhu cầu mua sắm quần áo trực tuyến.
• Admin: Chủ cửa hàng có nhu cầu tối ưu hóa, tự động hóa nghiệp vụ quản lý.
1.4. Phạm vi nghiên cứu:
• Phạm vi mơi trường:
• Ứng dụng có thể hoạt động trên nền tảng Web.
• Phạm vi chức năng:
-

Client:
+ Đăng nhập, đăng ký, đặt lại mật khẩu
+ Tìm kiếm sản phẩm
+ Xem danh sách sản phẩm theo danh mục
+ Thêm sản phẩm vào giỏ hàng
+ Thêm sản phẩm vào danh mục yêu thích
+ Xem thơng tin chi tiết sản phẩm
+ Thanh tốn đơn hàng
+ Quản lý thông tin cá nhân

3


+ Gợi ý, khuyến nghị sản phẩm
+ Chatbot tư vấn
-

Admin:
+ Đăng nhập, đăng ký, đặt lại mật khẩu
+ Quản lý nhân viên
+ Quản lý thông tin khách hàng
+ Quản lý doanh thu
+ Quản lý danh sách đơn đặt hàng
+ Quản lý danh sách sản phẩm
+ Quản lý phiếu nhập kho
+ Quản lý khuyến mãi

1.5. Hiện trạng:
Trong lĩnh vực xây dựng website bán quần áo hiện nay đã có khơng ít các hướng
nghiên cứu phong phú, đa dạng, một trong số đó có thể kể đến như:
• Giao diện người dùng và trải nghiệm người dùng:
-

Nhiều nghiên cứu đã tập trung vào việc thiết kế giao diện người dùng hấp
dẫn và thân thiện, tạo ra trải nghiệm mua sắm thuận tiện và dễ dàng cho
người dùng.

-

Các phương pháp như thiết kế tương tác, tìm hiểu hành vi người dùng,
phân tích ngữ cảnh và tối ưu hóa trải nghiệm người dùng đã được nghiên
cứu và áp dụng để cải thiện hiệu quả bán hàng trên các website bán quần
áo.

• Tìm kiếm và lọc sản phẩm:
-

Một vấn đề quan trọng trong việc xây dựng website bán quần áo là tạo ra
một hệ thống tìm kiếm và lọc sản phẩm hiệu quả.

-

Nghiên cứu đã tìm cách phát triển thuật tốn tìm kiếm thơng minh, phân
loại sản phẩm và gợi ý sản phẩm phù hợp với người dùng dựa trên các yêu
cầu và sở thích của họ.

4


• Quản lý hàng hóa và quản lý đơn hàng:
-

Các hướng nghiên cứu đã tập trung vào việc phát triển hệ thống quản lý
hàng hóa và quản lý đơn hàng tự động, giúp tăng tính chính xác và hiệu
quả trong việc xử lý các đơn hàng và quản lý hàng tồn kho.

• Tích hợp thanh tốn và bảo mật:
-

Tích hợp các phương thức thanh tốn an tồn và đảm bảo bảo mật thông
tin khách hàng là một yếu tố quan trọng trong việc xây dựng website bán
quần áo.

-

Các nghiên cứu đã tìm hiểu về tích hợp các cổng thanh tốn, mã hóa dữ
liệu và các biện pháp bảo mật khác để đảm bảo an tồn cho khách hàng
trong q trình mua sắm trực tuyến.

1.6. Giải quyết vấn đề:
Đi kèm với đó vẫn cịn một số vấn đề cịn tồn tại và cần tập trung nghiên cứu giải
quyết như:
• Độ tin cậy và an toàn: một trong những vấn đề quan trọng trong mua sắm trực
tuyến là đảm bảo tính tin cậy và an toàn cho khách hàng. Nghiên cứu cần tập
trung vào việc phát triển các biện pháp bảo mật, xác thực người dùng và đảm
bảo tính tồn vẹn dữ liệu.
• Tương tác dữ liệu thời gian thực: q trình mua hàng của khách hàng sẽ được
tối ưu hơn nếu dữ liệu trên trang web được cập nhật với thời gian thực, đảm
bảo dữ liệu ln là mới nhất

• Nền tảng tư vấn trực tuyến: khi khách hàng đến với trang web, họ có thể sẽ có
những thắc mắc, vấn đề cần được giải đáp. Thị trường ngày nay thường sẽ có
người trực page để trả lời những câu hỏi của khách hàng. Nhưng liệu đây có
phải là cách tiếp cận tốt nhất chưa? Xu hướng của công nghệ gần đây đang đổ
về AI, tận dụng chúng để thay thế cho sức người. Chúng ta có thể sử dụng AI
để giải quyết vấn đề nêu trên, hơn nữa nó cịn có thể trả lời khách hàng bất kỳ
lúc nào họ truy cập trang web.

5

Chương 2. CƠ SỞ LÝ THUYẾT
2.1. NextJS:

Hình 2.1 Logo Next.js
2.1.1. Giới thiệu:
Theo như chính trang chủ NextJS, nó được gọi là “The React Framework for
Production”, để hiểu rõ hơn chúng ta có thể bóc tách từng thành phần trong định nghĩa
này:
-

React: chúng ta vẫn sẽ viết React code, xây dựng React components và sử
dụng những tính năng của React như props, state, context, …

-

Framework: lớn hơn thư viện, cung cấp nhiều tiện ích hơn, bao gồm nhiều
tính năng được tích hợp sẵn giúp giải quyết những vấn đề thường gặp và
có những hướng dẫn rõ ràng về cách sử dụng những tính năng đó.

-

Production: NextJS là 1 framework dành cho production vì nó cung cấp
những tính năng cịn thiếu, những cái mà chúng ta thường cần để thêm vào
React, là những cái chúng ta chuẩn bị cho React ở môi trường production.

Những điểm nổi bật của NextJS:
• Server-side Page (Pre-)Rendering:
-

Server-side rendering là việc chuẩn bị dữ liệu cho một trang ở phía
server thay vì client. Trước đây khi chúng ta xây dựng React apps, trang
mà chúng ta có thực sự là một trang rỗng khơng có dữ liệu.

6


-

Chúng chỉ đơn giản là chứa HTML skeleton mà thôi chứ thật sự khơng
có dữ liệu hay các thẻ HTML nào cả, chỉ có duy nhất một thẻ div với
id là root để React app được tải và render ra. Tất cả việc rendering đều
được thực hiện bởi React và nó xảy ra ở phía client, vì React bản thân
nó là thư viện client-side Javascript. Thế cho nên HTML code được trả
về từ server cho client hoàn toàn là một trang rỗng.

-

Nhưng thật sự nó cũng khơng phải là một vấn đề lớn mà còn phải dựa
vào nhu cầu của nhà phát triển. Ví dụ trang cần lấy danh sách sản phẩm
từ database để hiển thị ra, thì ban đầu khi người dùng truy cập vào trang
của chúng ta sẽ gặp một trạng thái loading. Họ sẽ phải chờ cho đến khi
dữ liệu được trả về và render ra. Bởi vì việc tải dữ liệu chỉ được bắt đầu
một khi Javascript code được thực thi ở client. Điều này làm ảnh hưởng
đến trải nghiệm người dùng. Bên cạnh đó, nếu tối ưu SEO quan trọng
đối với trang web thì việc render ra một trang rỗng là một vấn đề lớn.
Bởi vì người dùng thì vẫn thấy được những gì được render ra, nhưng
search engine crawlers sẽ không thấy bất kỳ cái gì ngồi một trang rỗng,
mà trang rỗng thì khơng hề tốt về mặt SEO. Chính vì thế, Server-side

Rendering sẽ giải quyết vấn đề này.

-

NextJS sẽ pre-render trang, chuẩn bị toàn bộ dữ liệu cần thiết cho một
trang. Khi một request được gửi đến server, một trang hoàn chỉnh sẽ
được cấp phát tới user và search engine crawlers, user sẽ khơng phải
chờ đến khi việc lấy dữ liệu hồn thành và search engine crawlers cũng
có thể thấy được nội dung bên trong trang.

• File-based routing:
-

Đối với các React app thơng thường chúng ta cần phải dùng đến React
Router và config từng route tương ứng với từng trang. Nhưng đối với
NextJS nó định nghĩa các trang dựa vào các files được đặt trong 1 thư mục
đặc biệt là pages. Có nghĩa là trong NextJS, một trang là một React
Component được export từ file .js, .jsx, .ts, hoặc.tsx trong thư mục pages.

7


• Fullstack React Apps:
-

NextJS được xem là một fullstack framework, bởi vì chúng ta có thể dễ
dàng thêm backend code vào project. Trước đây nếu chúng ta muốn lấy dữ
liệu từ database, thì cần phải có API và xây dựng một REST API project
độc lập. Nhưng với NextJS, tất cả chỉ xảy ra trong một project duy nhất,
chúng ta vừa có client code, vừa có backend code được gói gọn vào một

project.

2.1.2. Lý do sử dụng:
• Server-Side Rendering (SSR): Next.js hỗ trợ SSR một cách nhanh chóng
và dễ dàng. Điều này cho phép trang web được tạo ra trên server và gửi
đến trình duyệt với dữ liệu được điền đầy đủ. SSR giúp cải thiện trải
nghiệm người dùng và tối ưu hóa hiệu suất của ứng dụng.
• Static Site Generation (SSG): Next.js hỗ trợ SSG, cho phép tạo ra các trang
tĩnh trong quá trình xây dựng. Điều này giúp giảm tải cho máy chủ và cải
thiện hiệu suất của ứng dụng. Nhà phát triển có thể tận dụng các ưu điểm
của SSG để tạo ra các trang nhanh chóng, dễ cache và dễ triển khai.
• Routing tự động: Next.js cung cấp hệ thống routing tự động dựa trên cấu
trúc thư mục. Chúng ta khơng cần phải cấu hình routing một cách rườm rà,
mà thay vào đó, các tệp tin và thư mục được tổ chức theo quy tắc routing
tự động. Điều này giúp chúng ta tập trung vào việc phát triển nội dung thay
vì quản lý rout
• Tích hợp tốt với React và các thư viện khác: Next.js được xây dựng trên
nền tảng React và tích hợp tốt với các thư viện React phổ biến. Chúng ta
có thể sử dụng các tính năng mạnh mẽ của React cùng với Next.js để xây
dựng các ứng dụng phong phú và có tính tương tác cao.

8


2.2. ReactJS:

Hình 2.2 Logo ReactJS
2.2.1. Giới thiệu:
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook
để xây dựng User Interface (UI) cho các ứng dụng web. Nó được ra mắt lần đầu vào

năm 2013 và đã nhận được sự yêu thích và sự lan rộng rãi từ đó. React cho phép nhà
phát triển tạo ra các UI component có thể tái sử dụng, cập nhật và hiển thị chúng một
cách hiệu quả khi state của ứng dụng thay đổi.
Một số điểm nổi bật của ReactJS:
• Component-Based Architecture: React tuân theo một kiến trúc dựa trên
component, trong đó giao diện người dùng được chia thành các component
nhỏ, có thể tái sử dụng. Mỗi component đóng gói logic và giao diện của riêng
nó, và chúng có thể được kết hợp và lồng nhau để xây dựng giao diện phức
tạp.
• DOM ảo (Virtual DOM): React sử dụng một DOM ảo (Virtual DOM) để tối
ưu hóa hiệu suất hiển thị. DOM ảo là một phiên bản nhẹ của DOM thực tế, và
React sử dụng nó để theo dõi các thay đổi và cập nhật chỉ các phần cần thiết
của UI.
• JSX: JSX (JavaScript XML) là một cú pháp mở rộng được sử dụng trong React
để viết mã tương tự HTML trực tiếp trong JavaScript. JSX cho phép kết hợp
HTML và JavaScript một cách khai báo và trực quan hơn.

9


• Luồng dữ liệu một chiều (Uni-directional Data Flow): React tuân theo một
luồng dữ liệu một chiều, còn được gọi là one-way data binding. Điều này có
nghĩa là dữ liệu chảy từ các component cha tới các component con thông qua
các thuộc tính (props), và bất kỳ thay đổi trong các thành phần con không ảnh
hưởng trực tiếp đến các thành phần cha. Phương pháp này giúp quản lý trạng
thái ứng dụng một cách dễ dàng và giúp việc gỡ lỗi và hiểu mã nguồn dễ dàng
hơn.
• React Hooks: Được giới thiệu từ phiên bản React 16.8, React Hooks là các
hàm cho phép sử dụng trạng thái và các tính năng React khác trong các
functional component. Hooks cho phép các functional component có trạng thái

cục bộ, quản lý các hiệu ứng phụ (side effects) và tận dụng các lifecycle
method của React mà khơng cần sử dụng các class component.
• React Router: React Router là một thư viện phổ biến cung cấp tính năng định
tuyến (routing) khai báo cho các ứng dụng React. Nó cho phép định nghĩa các
đường dẫn khác nhau và các thành phần tương ứng của chúng, giúp điều hướng
giữa các giao diện khác nhau trong một ứng dụng đơn trang (single-page
application).
2.2.2. Lý do sử dụng:
-

Hiệu suất cao: ReactJS sử dụng cơ chế gọi là Virtual DOM (DOM ảo) để
quản lý các thay đổi trong giao diện người dùng. Thay vì cập nhật tồn bộ
DOM, ReactJS chỉ cập nhật những phần cần thiết, giúp tăng hiệu suất và
tăng tốc độ tải trang.

-

Tính tái sử dụng cao: ReactJS khuyến khích việc xây dựng các thành phần
UI để có thể tái sử dụng. Bằng cách sử dụng các component độc lập và có
khả năng tái sử dụng, chúng ta có thể xây dựng giao diện người dùng linh
hoạt và dễ bảo trì.

-

Quản lý trạng thái dễ dàng: ReactJS sử dụng khái niệm "one-way data
flow" (luồng dữ liệu một chiều), điều này giúp dễ dàng quản lý trạng thái
của ứng dụng. Dữ liệu trong ReactJS được truyền xuống các component

10

con thông qua props, và bất kỳ thay đổi nào đều được xử lý thông qua hàm
gọi "setState", giúp duy trì tính nhất qn và dễ dàng kiểm sốt trạng thái
của ứng dụng.
-

Cộng đồng lớn: ReactJS có một cộng đồng rộng lớn và năng động. Hiện
nay có rất nhiều tài liệu, ví dụ và thư viện hữu ích trong quá trình phát triển.
Ngồi ra, ReactJS cũng cung cấp một bộ công cụ phong phú như React
DevTools, Create React App, Next.js và nhiều công cụ hỗ trợ khác giúp
tăng năng suất và tiện ích cho việc phát triển.

2.3. NodeJS:

Hình 2.3 Logo NodeJS
2.3.1. Giới thiệu:
-

Node.js là một nền tảng phát triển phía máy chủ (server-side) được xây
dựng dựa trên JavaScript. Với Node.js, người phát triển có thể xây dựng
các ứng dụng mạng đa nền tảng một cách dễ dàng và hiệu quả.

-

Node.js sử dụng mơ hình sự kiện (event-driven) và cơ chế non-blocking
I/O để cho phép xử lý đa nhiệm hiệu quả.

-

Một trong những điểm mạnh của Node.js là có thể quản lý các ứng dụng

web thời gian thực một cách hiệu quả. Với Node.js, chúng ta có thể xây
dựng ứng dụng trị chuyện, ứng dụng phát sóng trực tiếp, ứng dụng cập
nhật dữ liệu theo thời gian thực và nhiều hơn nữa.

11


-

Một yếu tố quan trọng khác là Node.js sử dụng JavaScript, một ngơn ngữ
lập trình rất phổ biến và mạnh mẽ. Điều này có nghĩa là người phát triển
web đã quen thuộc với JavaScript có thể sử dụng kiến thức và kỹ năng hiện
có của mình để phát triển các ứng dụng phía máy chủ mà khơng cần học
một ngơn ngữ mới.

-

Node.js có một hệ sinh thái mở rộng đáng kinh ngạc, được gọi là npm
(Node Package Manager). Npm cho phép người phát triển truy cập vào
hàng ngàn các gói mã nguồn mở đã được phát triển trước đó để tăng tốc
q trình phát triển. Người dùng có thể tìm kiếm, cài đặt và quản lý các gói
này một cách dễ dàng.

2.3.2. Lý do sử dụng:
-

Node.js được xây dựng trên mơ hình sự kiện (event-driven) và cơ chế nonblocking I/O, cho phép xử lý đa nhiệm hiệu quả và mở rộng tốt. Với khả
năng xử lý hàng nghìn kết nối đồng thời, Node.js thích hợp cho các ứng
dụng yêu cầu thời gian thực và lưu lượng truy cập lớn.

-

Tốc độ nhanh: Phần core phía dưới được viết gần như tồn bộ bằng C++
kết hợp Chrome V8 Engine nên tốc độ xử lý công việc của Node.js cực
nhanh, nhưng vẫn đảm bảo được tính chuẩn xác.

-

Node.js có một hệ sinh thái mở rộng phong phú với npm (Node Package
Manager). Npm cung cấp hàng ngàn gói mã nguồn mở, modules và cơng
cụ phát triển để giúp nhanh chóng xây dựng các chức năng phức tạp và tái
sử dụng mã nguồn có sẵn.

-

Node.js cho phép tích hợp với các cơng nghệ khác và dịch vụ bên ngoài dễ
dàng như cơ sở dữ liệu, hệ thống file, các dịch vụ web, và nhiều hơn nữa.
Điều này tạo điều kiện thuận lợi cho việc phát triển các ứng dụng phức tạp
và tích hợp hệ thống một cách linh hoạt.

-

Node.js có một cộng đồng phát triển đông đảo và năng động cung cấp nhiều
tài liệu, hướng dẫn, gói mở rộng và hỗ trợ thơng qua các diễn đàn và trang

12


web, giúp người phát triển tìm hiểu, chia sẻ và giải quyết vấn đề trong quá
trình phát triển ứng dụng.

2.4. ExpressJS:

Hình 2.4 Logo ExpressJS
2.4.1. Giới thiệu:
-

Express.js là một framework phát triển ứng dụng web phía máy chủ
(server-side) dựa trên Node.js. Được xem là một trong những framework
phổ biến nhất cho Node.js, Express.js giúp đơn giản hóa việc xây dựng các
ứng dụng web một cách nhanh chóng và dễ dàng.

-

Với Express.js, chúng ta có thể xây dựng các ứng dụng web độc lập, ứng
dụng API (Application Programming Interface), và thậm chí là các ứng
dụng web đa trang phức tạp.

-

Một trong những điểm mạnh của Express.js là khả năng mở rộng và tích
hợp tốt với các gói mở rộng (middleware) khác. Express.js sử dụng mơ
hình middleware để xử lý các u cầu từ người dùng.

-

Express.js có một cộng đồng rất lớn và năng động, với nhiều tài liệu, hướng
dẫn và gói mở rộng khác nhau. Hiện nay có thể tìm thấy rất nhiều tài
nguyên và hỗ trợ từ cộng đồng khi làm việc với Express.js.

13

2.4.2. Lý do sử dụng:
-

Express.js có cú pháp đơn giản và dễ hiểu, giúp người phát triển nhanh
chóng bắt đầu và tiếp cận dự án mới. Việc học và làm việc với Express.js
khơng địi hỏi kiến thức sâu về framework hay ngơn ngữ JavaScript, và
người dùng có thể tự do tùy chỉnh theo nhu cầu của dự án.

-

Express.js là một framework không ràng buộc (unopinionated), cho phép
chúng ta tự quyết định cách tổ chức mã nguồn và lựa chọn các cơng nghệ
phù hợp cho dự án. Nhà phát triển có thể tự do trong việc chọn view engine,
middleware, cơ sở dữ liệu, và nhiều thành phần khác để tạo nên ứng dụng
theo ý muốn.

-

Express.js sử dụng mơ hình middleware, cho phép thêm các chức năng phụ
trợ vào ứng dụng một cách dễ dàng. Các middleware giúp xử lý yêu cầu và
phản hồi, thực hiện các chức năng như xác thực, quản lý phiên, ghi lại nhật
ký, xử lý lỗi, và nhiều hơn nữa. Cộng đồng cung cấp rất nhiều middleware
sẵn có để mở rộng khả năng của ứng dụng.

-

Express.js xây dựng trên cơ sở Node.js, cho phép xử lý đa nhiệm hiệu quả
và mở rộng tốt. Nó hỗ trợ xử lý hàng nghìn kết nối đồng thời và có hiệu

suất cao trong việc xử lý yêu cầu web. Điều này làm cho Express.js phù
hợp cho các ứng dụng yêu cầu thời gian thực và lưu lượng truy cập lớn.

-

Express.js được xây dựng trên Node.js và tích hợp tốt với hệ sinh thái
Node.js. Chúng ta có thể sử dụng npm (Node Package Manager) để cài đặt
và quản lý các gói mở rộng cùng với Express.js, giúp tận dụng tối đa các
công cụ và thư viện phát triển có sẵn.

14