Xây dựng hệ thống website cho cửa hàng bán quần áo

Trong giai đoạn kinh tế không ngừng phát triển với tốc độ tăng trưởng cao và sự phát triển mạnh mẽ của công nghệ thông tin và Internet. Công nghệ thông tin và Internet sở hữu những tính năng vượt trội, do đó, chúng ta có thể xóa bỏ mọi khoảng cách, rút ngắn thời gian làm việc, dễ dàng và thuận tiện trong liên lạc. Internet và công nghệ thông tin ngày càng gắn bó và trở thành một phần không thể thiếu của đời sống con người hiện đại. Song, các ngành dịch vụ trên Internet cũng đã phát triển mạnh mẽ vô cùng, không dừng lại ở đó mà còn mang lại lợi ích vô cùng to lớn. Trong đó, ngành Thương mại điện tử là một trong những ngành ứng dụng sâu rộng và phụ thuộc chặt chẽ vào Internet và công nghệ thông tin. Thương mại điện tử thực sự đã mang lại cho chúng ta nhiều lợi ích đáng kể, chúng ta có thể xem, mua những gì mình muốn mà không cần ra khỏi nhà,... Thương mại điện tử là sự phát triển tất yếu nhằm đáp ứng nhu cầu của xã hội hiện đại. Ngày nay, con người luôn đòi hỏi công việc phải được tiến hành nhanh chóng thuận tiện, đơn giản và giúp tiết kiệm,... Nhận thức được tầm quan trọng của thương mại điện tử, để giúp cho việc mua bán hàng qua mạng Internet diễn ra hiệu quả, nhanh chóng, giảm nhiều thời gian và chi phí, nhóm quyết định chọn đề tài “Xây dựng hệ thống website cho cửa hàng bán quần áo” với yêu cầu và chức năng phù hợp với hiện trạng ngày nay.

Kết quả dự kiến đạt được

Chương 1 Cơ sở lý thuyết

Chương 2 Khảo sát, phân tích, thiết kế

Chương 3 Mô hình hóa yêu cầu

Chương 4 Thiết kế phần mềm

Chương 5 Thiết kế giao diện xử lý

Chương 6 Cài đặt và kiểm thử ứng dụng

1 Những kết quả đạt được

DANH SÁCH TÀI LIỆU THAM KHẢO

STT Thời gian Công việc

+ Tìm hiểu, khảo sát đề tài để phát triển dự án

+ Thảo luận, đề ra các chức năng sẽ cải tiến và phát triển trên hệ thống

2 + Tìm hiểu thêm về các framework, thư viện và các công nghệ sẽ áp dụng

+ Lập kế hoạch thực hiện

+ Cập nhật đề cương luận văn

4 + Phân tích hiện trạng và thiết kế thêm chức năng hệ thống

+ Cập nhật thiết kế database cho hệ thống

+ Thiết kế, xây dựng và cải tiến RESTful API cho các chức năng

+ Thiết kế, xây dựng và cải tiến giao diện cho hệ thống

+ Tiến hành kiểm thử và xử lý lỗi của hệ thống theo như các yêu cầu và thiết kế đã đề ra

+ Tiến hành viết báo cáo

7 + Hoàn thành báo cáo và hoàn chỉnh hệ thống

+ Khảo sát và phân tích đề tài

+ Phụ trách cơ sở lý thuyết front-end

+ Phụ trách hệ thống front-end

+ Viết hướng dẫn cài đặt front-end

+ Viết báo cáo phần Mở đầu, chương Lý thuyết, Khảo sát,

Mô hình hóa yêu cầu, Thiết kế giao diện và xử lý, Cài đặt và kiểm thử, phần Kết luận.

+ Phụ trách cơ sở lý thuyết back-end

+ Vẽ lược đồ Usecase và viết đặc tả Usecase, lược đồ hoạt động và lược đồ tuần tự

+ Thiết kế cơ sở dữ liệu

+ Phụ trách hệ thống back-end

+ Viết hướng dẫn cài đặt back-end

+ Kiểm thử front-end và back-end

+ Triển khai hệ thống với Docker

Mô hình hóa yêu cầu, Thiết kế phần mềm, Cài đặt và kiểm thử, phần Kết luận Ý kiến của giáo viên hướng dẫn Người viết đề cương

LỜI CẢM ƠN 1 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 2

1 Tính cấp thiết của đề tài 15

2 Mục đích của đề tài 15

3 Đối tượng nghiên cứu của đề tài 16

4 Phạm vi nghiên cứu của đề tài 16

5 Phương pháp thực hiện đề tài 17

6 Kết quả dự kiến đạt được 18

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 19

1.1 Ngôn ngữ lập trình Java 19

CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG 31

2.2 Khảo sát một số hệ thống liên quan 31

2.3 Phân tích yêu cầu của đề tài 66

CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU 84

CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 110

4.1 Sơ đồ cấu trúc hệ thống 110

CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 130

5.1 Giao diện phân hệ admin 130

5.2 Giao diện phân hệ khách hàng 158

CHƯƠNG 6 CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG 179

6.1 Cài đặt và triển khai hệ thống 179

2 Ưu điểm và nhược điểm 188

3 Thuận lợi và khó khăn 189

Hình 1.1 Kiến trúc tổng thể của Spring Framework [2] 21

Hình 1.2 Mô hình cấu tạo của Spring Boot [3] 22

Hình 2.1 Giao diện trang đăng nhập Shopee 32

Hình 2.2 Giao diện trang chủ Shopee 33

Hình 2.6 Giao diện thông báo từ trang chủ Shopee 35

Hình 2.7 Giao diện giỏ hàng từ trang chủ Shopee 35

Hình 2.8 Giao diện danh mục sản phẩm Shopee 36

Hình 2.9 Giao diện tìm kiếm sản phẩm Shopee 36

Hình 2.11 Giao diện trang chi tiết sản phẩm Shopee 37

Hình 2.13 Giao diện trang chi tiết sản phẩm Shopee (đánh giá sản phẩm) 38

Hình 2.14 Giao diện trang chi tiết sản phẩm Shopee (các sản phẩm liên quan) 39

Hình 2.15 Giao diện quản lý giỏ hàng của người dùng Shopee 39

Hình 2.17 Giao diện chọn mã giảm giá từ giỏ hàng Shopee 40

Hình 2.18 Giao diện trang quản lý địa chỉ giao hàng của người dùng Shopee 41

Hình 2.19 Giao diện tạo địa chỉ giao hàng mới của người dùng Shopee 41

Hình 2.20 Giao diện trang quản lý thông báo của người dùng Shopee 42

Hình 2.21 Giao diện trang quản lý mã giảm giá của người dùng Shopee 42

Hình 2.22 Giao diện trang quản lý tài khoản của người dùng Shopee 43

Hình 2.23 Giao diện trang đặt hàng Shopee (chọn địa chỉ giao hàng) 43

Hình 2.24 Giao diện trang đặt hàng Shopee 44

Hình 2.26 Giao diện trang quản lý các đơn hàng của khách hàng Shopee 45

Hình 2.27 Giao diện trang chi tiết đơn hàng của khách hàng Shopee 45

Hình 2.29 Giao diện đánh giá sản phẩm của đơn hàng của khách hàng Shopee 46

Hình 2.30 Giao diện trang chủ CANIFA 48

Hình 2.35 Giao diện danh mục sản phẩm của CANIFA 50

Hình 2.36 Giao diện tìm kiếm sản phẩm của CANIFA 51

Hình 2.37 Giao diện chi tiết sản phẩm của CANIFA 51

Hình 2.39 Giao diện quản lý giỏ hàng của người dùng của CANIFA 52

Hình 2.40 Giao diện sử dụng mã ưu đãi của CANIFA 53

Hình 2.41 Giao diện trang quản lý địa chỉ giao hàng của người dùng của CANIFA 53

Hình 2.42 Giao diện thêm địa chỉ giao hàng của người dùng của CANIFA 54

Hình 2.43 Giao diện sản phẩm yêu thích của người dùng của CANIFA 54

Hình 2.44 Giao diện lịch sử xem sản phẩm của người dùng của CANIFA 55

Hình 2.45 Giao diện quản lý tài khoản của người dùng của CANIFA 55

Hình 2.46 Giao diện quản lý đơn hàng của người dùng của CANIFA 56

Hình 2.47 Giao diện đặt hàng của CANIFA 56

Hình 2.48 Giao diện trang đăng nhập Seven.AM 58

Hình 2.49 Giao diện trang chủ Seven.AM 58

Hình 2.53 Giao diện trang bộ sưu tập Seven.AM 60

Hình 2.54 Giao diện trang tìm kiếm sản phẩm Seven.AM 61

Hình 2.55 Giao diện trang chi tiết sản phẩm Seven.AM 61

Hình 2.58 Giao diện thêm vào giỏ hàng Seven.AM 63

Hình 2.59 Giao diện trang quản lý giỏ hàng của người dùng Seven.AM 63

Hình 2.60 Giao diện trang quản lý địa chỉ giao hàng của người dùng Seven.AM 64

Hình 2.61 Giao diện trang quản lý tài khoản của người dùng Seven.AM 64

Hình 2.62 Giao diện trang đăng ký Seven.AM 65

Hình 2.63 Giao diện trang đặt hàng của Seven.AM 65

Hình 3.1 Lược đồ Usecase của hệ thống 84

Hình 4.1 Sơ đồ cấu trúc hệ thống 110

Hình 4.2 Lược đồ ERD của hệ thống 111

Hình 4.3 Lược đồ hoạt động Báo cáo thống kê 112

Hình 4.4 Lược đồ hoạt động Đăng ký 113

Hình 4.5 Lược đồ hoạt động Quản lý đơn hàng 114

Hình 4.6 Lược đồ hoạt động Quản lý đơn hàng cá nhân - thanh toán đơn hàng 115

Hình 4.7 Lược đồ hoạt động Quản lý đơn hàng hệ thống 115

Hình 4.8 Lược đồ hoạt động Quản lý giao hàng 116

Hình 4.9 Lược đồ hoạt động Quản lý giỏ hàng 117

Hình 4.10 Lược đồ hoạt động Quản lý sản phẩm 118

Hình 4.11 Lược đồ hoạt động Tạo đơn hàng 119

Hình 4.12 Lược đồ hoạt động Thanh toán online 120

Hình 4.13 Lược đồ tuần tự Báo cáo 121

Hình 4.14 Lược đồ tuần tự Đăng ký 122

Hình 4.15 Lược đồ tuần tự Quản lý đơn hàng cá nhân 123

Hình 4.16 Lược đồ tuần tự Quản lý đơn hàng hệ thống 124

Hình 4.17 Lược đồ tuần tự Quản lý giao hàng 125

Hình 4.18 Lược đồ tuần tự Quản lý giỏ hàng 126

Hình 4.19 Lược đồ tuần tự Quản lý sản phẩm 127

Hình 4.20 Lược đồ tuần tự Tạo đơn hàng 128

Hình 4.21 Lược đồ tuần tự Thanh toán online 129

Hình 5.1 Giao diện trang đăng nhập Admin 130

Hình 5.2 Giao diện trang chủ Admin 130

Hình 5.3 Giao diện trang chủ Admin – Shipper 131

Hình 5.5 Giao diện trang Quản lý người dùng 132

Hình 5.6 Giao diện trang Thông tin chi tiết người dùng 133

Hình 5.7 Giao diện trang Cập nhật thông tin chi tiết người dùng 134

Hình 5.8 Giao diện trang Quản lý phân quyền 135

Hình 5.9 Giao diện trang Tạo mới Phân quyền 136

Hình 5.10 Giao diện trang Cập nhật Thông tin Phân quyền 136

Hình 5.11 Giao diện trang Xem lịch sử hệ thống 137

Hình 5.12 Giao diện trang Quản lý đơn hàng 138

Hình 5.13 Giao diện trang Chi tiết thông tin đơn hàng 139

Hình 5.14 Giao diện trang Cập nhật Chi tiết thông tin đơn hàng 140

Hình 5.15 Giao diện trang Quản lý vận chuyển - Shipper 141

Hình 5.16 Giao diện trang Quản lý mã khuyến mãi 142

Hình 5.17 Giao diện trang Thông tin chi tiết mã khuyến mãi 143

Hình 5.18 Giao diện trang Cập nhật thông tin chi tiết mã khuyến mãi 144

Hình 5.19 Giao diện trang Quản lý nhóm sản phẩm 145

Hình 5.20 Giao diện trang Thông tin chi tiết nhóm sản phẩm 146

Hình 5.21 Giao diện trang Cập nhật Thông tin chi tiết nhóm sản phẩm 147

Hình 5.22 Giao diện trang Quản lý sản phẩm 148

Hình 5.23 Giao diện trang Quản lý nhóm khách hàng 149

Hình 5.24 Giao diện trang Thông tin chi tiết nhóm khách hàng 150

Hình 5.25 Giao diện trang Cập nhật Thông tin chi tiết nhóm khách hàng 150

Hình 5.26 Giao diện trang Quản lý khách hàng 151

Hình 5.27 Giao diện trang Thông tin chi tiết Khách hàng 152

Hình 5.28 Giao diện trang Cập nhật Thông tin chi tiết Khách hàng 153

Hình 5.29 Giao diện trang Quản lý kho 154

Hình 5.30 Giao diện trang Nhập Thông tin sản phẩm vào kho 154

Hình 5.31 Giao diện trang Báo cáo doanh thu 155

Hình 5.32 Giao diện trang Báo cáo hệ thống – Báo cáo 156

Hình 5.33 Giao diện trang Báo cáo hệ thống – Thống kê 157

Hình 5.34 Giao diện trang Thông báo 158

Hình 5.35 Giao diện trang Đăng nhập Customer 158

Hình 5.36 Giao diện trang Đăng ký 159

Hình 5.37 Giao diện trang chủ khách hàng 160

Hình 5.40 Giao diện Trang cá nhân 162

Hình 5.41 Giao diện trang Quản lý hạng cá nhân 162

Hình 5.42 Giao diện trang Quản lý địa chỉ 163

Hình 5.43 Giao diện trang Đổi mật khẩu 163

Hình 5.44 Giao diện trang Xem voucher 164

Hình 5.45 Giao diện trang Lịch sử đơn hàng 164

Hình 5.46 Giao diện trang Đánh giá sản phẩm 165

Hình 5.47 Giao diện trang Chi tiết đơn hàng 166

Hình 5.48 Giao diện trang Danh sách sản phẩm 167

Hình 5.50 Giao diện trang Chi tiết sản phẩm 168

Hình 5.54 Giao diện trang Sản phẩm yêu thích 171

Hình 5.55 Giao diện trang Sản phẩm đã xem 171

Hình 5.56 Giao diện trang Sản phẩm bán chạy 172

Hình 5.57 Giao diện trang Sản phẩm mới 172

Hình 5.58 Giao diện trang Sản phẩm khuyến mãi 173

Hình 5.59 Giao diện trang Kết quả tìm kiếm bằng hình ảnh 173

Hình 5.60 Giao diện trang Kết quả tìm kiếm bằng từ khoá 174

Hình 5.62 Giao diện trang Giỏ hàng 175

Hình 5.63 Giao diện trang Thanh toán 176

Bảng 2.1 Đánh giá tổng quan về hệ thống của Shopee 47

Bảng 2.2 Đánh giá tổng quan về hệ thống CANIFA 57

Bảng 2.3 Đánh giá tổng quan về hệ thống Seven.AM 66

Bảng 2.4 Mô tả yêu cầu chức năng của hệ thống 70

Bảng 2.5 Bảng mô tả chi tiết các yêu cầu phi chức năng của hệ thống 80

Bảng 3.1 Đặc tả usecase Quản lý giỏ hàng 84

Bảng 3.2 Đặc tả usecase Quản lý địa chỉ hàng 85

Bảng 3.3 Đặc tả usecase Đăng nhập 86

Bảng 3.4 Đặc tả usecase Quản lý sản phẩm 87

Bảng 3.5 Đặc tả usecase Quản lý nhóm sản phẩm 88

Bảng 3.6 Đặc tả usecase Quản lý người dùng 89

Bảng 3.7 Đặc tả usecase Quản lý khách hàng 90

Bảng 3.8 Đặc tả usecase Quản lý vai trò và phân quyền 91

Bảng 3.9 Đặc tả usecase Quản lý nhật ký hệ thống 91

Bảng 3.10 Đặc tả usecase Đăng ký 92

Bảng 3.11 Đặc tả usecase Quản lý tài khoản và thông tin cá nhân 93

Bảng 3.12 Đặc tả usecase Quên mật khẩu 94

Bảng 3.13 Đặc tả usecase Hủy đơn hàng 95

Bảng 3.14 Đặc tả usecase Thanh toán đơn hàng 96

Bảng 3.15 Đặc tả usecase Thanh toán trực tuyến 96

Bảng 3.16 Đặc tả usecase Quản lý thứ hạng khách hàng 97

Bảng 3.17 Đặc tả usecase Báo cáo thống kê 98

Bảng 3.18 Đặc tả usecase Quản lý đơn hàng hệ thống 98

Bảng 3.19 Đặc tả usecase Xem danh sách sản phẩm 99

Bảng 3.20 Đặc tả usecase Quản lý sản phẩm yêu thích 100

Bảng 3.21 Đặc tả usecase Đặt hàng 100

Bảng 3.22 Đặc tả usecase Quản lý nhập kho 101

Bảng 3.23 Đặc tả usecase Quản lý trạng thái giao hàng của đơn hàng hệ thống 102

Bảng 3.24 Đặc tả usecase Quản lý mã giảm giá 103

Bảng 3.25 Đặc tả usecase Xem thông báo cá nhân 104

Bảng 3.26 Đặc tả usecase Đánh giá và nhận xét sản phẩm 105

Bảng 3.27 Đặc tả usecase Trò chuyện với Chatbot 105

Bảng 3.28 Đặc tả usecase Tìm kiếm bằng hình ảnh 106

Bảng 3.29 Đặc tả usecase Lấy mã OTP 107

Bảng 3.30 Đặc tả usecase Hoàn tiền đơn hàng 107

Bảng 3.31 Đặc tả usecase Xem và tìm kiếm đơn hàng cá nhân 108

Bảng 5.1 Mô tả giao diện trang đăng nhập Amin 130

Bảng 5.2 Mô tả giao diện trang chủ Admin 131

Bảng 5.3 Mô tả giao diện trang chủ Admin - Shiper 132

Bảng 5.4 Mô tả giao diện trang Quản lý người dùng 133

Bảng 5 5 Mô tả giao diện trang Thông tin chi tiết người dùng 133

Bảng 5.6 Mô tả giao diện trang Cập nhật thông tin chi tiết người dùng 134

Bảng 5.7 Mô tả giao diện trang Quản lý phân quyền 135

Bảng 5.8 Mô tả giao diện trang Tạo mới Phân quyền 136

Bảng 5.9 Mô tả giao diện trang Cập nhật Thông tin Phân quyền 136

Bảng 5.10 Mô tả giao diện trang Xem lịch sử hệ thống 137

Bảng 5.11 Mô tả giao diện trang Quản lý đơn hàng 138

Bảng 5.12 Mô tả giao diện trang Chi tiết thông tin đơn hàng 139

Bảng 5.13 Mô tả giao diện trang Cập nhật Chi tiết thông tin đơn hàng 140

Bảng 5.13 Mô tả giao diện trang Quản lý vận chuyển - Shipper 141

Bảng 5.14 Mô tả giao diện trang Quản lý mã khuyến mãi 142

Bảng 5.15 Mô tả giao diện trang Thông tin chi tiết mã khuyến mãi 143

Bảng 5.16 Mô tả giao diện trang Cập nhật thông tin chi tiết mã khuyến mãi 144

Bảng 5.17 Mô tả giao diện trang Quản lý nhóm sản phẩm 145

Bảng 5.18 Mô tả giao diện trang Thông tin chi tiết nhóm sản phẩm 146

Bảng 5.19 Mô tả giao diện trang Cập nhật Thông tin chi tiết nhóm sản phẩm 147

Bảng 5.20 Mô tả giao diện trang Quản lý sản phẩm 148

Bảng 5.21 Mô tả giao diện trang Quản lý nhóm khách hàng 149

Bảng 5.22 Mô tả giao diện trang Thông tin chi tiết nhóm khách hàng 150

Bảng 5.23 Mô tả giao diện trang Cập nhật Thông tin chi tiết nhóm khách hàng 150

Bảng 5.24 Mô tả giao diện trang Quản lý khách hàng 151

Bảng 5.25 Mô tả giao diện trang Thông tin chi tiết Khách hàng 152

Bảng 5.26 Mô tả giao diện trang Cập nhật Thông tin chi tiết Khách hàng 153

Bảng 5.27 Mô tả giao diện trang Quản lý kho 154

Bảng 5.28 Mô tả giao diện trang Nhập Thông tin sản phẩm vào kho 155

Bảng 5.29 Mô tả giao diện trang Báo cáo doanh thu 155

Bảng 5.30 Mô tả giao diện trang Báo cáo hệ thống – Báo cáo 156

Bảng 5.31 Mô tả giao diện trang Báo cáo hệ thống – Thống kê 157

Bảng 5.32 Mô tả giao diện trang Thông báo 158

Bảng 5.33 Mô tả giao diện trang Đăng nhập Customer 159

Bảng 5.34 Mô tả giao diện trang Đăng ký 159

Bảng 5.36 Mô tả giao diện Trang cá nhân 162

Bảng 5.37 Mô tả giao diện trang Quản lý hạng cá nhân 162

Bảng 5.38 Mô tả giao diện trang Quản lý địa chỉ 163

Bảng 5.39 Mô tả giao diện trang Đổi mật khẩu 163

Bảng 5.40 Mô tả giao diện trang Xem voucher 164

Bảng 5.41 Mô tả giao diện trang Lịch sử đơn hàng 164

Bảng 5.42 Mô tả giao diện trang Đánh giá sản phẩm 166

Bảng 5.43 Mô tả giao diện trang Chi tiết đơn hàng 166

Bảng 5.44 Mô tả giao diện trang Danh sách sản phẩm 167

Bảng 5.45 Mô tả giao diện trang Chi tiết sản phẩm 169

Bảng 5.46 Mô tả giao diện trang Sản phẩm yêu thích 171

Bảng 5.47 Mô tả giao diện trang Sản phẩm đã xem 171

Bảng 5.48 Mô tả giao diện trang Sản phẩm bán chạy 172

Bảng 5.49 Mô tả giao diện trang Sản phẩm mới 172

Bảng 5.50 Mô tả giao diện trang Sản phẩm khuyến mãi 173

Bảng 5.51 Mô tả giao diện trang Kết quả tìm kiếm bằng hình ảnh 174

Bảng 5.52 Mô tả giao diện trang Kết quả tìm kiếm bằng từ khoá 174

Bảng 5.54 Mô tả giao diện trang Giỏ hàng 176

Bảng 5.55 Mô tả giao diện trang Thanh toán 177

Bảng 5.56 Mô tả giao diện Chatbot 178

Bảng 6.4 Thông tin và kết quả kiểm thử các chức năng quản lý tài khoản 181

Bảng 6.5 cung cấp thông tin và kết quả kiểm thử các chức năng quản lý đơn hàng và giỏ hàng Bảng 6.6 trình bày thông tin và kết quả kiểm thử các chức năng quản lý nhóm sản phẩm và sản phẩm Bảng 6.7 nêu rõ thông tin và kết quả kiểm thử các chức năng có tính chịu tải cao Cuối cùng, Bảng 6.8 đưa ra thông tin và kết quả kiểm thử logic xử lý hệ thống.

1 Tính cấp thiết của đề tài

Trong bối cảnh kinh tế phát triển nhanh chóng và công nghệ thông tin cùng Internet ngày càng mạnh mẽ, chúng ta có thể xóa bỏ mọi khoảng cách, rút ngắn thời gian làm việc và tạo điều kiện thuận lợi cho việc liên lạc.

Internet và công nghệ thông tin đã trở thành phần thiết yếu trong cuộc sống hiện đại Sự phát triển mạnh mẽ của các dịch vụ trên Internet mang lại nhiều lợi ích to lớn, đặc biệt là trong lĩnh vực Thương mại điện tử, ngành này phụ thuộc sâu sắc vào Internet và công nghệ thông tin.

Thương mại điện tử mang lại nhiều lợi ích vượt trội, cho phép người tiêu dùng xem và mua sắm hàng hóa một cách tiện lợi mà không cần rời khỏi nhà Sự phát triển của thương mại điện tử là nhu cầu thiết yếu trong xã hội hiện đại, nơi con người ngày càng yêu cầu quy trình giao dịch diễn ra nhanh chóng, thuận tiện và tiết kiệm thời gian.

Nhận thức rõ vai trò quan trọng của thương mại điện tử trong việc tối ưu hóa quy trình mua bán trực tuyến, nhóm đã quyết định phát triển đề tài “Xây dựng hệ thống website cho cửa hàng bán quần áo” Mục tiêu là tạo ra một nền tảng hiệu quả, nhanh chóng, giúp giảm thiểu thời gian và chi phí cho người tiêu dùng, đồng thời đáp ứng các yêu cầu và chức năng phù hợp với xu hướng hiện tại.

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

Xây dựng một hệ thống website thương mại điện tử cần bao gồm đầy đủ các chức năng cơ bản, với hai phần chính: website dành cho khách hàng và website dành cho quản trị.

Giao diện được thiết kế đơn giản và tiện lợi, dễ sử dụng, tạo cảm giác gần gũi với người dùng Hệ thống xử lý hoạt động chính xác và hiệu quả, tập trung vào tốc độ phản hồi, đồng thời nắm bắt các ngoại lệ và cung cấp thông báo lỗi thân thiện với người dùng.

Kết hợp các tính năng nổi bật từ các trang thương mại điện tử hàng đầu vào một sản phẩm duy nhất, mang lại sự tiện lợi tối đa cho người dùng Sản phẩm áp dụng công nghệ và kỹ thuật hiện đại, đáp ứng các tiêu chuẩn và yêu cầu cơ bản cũng như nâng cao trong lĩnh vực thương mại điện tử.

Vận dụng trí tuệ nhân tạo để nâng cao trải nghiệm của người dùng

Cung cấp những tính năng mới, tiện dụng và sáng tạo

3 Đối tượng nghiên cứu của đề tài

Các đối tượng nghiên cứu của đề tài:

Người sử dụng cuối là những cá nhân truy cập và tương tác với hệ thống website, bao gồm khách hàng và người mua hàng trực tuyến Họ có quyền xem thông tin sản phẩm, thêm sản phẩm vào giỏ hàng, đặt hàng, truy cập tài khoản cá nhân và quản lý thông tin tài khoản của mình.

Quản trị viên cửa hàng là những người có quyền truy cập và quản lý toàn bộ hệ thống cửa hàng, cho phép họ thực hiện các chức năng quan trọng như quản lý người dùng, phân quyền truy cập và thống kê cửa hàng.

Nhân viên cửa hàng chịu trách nhiệm quản lý hoạt động kinh doanh trên website, bao gồm quản lý danh sách sản phẩm, theo dõi đơn hàng và các hoạt động bán hàng Họ thực hiện các tác vụ quản lý khác để đảm bảo hiệu quả trong việc vận hành cửa hàng trực tuyến.

4 Phạm vi nghiên cứu của đề tài

Phạm vi nghiên cứu của đề tài bao gồm:

Thiết kế giao diện người dùng bao gồm việc tạo ra giao diện trực quan và hấp dẫn cho người sử dụng, chú trọng vào việc xác định các yêu cầu thông tin của người dùng, đồng thời đề xuất và thử nghiệm các mô hình giao diện tối ưu.

+ Ưu đãi cho khách hàng: bao gồm việc áp dụng mã giảm giá cũng như chính sách (chức năng) khách hàng thân thiết để thu hút khách hàng

+ Gợi ý sản phẩm liên quan: áp dụng các mô hình trí tuệ nhân tạo để đưa ra gợi ý các sản phẩm mà khách hàng có thể quan tâm

Quản lý sản phẩm là quá trình xây dựng cơ sở dữ liệu để lưu trữ thông tin chi tiết về sản phẩm, bao gồm mô tả, hình ảnh, thuộc tính như kích thước, màu sắc và kiểu dáng, cũng như giá cả và các thông tin liên quan khác Bên cạnh đó, cần xem xét các chức năng cần thiết để quản lý, cập nhật và hiển thị thông tin sản phẩm một cách hiệu quả trên website.

Quản lý đơn hàng là quy trình quan trọng trong việc xử lý đơn hàng từ khách hàng, bao gồm các chức năng như thêm sản phẩm vào giỏ hàng, thanh toán, đặt hàng, cập nhật trạng thái đơn hàng và thông báo cho khách hàng về tiến trình xử lý.

Tìm kiếm và lọc sản phẩm hiệu quả là yếu tố quan trọng giúp người dùng dễ dàng tìm thấy sản phẩm mong muốn Người dùng có thể dựa trên các tiêu chí như tên, mô tả, giá cả và thuộc tính sản phẩm như kích thước, màu sắc để thực hiện việc này Bên cạnh đó, hỗ trợ tìm kiếm bằng hình ảnh cũng rất hữu ích, khi người dùng có thể chuyển đổi hình ảnh sang các từ khóa liên quan để nhanh chóng tìm kiếm sản phẩm.

CƠ SỞ LÝ THUYẾT

Ngôn ngữ lập trình Java

Java là một ngôn ngữ lập trình hướng đối tượng (OOP) và dựa trên lớp, được phát triển bởi Sun Microsystems dưới sự dẫn dắt của James Gosling và ra mắt vào năm 1995 Khác với nhiều ngôn ngữ lập trình khác, Java biên dịch mã nguồn thành bytecode thay vì mã máy, cho phép bytecode được thực thi bởi môi trường runtime.

Các tính năng của Java:

Trong Java, mọi thứ đều được xem như một đối tượng, điều này giúp ngôn ngữ này trở nên linh hoạt và dễ bảo trì Kiến trúc dựa trên mô hình đối tượng của Java cho phép mở rộng và phát triển các ứng dụng một cách hiệu quả.

Java là một ngôn ngữ lập trình độc lập với nền tảng, vì khi được biên dịch, nó không chuyển đổi thành ngôn ngữ máy cụ thể mà thay vào đó tạo ra mã byte Mã byte này được thông dịch bởi máy ảo Java (JVM) trên bất kỳ nền tảng nào mà nó đang chạy, giúp Java có khả năng chạy trên nhiều hệ điều hành khác nhau mà không cần thay đổi mã nguồn.

+ Đơn giản: Java được thiết kế đơn giản, dễ học, chỉ cần hiểu khái niệm cơ bản về OOP trong Java

Java cung cấp tính năng bảo mật mạnh mẽ, cho phép phát triển các hệ thống an toàn, không bị virus và giả mạo Việc xác thực trong Java được thực hiện thông qua mã hóa khóa công khai, đảm bảo tính toàn vẹn và bảo mật cho dữ liệu.

Kiến trúc trung lập của Java cho phép trình biên dịch tạo ra các tệp đối tượng có thể chạy trên nhiều bộ vi xử lý khác nhau nhờ vào máy ảo Java.

Java cam kết mạnh mẽ trong việc giảm thiểu các lỗi bằng cách thực hiện kiểm tra lỗi cả ở giai đoạn biên dịch và trong quá trình chạy chương trình.

Đa luồng cho phép tạo ra các chương trình thực hiện nhiều tác vụ đồng thời, giúp các nhà phát triển xây dựng ứng dụng tương tác một cách mượt mà hơn.

+ Thông dịch: Các mã byte Java được dịch trực tiếp tới các máy tính gốc và không được lưu trữ ở bất cứ đâu

+ Phân tán: Java được sử dụng thiết kế cho môi trường phân tán của Internet

Java là một ngôn ngữ lập trình năng động hơn C hoặc C++ vì nó được thiết kế để thích ứng với môi trường phát triển Chương trình Java có khả năng lưu trữ một lượng lớn thông tin trong quá trình thực thi, cho phép xác minh và xử lý các truy cập vào đối tượng trong thời gian chạy.

Java có các ưu điểm như:

+ Java là ngôn ngữ độc lập với nền tảng vì chúng ta có thể chạy mã Java ở bất kỳ máy nào mà không cần phần mềm đặc biệt

+ Là ngôn ngữ lập trình cấp cao dễ học và dễ hiểu

+ Là ngôn ngữ hướng đối tượng làm tăng khả năng phát triển mã dễ dàng và tăng hiệu quả

+ Là ngôn ngữ an toàn vì Java không sử dụng con trỏ

+ Quản lý bộ nhớ hiệu quả

Hỗ trợ đa luồng cho phép người dùng thực hiện nhiều chương trình cùng lúc, nâng cao hiệu suất làm việc Ngoài ra, phần mềm còn tích hợp nhiều tính năng hữu ích như tự động thu gom rác, không sử dụng con trỏ và xử lý ngoại lệ, giúp tối ưu hóa trải nghiệm người dùng.

Java, mặc dù có nhiều ưu điểm, vẫn gặp phải một số nhược điểm, trong đó nổi bật là việc là ngôn ngữ cấp cao, dẫn đến cần phải xử lý các mức biên dịch và trừu tượng của một máy ảo.

+ Có ít trình xây dựng GUI (Giao diện người dùng đồ họa) như Swing, SWT, JSF và JavaFX.

Spring Framework

Spring là một framework mã nguồn mở cho phát triển ứng dụng Java, được hàng triệu lập trình viên sử dụng và có một cộng đồng người dùng rộng lớn.

Spring là một framework nhẹ và trong suốt, giúp lập trình viên dễ dàng làm việc Mặc dù có kích thước nhỏ gọn, Spring hỗ trợ tạo ra các ứng dụng hiệu năng cao, cho phép tái sử dụng mã nguồn và kiểm thử dễ dàng Nhờ những ưu điểm này, Spring trở thành lựa chọn phổ biến cho các nhà phát triển.

21 lập trình viên có khả năng tối ưu hóa hầu hết các công việc, giúp tiết kiệm tối đa thời gian làm việc.

Spring cung cấp các tính năng chính giúp xây dựng ứng dụng Java Desktop, ứng dụng mobile và Java Web Mục tiêu quan trọng của Spring là đơn giản hóa quá trình phát triển ứng dụng J2EE thông qua mô hình POJO (Plain Old Java Object).

Spring is divided into multiple modules, each serving a specific function, such as Spring Core, Web, Data Access, and AOP It is fundamentally built on two key concepts: Dependency Injection and Aspect-Oriented Programming (AOP).

Hình 1.1 Kiến trúc tổng thể của Spring Framework [2]

Các lợi ích khi sử dụng Spring Framework:

Spring cho phép lập trình viên sử dụng POJOs, giúp đơn giản hóa quy trình phát triển ứng dụng Việc sử dụng POJOs thay vì EJB giúp giảm bớt sự phức tạp liên quan đến cấu hình, các luồng chạy và quản lý ứng dụng.

Spring được tổ chức theo hình thức mô đun với nhiều gói và lớp học đa dạng Tuy nhiên, bạn chỉ cần tập trung vào những gì mình cần, không cần bận tâm đến các phần khác.

+ Spring hỗ trợ sử dụng khá nhiều công nghệ như ORM Framework, các logging framework, JEE, các thư viện tạo lịch trình (Quartz và JDK timer)…

+ Module Web của Spring được thiết kế theo mô hình MVC nên nó cung cấp đầy đủ các tính năng giúp thay thế các web framework khác

Spring Boot là một module của Spring Framework, cung cấp tính năng Phát triển Ứng dụng Nhanh (RAD) để tạo và phát triển ứng dụng độc lập dựa trên Spring Mục tiêu của Spring Boot là đơn giản hóa cấu hình phức tạp của Spring, loại bỏ yêu cầu về cấu hình XML và nâng cao năng suất cho các nhà phát triển Sự ra đời của Spring Boot đã làm cho hệ sinh thái Spring trở nên mạnh mẽ, phổ biến và hiệu quả hơn bao giờ hết.

Hình 1.2 Mô hình cấu tạo của Spring Boot [3]

Một số ưu điểm chính của Spring boot:

+ Hội tụ đầy đủ các tính năng của Spring Framework

+ Đơn giản hóa cấu hình và xây dựng được các ứng dụng độc lập có khả năng chạy bằng java - jar nhờ các dependency starter

Việc triển khai ứng dụng trở nên dễ dàng hơn nhờ vào việc nhúng trực tiếp các ứng dụng server vào trong ứng dụng, giúp tránh những khó khăn khi đưa lên môi trường production mà không cần tải file WAR.

1.2.3 Spring Data JPA & Hibernate Search

Spring Data JPA là một module trong Spring Data, thuộc Spring Framework, giúp đơn giản hóa quá trình triển khai JPA (Java Persistence API) với Hibernate là JPA provider mặc định.

Mục đích của việc sử dụng JPA là để lưu trữ và trích xuất dữ liệu từ cơ sở dữ liệu một cách dễ dàng, giúp người dùng không phải lo lắng về các câu truy vấn SQL phức tạp.

Lập nền tảng với cơ sở dữ liệu giúp ứng dụng linh hoạt hơn, cho phép thay đổi hệ quản trị cơ sở dữ liệu mà không cần phải sửa đổi mã nguồn nhiều.

An application can be divided into three main components: the user interface (presentation layer), the business logic (business layer), and the data storage (data layer) Specifically, the business layer can be further subdivided into two sub-layers: the business logic layer and the persistence layer.

Lớp logic kinh doanh thực hiện các tính toán cần thiết để đáp ứng yêu cầu của người dùng, trong khi lớp lưu trữ đảm nhận việc giao tiếp với lớp dữ liệu, bao gồm mở kết nối, truy xuất và lưu trữ thông tin vào các hệ quản trị cơ sở dữ liệu.

Hibernate là thư viện ORM mã nguồn mở, hỗ trợ lập trình viên Java trong việc ánh xạ đối tượng với cơ sở dữ liệu quan hệ Thư viện này giúp đơn giản hóa quá trình lập trình bằng cách loại bỏ những lo lắng về tầng lưu trữ, cho phép tập trung vào phát triển ứng dụng hiệu quả hơn.

RESTful API

RESTful API là tiêu chuẩn thiết kế API cho ứng dụng web, giúp quản lý tài nguyên hiệu quả Nó tập trung vào các tài nguyên hệ thống như tệp văn bản, hình ảnh, âm thanh, video và dữ liệu động, với các trạng thái tài nguyên được định dạng và truyền tải qua giao thức HTTP.

Chức năng quan trọng nhất của REST là quy định cách sử dụng các phương thức HTTP như GET, POST, PUT và DELETE, cùng với cách định dạng URL cho ứng dụng web nhằm quản lý các tài nguyên hiệu quả.

+ GET (SELECT): Trả về một Resource hoặc một danh sách Resource

+ POST (CREATE): Tạo mới một Resource

+ PUT (UPDATE): Cập nhật thông tin cho Resource

+ DELETE (DELETE): Xoá một Resource

RESTful không đặt ra quy tắc cho logic mã nguồn ứng dụng và không bị ràng buộc bởi ngôn ngữ lập trình cụ thể Bất kỳ ngôn ngữ hoặc framework nào cũng có thể được sử dụng để phát triển một API RESTful.

Python

Python là một ngôn ngữ lập trình bậc cao đa năng, nổi bật với tính dễ đọc, dễ học và dễ nhớ Với cấu trúc rõ ràng và hình thức sáng sủa, Python rất phù hợp cho người mới bắt đầu học lập trình Ngôn ngữ này được sử dụng phổ biến trong phát triển trí tuệ nhân tạo và cho phép viết code với số lần gõ phím tối thiểu.

Python là ngôn ngữ được ứng dụng đa dạng trong các lĩnh vực:

+ Làm Web với các Framework của Python: Django và Flask là 2 framework phổ biến hiện nay dành cho các lập trình viên Python để tạo ra các website

Công cụ tự động hóa, bao gồm các ứng dụng như từ điển và công cụ crawl dữ liệu từ website, đang trở thành lựa chọn hàng đầu của lập trình viên Họ thường ưu tiên sử dụng Python để phát triển những công cụ này nhờ vào tốc độ lập trình nhanh chóng và hiệu quả mà ngôn ngữ này mang lại.

Trong lĩnh vực khoa học máy tính, Python cung cấp nhiều thư viện quan trọng như OpenCV cho xử lý ảnh và machine learning, Scipy và Numpy hỗ trợ toán học và đại số tuyến tính, cùng với Pandas cho phân tích dữ liệu.

Python là ngôn ngữ lập trình phổ biến trong lĩnh vực Internet kết nối vạn vật (IoT), nhờ khả năng phát triển ứng dụng cho nền tảng nhúng và xử lý dữ liệu lớn Sự linh hoạt của Python giúp các nhà phát triển dễ dàng triển khai các giải pháp IoT hiệu quả.

+ Làm game: Pygame là một bộ module Python cross-platform được thiết kế để viết game cho cả máy tính và các thiết bị di động

Flask Python là một framework ứng dụng web nhẹ nhưng linh hoạt, được phát triển từ ngôn ngữ lập trình Python Công cụ này phù hợp cho việc thiết kế các trang web đơn giản cũng như xây dựng các ứng dụng phức tạp cho các website lớn.

+ Dễ học và sử dụng: Flask có cú pháp đơn giản và dễ hiểu, giúp người dùng dễ dàng học và phát triển ứng dụng web nhanh chóng

+ Linh hoạt: Flask cho phép tùy chỉnh và mở rộng các thành phần theo ý muốn, từ việc xử lý đường dẫn cho tới tạo giao diện người dùng

Flask cho phép tích hợp dễ dàng với nhiều thư viện và công nghệ trong hệ sinh thái Python, bao gồm SQLAlchemy cho ORM, Jinja2 cho templates, và WTForms cho xử lý form, giúp nâng cao hiệu suất phát triển ứng dụng.

Flask là một framework lý tưởng cho các dự án nhỏ và trung bình, phù hợp với từ các ứng dụng web cá nhân nhỏ đến các dự án thương mại quy mô vừa.

Flask có một cộng đồng phát triển mạnh mẽ và tích cực, cung cấp nhiều tài liệu, ví dụ và gói mở rộng hữu ích, giúp hỗ trợ quá trình phát triển ứng dụng hiệu quả.

Flask được tối ưu hóa để cho phép tùy chỉnh từng thành phần của ứng dụng web, giúp đạt được hiệu suất tối ưu và khai thác tối đa khả năng của ứng dụng.

Flask là một framework phổ biến cho việc xây dựng và cung cấp RESTful API, cho phép người dùng tương tác dễ dàng với ứng dụng thông qua giao diện lập trình ứng dụng (API).

Thư viện Surprise là một thư viện machine learning được viết bằng Python, được sử dụng rộng rãi trong lĩnh vực Collaborative Filtering để xử lý vấn đề gợi ý

Dựa trên phản hồi trực tiếp từ người dùng, Surprise cung cấp các thuật toán phổ biến và dễ sử dụng cho việc xây dựng và đánh giá hệ thống gợi ý.

Dưới đây là một số đặc điểm và tính năng chính của thư viện Surprise:

+ Dễ sử dụng: Surprise cung cấp một API đơn giản và dễ hiểu, giúp người dùng dễ dàng triển khai các thuật toán gợi ý trong ứng dụng của mình

This library supports a variety of popular algorithms, including collaborative filtering techniques such as Singular Value Decomposition (SVD), k-Nearest Neighbors (k-NN), Baseline Algorithms, and many others.

Surprise cung cấp các công cụ mạnh mẽ để xử lý và chuẩn bị dữ liệu, đồng thời áp dụng các phương pháp đánh giá hiệu suất cho các mô hình hệ thống gợi ý.

Thư viện hỗ trợ kiểm tra chéo (cross-validation), cung cấp các công cụ cần thiết để thực hiện quy trình này trên dữ liệu, từ đó giúp đánh giá mô hình và hiệu suất của nó một cách chính xác.

Surprise cung cấp tính năng tùy chỉnh mô hình gợi ý, cho phép người dùng điều chỉnh các siêu tham số và lựa chọn thuật toán phù hợp với nhu cầu của mình.

ReactJS

ReactJS, hay còn gọi là React.js, là một thư viện JavaScript mã nguồn mở miễn phí, được thiết kế để phát triển giao diện người dùng dựa trên các thành phần UI Thư viện này được duy trì bởi Meta (trước đây là Facebook) cùng với sự hỗ trợ từ các nhà phát triển cá nhân và cộng đồng doanh nghiệp.

React là một thư viện phổ biến để phát triển các trang web SPA (Single Page Application) và ứng dụng di động Với khả năng tạo ra các component UI tái sử dụng, React giúp người dùng dễ dàng xây dựng giao diện với mã HTML và CSS đơn giản Đây là một trong những ưu điểm nổi bật của React, mang lại sự tiện lợi cho lập trình viên.

React, được ra mắt vào năm 2011 bởi nhà phát triển phần mềm Facebook (nay là Meta) Jordan Walke, là một công nghệ mới nổi bật so với các công nghệ khác trên thị trường Thư viện này chịu ảnh hưởng từ XHP, một khung thành phần HTML nhẹ dành cho PHP.

React lần đầu tiên được sử dụng vào năm 2011 trong mã nguồn newsfeed của Facebook và sau đó được Instagram áp dụng trong hệ thống của mình Đến tháng 5 năm 2013, Facebook đã quyết định mở mã nguồn React tại sự kiện JSConfUS Năm 2015, React Native được công bố, giúp việc phát triển ứng dụng trên Android và iOS trở nên dễ dàng hơn, và cùng năm đó, React Native cũng trở thành mã nguồn mở để thúc đẩy sự phát triển.

ReactJS có các tính năng hết sức nổi bật bao gồm:

JSX, viết tắt của JavaScript extension, là một phần mở rộng của React, giúp dễ dàng thay đổi cây DOM Một trang web được xây dựng bằng ReactJS bao gồm nhiều component kết hợp với nhau, thay vì chỉ sử dụng một template như thông thường Các component hoạt động giống như các hàm JavaScript, cho phép tách logic thành các đoạn code độc lập có thể tái sử dụng Chúng ta có thể định nghĩa component dưới dạng function hoặc class, và các component này còn có state và props để quản lý dữ liệu.

ReactJS sử dụng Virtual DOM, hay còn gọi là DOM ảo, để tối ưu hóa hiệu suất Virtual DOM là một bản sao của DOM thật trên trang web, cho phép ReactJS thực hiện các thay đổi một cách hiệu quả mà không cần cập nhật toàn bộ trang Điều này giúp cải thiện tốc độ và trải nghiệm người dùng.

29 đó để tìm đúng những DOM thật cần được cập nhật khi có bất kỳ sự kiện nào làm các thành phần bên trong nó thay đổi

+ Javascript Expressions: Biểu thức JS có thể sử dụng trong file jsx hoặc js bằng cách sử dụng cặp dấu ngoặc nhọn “{}”

+ ReactJS có những ưu điểm sau:

React là một công cụ mã nguồn mở, giúp các nhà phát triển tạo ra hướng dẫn, công cụ đào tạo và tài nguyên hỗ trợ cho cả những người mới và cũ Sự dễ học của React không chỉ giúp chủ doanh nghiệp và người quản lý dễ dàng tìm kiếm các nhà phát triển web có kinh nghiệm, mà còn mang lại lợi ích cho những nhà phát triển đã có nền tảng về ReactJS.

ReactJS sử dụng DOM ảo để lưu trữ cấu trúc dữ liệu trong bộ nhớ, chỉ cập nhật những thay đổi cuối cùng vào DOM của trình duyệt Điều này giúp tăng tốc độ ứng dụng một cách đáng kể.

Bạn có thể tạo các component theo từng chức năng mong muốn bằng tính năng của React, giúp tái sử dụng linh hoạt và dễ dàng bảo trì sau này React cho phép các nhà phát triển sử dụng lại các thành phần thiết kế một cách hiệu quả, tiết kiệm thời gian và nâng cao độ chính xác của mã.

+ ReactJS là một opensource, vì vậy cũng rất dễ cho những bạn mới bắt đầu tìm hiểu nó

Trong React, dòng dữ liệu một chiều đảm bảo rằng dữ liệu từ thành phần mẹ không bị ảnh hưởng bởi các thay đổi từ thành phần con Điều này giúp tạo ra mã ổn định hơn và mang lại cho các nhà phát triển quyền kiểm soát cao hơn trong các dự án lớn và phức tạp.

+ ReactJS có thể được sử dụng để xây dựng giao diện người dùng cho cả các ứng dụng dành cho máy tính và các ứng dụng di động

+ Dễ dàng cho việc test và debug, vì hầu hết các code đều được thực hiện bằng JavaScript chứ không phải bằng HTML

Tuy nhiên, React cũng tồn tại một số nhược điểm như:

JSX, một phần quan trọng của React, kết hợp HTML và CSS vào JavaScript, khác với các framework khác thường tách biệt chúng Mặc dù cú pháp mở rộng của JSX giúp một số nhà phát triển, nhưng cũng có những nhóm cho rằng JSX là nhược điểm của React Nhiều nhà phát triển mới cảm thấy JSX là rào cản trong việc làm quen với ReactJS.

Tốc độ phát triển của React có thể được xem là một lợi thế hoặc bất lợi tùy thuộc vào quan điểm của từng nhà phát triển Những người ủng hộ cho rằng sự cải tiến liên tục của React giúp công việc của họ trở nên dễ dàng hơn, trong khi những người khác lại cảm thấy khó khăn khi phải liên tục học lại cách sử dụng ReactJS Mặc dù tốc độ phát triển của ReactJS thường được coi là một nhược điểm, nhưng API cốt lõi của React đã trở nên ổn định hơn trong những năm gần đây.

+ Các file của ReactJS chiếm dung lượng khá lớn.

KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG

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

Trong bối cảnh kinh tế đất nước đang phát triển, nhu cầu sống của con người ngày càng cao, đặc biệt trong lĩnh vực kinh doanh và mua bán Việc giới thiệu sản phẩm đến từng cá nhân với chi phí thấp và hiệu quả cao trở thành một thách thức lớn cho các doanh nghiệp Sự đa dạng về sản phẩm chất lượng và giá cả hợp lý là yếu tố quan trọng để thu hút người tiêu dùng Điều này đã thúc đẩy sự phát triển mạnh mẽ của thương mại điện tử trên toàn cầu.

Thương mại điện tử giúp các cửa hàng từ nhỏ đến lớn quản lý hiệu quả việc buôn bán và nhu cầu khách hàng Nhờ vào nền tảng này, cửa hàng có thể theo dõi đơn hàng, tình trạng sản phẩm và đối tượng khách hàng một cách dễ dàng Đồng thời, người tiêu dùng cũng có thể truy cập website để tìm kiếm và chọn mua sản phẩm mong muốn, cũng như tra cứu thông tin cần thiết về sản phẩm.

Thị trường thời trang đang trở thành một lĩnh vực tiềm năng và ngày càng quan trọng, không chỉ cho phụ nữ mà còn cho nam giới Thời trang giúp nâng cao sự tự tin, tạo niềm vui và làm cho mọi người trở nên đẹp hơn trong mắt người thân, bạn bè và đồng nghiệp Hơn nữa, thời trang đã trở thành một phần thiết yếu trong cuộc sống, có tầm quan trọng không kém gì nhu cầu cơ bản như ăn uống.

Dự án "Xây dựng hệ thống website cho cửa hàng bán quần áo" được phát triển nhằm đáp ứng nhu cầu sử dụng và phát triển của ngành thương mại điện tử trong nước, dựa trên các lý do và kiến thức đã học.

Khảo sát một số hệ thống liên quan

Shopee.vn là trang web thương mại điện tử hàng đầu tại Việt Nam, được thành lập năm 2015, mang đến trải nghiệm mua sắm trực tuyến tiện lợi và đa dạng Người dùng có thể tìm thấy hàng ngàn mặt hàng từ quần áo, phụ kiện, điện tử, đồ gia dụng đến mỹ phẩm Giao diện thân thiện giúp việc tìm kiếm và mua sắm trở nên dễ dàng Shopee.vn còn cung cấp nhiều ưu đãi hấp dẫn và chương trình giảm giá thu hút người tiêu dùng.

Shopee.vn là nền tảng mua sắm lý tưởng với đội ngũ người bán đa dạng và đáng tin cậy, cung cấp cho khách hàng 32 vụ giao dịch chuyên nghiệp Tại đây, người dùng có thể dễ dàng khám phá và mua sắm những sản phẩm yêu thích của mình.

Các giao diện chức năng chính:

Hình 2.1 Giao diện trang đăng nhập Shopee

Hình 2.2 Giao diện trang chủ Shopee

Hình 2.6 Giao diện thông báo từ trang chủ Shopee

Hình 2.7 Giao diện giỏ hàng từ trang chủ Shopee

Hình 2.8 Giao diện danh mục sản phẩm Shopee

Hình 2.9 Giao diện tìm kiếm sản phẩm Shopee

Hình 2.10 Giao diện tìm kiếm sản phẩm Shopee

Hình 2.11 Giao diện trang chi tiết sản phẩm Shopee

Hình 2.12 Giao diện trang chi tiết sản phẩm Shopee

Hình 2.13 Giao diện trang chi tiết sản phẩm Shopee (đánh giá sản phẩm)

Hình 2.14 Giao diện trang chi tiết sản phẩm Shopee (các sản phẩm liên quan)

Hình 2.15 Giao diện quản lý giỏ hàng của người dùng Shopee

Hình 2.16 Giao diện quản lý giỏ hàng của người dùng Shopee

Hình 2.17 Giao diện chọn mã giảm giá từ giỏ hàng Shopee

Hình 2.18 Giao diện trang quản lý địa chỉ giao hàng của người dùng Shopee

Hình 2.19 Giao diện tạo địa chỉ giao hàng mới của người dùng Shopee

Hình 2.20 Giao diện trang quản lý thông báo của người dùng Shopee

Hình 2.21 Giao diện trang quản lý mã giảm giá của người dùng Shopee

Hình 2.22 Giao diện trang quản lý tài khoản của người dùng Shopee

Hình 2.23 Giao diện trang đặt hàng Shopee (chọn địa chỉ giao hàng)

Hình 2.24 Giao diện trang đặt hàng Shopee

Hình 2.25 Giao diện trang đặt hàng Shopee

Hình 2.26 Giao diện trang quản lý các đơn hàng của khách hàng Shopee

Hình 2.27 Giao diện trang chi tiết đơn hàng của khách hàng Shopee

Hình 2.28 Giao diện trang chi tiết đơn hàng của khách hàng Shopee

Hình 2.29 Giao diện đánh giá sản phẩm của đơn hàng của khách hàng Shopee

47 Đánh giá về ưu, nhược điểm của Shopee:

Bảng 2.1 Đánh giá tổng quan về hệ thống của Shopee Ưu điểm Hạn chế

+ Đa dạng về loại sản phẩm

+ Có nhiều người bán (shop) và người mua trên hệ thống.

+ Tốc độ phản hồi nhanh

+ Có thể thay đổi ngôn ngữ

+ Hỗ trợ nhiều loại ưu đãi, giảm giá, flash sale

+ Hỗ trợ phiên bản web và phiên bản ứng dụng di động

+ Hỗ trợ chat trực tiếp giữa người mua và người bán

+ Chức năng gợi ý sản phẩm hiệu quả

+ Thanh toán trực tuyến, phương thức thanh toán đa dạng.

+ Hiệu năng giảm khi có lưu lượng người dùng truy cập cùng lúc lớn (các đợt có chương trình khuyến mãi giảm giá)

+ Nguồn gốc sản phẩm chưa đảm bảo hoàn toàn

+ Có nhiều phản hồi, đánh giá về sản phẩm chưa liên quan

+ Phiên bản web có chức năng hạn chế hơn so với phiên bản di động (danh sách sản phẩm yêu thích, các ưu đãi, khuyến mãi)

Canifa.com là trang web bán hàng thời trang hàng đầu tại Việt Nam, cung cấp sản phẩm thời trang chất lượng cao với thiết kế đa dạng và phong cách độc đáo Tại đây, khách hàng có thể tìm thấy bộ sưu tập phong phú bao gồm quần áo nam, nữ, trẻ em, phụ kiện và giày dép.

Canifa.com cam kết mang đến cho khách hàng sự hài lòng với chất lượng sản phẩm, dịch vụ chuyên nghiệp và chính sách đổi/trả linh hoạt

Hình 2.30 Giao diện trang chủ CANIFA

Hình 2.35 Giao diện danh mục sản phẩm của CANIFA

Hình 2.36 Giao diện tìm kiếm sản phẩm của CANIFA

Hình 2.37 Giao diện chi tiết sản phẩm của CANIFA

Hình 2.38 Giao diện chi tiết sản phẩm của CANIFA

Hình 2.39 Giao diện quản lý giỏ hàng của người dùng của CANIFA

Hình 2.40 Giao diện sử dụng mã ưu đãi của CANIFA

Hình 2.41 Giao diện trang quản lý địa chỉ giao hàng của người dùng của CANIFA

Hình 2.42 Giao diện thêm địa chỉ giao hàng của người dùng của CANIFA

Hình 2.43 Giao diện sản phẩm yêu thích của người dùng của CANIFA

Hình 2.44 Giao diện lịch sử xem sản phẩm của người dùng của CANIFA

Hình 2.45 Giao diện quản lý tài khoản của người dùng của CANIFA

Hình 2.46 Giao diện quản lý đơn hàng của người dùng của CANIFA

Hình 2.47 Giao diện đặt hàng của CANIFA

57 Đánh giá về ưu nhược điểm của CANIFA:

Bảng 2.2 Đánh giá tổng quan về hệ thống CANIFA Ưu điểm Hạn chế

+ Có blog cập nhật các thông tin mới từ cửa hàng

+ Liên kết với mạng xã hội

+ Thiết kế giao diện mượt mà, thân thiện, tiện dụng, thu hút người dùng

+ Hiệu năng phản hồi tốt, nhanh

+ Có chức năng điểm tích lũy khi mua hàng

+ Thanh toán trực tuyến, phương thức thanh toán đa dạng.

+ Không có đánh giá thực tế sản phẩm từ người dùng

Hiện tại, hệ thống chưa hỗ trợ chức năng gợi ý mã ưu đãi, khiến người dùng phải tự tay nhập mã Bên cạnh đó, chức năng tìm kiếm sản phẩm cũng khá đơn giản, thiếu các tùy chọn như khoảng giá và tiêu chí sắp xếp kết quả, điều này có thể ảnh hưởng đến trải nghiệm mua sắm của người dùng.

+ Không có chức nay thay đổi số điện thoại tài khoản.

SevenAM.vn là một trang web thương mại điện tử chuyên cung cấp quần áo thời trang nữ tại Việt Nam Sứ mệnh của chúng tôi là mang đến trải nghiệm mua sắm trực tuyến tiện lợi, giúp mọi khách hàng tiềm năng dễ dàng tiếp cận thương hiệu Seven.AM.

Seven.AM là thương hiệu thời trang công sở cao cấp tại Việt Nam, mang đến phong cách trẻ trung, thanh lịch và nữ tính cho phụ nữ hiện đại Với sứ mệnh nâng niu và trân trọng mỗi người phụ nữ, Seven.AM không ngừng phát triển và sáng tạo, cung cấp sản phẩm thời trang chất lượng cao cùng trải nghiệm mua sắm tuyệt vời cho hàng trăm nghìn khách hàng thân thiết.

Hình 2.48 Giao diện trang đăng nhập Seven.AM

Hình 2.49 Giao diện trang chủ Seven.AM

Hình 2.53 Giao diện trang bộ sưu tập Seven.AM

Hình 2.54 Giao diện trang tìm kiếm sản phẩm Seven.AM

Hình 2.55 Giao diện trang chi tiết sản phẩm Seven.AM

Hình 2.58 Giao diện thêm vào giỏ hàng Seven.AM

Hình 2.59 Giao diện trang quản lý giỏ hàng của người dùng Seven.AM

Hình 2.60 Giao diện trang quản lý địa chỉ giao hàng của người dùng Seven.AM

Hình 2.61 Giao diện trang quản lý tài khoản của người dùng Seven.AM

Hình 2.62 Giao diện trang đăng ký Seven.AM

Hình 2.63 Giao diện trang đặt hàng của Seven.AM

66 Đánh giá về ưu nhược điểm của Seven.AM:

Bảng 2.3 Đánh giá tổng quan về hệ thống Seven.AM Ưu điểm Hạn chế

+ Giao diện trang chủ và thông tin sản phẩm tiện lợi, bắt mắt

+ Có blog cập nhật các thông tin mới từ cửa hàng

+ Liên kết với mạng xã hội

+ Gợi ý sản phẩm liên quan khi nhập nội dung tìm kiếm

+ Có lọc sản phẩm theo khoảng giá.

+ Giao diện quản lý tài khoản còn đơn giản, chưa thu hút được người dùng + Không có đánh giá thực tế sản phẩm từ người dùng

+ Không có chức năng thay đổi thông tin của người dùng (Tên, email)

+ Không có chức năng điểm tích lũy/khách hàng thân thiết

+ Không có chức năng thanh toán trực tuyến (người dùng phải chuyển khoản và đợi bộ phận quản lý xác nhận).

Phân tích yêu cầu của đề tài

Xây dựng một hệ thống website thương mại điện tử cho phép khách hàng lựa chọn sản phẩm, đặt hàng, thanh toán và theo dõi đơn hàng, đồng thời cung cấp các tiện ích nâng cao trải nghiệm người dùng Hệ thống cũng bao gồm website quản trị để quản lý người dùng, sản phẩm, đơn hàng và báo cáo doanh thu Đảm bảo hoạt động ổn định, bảo mật thông tin người dùng, và logic xử lý chặt chẽ, với dữ liệu chính xác và nhất quán, tuân thủ các quy chuẩn thiết kế phần mềm và lập trình hiện đại.

2.3.1.1 Yêu cầu chức năng nghiệp vụ

Về mặt lưu trữ hệ thống sẽ lưu các thông tin chính:

Sản phẩm bao gồm các thông tin quan trọng như tên, mô tả, loại (category), hình ảnh, điểm đánh giá và lượt đánh giá chi tiết từ 1 sao đến 5 sao Giá sản phẩm được hiển thị với mức giá thấp nhất và cao nhất của các biến thể, cùng với trạng thái hàng hóa như hết hàng, hoạt động, ẩn hoặc đã xóa Ngoài ra, còn có thông tin về lượt mua, lượt xem, ngày đăng sản phẩm, và các biến thể như màu sắc, kích thước với giá trị tương ứng (ví dụ: xanh, XL,…).

+ Biến thể sản phẩm: thông tin sản phẩm, giá gốc, chiết khấu, lượt mua, số lượng tồn kho, trạng thái biến thể (hoạt động, ẩn, đã xóa)

+ Nhập kho sản phẩm: thông tin biến thể, số lượng nhập, thông tin nhân viên và thời điểm nhập kho

Đánh giá sản phẩm bao gồm các hình ảnh (nếu có), nội dung đánh giá chi tiết, và điểm đánh giá từ 1 đến 5 Thời điểm đánh giá cũng được ghi rõ, kèm theo thông tin sản phẩm trong đơn hàng để người tiêu dùng dễ dàng tham khảo.

Địa chỉ khách hàng bao gồm thông tin cấp tỉnh (thành phố), cấp huyện (quận) và cấp xã (phường, làng) Tài khoản khách hàng chứa các thông tin cá nhân như tên đăng nhập, email, điện thoại, họ tên, giới tính, ngày sinh, hình đại diện, mật khẩu, thông tin khách hàng thân thiết, địa chỉ mặc định và trạng thái tài khoản (hoạt động hoặc khóa).

Tài khoản quản lý chứa thông tin cá nhân của nhân viên, bao gồm tên đăng nhập, email, số điện thoại, họ tên, mật khẩu, vai trò và trạng thái tài khoản, cho phép xác định liệu tài khoản đang hoạt động hay đã bị khóa.

+ Vai trò quản lý: tên vai trò, danh sách quyền

+ Giỏ hàng: danh sách sản phẩm của khách hàng

+ Sản phẩm yêu thích: danh sách sản phẩm của khách hàng

+ Địa chỉ giao hàng: danh sách địa chỉ giao hàng của khách hàng

+ Lịch sử xem sản phẩm: danh sách sản phẩm khách hàng đã xem

Mã giảm giá bao gồm các thông tin quan trọng như mã, mô tả, thời gian hiệu lực và loại giảm giá (giảm theo phần trăm hoặc giá trị cố định) Ngoài ra, cần lưu ý giá trị giảm tối đa nếu áp dụng theo phần trăm, điều kiện giá trị đơn hàng tối thiểu, giới hạn số khách hàng sử dụng, số lượt sử dụng và trạng thái của mã (hoạt động hoặc ẩn).

+ Nhật ký hệ thống: nội dung, loại (thông tin hay cảnh báo), thời gian

+ Thông báo cá nhân: nội dung, tiêu đề, thông tin người dùng, thời gian và trạng thái (đã đánh dấu là đọc hay chưa)

Đơn hàng bao gồm thông tin chi tiết về sản phẩm, các biến thể, thông tin giảm giá, thời gian đặt hàng, ghi chú, phương thức thanh toán, tổng giá trị đơn hàng, phí vận chuyển, tổng tiền sau khi tính phí và giảm giá, cũng như thông tin khách hàng, địa chỉ giao hàng và trạng thái đơn hàng trong quy trình xử lý.

+ Tài nguyên phương tiện: thông tin tài nguyên trên cloud

+ Mỗi sản phẩm trong hệ thống có một hay nhiều biến thể hay phân loại (variation) khác với loại sản phẩm (category)

Hệ thống có thể gợi ý sản phẩm cho người dùng thông qua dữ liệu người dùng thu thập được

Hệ thống có khả năng ẩn các loại sản phẩm, sản phẩm và biến thể của sản phẩm Khi đó, khách hàng trong hệ thống mua sắm sẽ không thể xem toàn bộ các sản phẩm thuộc loại đó, không thể xem chi tiết sản phẩm và không thể đặt hàng các biến thể của sản phẩm.

Khi đăng nhập vào hệ thống có thể dùng email hoặc số điện thoại (nếu có) thay cho tên đăng nhập

Mỗi khách hàng chỉ áp dụng được mã giảm giá một lần cho một đơn hàng

Hệ thống bao gồm các vai trò quản lý và nhân viên, trong đó nhân viên có vai trò phụ thuộc vào quản lý với quyền hạn hạn chế, chỉ thực hiện những nghiệp vụ nhất định được chỉ định Ngoài ra, hệ thống cũng phục vụ khách hàng, bao gồm cả những khách hàng chưa đăng nhập.

+ Vai trò quản lý sẽ sử dụng hệ thống quản lý

+ Vai trò khách hàng sẽ sử dụng hệ thống khách hàng (hệ thống người mua hàng)

Yêu cầu chức năng đối với vai trò quản lý:

+ Quản lý người dùng: Xem, tra cứu, tạo, cập nhật người dùng

+ Quản lý phân quyền: Xem, tra cứu, tạo, cập nhật vai trò và phân quyền của người dùng hệ thống

+ Quản lý nhật ký hệ thống: Xem, tra cứu nhật ký hoạt động của hệ thống + Quản lý đơn hàng: Xem, tra cứu, cập nhật trạng thái đơn hàng

+ Quản lý nhóm sản phẩm: Xem, tra cứu, tạo, cập nhật nhóm sản phẩm

Quản lý sản phẩm bao gồm việc xem, tra cứu, tạo mới, cập nhật và xóa sản phẩm Ngoài ra, người dùng có thể cập nhật và xóa các lựa chọn sản phẩm, cũng như tạo, cập nhật và xóa các biến thể sản phẩm Hệ thống cũng cho phép tạo và xóa hình ảnh sản phẩm một cách dễ dàng.

+ Quản lý nhập kho sản phẩm: Xem, tra cứu, tạo nhập kho sản phẩm

+ Quản lý thứ hạng khách hàng: Xem, cập nhật thứ hạng khách hàng

+ Quản lý khách hàng: Xem, tra cứu, cập nhật khách hàng

+ Quản lý mã giảm giá: Xem, tra cứu, tạo, cập nhật, xóa mã giảm giá

+ Báo cáo thống kê: Xem báo cáo thống kê về doanh thu/sản phẩm/đơn hàng/người mua theo khoảng thời gian chỉ định

+ Quản lý thông báo cá nhân: Xem, đánh dấu đã xem các thông báo cá nhân Yêu cầu chức năng đối với vai trò khách hàng đã đăng nhập:

+ Quản lý tài khoản: Xem, cập nhật thông tin cá nhân, xác thực số điện thoại, email

+ Quản lý đơn hàng: Xem, tra cứu, cập nhật đơn hàng cá nhân, đánh giá các biến thể sản phẩm của đơn hàng

Quản lý địa chỉ giao hàng cho phép người dùng xem, tra cứu, cập nhật và xóa địa chỉ một cách dễ dàng Bên cạnh đó, người dùng có thể quản lý sản phẩm yêu thích bằng cách xem, tra cứu, thêm hoặc xóa các sản phẩm mà họ yêu thích Hệ thống cũng hỗ trợ quản lý thông báo cá nhân, cho phép người dùng xem và đánh dấu đã đọc các thông báo quan trọng Cuối cùng, người dùng có thể xem danh sách nhóm sản phẩm cùng với các sản phẩm thuộc các nhóm đó, giúp việc tìm kiếm trở nên thuận tiện hơn.

+ Xem chi tiết, lọc (giá, đánh giá,…), tra cứu (từ khóa, hình ảnh) sản phẩm + Xem, thêm/xóa sản phẩm, cập nhật số lượng sản phẩm trong giỏ hàng

+ Xem lịch sử các sản phẩm đã xem

+ Xem lịch sử tìm kiếm sản phẩm

+ Xem danh sách các mã giảm giá khả dụng

+ Trò chuyện với trợ lý ảo về các thông tin liên quan đến website

+ Thanh toán đơn hàng: o Thanh toán khi nhận hàng (COD) o Thanh toán online (MoMo, PayPal) Đối vai trò khách hàng chưa đăng nhập:

+ Xem danh sách nhóm sản phẩm và các sản phẩm thuộc các nhóm đó

+ Xem chi tiết, lọc (giá, đánh giá,…), tra cứu (từ khóa, hình ảnh) sản phẩm + Xem lịch sử các sản phẩm đã xem

+ Trò chuyện với trợ lý ảo về các thông tin liên quan đến website

+ Trải nghiệm những thông tin trên trang web

2.3.1.2 Yêu cầu chức năng hệ thống

Ngoài các chức năng cơ bản cần có của một hệ thống website thương mại điện tử, hệ thống còn cung cấp các chức năng đặc trưng sau:

Bảng 2.4 Mô tả yêu cầu chức năng của hệ thống

Mô tả chi tiết Ghi chú

Hệ thống đảm bảo chỉ người dùng đã xác thực mới có thể truy cập vào các chức năng và tài nguyên của hệ thống

Hệ thống cung cấp các chức năng để thêm, xem, sửa, và xóa các dữ liệu trong hệ thống

Quản trị viên (Admin) có quyền truy cập đầy đủ vào tất cả các chức năng của hệ thống quản lý, bao gồm khả năng tạo ra các vai trò mới bên cạnh Nhân viên và Shipper Họ cũng có trách nhiệm quản lý quyền hạn của các vai trò này, đảm bảo sự phân chia nhiệm vụ và quyền lực hợp lý trong tổ chức.

Nhân viên Sale-admin là một vai trò phụ thuộc vào Admin, với quyền hạn bao gồm việc xem danh sách khách hàng, theo dõi và cập nhật trạng thái đơn hàng, cũng như truy cập vào danh sách sản phẩm và mã giảm giá.

• Nguời giao hàng (Shipper): là vai trò con của Admin, mặc định có quyền xem danh sách, cập nhật trạng thái giao hàng các đơn hàng cần vận chuyển

• Hệ thống có nhiều tài khoản thuộc các vai trò mặc định: Quản trị viên, Nhân viên, Shipper, Khách hàng

• Ngoài các vai trò mặc định, Quản trị viên có thể tạo thêm vai trò cũng như cập nhật quyền của vai trò ở hệ thống quản lý

• Khách hàng: Được quyền sử dụng các chức năng tùy vào trạng thái đăng nhập của hệ thống người mua hàng

Quản lý các file phương tiện

Các file phương tiện, bao gồm hình ảnh và video, sẽ được kiểm tra tính chính xác trước khi được lưu trữ trong hệ thống Sau đó, hệ thống sử dụng dịch vụ Cloudinary để quản lý và lưu trữ các file này.

Khi có sự cố xảy ra trong các chức năng liên quan đến việc tải lên file phương tiện, hệ thống sẽ tự động xóa các file đã được tải lên trước đó khi thực hiện rollback.

Chức năng xóa tài nguyên

MÔ HÌNH HÓA YÊU CẦU

Lược đồ Usecase

Hình 3.1 Lược đồ Usecase của hệ thống

Đặc tả Usecase

Bảng 3.1 Đặc tả usecase Quản lý giỏ hàng

Tên Usecase Quản lý giỏ hàng

Usecase này cho phép khách hàng thêm, xóa, thay đổi số lượng sản phẩm trong giỏ hàng của mình

Tiền điều kiện Đăng nhập thành công vào hệ thống khách hàng

Thông báo khi sản phẩm được thêm vào giỏ hàng thành công Các thay đổi được lưu vào hệ thống

1 Khách hàng truy cập vào trang Giỏ hàng

2 Khách hàng chọn sản phẩm cần thay đổi số lượng

3 Hệ thống hiển thị số lượng hiện tại của sản phẩm trong giỏ hàng

4 Khách hàng chỉnh sửa số lượng sản phẩm

5 Hệ thống kiểm tra thông tin và số lượng hợp lệ

6 Hệ thống lưu thay đổi và thông báo thao tác thành công

1a Khách hàng truy cập trang Chi tiết sản phẩm

2a Khách hàng nhập số lượng và chọn Thêm vào giỏ hàng

2b Khách hàng chọn sản phẩm cần xóa khỏi giỏ hàng và chọn

3b Hệ thống hiển thị thông báo xác nhận xóa sản phẩm khỏi giỏ hàng

4b Khách hàng xác nhận xóa

5c Số lượng sản phẩm không phải số nguyên dương hoặc vượt quá số lượng tồn kho, thông báo lỗi, Usecase dừng lại

4b1 Khách hàng không xác nhận xóa, Usecase dừng lại

Bảng 3.2 Đặc tả usecase Quản lý địa chỉ hàng

Tên Usecase Quản lý địa chỉ giao hàng

Usecase này cho phép khách hàng thêm, sửa, xóa địa chỉ nhận hàng

+ Thông báo thao tác thành công

+ Các thay đổi được lưu vào hệ thống

1 Khách hàng chọn chức năng Quản lý địa chỉ

2 Hệ thống hiển thị danh sách địa chỉ của khách hàng

4 Hệ thống hiển thị form nhập thông tin địa chỉ mới

5 Khách hàng nhập thông tin địa chỉ và chọn Lưu

6 Hệ thống kiểm tra thông tin hợp lệ

7 Hệ thống lưu thông tin và thông báo Thao tác thành công

3a Khách hàng chọn địa chỉ cần sửa và chọn Sửa

4a Hệ thống hiển thị form cập nhật thông tin địa chỉ

3a Khách hàng chọn địa chỉ cần xóa và chọn Xóa

4a Hệ thống hiển thị thông báo xác nhận xóa

4a1 Khách hàng xác nhận xóa

4a2 Hệ thống xóa địa chỉ và thông báo Xóa thành công

5a Hệ thống kiểm tra thông tin không hợp lệ, Usecase dừng lại 4a1a Khách hàng không xác nhận xóa, Usecase dừng lại

Bảng 3.3 Đặc tả usecase Đăng nhập

Mô tả Usecase Usecase này cho phép người dùng đăng nhập vào hệ thống

Actor chính Admin, Sale admin, Shipper, Buyer

Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý đối với admin và hệ thống người mua với khách hàng

Hậu điều kiện Đăng nhập thành công

1 Người dùng truy cập vào trang đăng nhập

2 Hệ thống hiển thị form đăng nhập

3 Người dùng nhập thông tin tên người dùng và mật khẩu

5 Hệ thống đăng nhập cho người dùng thành công

3a Khách hàng chọn “Đăng nhập với Google”

3a1 Hệ thống chuyển sang trang đăng nhập Google

3a2 Khách hàng đăng nhập tài khoản Google

3a3 Google gửi thông tin đăng nhập thành công về hệ thống Tiếp tục bước 4, 5

4a Hệ thống kiểm tra thông tin không hợp lệ, Usecase kết thúc 3a3a Đăng nhập Google thất bại, Usecase kết thúc

Bảng 3.4 Đặc tả usecase Quản lý sản phẩm

Tên Usecase Quản lý sản phẩm

Usecase này cho phép Admin thực hiện thao tác thêm, cập nhật thông tin sản phẩm và vô hiệu hóa, kích hoạt sản phẩm trong hệ thống

Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý và có quyền truy cập chức năng này

+ Thông báo thao tác thực hiện thành công

1 Admin chọn chức năng Quản lý sản phẩm

2 Hệ thống hiển thị danh sách tất cả các sản phẩm

4 Hệ thống hiện form để Admin điền thông tin tạo mới sản phẩm

5 Admin nhập thông tin sau đó chọn Tạo

7 Hệ thống lưu thông tin sản phẩm vào thông báo Thao tác thành công

3a Admin chọn sản phẩm cần cập nhật thông tin và chọn Sửa 4a Hệ thống hiện form để Admin điền thông tin cập nhật sản phẩm

5a Admin sửa thông tin sản phẩm sau đó chọn Lưu

Tiếp tục thực hiện bước 6 và bước 7

3b Admin chọn sản phẩm cần vô hiệu hóa và chọn Vô hiệu hóa Tiếp tục thực hiện bước 7

3c Admin chọn sản phẩm cần kích hoạt và chọn Hủy vô hiệu hóa Tiếp tục thực hiện bước 7

Luồng ngoại lệ 6a Hệ thống kiểm tra các thông tin nhập vào không hợp lệ

7a Thông báo lỗi Thông tin sản phẩm không hợp lệ, Usecase dừng lại

Bảng 3.5 Đặc tả usecase Quản lý nhóm sản phẩm

Tên Usecase Quản lý nhóm sản phẩm

Usecase này cho phép Admin thực hiện thao tác thêm/sửa đổi thông tin nhóm sản phẩm và vô hiệu hóa, kích hoạt nhóm sản phẩm trong hệ thống

1 Admin chọn chức năng Quản lý nhóm sản phẩm

2 Hệ thống hiển thị danh sách tất cả các nhóm sản phẩm

4 Hệ thống hiện form để Admin điền thông tin tạo mới nhóm sản phẩm

5 Admin nhập thông tin sau đó chọn Tạo

7 Hệ thống lưu thông tin nhóm sản phẩm và thông báo Thao tác thành công

3a Admin chọn nhóm sản phẩm cần cập nhật thông tin và chọn Sửa

4a Hệ thống hiện form để Admin điền thông tin cập nhật nhóm sản phẩm

5a Admin sửa thông tin nhóm sản phẩm sau đó chọn Lưu

Tiếp tục thực hiện bước 6,7

3b Admin chọn nhóm sản phẩm cần vô hiệu hóa và chọn Vô hiệu hóa

Tiếp tục thực hiện bước 7

3c Admin chọn nhóm sản phẩm cần kích hoạt và chọn Hủy vô hiệu hóa

6a Hệ thống kiểm tra các thông tin nhập vào không hợp lệ 7a Thông báo lỗi Thông tin nhóm sản phẩm không hợp lệ, Usecase dừng lại

Bảng 3.6 Đặc tả usecase Quản lý người dùng

Tên Usecase Quản lý người dùng

Usecase này cho phép Admin xem danh sách, tạo và cập nhật thông tin và vai trò người dùng trong hệ thống quản lý

Hậu điều kiện Nhận được danh sách người dùng của hệ thống quản lý

1 Admin chọn chức năng Quản lý người dùng

2 Hệ thống hiển thị danh sách tất cả các người dùng của hệ thống quản lý

3 Admin chọn người dùng cần cập nhật và chọn Cập nhật

4 Hệ thống hiện form để Admin điền thông tin cập nhật người dùng

5 Admin sửa thông tin sau đó chọn Lưu

7 Hệ thống lưu thông tin và thông báo Thao tác thành công

3a Admin chọn Tạo người dùng mới

4a Hệ thống hiện form điền thông tin tạo người dùng mới

5a Admin nhập thông tin và chọn Tạo

3b Admin chọn người dùng cần vô hiệu hóa và chọn Vô hiệu hóa 4b Hệ thống hiện thông báo xác nhận thực hiện thao tác

5b Admin xác nhận thao tác

6b Hệ thống vô hiệu hóa người dùng Admin đã chọn và thông báo Thao tác thành công

Luồng ngoại lệ 5b1 Admin hủy không xác nhận thao tác, Usecase dừng lại

Bảng 3.7 Đặc tả usecase Quản lý khách hàng

Tên Usecase Quản lý khách hàng

Usecase này cho phép Admin thực hiện thao tác vô hiệu hóa, kích hoạt tài khoản khách hàng trong hệ thống khách hàng

Tiền điều kiện Đăng nhập thành công vào hệ thống quản lý với vai trò Admin Hậu điều kiện

1 Admin chọn chức năng Quản lý khách hàng

2 Hệ thống hiển thị danh sách tất cả các khách hàng của hệ thống khách hàng

3 Admin chọn khách hàng cần vô hiệu hóa và chọn Vô hiệu hóa

4 Hệ thống hiện thông báo xác nhận thực hiện thao tác

5 Admin xác nhận thao tác

6 Hệ thống vô hiệu hóa khách hàng mà Admin đã chọn và thông báo Thao tác thành công

3a Admin chọn khách hàng cần kích hoạt và chọn Hủy vô hiệu hóa

Tiếp tục thực hiện bước 4 và bước 5

6a Hệ thống kích hoạt khách hàng Admin đã chọn và thông báo Thao tác thành công

Luồng ngoại lệ 5b Admin hủy không xác nhận thao tác, Usecase dừng lại

Bảng 3.8 Đặc tả usecase Quản lý vai trò và phân quyền

Tên Usecase Quản lý vai trò và phân quyền

Usecase này cho phép Admin thêm vai trò mới và cấp quyền cho người dùng như Sale admin, Shipper và các vai trò khác trong hệ thống quản lý.

1 Admin chọn chức năng Quản lý vai trò và phân quyền

2 Hệ thống hiển thị danh sách tất cả các vai trò trong hệ thống

3 Admin chọn Tạo vai trò

4 Hệ thống hiện form điền thông tin Vai trò mới (bao gồm danh sách các quyền của vai trò)

5 Admin điền thông tin và chọn Tạo

7 Hệ thống lưu thay đổi và thông báo Thao tác thành công

3a Admin chọn vai trò cần cập nhật và chọn Sửa

4a Hệ thống hiện form điền thông tin chỉnh sửa (bao gồm danh sách các quyền của vai trò)

5a Admin điền thông tin và chọn Lưu

Luồng ngoại lệ Không có

Bảng 3.9 Đặc tả usecase Quản lý nhật ký hệ thống

Tên Usecase Quản lý nhật ký hệ thống

Usecase này cho phép Admin thực hiện thao tác xem, tìm kiếm nhật ký hoạt động của hệ thống quản lý

+ Nhận được danh sách nhật ký hệ thống

1 Admin chọn chức năng Quản lý nhật ký hệ thống

2 Hệ thống hiển thị danh sách nhật ký hệ thống

4 Hệ thống hiện form để Admin nhập thông tin cần tìm kiếm

5 Admin nhập thông tin tìm kiếm và chọn Tìm

6 Hệ thống hiển thị danh sách nhật ký hệ thống theo điều kiện tìm kiếm

Luồng thay thế Không có

Bảng 3.10 Đặc tả usecase Đăng ký

Usecase này cho phép khách hàng (Buyer) đăng ký tài khoản trên hệ thống khách hàng Actor chính Buyer

Tiền điều kiện Không có

+ Tài khoản được tạo trên hệ thống người mua

+ Thông báo đăng ký thành công

1 Khách hàng truy cập vào trang đăng ký tài khoản

2 Hệ thống hiển thị form đăng ký tài khoản

3 Người dùng nhập thông tin đăng ký tài khoản và chọn Đăng ký

5 Hệ thống tiến hành tạo tài khoản cho khách hàng thông báo Tạo tài khoản thành công

3a Người dùng chọn Đăng ký với tài khoản Google

3a1 Hệ thống chuyển sang màn hình đăng nhập Google

3a2 Khách hàng nhập thông tin đăng nhập Google và chọn Đăng nhập

3a3 Khách hàng xác nhận với Google đăng ký tài khoản bằng tài khoản Google

4b Hệ thống kiểm tra thông tin không hợp lệ, Usecase dừng lại

3a3c Khách hàng không xác nhận với Google đăng ký tài khoản bằng tài khoản Google, Usecase dừng lại

Bảng 3.11 Đặc tả usecase Quản lý tài khoản và thông tin cá nhân

Tên Usecase Quản lý tài khoản và thông tin cá nhân

Usecase này cho phép khách hàng (Buyer) cập nhật thông tin tài khoản và thay đổi thông tin cá nhân

+ Các thay đổi được lưu thành công vào hệ thống

+ Thông báo thay đổi thành công

1 Khách hàng truy cập vào trang Quản lý tài khoản

2 Hệ thống hiển thị form thông tin tài khoản

3 Người dùng chỉnh sửa thông tin tài khoản và chọn Lưu

5 Hệ thống lưu thay đổi và thông báo thành công

3a Người dùng thay đổi email, số điện thoại

4a Hệ thống kiểm tra thông tin hợp lệ

4a1 Hệ thống gửi mã xác nhận về số điện thoại nếu thay đổi email và ngược lại

4a2 Hệ thống yêu cầu nhập mã xác nhận

4a3 Người dùng nhập mã xác nhận

4a4 Hệ thống kiểm tra mã xác nhận hợp lệ

4b Hệ thống kiểm tra thông tin không hợp lệ, Usecase dừng lại

4a4a Hệ thống kiểm tra mã xác nhận không hợp lệ, Usecase dừng lại

Bảng 3.12 Đặc tả usecase Quên mật khẩu

Tên Usecase Quên mật khẩu

Usecase này cho phép khách hàng (Buyer) cập nhật mật khẩu mới khi quên mật khẩu cũ

+ Hệ thống cập nhật mật khẩu mới

+ Khách hàng có thể sử dụng mật khẩu mới để đăng nhập

+ Thông báo cập nhật mật khẩu thành công

1 Khách hàng truy cập vào trang Đặt lại mật khẩu

2 Hệ thống hiển thị form nhập thông tin email/số điện thoại tài khoản

3 Người dùng nhập thông tin email/số điện thoại và chọn Đặt lại mật khẩu

5 Hệ thống gửi mã xác nhận (OTP) về email/số điện thoại đã nhập

6 Hệ thống hiển thị form nhập mật khẩu mới và mã xác nhận

7 Người dùng nhập mật khẩu mới, mã xác nhận và chọn Đặt lại mật khẩu

9 Hệ thống cập nhật mật khẩu mới cho tài khoản và thông báo Đặt lại mật khẩu thành công

4a Hệ thống kiểm tra thông tin không hợp lệ, Usecase dừng lại 8a Hệ thống kiểm tra thông tin không hợp lệ, Usecase dừng lại

Bảng 3.13 Đặc tả usecase Hủy đơn hàng

Tên Usecase Hủy đơn hàng

Usecase này cho phép khách hàng (Buyer) hủy đơn hàng đang xử lý Actor chính Buyer

Actor phụ Cổng thanh toán

+ Đăng nhập thành công vào hệ thống người mua

+ Đơn hàng đang trong trại thái ‘Chờ thanh toán’, ‘Chờ xác nhận’ hay ‘Chờ gửi hàng’

+ Đơn hàng bị hủy được lưu thành công vào hệ thống

+ Thông báo hủy đơn hàng thành công

1 Khách hàng chọn chức năng Quản lý đơn hàng

2 Khách hàng chọn đơn hàng cần hủy và chọn Hủy đơn hàng

3 Hệ thống hiện thông báo xác nhận thực hiện hủy

4 Khách hàng xác nhận hủy

6 Hệ thống hủy và hoàn tiền (nếu có) đơn hàng đã chọn và thông báo Hủy đơn hàng thành công

4a Khách hàng hủy không xác nhận thao tác, Usecase dừng lại

5b Hệ thống kiểm tra thông tin không hợp lệ (đơn hàng không thể hủy do đã gửi hàng, đang giao hàng,…), Usecase dừng lại

6c Hoàn tiền thất bại, Usecase dừng lại

Bảng 3.14 Đặc tả usecase Thanh toán đơn hàng

Tên Usecase Thanh toán đơn hàng

Mô tả Usecase Usecase này cho phép khách hàng (Buyer) thanh toán đơn hàng Actor chính Buyer

+ Đơn hàng đang trong trại thái ‘Chờ thanh toán’

+ Trạng thái đơn hàng chuyển sang ‘Chờ xác nhận’

+ Thông báo thanh toán đơn hàng thành công

1 Khách hàng truy cập vào trang Quản lý đơn hàng

2 Khách hàng chọn đơn hàng cần thanh toán và chọn Thanh toán đơn hàng

3 Hệ thống hiển thị form chọn phương thức thanh toán

4 Khách hàng chọn phương thức thanh toán và chọn Thanh toán

5 Hệ thống tiến hành thực hiện thanh toán theo phương thức thanh toán đã chọn

6 Hệ thống ghi nhận thanh toán

7 Hệ thống chuyển trạng thái đơn hàng sang ‘Chờ xác nhận’ và thông báo Thanh toán thành công

Luồng ngoại lệ 5a Thanh toán thất bại, Usecase dừng lại

Bảng 3.15 Đặc tả usecase Thanh toán trực tuyến

Tên Usecase Thanh toán trực tuyến

Usecase này cho phép khách hàng (Buyer) thanh toán trực tuyến ngay khi đặt hàng

Actor phụ Cổng thanh toán online

+ Đơn hàng có phương thức thanh toán online và trạng thái đơn hàng là ‘Chờ thanh toán’

+ Hệ thống ghi nhận thanh toán thành công

+ Thông báo thanh toán thành công

1 Khách hàng chọn cổng thanh toán online mà hệ thống hỗ trợ

2 Hệ thống chuyển sang cổng thanh toán online đã chọn

3 Khách hàng làm theo hướng dẫn mà cổng thanh toán yêu cầu

4 Cổng thanh toán trả kết quả thanh toán thành công về hệ thống

5 Hệ thống ghi nhận thanh toán thành công

4a Cổng thanh toán trả kết quả thanh toán thất bại về hệ thống, Usecase dừng lại

Bảng 3.16 Đặc tả usecase Quản lý thứ hạng khách hàng

Tên Usecase Quản lý thứ hạng khách hàng

Usecase này cho phép Admin thực hiện thao tác xem, và cập nhật hạn mức của các thứ hạng khách hàng trong hệ thống

1 Admin chọn chức năng Quản lý thứ hạng khách hàng

2 Hệ thống hiển thị danh sách thứ hạng khách hàng

3 Admin chọn thứ hạng cần cập nhật và chọn Sửa

4 Hệ thống hiện form điền thông tin cập nhật

5 Admin nhập thông tin cập nhật và chọn Cập nhật

6 Hệ thống kiểm tra thông tin cập nhật hợp lệ

7 Hệ thống lưu các thay đổi và thông báo Thao tác thành công Luồng thay thế Không có

6a Hệ thống kiểm tra thông tin cập nhật không hợp lệ

7a Thông báo lỗi, Usecase dừng lại

Bảng 3.17 Đặc tả usecase Báo cáo thống kê

Tên Usecase Báo cáo thống kê

Usecase này cho phép Admin xem thống kê báo cáo doanh thu, sản phẩm, khách hàng, đơn hàng, của toàn hệ thống và xuất file báo cáo

Hậu điều kiện Dữ liệu báo cáo thống kê

1 Admin chọn chức năng báo cáo thống kê

2 Hệ thống hiển thị form điền thông tin để thực hiện báo cáo thống kê (khoảng thời gian, báo cáo theo quý/tháng)

3 Admin điền thông tin báo cáo thống kê và chọn Lập báo cáo thống kê

5 Hệ thống trả về kết quả báo cáo thống kê theo yêu cầu

6 Admin chọn Xuất file báo cáo

7 Hệ thống trả về dữ liệu file báo cáo

4a Hệ thống kiểm tra thông tin không hợp lệ

Bảng 3.18 Đặc tả usecase Quản lý đơn hàng hệ thống

Tên Usecase Quản lý đơn hàng hệ thống

Usecase này cho phép Admin thực hiện xem, tìm kiếm (lọc) danh sách và cập nhật trạng thái xử lý của đơn hàng

+ Các thay đổi được lưu xuống hệ thống

1 Admin chọn chức năng Quản lý đơn hàng

2 Hệ thống hiển thị danh sách đơn hàng trên hệ thống

3 Admin chọn Xác nhận đơn hàng để xác nhận đơn hàng

5 Hệ thống lưu thay đổi, thông báo thành công, thông báo cho khách hàng về cập nhật mới của đơn hàng

3a Admin chọn Hủy đơn hàng để hủy đơn hàng Tiếp tục thực hiện bước 4

5a Hệ thống thực hiện hủy đơn hàng và hoàn tiền (nếu đã thanh toán online thành công), thông báo Thao tác thành công

4b Hệ thống hiện form nhập thông tin cần tìm kiếm

5b Admin nhập thông tin tìm kiếm và chọn Tìm

6b Hệ thống hiển thị danh sách đơn hàng theo điều kiện tìm kiếm

4c Hệ thống kiểm tra thông tin thay đổi không hợp lệ

5c Thông báo lỗi, Usecase dừng lại

5a1 Hoàn tiền thất bại, thông báo lỗi, Usecase dừng lại

Bảng 3.19 Đặc tả usecase Xem danh sách sản phẩm

Tên Usecase Xem danh sách sản phẩm

Usecase này cho phép khách hàng thực hiện xem, tìm kiếm (lọc) các sản phẩm khả dụng trên hệ thống

Hậu điều kiện Danh sách sản phẩm

1 Khách hàng lựa chọn các mục sản phẩm có trên hệ thống

2 Hệ thống hiển thị danh sách sản phẩm theo lựa chọn

3 Khách hàng chọn Tìm kiếm

4 Hệ thống hiện form nhập thông tin, điều kiện cần tìm kiếm

5 Khách hàng nhập thông tin và chọn Tìm

6 Hệ thống hiển thị danh sách sản phẩm thỏa mãn điều kiện tìm kiếm

Bảng 3.20 Đặc tả usecase Quản lý sản phẩm yêu thích

Tên Usecase Quản lý sản phẩm yêu thích

Usecase này cho phép khách hàng thực hiện xem danh sách, thêm, xóa các sản phẩm yêu thích của mình

Tiền điều kiện Đăng nhập thành công vào hệ thống người mua

+ Danh sách sản phẩm yêu thích của khách hàng

+ Thay đổi lưu thành công vào hệ thống

1 Khách hàng chọn chức năng Quản lý sản phẩm yêu thích

2 Hệ thống hiển thị danh sách sản phẩm yêu thích của khách hàng

3 Khách hàng chọn sản phẩm cần xóa và chọn Xóa

4 Hệ thống hiện thông báo xác nhận xóa

5 Khách hàng xác nhận xóa

7 Hệ thống lưu thay đổi và thông báo thao tác thành công

1a Khách hàng chọn sản phẩm cần thêm vào danh sách yêu thích 2a Hệ thống hiện thông tin chi tiết sản phẩm

3a Khách hàng chọn Yêu thích sản phẩm

Tiếp tục thực hiện bước 6, 7

6b Hệ thống kiểm tra thông tin không hợp lệ

7b Thông báo lỗi, Usecase dừng lại

Bảng 3.21 Đặc tả usecase Đặt hàng

Mô tả Usecase Usecase này cho phép khách hàng tạo đơn hàng (đặt hàng)

+ Có địa chỉ nhận hàng

+ Đã xác thực số điện thoại

+ Có sản phẩm cần mua trong giỏ hàng

+ Lưu thành công các thay đổi

1 Khách hàng chọn Giỏ hàng và chọn các sản phẩm cần mua và chọn Đặt hàng

2 Hệ thống hiện form điền thông tin đơn hàng (địa chỉ giao hàng, phương thức thanh toán, ghi chú,…)

3 Khách hàng điền thông tin đơn hàng (thanh toán khi nhận hàng) và chọn Đặt hàng

5 Hệ thống lưu thông tin và thông báo Đặt hàng thành công

3a Khách hàng điền thông tin đơn hàng (thanh toán trực tuyến) và chọn Đặt hàng

5a Hệ thống lưu thông tin đặt hàng

5a1 Hệ thống chuyển sang cổng thanh toán trực tuyến

5a2 Khách hàng tiến hành thanh toán với cổng thanh toán

5a3 Hệ thống nhận kết quả thanh toán thành công

5a4 Hệ thống thông báo Thanh toán thành công

5a3a Hệ thống nhận kết quả thanh toán thất bại

5a4a Hệ thống thông báo Thanh toán thất bại, ghi nhận trạng thái đơn hàng là ‘Chờ thanh toán’

Bảng 3.22 Đặc tả usecase Quản lý nhập kho

Tên Usecase Quản lý nhập kho

Usecase này cho phép Admin xem thông tin lịch sử nhập kho, nhập số lượng sản phẩm vào kho Actor chính Admin

+ Danh sách thông tin lịch sử nhập kho

+ Lưu thành công các thay đổi vào hệ thống

1 Admin chọn chức năng Quản lý nhập kho

2 Hệ thống hiển thị danh sách thông tin lịch sử nhập kho

3 Admin chọn Nhập kho sản phẩm

4 Hệ thống hiển thị form điền thông tin nhập kho

5 Admin điền thông tin và chọn Lưu

7 Hệ thống thông báo Thao tác thành công và lưu thay đổi

Luồng thay thế 3a Admin không chọn Nhập kho sản phẩm, Usecase kết thúc Luồng ngoại lệ

6b Hệ thống kiểm tra thông tin nhập kho không hợp lệ

Bảng 3.23 Đặc tả usecase Quản lý trạng thái giao hàng của đơn hàng hệ thống

Tên Usecase Quản lý trạng thái giao hàng của đơn hàng hệ thống

Usecase này cho phép Shipper xem danh sách đơn hàng chờ giao, xác nhận đã giao hàng

+ Danh sách đơn hàng cần giao

+ Thông báo thao tác thành công + Các thay đổi (nếu có) được lưu thành công

1 Shipper vào trang Quản lý giao hàng

2 Hệ thống hiển thị danh sách đơn cần giao hàng

3 Shipper chọn đơn hàng cần cập nhật trạng thái giao hàng

4 Hệ thống hiển thị form điền trạng thái giao hàng mới

5 Shipper điền thông tin và chọn Cập nhật

7 Hệ thống lưu thay đổi, thông báo Thao tác thành công và thông báo cho khách hàng về cập nhật giao hàng của đơn hàng

6b Hệ thống kiểm tra thông tin cập nhật không hợp lệ

Bảng 3.24 Đặc tả usecase Quản lý mã giảm giá

Tên Usecase Quản lý mã giảm giá

Usecase này cho phép Admin quản lý mã giảm giá trong hệ thống bằng cách xem danh sách, tìm kiếm và lọc mã, cũng như tạo mới và cập nhật thông tin, bao gồm trạng thái kích hoạt hoặc vô hiệu hóa.

+ Danh sách mã giảm giá

+ Các thay đổi (nếu có) được lưu thành công

1 Admin chọn chức năng Quản lý mã giảm giá

2 Hệ thống hiện danh sách mã giảm giá

4 Hệ thống hiện form nhập thông tin mã giảm giá mới

5 Admin nhập thông tin và chọn Tạo

Luồng thay thế 3a Admin chọn mã giảm giá cần cập nhật và chọn Sửa

4a Hệ thống hiện form nhập thông tin cập nhật

5a Admin nhập thông tin và chọn Lưu

3b Admin chọn tìm kiếm (lọc)

4b Hệ thống hiện form điền thông tin cần tìm kiếm

5a Admin nhập thông tin và chọn Tìm

6a Hệ thống kiểm tra thông tin hợp lệ

7a Hệ thống trả về danh sách mã giảm giá thỏa điều kiện tìm kiếm Luồng ngoại lệ

Bảng 3.25 Đặc tả usecase Xem thông báo cá nhân

Tên Usecase Xem thông báo cá nhân

Usecase này cho phép khách hàng xem, đánh dấu đã đọc các thông báo về cập nhật đơn hàng của mình

+ Danh sách thông báo của khách hàng

+ Các thay đổi (nếu có) được lưu thành công

1 Khách hàng chọn chức năng Quản lý thông báo

2 Hệ thống hiện danh sách thông báo mới nhất

3 Khách hàng chọn Đánh dấu tất cả đã đọc

Bảng 3.26 Đặc tả usecase Đánh giá và nhận xét sản phẩm

Tên Usecase Đánh giá và nhận xét sản phẩm

Usecase này cho phép khách hàng để lại đánh giá, nhận xét về sản phẩm trong đơn hàng ở trạng thái ‘Giao hàng thành công’

Tiền điều kiện Đăng nhập thành công vào hệ thống người mua Đơn hàng ở trạng thái ‘Giao hàng thành công’ cần đánh giá Hậu điều kiện

Thông báo thao tác thành công

Các thay đổi (nếu có) được lưu thành công

2 Hệ thống hiện danh sách đơn hàng của khách hàng

3 Khách hàng chọn đơn hàng cần đánh giá, nhận xét

4 Hệ thống hiện form nhập thông tin đánh giá cho từng sản phẩm trong đơn hàng (gồm cả hình ảnh thực tế từ người mua)

5 Khách hàng nhập thông tin nhận xét, đánh giá và chọn Gửi đánh giá

Bảng 3.27 Đặc tả usecase Trò chuyện với Chatbot

Tên Usecase Trò chuyện với Chatbot

Usecase này cho phép khách hàng tương tác qua văn bản với trợ lý ảo để giải đáp các câu hỏi thường gặp và các vấn đề liên quan đến nghiệp vụ của hệ thống, bao gồm chính sách giao hàng và hoàn tiền.

Hậu điều kiện Nhận được phản hồi từ câu hỏi đã đưa ra

1 Khách hàng chọn chức năng Chatbot

2 Hệ thống hiện giao diện trò chuyện với Chatbot

3 Khách hàng nhập câu hỏi ở giao diện trò chuyện và chọn Gửi

4 Hệ thống xử lý và đưa ra câu trả lời phù hợp với câu hỏi đã đặt ra

Bảng 3.28 Đặc tả usecase Tìm kiếm bằng hình ảnh

Tên Usecase Tìm kiếm bằng hình ảnh

Tính năng này cho phép khách hàng tìm kiếm sản phẩm liên quan dựa trên hình ảnh mà họ cung cấp, bằng cách xác định các từ khóa phù hợp với chủ đề thời trang trong bức ảnh.

Actor phụ Dịch vụ bên thứ ba (Clarifai)

Hình ảnh có nội dung liên quan đến các sản phẩm mà hệ thống cung cấp (quần áo, thời trang)

Hậu điều kiện Danh sách sản phẩm liên quan với hình ảnh đã đưa ra

1 Khách hàng chọn chức năng Tìm kiếm bằng hình ảnh

2 Hệ thống hiện form upload hình ảnh lên hệ thống để xử lý

3 Khách hàng chọn hình ảnh cần tìm kiếm và chọn Tìm

5 Hệ thống dùng dịch vụ bên thứ 3 (Clarifai) để đưa ra các từ khóa liên quan với hình ảnh có chủ đề về thời trang

6 Hệ thống trả về danh sách sản phẩm có liên quan dựa trên các từ khóa có được từ hình ảnh

Bảng 3.29 Đặc tả usecase Lấy mã OTP

Tên Usecase Lấy mã OTP

Usecase này cho phép khách hàng nhận mã OTP dùng cho mục đích xác thực thông qua email hoặc số điện thoại của khách hàng Actor chính Buyer

Dịch vụ bên thứ ba (Google Cloud cho email, Twilio cho số điện thoại)

Hậu điều kiện Khách hàng có được mã OTP từ hệ thống

1 Khách hàng chọn chức năng lấy mã OTP qua email

2 Hệ thống thực hiện gửi nội dung OTP cho dịch vụ thứ ba gửi đến email của khách hàng

3 Dịch vụ bên thứ ba gửi nội dung OTP đến email của khách hàng

Khách hàng lựa chọn nhận mã OTP qua số điện thoại, sau đó hệ thống sẽ gửi nội dung mã OTP đến dịch vụ thứ ba để chuyển tiếp đến số điện thoại của khách hàng.

3a Dịch vụ bên thứ ba gửi nội dung OTP đến số điện thoại của khách hàng

Dịch vụ bên thứ ba không thể gửi nội dung OTP khi email hoặc số điện thoại của khách hàng không khả dụng, dẫn đến việc dừng lại Usecase.

Bảng 3.30 Đặc tả usecase Hoàn tiền đơn hàng

Tên Usecase Hoàn tiền đơn hàng

Usecase này cho phép khách hàng nhận lại số tiền đã thanh toán cho đơn hàng đã thanh toán online thành công

Actor phụ Cổng thanh toán trực tuyến

+ Đơn hàng đã thanh toán trực tuyến thành công

+ Khách hàng hoặc Admin thực hiện Hủy đơn hàng

Hậu điều kiện Đơn hàng hủy thành công, thay đổi được lưu thành công

Thông báo thao tác thành công

Khách hàng nhận lại được tiền từ cổng thanh toán đến tài khoản mà khách hàng đã dùng để thanh toán với cổng thanh toán

1 Hệ thống gửi yêu cầu hoàn tiền đến cổng thanh toán

2 Cổng thanh toán thực hiện yêu cầu hoàn tiền

3 Hệ thống nhận được kết quả hoàn tiền thành công từ cổng thanh toán

4 Hệ thống hủy đơn hàng và thông báo Hủy đơn hàng thành công Luồng thay thế Không có

3a Hệ thống nhận được kết quả hoàn tiền thất bại từ cổng thanh toán

Bảng 3.31 Đặc tả usecase Xem và tìm kiếm đơn hàng cá nhân

Tên Usecase Xem và tìm kiếm đơn hàng cá nhân

Usecase này cho phép khách hàng xem, tìm kiếm (lọc) các đơn hàng của mình

Danh sách đơn hàng (thỏa điều kiện tìm kiếm nếu có) của khách hàng

2 Hệ thống hiện danh sách đơn hàng của khách hàng

3 Khách hàng chọn Tìm kiếm

4 Hệ thống hiện form điền thông tin tìm kiếm (và điều kiện lọc)

5 Khách hàng nhập thông tin vào form và chọn Tìm kiếm

7 Hệ thống hiện danh sách đơn hàng thỏa mãn điều kiện tìm kiếm Luồng ngoại lệ

THIẾT KẾ PHẦN MỀM

Sơ đồ cấu trúc hệ thống

Hình 4.1 Sơ đồ cấu trúc hệ thống

Kiến trúc hệ thống bao gồm web server, microservices và third-party services Web server bao gồm:

The frontend server, consisting of h2store and h2admin, utilizes ReactJS for client-side rendering This approach means that the frontend supplies the necessary JavaScript code, which executes on the user's machine Consequently, the client browser interacts with the backend to retrieve data and render it on the user's side.

Backend server (h2-store-be) được phát triển bằng Java và Spring Boot, thực hiện các logic và xử lý nghiệp vụ chính của hệ thống Nó cung cấp RESTful API để frontend có thể tương tác với các chức năng của hệ thống một cách hiệu quả.

+ Database bao gồm MySQL và MongoDB

Microservices bao gồm 1 microservice (h2-store-ai-service) cung cấp chức năng gợi ý sản phẩm (dựa vào trí tuệ nhân tạo)

Third-party services bao gồm:

+ Google Cloud cung cấp chức năng đăng nhập bằng Google và gửi OTP qua email

+ Cloudinary cung cấp chức năng lưu trữ và quản lý file phương tiện của hệ thống

+ MoMo và PayPal cung cấp dịch vụ thanh toán online

+ Clarifai cung cấp chức năng chuyển đổi hình ảnh sang keyword (nhận diện trang phục)

+ GHN (Giao hàng nhanh) cung cấp chức năng tính phí vận chuyển

+ Twilio cung cấp chức năng gửi OTP qua điện thoại.

Lược đồ ERD

Hình 4.2 Lược đồ ERD của hệ thống

Lược đồ hoạt động

Hình 4.3 Lược đồ hoạt động Báo cáo thống kê

Hình 4.4 Lược đồ hoạt động Đăng ký

4.3.3 Quản lý đơn hàng cá nhân

Hình 4.5 Lược đồ hoạt động Quản lý đơn hàng

4.3.4 Quản lý đơn hàng cá nhân - thanh toán đơn hàng

Hình 4.6 Lược đồ hoạt động Quản lý đơn hàng cá nhân - thanh toán đơn hàng

4.3.5 Quản lý đơn hàng hệ thống

Hình 4.7 Lược đồ hoạt động Quản lý đơn hàng hệ thống

Hình 4.8 Lược đồ hoạt động Quản lý giao hàng

Hình 4.9 Lược đồ hoạt động Quản lý giỏ hàng

Hình 4.10 Lược đồ hoạt động Quản lý sản phẩm

Hình 4.11 Lược đồ hoạt động Tạo đơn hàng

Hình 4.12 Lược đồ hoạt động Thanh toán online

Lược đồ tuần tự

Hình 4.13 Lược đồ tuần tự Báo cáo

Hình 4.14 Lược đồ tuần tự Đăng ký

4.4.3 Quản lý đơn hàng cá nhân

Hình 4.15 Lược đồ tuần tự Quản lý đơn hàng cá nhân

4.4.4 Quản lý đơn hàng hệ thống

Hình 4.16 Lược đồ tuần tự Quản lý đơn hàng hệ thống

Hình 4.17 Lược đồ tuần tự Quản lý giao hàng

Hình 4.18 Lược đồ tuần tự Quản lý giỏ hàng

Hình 4.19 Lược đồ tuần tự Quản lý sản phẩm

Hình 4.20 Lược đồ tuần tự Tạo đơn hàng

Hình 4.21 Lược đồ tuần tự Thanh toán online

THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ

Giao diện phân hệ admin

5.1.1 Giao diện trang đăng nhập

Hình 5.1 Giao diện trang đăng nhập Admin Bảng 5.1 Mô tả giao diện trang đăng nhập Amin

STT Tên Loại Ghi chú

1 Username Input text Nhập username

2 Password Password Nhập mật khẩu

3 Login Button Button Nút đăng nhập

Hình 5.2 Giao diện trang chủ Admin

Bảng 5.2 Mô tả giao diện trang chủ Admin

2 Lợi nhuận trong hôm nay Widget Khi nhấn View detail sẽ chuyển sang System Report

3 Khách hàng mới trong hôm nay Widget Khi nhấn View detail sẽ chuyển sang Customer

4 Sản phẩm mới trong hôm nay Widget Khi nhấn View detail sẽ chuyển sang Product

5 Đơn hàng mới trong hôm nay Widget Khi nhấn View detail sẽ chuyển sang Order

6 Thống kê thu nhập hệ thống trong tháng hiện tại Chart Khi chọn cột sẽ hiển thị chi tiết số liệu

Hình 5.3 Giao diện trang chủ Admin – Shipper

Hình 5.4 Giao diện trang chủ Admin – Shipper Bảng 5.3 Mô tả giao diện trang chủ Admin - Shipper

1 Danh sách top sản phẩm được xem nhiều Datagrid

2 Danh sách top sản phẩm đang khuyến mãi Datagrid

3 Danh sách top sản phẩm bán chạy Datagrid

4 Danh sách top sản phẩm được đánh giá cao Datagrid

5.1.3 Giao diện trang Quản lý người dùng

Hình 5.5 Giao diện trang Quản lý người dùng

Bảng 5.4 Mô tả giao diện trang Quản lý người dùng

2 Xem chi tiết người dùng Button Khi nhấn vào sẽ hiển chi tiết thông tin

3 Cập nhật thông tin người dùng Button Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin người dùng

4 Vô hiệu hóa/Mở vô hiệu hóa người dùng Button Khi nhấn vào sẽ vô hiệu hóa/mở vô hiệu hóa người dùng

Button Khi nhấn vào sẽ chuyển sang trang tạo mới người dùng

6 Back Button Khi nhấn vào sẽ trở về trang trước

Hình 5.6 Giao diện trang Thông tin chi tiết người dùng Bảng 5 5 Mô tả giao diện trang Thông tin chi tiết người dùng

1 Mã người dùng Input text Không được chỉnh sửa

2 Username Input text Không được chỉnh sửa

3 Tên người dùng Input text Không được chỉnh sửa

4 Role Input text Không được chỉnh sửa

5 Email Input text Không được chỉnh sửa

6 Phone Input text Không được chỉnh sửa

7 Status Input text Không được chỉnh sửa

Hình 5.7 Giao diện trang Cập nhật thông tin chi tiết người dùng Bảng 5.6 Mô tả giao diện trang Cập nhật thông tin chi tiết người dùng

1 Mã người dùng Input text Không được chỉnh sửa

2 Username Input text Không được chỉnh sửa

3 Tên người dùng Input text

4 Role Select Chọn phân quyền của người dùng

7 Status Select Chọn trạng thái của người dùng

8 Save Button Lưu Thông tin chi tiết người dùng

5.1.4 Giao diện trang Quản lý phân quyền

Hình 5.8 Giao diện trang Quản lý phân quyền Bảng 5.7 Mô tả giao diện trang Quản lý phân quyền

2 Xem chi tiết phân quyền

Button Khi nhấn vào sẽ hiện chi tiết thông tin phân quyền

3 Cập nhật thông tin phân quyền Button Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin phân quyền

Button Khi nhấn vào sẽ chuyển sang trang tạo mới phân quyền

Hình 5.9 Giao diện trang Tạo mới Phân quyền Bảng 5.8 Mô tả giao diện trang Tạo mới Phân quyền

1 Tên phân quyền Input text

2 Mô tả phân quyền Input text

3 Quyền được cấp Select Chọn các quyền cấp cho phân quyền mới

4 Tạo mới Button Khi nhấn vào sẽ tạo mới phân quyền

Hình 5.10 Giao diện trang Cập nhật Thông tin Phân quyền Bảng 5.9 Mô tả giao diện trang Cập nhật Thông tin Phân quyền

1 Tên phân quyền Input text Không được chỉnh sửa

2 Mô tả phân quyền Input text

Select Chọn các quyền được cấp cho phân quyền

Button Khi nhấn vào sẽ lưu cập nhật thông tin phân quyền

5.1.5 Giao diện trang Xem lịch sử hệ thống

Hình 5.11 Giao diện trang Xem lịch sử hệ thống Bảng 5.10 Mô tả giao diện trang Xem lịch sử hệ thống

5.1.6 Giao diện trang Quản lý đơn hàng

Hình 5.12 Giao diện trang Quản lý đơn hàng Bảng 5.11 Mô tả giao diện trang Quản lý đơn hàng

2 Xem chi tiết đơn hàng

Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết đơn hàng

Button Khi nhấn vào sẽ chuyển tới trang cập nhật trạng thái đơn hàng

Hình 5.13 Giao diện trang Chi tiết thông tin đơn hàng Bảng 5.12 Mô tả giao diện trang Chi tiết thông tin đơn hàng

1 Mã đơn hàng Input text Không được chỉnh sửa

2 Mã khách hàng Input text Không được chỉnh sửa

3 Tên khách hàng Input text Không được chỉnh sửa

4 Số điện thoại khách hàng Input text Không được chỉnh sửa

5 Nhóm khách hàng Input text Không được chỉnh sửa

6 Email khách hàng Input text Không được chỉnh sửa

7 Tên người nhận Input text Không được chỉnh sửa

8 Số điện thoại người nhận Input text Không được chỉnh sửa

9 Địa chỉ cụ thể Input text Không được chỉnh sửa

10 Xã/phường giao hàng Input text Không được chỉnh sửa

11 Huyện/Quận giao hàng Input text Không được chỉnh sửa

12 Tỉnh/Thành phố giao hàng Input text Không được chỉnh sửa

13 Phương thức thanh toán Input text Không được chỉnh sửa

14 Trạng thái của đơn hàng Input text Không được chỉnh sửa

15 Danh sách chi tiết đơn hàng Datagrid

16 Chi tiết giá đơn hàng Label

Hình 5.14 Giao diện trang Cập nhật Chi tiết thông tin đơn hàng Bảng 5.13 Mô tả giao diện trang Cập nhật Chi tiết thông tin đơn hàng

1 Mã đơn hàng Input text Không được chỉnh sửa

6 Email khách hàng Input text Không được chỉnh sửa

7 Tên người nhận Input text Không được chỉnh sửa

8 Số điện thoại người nhận Input text Không được chỉnh sửa

10 Xã/phường giao hàng Input text Không được chỉnh sửa

11 Huyện/Quận giao hàng Input text Không được chỉnh sửa

12 Tỉnh/Thành phố giao hàng Input text Không được chỉnh sửa

13 Phương thức thanh toán Input text Không được chỉnh sửa

14 Trạng thái mới của đơn hàng Select Chọn trạng thái mới cần cập nhật

5.1.7 Giao diện trang Quản lý vận chuyển – Shipper

Hình 5.15 Giao diện trang Quản lý vận chuyển - Shipper Bảng 5.14 Mô tả giao diện trang Quản lý vận chuyển - Shipper

2 Xem thông tin chi tiết vận chuyển đơn hàng Button

Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết vận chuyển đơn hàng

3 Chuyển trạng thái vận chuyển Button

Khi nhấn vào sẽ chuyển trạng thái vận chuyển sang trạng thái tiếp theo

5.1.8 Giao diện trang Quản lý mã khuyến mãi

Hình 5.16 Giao diện trang Quản lý mã khuyến mãi Bảng 5.15 Mô tả giao diện trang Quản lý mã khuyến mãi

2 Xem thông tin chi tiết mã khuyến mãi Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết mã khuyến mãi

3 Cập nhật thông tin chi tiết mã khuyến mãi Button

Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin chi tiết mã khuyến mãi

4 Vô hiệu hoá/Bỏ vô hiệu hoá thông tin chi tiết mã khuyến mãi

Khi nhấn vào sẽ vô hiệu hoá hoặc bỏ vô hiệu hoá thông tin chi tiết mã khuyến mãi

5 Xoá thông tin chi tiết mã khuyến mãi Button Khi nhấn vào sẽ xoá thông tin chi tiết mã khuyến mãi

Button Khi nhấn vào sẽ chuyển sang trang thêm mã khuyến mãi

Hình 5.17 Giao diện trang Thông tin chi tiết mã khuyến mãi Bảng 5.16 Mô tả giao diện trang Thông tin chi tiết mã khuyến mãi

1 Mã chương trình khuyến mãi Input text Không được chỉnh sửa

2 Mã khuyến mãi Input text Không được chỉnh sửa

3 Loại khuyến mãi Input text Không được chỉnh sửa

4 Mô tả chương trình khuyến mãi Input text Không được chỉnh sửa

5 Giá trị khuyến mãi Number Không được chỉnh sửa

6 Giá trị đơn hàng tối thiểu Number Không được chỉnh sửa

7 Giá trị giảm tối đa Number Không được chỉnh sửa

8 Ngày bắt đầu Date Không được chỉnh sửa

9 Ngày kết thúc Date Không được chỉnh sửa

10 Giới hạn sử dụng khuyến mãi

Number Không được chỉnh sửa

11 Số lượt đã sử dụng khuyến mãi Number Không được chỉnh sửa

12 Trạng thái Input text Không được chỉnh sửa

Hình 5.18 Giao diện trang Cập nhật thông tin chi tiết mã khuyến mãi

Bảng 5.17 Mô tả giao diện trang Cập nhật thông tin chi tiết mã khuyến mãi

1 Mã chương trình khuyến mãi Input text Không được chỉnh sửa

2 Mã khuyến mãi Input text

3 Loại khuyến mãi Input text Không được chỉnh sửa

4 Mô tả chương trình khuyến mãi Input text Không được chỉnh sửa

5 Giá trị khuyến mãi Number Không được chỉnh sửa

6 Giá trị đơn hàng tối thiểu Number Không được chỉnh sửa

7 Giá trị giảm tối đa Number Không được chỉnh sử

8 Ngày bắt đầu Date Không được chỉnh sửa

9 Ngày kết thúc Date Không được chỉnh sửa

10 Giới hạn sử dụng khuyến mãi Number

11 Số lượt đã sử dụng khuyến mãi Number Không được chỉnh sửa

12 Trạng thái Input text Không được chỉnh sửa

Button Lưu Cập nhật thông tin chi tiết khuyến mãi

Button Khi nhấn vào sẽ trở về trang trước

5.1.9 Giao diện trang Quản lý nhóm sản phẩm

Hình 5.19 Giao diện trang Quản lý nhóm sản phẩm Bảng 5.18 Mô tả giao diện trang Quản lý nhóm sản phẩm

2 Xem chi tiết nhóm sản phẩm Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết nhóm sản phẩm

3 Cập nhật thông tin chi tiết nhóm sản phẩm Button Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin nhóm sản phẩm

Hình 5.20 Giao diện trang Thông tin chi tiết nhóm sản phẩm Bảng 5.19 Mô tả giao diện trang Thông tin chi tiết nhóm sản phẩm

1 Tên nhóm sản phẩm Text Không được chỉnh sửa

2 Mã nhóm sản phẩm Input text Không được chỉnh sửa

3 Tên nhóm sản phẩm Input text Không được chỉnh sửa

4 Trạng thái nhóm sản phẩm Input text Không được chỉnh sửa

5 Thông tin nhóm sản phẩm Widget Không được chỉnh sửa

Hình 5.21 Giao diện trang Cập nhật Thông tin chi tiết nhóm sản phẩm

Bảng 5.20 Mô tả giao diện trang Cập nhật Thông tin chi tiết nhóm sản phẩm

1 Tên nhóm sản phẩm Text

2 Mã nhóm sản phẩm Input text Không được chỉnh sửa

3 Tên nhóm sản phẩm Input text

4 Trạng thái nhóm sản phẩm Select Chọn trạng thái của nhóm sản phẩm

5 Thông tin nhóm sản phẩm Widget Không được chỉnh sửa

6 Lưu lại Button Lưu lại Cập nhật thông tin chi tiết nhóm sản phẩm

5.1.10 Giao diện trang Quản lý sản phẩm

Hình 5.22 Giao diện trang Quản lý sản phẩm Bảng 5.21 Mô tả giao diện trang Quản lý sản phẩm

2 Xem chi tiết đơn hàng

Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết sản phẩm

3 Cập nhật thông tin phân quyền Button Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin sản phẩm

4 Vô hiệu hoá/Bỏ vô hiệu hoá sản phẩm Button Khi nhấn vào sẽ vô hiệu hoá hoặc bỏ vô hiệu hoá sản phẩm

5 Xoá sản phẩm Button Khi nhấn vào sẽ xoá sản phẩm

Button Khi nhấn vào sẽ chuyển sang trang tạo mới sản phẩm

5.1.11 Giao diện trang Quản lý nhóm khách hàng

Hình 5.23 Giao diện trang Quản lý nhóm khách hàng Bảng 5.22 Mô tả giao diện trang Quản lý nhóm khách hàng

2 Xem chi tiết nhóm khách hàng Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết nhóm khách hàng

3 Cập nhật thông tin chi tiết nhóm khách hàng Button

Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin chi tiết nhóm khách hàng

Hình 5.24 Giao diện trang Thông tin chi tiết nhóm khách hàng Bảng 5.23 Mô tả giao diện trang Thông tin chi tiết nhóm khách hàng

1 Mã nhóm khách hàng Input text Không được chỉnh sửa

2 Tên nhóm khách hàng Input text Không được chỉnh sửa

3 Phần trăm giảm giá của nhóm khách hàng Number Không được chỉnh sửa

Hình 5.25 Giao diện trang Cập nhật Thông tin chi tiết nhóm khách hàng

Bảng 5.24 Mô tả giao diện trang Cập nhật Thông tin chi tiết nhóm khách hàng

1 Mã nhóm khách hàng Input text Không được chỉnh sửa

2 Tên nhóm khách hàng Input text Không được chỉnh sửa

3 Phần trăm giảm giá của nhóm khách hàng Number

Button Khi nhấn vào sẽ lưu lại cập nhật thông tin chi tiết nhóm khách hàng

5.1.12 Giao diện trang Quản lý khách hàng

Hình 5.26 Giao diện trang Quản lý khách hàng Bảng 5.25 Mô tả giao diện trang Quản lý khách hàng

2 Xem chi tiết khách hàng

Button Khi nhấn vào sẽ chuyển sang trang thông tin chi tiết nhóm khách hàng

3 Cập nhật thông tin chi tiết khách hàng Button

Khi nhấn vào sẽ chuyển sang trang cập nhật thông tin chi tiết nhóm khách hàng

4 Vô hiệu hoá/Bỏ vô hiệu hoá khách hàng Button Khi nhấn vào sẽ vô hiệu hoá hoặc bỏ vô hiệu hoá khách hàng

Hình 5.27 Giao diện trang Thông tin chi tiết Khách hàng Bảng 5.26 Mô tả giao diện trang Thông tin chi tiết Khách hàng

3 Tên đăng nhập Input text Không được chỉnh sửa

5 Email của khách hàng Input text Không được chỉnh sửa

7 Giới tính Input text Không được chỉnh sử

8 Ngày sinh Date Không được chỉnh sửa

10 Xã/phường Input text Không được chỉnh sửa

11 Huyện/Quận Input text Không được chỉnh sửa

12 Tỉnh/Thành phố Input text Không được chỉnh sửa

13 Trạng thái khách hàng Input text Không được chỉnh sửa

Hình 5.28 Giao diện trang Cập nhật Thông tin chi tiết Khách hàng Bảng 5.27 Mô tả giao diện trang Cập nhật Thông tin chi tiết Khách hàng

3 Tên đăng nhập Input text Không được chỉnh sửa

5 Email của khách hàng Input text Không được chỉnh sửa

7 Giới tính Input text Không được chỉnh sử

8 Ngày sinh Date Không được chỉnh sửa

10 Xã/phường Input text Không được chỉnh sửa

11 Huyện/Quận Input text Không được chỉnh sửa

12 Tỉnh/Thành phố Input text Không được chỉnh sửa

13 Trạng thái khách hàng Select Chọn trạng thái của khách hàng

Button Khi nhấn vào sẽ lưu lại cập nhật thông tin chi tiết khách hàng

5.1.13 Giao diện trang Quản lý kho

Hình 5.29 Giao diện trang Quản lý kho Bảng 5.28 Mô tả giao diện trang Quản lý kho

Button Khi nhấn vào sẽ chuyển sang trang nhập thông tin sản phẩm vào kho

Hình 5.30 Giao diện trang Nhập Thông tin sản phẩm vào kho

Bảng 5.29 Mô tả giao diện trang Nhập Thông tin sản phẩm vào kho

2 Tên sản phẩm Input text

3 Thuộc tính sản phẩm Input text

5 Thêm thông tin sản phẩm hiện tại vào kho Button Khi nhấn vào sẽ thêm sản phẩm vào kho

6 Thông tin chi tiết sản phẩm nhập kho Datagrid Không được chỉnh sửa

Khi nhấn vào sẽ lưu lại các thông tin chi tiết sản phẩm nhập kho

Button Khi nhấn vào sẽ trở về trang trước

5.1.14 Giao diện trang Báo cáo doanh thu

Hình 5.31 Giao diện trang Báo cáo doanh thu Bảng 5.30 Mô tả giao diện trang Báo cáo doanh thu

2 Năm thống kê doanh thu

Select Chọn năm thống kê doanh thu để vẽ biểu đồ

3 Loại thống kê (tháng/quý)

Select Chọn loại thống kê theo tháng hoặc quý

4 Tháng thống kê doanh thu

Select Chọn tháng được thống kê để vẽ biểu đồ

Button Khi nhấn vào sẽ áp dụng bộ lọc đang được chọn

5.1.15 Giao diện trang Báo cáo hệ thống

Hình 5.32 Giao diện trang Báo cáo hệ thống – Báo cáo Bảng 5.31 Mô tả giao diện trang Báo cáo hệ thống – Báo cáo

1 Năm thống kê doanh thu

Select Chọn năm thống kê doanh thu để vẽ biểu đồ

2 Loại thống kê (tháng/quý)

Select Chọn loại thống kê theo tháng hoặc quý

3 Tháng thống kê doanh thu

Select Chọn tháng được thống kê để vẽ biểu đồ

Button Khi nhấn vào sẽ áp dụng bộ lọc đang được chọn

Button Khi nhấn vào sẽ xuất báo cáo ra file Excel

Hình 5.33 Giao diện trang Báo cáo hệ thống – Thống kê

Bảng 5.32 Mô tả giao diện trang Báo cáo hệ thống – Thống kê

1 Những sản phẩm có lượt xem cao nhất Datagrid

2 Những sản phẩm khuyến mãi nhiều nhất Datagrid

3 Những sản phẩm bán chạy nhất Datagrid

4 Những sản phẩm có lượt đánh giá tốt nhất Datagrid

5.1.16 Giao diện trang Thông báo

Hình 5.34 Giao diện trang Thông báo Bảng 5.33 Mô tả giao diện trang Thông báo

Giao diện phân hệ khách hàng

5.2.1 Giao diện trang Đăng nhập

Hình 5.35 Giao diện trang Đăng nhập Customer

Bảng 5.34 Mô tả giao diện trang Đăng nhập Customer

1 Username Input text Nhập username

2 Password Password Nhập mật khẩu

3 Show password Button Nút hiển thị mật khẩu đã nhập

4 Login Button Button Nút đăng nhập

5 Register Button Button Nút đăng ký

6 Login with Google Button Nút đăng nhập bằng tài khoản

5.2.1 Giao diện trang Đăng ký

Hình 5.36 Giao diện trang Đăng ký Bảng 5.35 Mô tả giao diện trang Đăng ký

1 Nhập fullname Input text Nhập thông tin fullname

2 Nhập username Input text Nhập thông tin username

3 Chọn gender Radio button Chọn giới tính

4 Nhập email Email Nhập thông tin email

5 Nhập mật khẩu Password Nhập thông tin password

6 Nhập lại mật khẩu Password Nhập thông tin confirm password

7 Nhấn đăng ký Button Đăng ký tài khoản mới

8 Sign in Link text Khi nhấn vào sẽ sang trang đăng nhập

5.2.2 Giao diện Trang chủ khách hàng

Hình 5.37 Giao diện trang chủ khách hàng

Hình 5.38 Giao diện trang chủ khách hàng

Hình 5.39 Giao diện trang chủ khách hàng Bảng 5.36 Mô tả giao diện trang Đăng ký

1 Logo Image Khi nhấn vào sẽ về trang home

2 Image search Image Khi nhấn vào sẽ upload image để tìm kiếm

3 Text search Input text Nhập từ khoá cần tìm kiếm

4 Giỏ hàng Button Khi nhấn vào sẽ sang trang giỏ hàng

5 Thông báo Button Khi nhấn vào sẽ sang trang thông báo

6 Log in Link text Khi nhấn vào sẽ sang trang đăng nhập

7 Sign up Link text Khi nhấn vào sẽ sang trang đăng ký

8 Thanh menu Navbar Khi nhấn vào sẽ sang trang đăng nhập

10 Detail Button Khi nhấn vào sẽ chuyển sang xem sản phẩm

11 Buy now Button Khi nhấn vào sẽ mua ngay sản phẩm

14 Sản phẩm có nhiều lượt xem

5.2.3 Giao diện Trang cá nhân

Hình 5.40 Giao diện Trang cá nhân Bảng 5.37 Mô tả giao diện Trang cá nhân

2 Thông tin cá nhân Widget

5.2.4 Giao diện trang Quản lý hạng cá nhân

Hình 5.41 Giao diện trang Quản lý hạng cá nhân Bảng 5.38 Mô tả giao diện trang Quản lý hạng cá nhân

2 Thông tin hạng cá nhân Widget

5.2.5 Giao diện trang Quản lý Địa chỉ

Hình 5.42 Giao diện trang Quản lý địa chỉ Bảng 5.39 Mô tả giao diện trang Quản lý địa chỉ

2 Danh sách thông tin địa chỉ List

5.2.6 Giao diện trang Đổi mật khẩu

Hình 5.43 Giao diện trang Đổi mật khẩu Bảng 5.40 Mô tả giao diện trang Đổi mật khẩu

2 Thông tin đổi mật khẩu Widget

5.2.7 Giao diện trang Xem voucher

Hình 5.44 Giao diện trang Xem voucher Bảng 5.41 Mô tả giao diện trang Xem voucher

5.2.8 Giao diện trang Lịch sử đơn hàng

Hình 5.45 Giao diện trang Lịch sử đơn hàng Bảng 5.42 Mô tả giao diện trang Lịch sử đơn hàng

1 All Tab Khi nhấn vào sẽ chuyển sang tab All

1.1 Confirming Tab Khi nhấn vào sẽ chuyển sang tab

1.2 Paying Tab Khi nhấn vào sẽ chuyển sang tab

1.3 Sending Tab Khi nhấn vào sẽ chuyển sang tab

1.4 Delivering Tab Khi nhấn vào sẽ chuyển sang tab

1.5 Delivered Tab Khi nhấn vào sẽ chuyển sang tab

1.6 Completed Tab Khi nhấn vào sẽ chuyển sang tab

1.7 Cancelled Tab Khi nhấn vào sẽ chuyển sang tab

3 Thông tin chi tiết sản phẩm Widget

4 Tổng giá trị đơn hàng Text

5 Detail Button Nhấn để xem chi tiết đơn hàng

5.2.9 Giao diện trang Đánh giá sản phẩm

Hình 5.46 Giao diện trang Đánh giá sản phẩm

Bảng 5.43 Mô tả giao diện trang Đánh giá sản phẩm

1 Thông tin sản phẩm Widget

2 Thông tin đánh giá sản phẩm Widget

5.2.10 Giao diện trang Chi tiết đơn hàng

Hình 5.47 Giao diện trang Chi tiết đơn hàng Bảng 5.44 Mô tả giao diện trang Chi tiết đơn hàng

1 Thông tin sản phẩm Widget

2 Thông tin đánh giá sản phẩm Widget

5.2.11 Giao diện trang Danh sách sản phẩm

Hình 5.48 Giao diện trang Danh sách sản phẩm

Hình 5.49 Giao diện trang Danh sách sản phẩm Bảng 5.45 Mô tả giao diện trang Danh sách sản phẩm

5.2.12 Giao diện trang Chi tiết sản phẩm

Hình 5.50 Giao diện trang Chi tiết sản phẩm

Hình 5.53 Giao diện trang Chi tiết sản phẩm Bảng 5.46 Mô tả giao diện trang Chi tiết sản phẩm

11 Số lượng Number Nhập số lượng sản phẩm cần mua

12 Nút mua Button Nhấp vào để thêm sản phẩm vào giỏ hàng

13 Nút mua ngay Button Nhấp vào để thêm sản phẩm vào giỏ hàng và chuyển sang trang Giỏ hàng

16 Đánh giá của khách hàng

17 Sản phẩm đề xuất List

19 Sản phẩm đã xem List

5.2.13 Giao diện trang Sản phẩm yêu thích

Hình 5.54 Giao diện trang Sản phẩm yêu thích Bảng 5.47 Mô tả giao diện trang Sản phẩm yêu thích

1 Hình ảnh sản phẩm Image

2 Thông tin sản phẩm Text

3 Xoá sản phẩm yêu thích Button Nhấn vào để xoá sản phẩm khỏi danh sách yêu thích

5.2.14 Giao diện trang Sản phẩm đã xem

Hình 5.55 Giao diện trang Sản phẩm đã xem Bảng 5.48 Mô tả giao diện trang Sản phẩm đã xem

5.2.15 Giao diện trang Sản phẩm bán chạy

Hình 5.56 Giao diện trang Sản phẩm bán chạy Bảng 5.49 Mô tả giao diện trang Sản phẩm bán chạy

5.2.16 Giao diện trang Sản phẩm mới

Hình 5.57 Giao diện trang Sản phẩm mới Bảng 5.50 Mô tả giao diện trang Sản phẩm mới

5.2.17 Giao diện trang Sản phẩm khuyến mãi

Hình 5.58 Giao diện trang Sản phẩm khuyến mãi Bảng 5.51 Mô tả giao diện trang Sản phẩm khuyến mãi

5.2.18 Giao diện trang Kết quả tìm kiếm bằng hình ảnh

Hình 5.59 Giao diện trang Kết quả tìm kiếm bằng hình ảnh

Bảng 5.52 Mô tả giao diện trang Kết quả tìm kiếm bằng hình ảnh

1 Thông tin sản phẩm List

5.2.19 Giao diện trang Kết quả tìm kiếm bằng từ khoá

Hình 5.60 Giao diện trang Kết quả tìm kiếm bằng từ khoá Bảng 5.53 Mô tả giao diện trang Kết quả tìm kiếm bằng từ khoá

1 Searchbar Input text Khung nhập từ khoá tìm kiếm

5.2.20 Giao diện trang Thông báo

Hình 5.61 Giao diện trang Thông báo Bảng 5.54 Mô tả giao diện trang Thông báo

1.1 All Tab Tất cả thông báo

1.2 Unread Tab Thông báo chưa đọc

1.3 Read Tab Thông báo đã đọc

5.2.21 Giao diện trang Giỏ hàng

Hình 5.62 Giao diện trang Giỏ hàng

Bảng 5.55 Mô tả giao diện trang Giỏ hàng

3 Thuộc tính sản phẩm Variation

7 Tổng tiền tạm tính Text

8 Nút xoá sản phẩm Button Nhấn vào để xoá sản phẩm ra khỏi giỏ hàng

11 Nút Order Button Nhấn vào để chuyển sang tranh Thanh toán

5.2.22 Giao diện trang Thanh toán

Hình 5.63 Giao diện trang Thanh toán

Hình 5.64 Giao diện trang Thanh toán Bảng 5.56 Mô tả giao diện trang Thanh toán

1 Thông tin giao hàng Datagrid

3 Thuộc tính sản phẩm Variation

4 Giá tiền mỗi sản phẩm Text

6 Tổng tiền tạm tính Text Tổng tiền của mỗi món hàng tương ứng với số lượng

7 Tổng tiền Text Tổng tiền của đơn hàng

9 Change address Button Nhấn vào để thay đổi địa chỉ giao hàng

10 Shipping Unit Text Phí giao hàng

11 Choose Voucher Button Nhấn vào để chọn mã khuyến mãi

12 Phương thức thanh toán Ratio

13 Product Price Text Tổng giá tiền của sản phẩm

14 Customer Discount Text Số tiền khách hàng được giảm giá

15 Shipping Fee Text Phí vận chuyển

16 Total Payment Text Tổng tiền phải trả

17 Nút Order Button Nhấn vào để tiến hành đặt hàng

Hình 5.65 Giao diện Chatbot Bảng 5.57 Mô tả giao diện Chatbot

CHƯƠNG 6 CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG 6.1 Cài đặt và triển khai hệ thống

Hệ thống được triển khai tại:

+ Hệ thống dành cho khách hàng: http://h2store.xyz/

+ Hệ thống dành cho quản lý cửa hàng: http://admin.h2store.xyz/

+ Hệ thống backend: http://be.h2store.xyz/swagger-ui/index.html/

+ Nếu chạy project từ source code: Spring Tool Suite 4 (hoặc Eclipse), Apache Maven

To configure the MySQL database connection in the h2-store-be application, navigate to the applications.properties file located in the /src/main/resources directory Set the spring.datasource.url to specify the address and port for connecting to the MySQL Server Additionally, define the spring.datasource.username to indicate the database username and set the spring.datasource.password to specify the database password.

In the h2-store-be/applications.properties file located in the /src/main/resources directory, two key configurations are essential for communication with the Frontend The first is `com.h2store.h2storebe.security.oauth2.fe-login-url`, which specifies the URL for returning Google login results from the Backend to the Frontend The second is `com.h2store.h2storebe.service.payment.return-url`, which defines the URL for returning online payment results from the Backend to the Frontend.

Để thiết lập dữ liệu mẫu cho Backend trong cơ sở dữ liệu, bạn cần chạy tệp sinh dữ liệu default-mysql-data/data.sql tại thư mục backend nhằm tạo ra dữ liệu mẫu cần thiết.

+ Chạy lệnh “pip install -r requirements.txt” trong thư mục h2-store-ai-service

Để khởi động h2-store-ai-service, bạn cần sử dụng lệnh “python -m h2_store_ai_service.index” trong thư mục h2-store-ai-service và thiết lập các biến môi trường cần thiết cho microservice hoạt động Các biến này bao gồm: MYSQL_HOSTNAME (địa chỉ của MySQL Server, mặc định là localhost), MYSQL_PORT (cổng của MySQL Server, mặc định là 3306), MYSQL_DB_NAME và MONGO_DB_NAME (tên database schema của MySQL và MongoDB mà h2-store-be sử dụng), cùng với MYSQL_USER và MYSQL_PASS (thông tin xác thực MySQL Server) và MONGO_URI (URI kết nối với MongoDB).

+ Khởi động h2-store-be bằng file jar (java -Dfile.encoding=UTF-8 -jar h2- store-be-1.0.jar spring.config.location=application.properties) hoặc từ source code

+ Tải source code h2store từ nguồn https://github.com/ttmh2k1/h2store và lưu vào thư mục h2store trong thư mục source_code

+ Tải source code h2admin từ nguồn https://github.com/ttmh2k1/h2amdin và lưu vào thư mục h2admin trong thư mục source_code

+ Mở h2store và h2admin bằng Visual Studio Code

+ Mở terminal trong Visual Studio Code

+ Chạy lệnh “npm i” hoặc “yarn i” để cài đặt các package

+ Chạy lệnh “npm start” hoặc “yarn start” để run project

Yêu cầu: Docker và Docker Compose

Nếu có thay đổi port của h2store và h2-store-be thì phải cập nhật cả ở file env chung thư mục với docker-compose.yml

Tại thư mục gốc source_code chứa docker-compose.yml chạy lệnh “docker compose up -d” và đợi hệ thống khởi động hoàn toàn là đã có thể sử dụng

6.2.1 Các chức năng quản lý tài khoản

Bảng 6.1 Thông tin và kết quả kiểm thử các chức năng quản lý tài khoản

TT Testcase Kết quả mong đợi Kết quả

1 Chức năng đăng nhập Đăng nhập thành công, đúng phân quyền Pass

2 Chức năng đăng ký Đăng ký thành công Pass

Sau khi người dùng nhấn vào đường dẫn trong email xác thực thì có thể đăng nhập vào ứng dụng

4 Đổi mật khẩu Đổi mật khẩu thành công sau khi người xác thực

OTP thông qua email hoặc số điện thoại Pass

Gửi xác thực OTP thông qua email hoặc số điện thoại đã đăng ký

Xác thực OTP thành công và cài đặt mật khẩu mới

Có thể đăng nhập bằng mật khẩu mới

6 Đổi thông tin cá nhân Thông tin cá nhân của người dùng thay đổi thành công Pass

6.2.2 Các chức năng quản lý đơn hàng, giỏ hàng

Bảng 6.2 Thông tin và kết quả kiểm thử các chức năng quản lý đơn hàng, giỏ hàng

1 Thêm sản phẩm vào giỏ hàng

Giỏ hàng được cập nhật sản phẩm mới, tổng tiền được cập nhật Pass

Thay đổi số lượng sản phẩm trong giỏ hàng

Số lượng sản phẩm trong giỏ hàng thay đổi tương ứng Pass

3 Đặt hàng Đặt hàng thành công, xuất hiện đơn hàng ở chức năng Duyệt đơn hàng Pass

4 Duyệt đơn hàng Duyệt thành công, xuất hiện đơn hàng ở chức năng

Shipper xác nhận giao hàng cho đơn hàng

Xác nhận đang giao hàng thành công, đơn hàng xuất hiện ở trang Danh sách đơn hàng đang giao ở cả giao diện người dùng, Admin và Shipper

Shipper xác nhận giao hàng thành công đơn hàng

Xác nhận đã giao hàng thành công, đơn hàng hoàn thành ở cả giao diện người dùng, Admin và Shipper

Khách hàng đã thành công trong việc đánh giá sản phẩm trong đơn hàng Đánh giá này sẽ hiển thị trên trang chi tiết sản phẩm, với lượt đánh giá và điểm đánh giá trung bình được cập nhật một cách chính xác.

Admin/khách hàng hủy đơn hàng đã thanh toán online

Hủy thành công, số tiền đã thanh toán được hoàn trả thành công Pass

6.2.3 Các chức năng quản lý nhóm sản phẩm, sản phẩm

Bảng 6.3 Thông tin và kết quả kiểm thử các chức năng quản lý nhóm sản phẩm, sản phẩm

1 Thêm sản phẩm Thêm sản phẩm thành công, sản phẩm hiển thị đúng trên hệ thống khách hàng Pass

2 Ẩn nhóm sản phẩm Ẩn nhóm sản phẩm thành công Nhóm sản phẩm không hiển thị trên hệ thống khách hàng Pass

3 Ẩn sản phẩm Ẩn sản phẩm thành công Sản phẩm không hiển thị trên hệ thống khách hàng Pass

4 Chỉnh sửa nhóm sản phẩm

Chỉnh sửa thông tin nhóm sản phẩm thành công

Danh mục hiển thị đúng thông tin trên hệ thống khách hàng

Chỉnh sửa thông tin sản phẩm thành công Sản phẩm hiển thị đúng thông tin trên hệ thống khách hàng

6.2.4 Kiểm thử các chức năng mang tính chịu tải cao

Bảng 6.4 Thông tin và kết quả kiểm thử các chức năng mang tính chịu tải cao

Giả lập 1000 khách hàng cùng thực hiện chức năng đặt hàng có sử dụng mã giảm giá

(10000 đơn hàng), xác nhận đơn hàng, xác nhận giao hàng và xác nhận giao thành công

Hệ thống không xảy ra lỗi

Số liệu về tồn kho sản phẩm, giá cập nhật, lượng bán ra và số lượt sử dụng mã giảm giá đều đạt yêu cầu, không xảy ra tình trạng "RACE CONDITION" khiến dữ liệu bị sai lệch hoặc không đồng bộ do quá nhiều người dùng cùng truy cập.

Giả lập 1000 khách hàng cùng thực hiện đánh giá 10000 đơn hàng (thread pool size 100)

Các số liệu về lượt đánh giá từ 1 đến 5 sao và điểm đánh giá trung bình đều như dự đoán Tất cả các đơn hàng đã được đánh giá đều có trạng thái hoàn thành (COMPLETED).

Giả lập tạo 502 sản phẩm cùng lúc (thread pool size = 50)

Các sản phẩm đều được tạo đúng như yêu cầu Pass

Giả lập cùng lúc nhập kho sản phẩm 50 lần

Thông tin về số lượng tồn kho đúng như tính toán

6.2.5 Kiểm thử logic xử lý hệ thống

Bảng 6.5 Thông tin và kết quả kiểm thử logic xử lý hệ thống

Khóa tài khoản khách hàng khi có đơn hàng đang trong trạng thái xử lý (không phải các trạng thái đã hủy và hoàn thành)

Khi tài khoản bị khóa, nó sẽ chuyển sang trạng thái chờ khóa, cho phép khách hàng đăng nhập nhưng chỉ có thể sử dụng các chức năng như xem danh sách đơn hàng, cập nhật đơn hàng và hủy đơn hàng.

Khi tất cả các đơn hàng đều hoàn tất (trạng thái đã hủy hoặc hoàn thành) lập tức khách hàng không thể đăng nhập vào hệ thống được nữa

Cập nhật mã giảm giá với loại giảm giá là phần trăm và giá trị lớn hơn 100%

Hệ thống thông báo lỗi không hợp lệ Pass

Cập nhật mã giảm giá có mã giảm giá trùng và khoảng thời gian hiệu lực của mã giao với mã giảm giá trùng kia

Cập nhật giới hạn lượt dùng mã giảm giá (khác 0) bé hơn lượt đã sử dụng

5 Xóa mã giảm giá chưa có khách hàng sử dụng Xóa thành công (xóa khỏi cơ sở dữ liệu) Pass

6 Xóa mã giảm giá đã có khách hàng sử dụng Hệ thống thông báo lỗi không hợp lệ Pass

7 Thêm và xóa hình ảnh sản phẩm

Thêm và xóa thành công, đồng thời hình ảnh cũ cũng bị xóa khỏi bên thứ ba (Cloudinary)

Tạo/cập nhật sản phẩm với hình ảnh không hợp lệ (không đúng định dạng hình ảnh)

9 Vô hiệu hóa sản phẩm/biến thể sản phẩm

Vô hiệu hóa thành công, sản phẩm sẽ bị ẩn khỏi hệ thống người mua, biến thể sản phẩm bị ẩn khỏi chi tiết sản phẩm

Xóa sản phẩm chưa bán (chưa có đơn hàng có sản phẩm này)

Xóa thành công (xóa khỏi cơ sở dữ liệu) Pass

11 Xóa sản phẩm đã bán (đã có đơn hàng có sản phẩm này)

Xóa thành công (trạng thái đánh dấu là đã xóa), kể cả Admin cũng thấy sản phẩm này khi thực hiện các thao tác quản lý

12 Xóa biến thể sản phẩm chưa bán

Xóa thành công (xóa khỏi cơ sở dữ liệu), giá thấp nhất và cao nhất cũng như các thông tin liên quan cũng được cập nhật lại đúng

13 Xóa biến thể sản phẩm đã bán

Xóa thành công (trạng thái đánh dấu là đã xóa), giá thấp nhất và cao nhất cũng như các thông tin liên quan cũng được cập nhật lại đúng

14 Tạo/cập nhật vai trò và phân quyền

Tạo/cập nhật thành công

Các chức năng có trong danh sách quyền của vai trò có thể sử dụng

Các chức năng không có trong danh sách quyền của vai trò sẽ bị hệ thống từ chối không thể sử dụng

Tạo/cập nhật vai trò với toàn quyền quản trị (quyền cao nhất của vai trò Admin)

Hệ thống thông báo lỗi không hợp lệ, đây là quyền đặc biệt chỉ có Admin mới được sử dụng

16 Cập nhật quyền của vai trò

Hệ thống thông báo lỗi không hợp lệ, đây là vai trò đặc biệt không thể cập nhật Pass

So sánh dữ liệu báo cáo thống kê trước và sau khi có khách hàng mới, sản phẩm mới, đơn hàng mới, doanh thu

So sánh dữ liệu báo cáo trước và sau chênh lệch đúng như theo tính toán Pass

18 Khóa tài khoản người dùng hệ thống quản lý

Cập nhật trạng thái khóa thành công, người dùng không thể đăng nhập và hệ thống thông báo tài khoản đã bị khóa

Cập nhật trạng thái ẩn thành công, hệ thống khách hàng không thể tìm thấy mã giảm giá đó

1.1 Về kiến thức Được tìm hiểu, trau dồi và nắm vững các kiến thức chuyên môn và nghiệp vụ như:

+ Kiến thức về lập trình web, bảo mật thông tin, bảo mật web, các nguyên tắc lập trình, kỹ thuật lập trình, design pattern

+ Kiến thức về lập trình hướng đối tượng, lập trình với ngôn ngữ Java và JavaScript

+ Kiến thức về ReactJS, Spring Framework và Spring Boot

+ Cách thiết kế và xây dựng RESTful API web services bằng Spring Boot + Cách xây dựng giao diện với ReactJS

+ Cách tích hợp Spring Boot và ReactJS để tạo thành một hệ thống hoàn chỉnh + Các nghiệp vụ liên quan tới đề tài

Để thiết kế cấu trúc và mô hình dữ liệu phù hợp cho cửa hàng bán quần áo, cần xác định rõ các yếu tố như danh mục sản phẩm, thông tin khách hàng và quy trình thanh toán Việc triển khai hệ thống lên một máy chủ hoặc môi trường production yêu cầu chuẩn bị kỹ lưỡng về cấu hình, bảo mật và khả năng mở rộng để đảm bảo hoạt động ổn định và hiệu quả.

+ Quy trình thực hiện một dự án phần mềm

+ Hiểu rõ hơn về luồng hoạt động trong việc phát triển phần mềm

Tài liệu đặc tả hệ thống website thương mại điện tử bán quần áo đã được thiết kế đầy đủ, bao gồm các tính năng chính, sơ đồ và lược đồ mô tả chức năng cùng cách hoạt động của hệ thống Bên cạnh đó, tài liệu cũng miêu tả mối liên hệ giữa các chức năng và các tác nhân sử dụng chúng, đáp ứng cả yêu cầu cơ bản và nâng cao của đề tài.

Sau khi thực hiện đề tài, hệ thống đạt được những chức năng, tiêu chuẩn và yêu cầu đã đề ra, bao gồm:

Giao diện người dùng hấp dẫn và dễ sử dụng không chỉ mang lại sự tiện lợi mà còn cung cấp nhiều lựa chọn và chức năng đa dạng Những tiện ích này nâng cao trải nghiệm người dùng, từ đó thu hút và giữ chân khách hàng hiệu quả hơn.

Khả năng truy cập website từ bất kỳ đâu và mua sắm trực tuyến giúp cửa hàng vượt qua rào cản địa lý, mở rộng thị trường và tiếp cận nhiều khách hàng tiềm năng hơn.

+ Chức năng quản trị các khía cạnh khác nhau của cửa hàng tiện dụng, giúp quản lý cửa hàng và hoạt động kinh doanh nhanh chóng và hiệu quả

Thu thập đánh giá và nhận xét của khách hàng về sản phẩm và trải nghiệm mua sắm là cách hiệu quả để cửa hàng cải thiện dịch vụ và nâng cao chất lượng sản phẩm.

+ Hiệu năng hoạt động tốt, ổn định, tính toán chính xác, thông tin được lưu trữ đáng tin cậy

+ Cung cấp hệ thống quản lý và hệ thống khách hàng tách biệt

+ Rèn luyện được các kỹ năng: làm việc nhóm, tranh luận, phản biện, giải quyết vấn đề

+ Rèn luyện kỹ năng quản lý thời gian cũng như phân chia công việc

+ Nâng cao kỹ năng đọc tài liệu bằng tiếng Anh và khả năng tự học

+ Có thêm kinh nghiệm trong việc phát triển, triển khai và kiểm thử một dự án phần mềm

+ Nâng cao khả năng và tư duy lập trình khi làm việc với các mô hình thực tế, các giải pháp lập trình mới

+ Kinh nghiệm áp dụng những kiến thức đã học và học được qua việc thực hiện đề tài

2 Ưu điểm và nhược điểm

+ Ý tưởng sáng tạo, có khả năng mở rộng và phát triển trong tương lai

+ Hệ thống hoạt động ổn định, đáng tin cậy

Cửa hàng cung cấp các tính năng cơ bản đáp ứng nhu cầu thiết yếu của khách hàng, đồng thời tích hợp các tính năng nâng cao nhằm nâng cao trải nghiệm người dùng.

+ Sử dụng các thư viện, framework lớn, phổ biến, có cộng đồng phát triển lớn giúp việc phát triển và mở rộng hệ thống sau này

+ Sử dụng Docker nên việc triển khai hệ thống vô cùng đơn giản, tiết kiệm thời gian

+ Có thể truy cập website của hệ thống từ các thiết bị di động

+ Chưa hỗ trợ ứng dụng (App) trên thiết bị di động

Giao diện của một số chức năng chưa thu hút người dùng do thiết kế chưa bắt mắt, và còn thiếu một số tính năng nâng cao để cải thiện trải nghiệm Bên cạnh đó, một số tính năng hiện có vẫn chưa hoạt động hiệu quả, hạn chế khả năng sử dụng của người dùng.

+ Còn thiếu tương đối chức năng nâng cao so với các sàn thương mại điện tử hiện nay

CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG

Ưu điểm và nhược điểm

Bảng 6.5 trình bày thông tin và kết quả kiểm thử các chức năng quản lý đơn hàng và giỏ hàng Bảng 6.6 cung cấp thông tin và kết quả kiểm thử các chức năng quản lý nhóm sản phẩm và sản phẩm Bảng 6.7 nêu rõ thông tin và kết quả kiểm thử các chức năng có tính chịu tải cao Cuối cùng, Bảng 6.8 tổng hợp thông tin và kết quả kiểm thử logic xử lý hệ thống.

Trong bối cảnh kinh tế phát triển nhanh chóng và công nghệ thông tin cùng Internet ngày càng mạnh mẽ, chúng ta có thể xóa bỏ khoảng cách và rút ngắn thời gian làm việc Công nghệ này mang lại sự tiện lợi và dễ dàng trong việc giao tiếp, tạo điều kiện thuận lợi cho sự kết nối và hợp tác.

Internet và công nghệ thông tin đã trở thành phần không thể thiếu trong đời sống hiện đại Ngành dịch vụ trên Internet phát triển mạnh mẽ, mang lại nhiều lợi ích to lớn Trong số đó, thương mại điện tử là ngành ứng dụng sâu rộng, phụ thuộc chặt chẽ vào Internet và công nghệ thông tin.

Thương mại điện tử mang lại nhiều lợi ích, cho phép chúng ta xem và mua sắm mọi thứ mà không cần ra khỏi nhà Đây là sự phát triển cần thiết để đáp ứng nhu cầu của xã hội hiện đại, nơi mà con người yêu cầu công việc diễn ra nhanh chóng, thuận tiện và đơn giản, đồng thời giúp tiết kiệm thời gian và công sức.

Nhận thức được tầm quan trọng của thương mại điện tử trong việc tối ưu hóa quy trình mua bán trực tuyến, nhóm đã quyết định phát triển hệ thống website cho cửa hàng bán quần áo Hệ thống này nhằm nâng cao hiệu quả giao dịch, tiết kiệm thời gian và chi phí cho người tiêu dùng, đồng thời đáp ứng các yêu cầu và chức năng phù hợp với xu hướng hiện tại.

Xây dựng một hệ thống website thương mại điện tử hoàn chỉnh bao gồm hai thành phần chính: website dành cho khách hàng và website quản trị Hệ thống này cần đảm bảo đầy đủ các chức năng cơ bản để phục vụ tốt nhất cho người dùng và quản lý hiệu quả các hoạt động kinh doanh.

Giao diện được thiết kế đơn giản, tiện lợi và dễ sử dụng, tạo sự gần gũi với người dùng Hệ thống xử lý hoạt động chính xác và hiệu quả, ưu tiên tốc độ phản hồi, đồng thời nhận diện các ngoại lệ và thông báo lỗi một cách thân thiện với người dùng.

Kết hợp các tính năng nổi bật từ các trang thương mại điện tử hàng đầu vào một sản phẩm duy nhất, mang lại sự thuận tiện tối đa cho người dùng Sản phẩm áp dụng công nghệ và kỹ thuật hiện đại, đồng thời tuân thủ các tiêu chuẩn cơ bản và nâng cao hiện tại.

Người sử dụng cuối là những cá nhân trực tiếp truy cập và tương tác với hệ thống website, bao gồm khách hàng và người mua hàng trực tuyến Họ có khả năng xem thông tin sản phẩm, thêm sản phẩm vào giỏ hàng, đặt hàng, cũng như truy cập và quản lý tài khoản cá nhân của mình.

Quản trị viên cửa hàng là những người có quyền truy cập và quản lý toàn bộ hệ thống cửa hàng, đảm bảo quản lý hiệu quả các chức năng như quản lý người dùng, phân quyền truy cập và thống kê cửa hàng.

Nhân viên cửa hàng là những người chịu trách nhiệm quản lý các hoạt động kinh doanh trên hệ thống website Họ có khả năng quản lý danh sách sản phẩm, theo dõi đơn hàng, giám sát hoạt động bán hàng và thực hiện các tác vụ quản lý khác để đảm bảo hiệu quả hoạt động của cửa hàng.

Thiết kế giao diện người dùng là quá trình tạo ra các giao diện trực quan và hấp dẫn cho người dùng cuối, với mục tiêu xác định rõ ràng các yêu cầu thông tin của họ Quá trình này bao gồm việc đề xuất và thử nghiệm các mô hình giao diện tối ưu để nâng cao trải nghiệm người dùng.

Quản lý sản phẩm là quá trình xây dựng cơ sở dữ liệu để lưu trữ thông tin chi tiết về sản phẩm, bao gồm mô tả, hình ảnh, thuộc tính như kích thước, màu sắc và kiểu dáng, cùng với giá cả và các thông tin liên quan khác Đồng thời, cần xem xét các chức năng cần thiết để quản lý, cập nhật và hiển thị thông tin sản phẩm một cách hiệu quả trên website.

Quản lý đơn hàng là quy trình thiết yếu trong thương mại điện tử, bao gồm các chức năng như thêm sản phẩm vào giỏ hàng, thực hiện thanh toán, đặt hàng, cập nhật trạng thái đơn hàng và thông báo cho khách hàng về tiến trình xử lý Việc thiết kế quy trình này không chỉ giúp nâng cao trải nghiệm người dùng mà còn đảm bảo quản lý hiệu quả các đơn hàng từ khách hàng.

Tìm kiếm và lọc sản phẩm là quá trình quan trọng giúp người dùng dễ dàng tìm thấy sản phẩm mong muốn thông qua các tiêu chí như tên, mô tả, giá cả và thuộc tính (kích thước, màu sắc,…) Để nâng cao hiệu quả, các phương pháp tìm kiếm và lọc sản phẩm cần được tối ưu hóa, đồng thời hỗ trợ người dùng tìm kiếm bằng hình ảnh bằng cách chuyển đổi hình ảnh thành các từ khóa liên quan.

Hướng phát triển

Bảng 6.5 trình bày thông tin và kết quả kiểm thử các chức năng quản lý đơn hàng và giỏ hàng Bảng 6.6 cung cấp thông tin và kết quả kiểm thử cho các chức năng quản lý nhóm sản phẩm và sản phẩm Bảng 6.7 thể hiện thông tin và kết quả kiểm thử các chức năng mang tính chịu tải cao Cuối cùng, Bảng 6.8 cung cấp thông tin và kết quả kiểm thử logic xử lý hệ thống.

Trong bối cảnh kinh tế phát triển nhanh chóng và công nghệ thông tin cùng Internet ngày càng mạnh mẽ, chúng ta có thể xóa bỏ mọi khoảng cách, rút ngắn thời gian làm việc, và dễ dàng hơn trong việc giao tiếp.

Internet và công nghệ thông tin đã trở thành phần không thể thiếu trong đời sống hiện đại Ngành dịch vụ trực tuyến phát triển mạnh mẽ, mang lại nhiều lợi ích to lớn Trong số đó, thương mại điện tử là ngành ứng dụng sâu rộng, phụ thuộc chặt chẽ vào Internet và công nghệ thông tin.

Thương mại điện tử mang lại nhiều lợi ích đáng kể, cho phép chúng ta xem và mua sắm mọi thứ mà không cần ra khỏi nhà Đây là sự phát triển tất yếu để đáp ứng nhu cầu của xã hội hiện đại, nơi mà con người luôn yêu cầu sự nhanh chóng, tiện lợi và đơn giản trong công việc, đồng thời giúp tiết kiệm thời gian và công sức.

Nhận thức được tầm quan trọng của thương mại điện tử trong việc tối ưu hóa quy trình mua bán hàng trực tuyến, nhóm đã quyết định phát triển hệ thống website cho cửa hàng bán quần áo Hệ thống này được thiết kế với các yêu cầu và chức năng phù hợp, nhằm nâng cao hiệu quả, rút ngắn thời gian và giảm chi phí cho người tiêu dùng trong bối cảnh hiện nay.

Xây dựng một hệ thống website thương mại điện tử toàn diện bao gồm hai thành phần chính: website dành cho khách hàng và website dành cho quản trị, đảm bảo cung cấp đầy đủ các chức năng cơ bản cần thiết cho hoạt động kinh doanh trực tuyến hiệu quả.

Giao diện được thiết kế đơn giản, tiện lợi và dễ sử dụng, tạo cảm giác gần gũi với người dùng Hệ thống xử lý hoạt động chính xác và hiệu quả, ưu tiên tốc độ phản hồi, đồng thời nắm bắt các ngoại lệ và thông báo lỗi một cách thân thiện với người dùng.

Kết hợp các tính năng nổi bật từ các trang thương mại điện tử lớn trong một sản phẩm duy nhất, mang lại sự tiện lợi tối đa cho người dùng Sản phẩm áp dụng công nghệ và kỹ thuật hiện đại, đồng thời đáp ứng các tiêu chuẩn cơ bản và nâng cao hiện tại.

Người sử dụng cuối là những cá nhân truy cập và tương tác với hệ thống website, bao gồm khách hàng và người mua hàng trực tuyến Họ có khả năng xem thông tin sản phẩm, thêm sản phẩm vào giỏ hàng, đặt hàng, cũng như truy cập và quản lý tài khoản cá nhân của mình.

Quản trị viên cửa hàng là những người có quyền truy cập và quản lý toàn bộ hệ thống cửa hàng, cho phép họ thực hiện các chức năng như quản lý người dùng, phân quyền truy cập và thống kê cửa hàng một cách hiệu quả.

Nhân viên cửa hàng là những người chịu trách nhiệm quản lý hoạt động kinh doanh trên website, bao gồm việc quản lý danh sách sản phẩm, đơn hàng, theo dõi hoạt động bán hàng và thực hiện các tác vụ quản lý khác.

Thiết kế giao diện người dùng là quá trình tạo ra giao diện trực quan và hấp dẫn cho người dùng cuối, tập trung vào việc xác định các yêu cầu thông tin của họ Quá trình này bao gồm việc đề xuất và thử nghiệm các mô hình giao diện tối ưu nhằm nâng cao trải nghiệm người dùng.

Quản lý sản phẩm là quá trình xây dựng cơ sở dữ liệu để lưu trữ thông tin chi tiết về sản phẩm, bao gồm mô tả, hình ảnh, thuộc tính như kích thước, màu sắc và kiểu dáng, cũng như giá cả và thông tin liên quan khác Bên cạnh đó, cần xem xét các chức năng cần thiết để quản lý, cập nhật và hiển thị thông tin sản phẩm một cách hiệu quả trên website.

Quản lý đơn hàng là quá trình thiết kế và thực hiện các chức năng liên quan đến việc xử lý đơn hàng từ khách hàng, bao gồm thêm sản phẩm vào giỏ hàng, thanh toán, đặt hàng, cập nhật trạng thái đơn hàng và thông báo cho khách hàng về tiến trình xử lý.

Tìm kiếm và lọc sản phẩm hiệu quả là yếu tố quan trọng giúp người dùng dễ dàng tìm thấy sản phẩm mong muốn Việc này dựa trên các tiêu chí như tên, mô tả, giá cả và thuộc tính sản phẩm như kích thước, màu sắc Ngoài ra, hỗ trợ người dùng tìm kiếm sản phẩm bằng hình ảnh thông qua việc chuyển đổi hình ảnh thành các từ khóa liên quan cũng là một phương pháp hữu ích.

Tiêu đề	Xây dựng hệ thống website cho cửa hàng bán quần áo
Người hướng dẫn	ThS. Nguyễn Hữu Trung
Trường học	Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	khóa luận tốt nghiệp
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	192
Dung lượng	17,38 MB
File đính kèm	source_code.zip (16 MB)