Xây dựng website bán đồ công nghệ với spring boot và reactjs

- Xây dựng được website quản trị cho nhân viên của hàng với các chức năng quản lý thông tin đa dạng và tiện dụng.. - Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

-

BÁO CÁO ĐỒ ÁN 1 XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ

VỚI SPRING BOOT VÀ REACTJS

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670

Bùi Minh Huy 19521597

Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

-

BÁO CÁO ĐỒ ÁN 1 XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ

VỚI SPRING BOOT VÀ REACTJS

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670

Bùi Minh Huy 19521597

Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022

1

LỜI CẢM ƠN

Đầu tiên, nhóm xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô khoa Công nghệ phần mềm đã giúp cho em có những kiến thức cơ bản làm nền tảng để thực hiện đề tài này Đặc biệt, em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới cô Trần Thị Hồng Yến (Giảng viên khoa Công Nghệ Phần Mềm) Cô đã trực tiếp hướng dẫn tận tình, sửa chữa và đóng góp nhiều ý kiến quý báu giúp em hoàn thành tốt báo cáo môn học của mình Trong thời gian một học kỳ thực hiện đề tài, em đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới Từ đó, em vận dụng tối đa những gì đã thu thập được để hoàn thành một báo cáo đồ án tốt nhất Tuy nhiên, trong quá trình thực hiện, em không tránh khỏi những thiếu sót Chính vì vậy, em rất mong nhận được những sự góp ý từ phía Cô nhằm hoàn thiện những kiến thức mà em đã học tập

và là hành trang để em thực hiện tiếp các đề tài khác trong tương lai

Xin chân thành cảm ơn các quý Thầy Cô!

Nhóm sinh viên thực hiện

Phạm Tấn Khang Bùi Minh Huy

2

ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ

VỚI SPRING BOOT VÀ REACTJS

TÊN ĐỀ TÀI TIẾNG ANH:

BUILDING TECHNOLOGY SHOP WEBSITE WITH SPRING BOOT AND REACTJS

Cán bộ hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện: Từ ngày: 21/02/2022 đến ngày: 10/06/2022

Sinh viên thực hiện:

Phạm Tấn Khang – 19521670

Bùi Minh Huy – 19521597

Nội dung đề tài:

1 Giới thiệu đề tài:

Trong thời đại chuyển giao công nghệ cộng với sự tác động của đại dịch mà người tiêu dùng chuyển thói quen mua hàng tại các cửa hàng siêu thị sang mua sắm online Bởi vì sự tiện lợi, giá cả rõ ràng, vận chuyển đơn hàng ngày càng nhanh chóng hơn, các cửa hàng kinh doanh luôn nhận thấy được tiềm năng của việc tiếp thị và bán hàng online.Đặc biệt đối với các cửa hàng bán đồ công nghệ cần phải

mở rộng hơn trong việc quảng bá các mặt hàng của mình tới khách hàng Nhận thấy được nhu cầu của cửa hàng và tiềm năng trong việc kinh doanh online, nhóm

- Xây dựng được website quản trị cho nhân viên của hàng với các chức năng quản lý thông tin đa dạng và tiện dụng Website được phát triển dựa trên ReactJs

▪ Quản lý khuyến mãi

▪ Quản lý tài khoản nhân viên

▪ Thống kê

4

o Đối với phía website:

▪ Đăng nhập, đăng ký tài khoản

▪ Xác thực mail, quên mật khẩu

▪ Quản lý thông tin tài khoản

▪ Hiển thị danh sách sản phẩm, chi tiết sản phẩm

- Tất cả người dùng có nhu cầu mua đồ công nghệ tại cửa hàng

- Nhân viên, chủ cửa hàng

5 Phương pháp thực hiện:

- Tìm hiểu về Spring Boot, ReactJS, VueJS, PostgreSQL

- Tham khảo các website liên quan để hiểu rõ về nghiệp vụ

- Tiến hành phân tích và thiết kế hệ thống

- Tìm hiểu UX/UI và tiến hành thiết kế giao diện cho website

- Xây dựng website cho người dùng và website cho nhân viên

- Tiến hành triển khai và kiểm thử

6 Công nghệ sử dụng:

- Backend: Spring Boot

- Front-end: ReactJS, VueJS

- Database: PostgreSQL

- Source Control: GitHub

5

7 Kết quả mong đợi:

- Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài

- Hiểu rõ các nghiệp vụ, chức năng của một website thương mại điện tử

- Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai

dự án phần mềm để xây dựng website sản phẩm đề tài

- Giao diện website đẹp mắt, dễ sử dụng đối với người dùng

- Có thể thay đổi giao diện một cách linh động và mở rộng thêm các chức năng mới cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn trong tương lai

- Xây dựng giao diện admin với ReactJS

- Xây dựng giao diện website với VueJS

- Xây dựng RESTful API cho các chức năng

- Tích hợp API để hoàn thiện giao diện admin và website

Kiểm thử

và sửa lỗi 17/05/2021 – 31/05/2021

- Thực hiện kiểm thử các luồng chức năng

- Tiến hành sửa lỗi phát sinh nếu có

- Cải thiện giao diện và hoàn thành ứng dụng

7

9 Phân công công việc:

Công việc chung - Tìm hiểu công nghệ

- Phân tích, xác định, chức năng yêu cầu

- Kiểm thử

- Chuẩn bị tài liệu, viết báo cáo

- Xây dựng website bán hàng

Công việc cá nhân - Lập trình Backend, xây

dựng RESTful API

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

- Lập trình Frontend, xây dựng giao diện admin

- Crawl data cho website

Xác nhận của CBHD (Ký tên và ghi rõ họ tên)

ThS Trần Thị Hồng Yến

TP HCM, ngày 10 tháng 06 năm 2022

Sinh viên (Ký tên và ghi rõ họ tên)

Phạm Tấn Khang | Bùi Minh Huy

8

MỤC LỤC

LỜI CẢM ƠN 1

ĐỀ CƯƠNG CHI TIẾT 2

MỤC LỤC 8

DANH MỤC BẢNG 12

DANH MỤC HÌNH ẢNH 15

Chương 1 GIỚI THIỆU ĐỀ TÀI 17

1.1 Tên đề tài 17

1.2 Mô tả đề tài 17

1.3 Lý do chọn thiết kế Website 17

1.4 Công nghệ sử dụng 19

Chương 2 CƠ SỞ LÝ THUYẾT 20

2.1 Tổng quan về ReactJS 20

2.2 Tổng quan về VueJS 20

2.3 Tổng quan về Spring Boot 21

2.4 Tổng quan về Spring Data JPA 22

2.5 Tổng quan về Postgres SQL 22

2.6 Tổng quan về Cloudinary 23

2.7 Tổng quan về Json Web Token (JWT) 24

Chương 3 PHÂN TÍCH ĐẶC TẢ YÊU CẦU 26

3.1 Mô tả yêu cầu 26

3.1.1 Yêu cầu chức năng 26

3.1.2 Yêu cầu phi chức năng 28

3.2 Phân tích Use case 29

3.2.1 Use case quản lý 29

3.2.1.1 Sơ đồ Use case 29

3.2.1.2 Danh sách Actor 30

3.2.1.3 Danh sách Use-case 30

3.2.1.4 Đặc tả Use-case 31

3.2.2 Use case website 49

3.2.2.1 Sơ đồ Use case 49

9

3.2.2.2 Danh sách Actor 49

3.2.2.3 Danh sách Use case 50

3.2.2.4 Đặc tả Use Case 51

Chương 4 THIẾT KẾ HỆ THỐNG 62

4.1 Kiến trúc hệ thống 62

4.1.1 Kiến trúc hệ thống BackEnd 62

4.1.1.1 Mô tả kiến trúc hệ thống 62

4.1.1.2 Mô tả thành phần trong hệ thống 63

4.1.2 Mô tả kiến trúc FrontEnd 65

4.1.2.1 Phía hệ thống quản lý 65

4.1.2.2 Phía website .66

Chương 5 THIẾT KẾ CƠ SỞ DỮ LIỆU 67

5.1 Sơ đồ dữ liệu 67

5.2 Danh sách các bảng dữ liệu 68

5.3 Mô tả từng bảng dữ liệu 69

5.3.1 Bảng BRAND 69

5.3.2 Bảng CATEGORY 69

5.3.3 Bảng ATTRIBUTE 70

5.3.4 Bảng TAG 70

5.3.5 Bảng CATEGORY_ATTRIBUTE 71

5.3.6 Bảng PRODUCT 71

5.3.7 Bảng VARIANT 71

5.3.8 Bảng VARIANT_ATTRIBUTE 72

5.3.9 Bảng IMPORT 72

5.3.10 Bảng IMPORT_DETAIL 73

5.3.11 Bảng VOUCHER 73

5.3.12 Bảng ORDERS 74

5.3.13 Bảng ORDER_DETAIL 75

5.3.14 Bảng USER 75

5.3.15 Bảng ROLE 76

5.3.16 Bảng VERIFICATION_TOKEN 76

10

5.3.17 Bảng PASSWORD_RESET_TOKEN 77

Chương 6 THIẾT KẾ GIAO DIỆN 78

6.1 Phía hệ thống quản lý 78

6.1.1 Sơ đồ các màn hình 78

6.1.2 Danh sách các màn hình 79

6.1.3 Mô tả chi tiết 81

6.1.3.1 Màn hình quản lý phân loại 81

6.1.3.2 Màn hình thêm phân loại 82

6.1.3.3 Màn hình chỉnh sửa phân loại 83

6.1.3.4 Màn hình quản lý thương hiệu 84

6.1.3.5 Màn hình tạo mới thương hiệu 85

6.1.3.6 Màn hình chỉnh sửa thương hiệu 87

6.1.3.7 Màn hình quản lý sản phẩm 88

6.1.3.8 Màn hình tạo mới sản phẩm 89

6.1.3.9 Màn hình chỉnh sửa sản phẩm 90

6.1.3.10 Màn hình chỉnh sửa phiên bản 92

6.1.3.11 Màn hình quản lý đơn hàng 93

6.1.3.12 Màn hình xem chi tiết đơn hàng 94

6.1.3.13 Màn hình xuất hóa đơn 95

6.1.3.14 Màn hình quản lý nhập hàng 96

6.1.3.15 Màn hình tạo mới đơn nhập 97

6.1.3.16 Màn hình xem chi tiết đơn nhập 98

6.1.3.17 Màn hình xuất đơn nhập 99

6.1.3.18 Màn hình quản lý tài khoản khách hàng 100

6.1.3.19 Màn hình quản lý tài khoản nhân viên 100

6.1.3.20 Màn hình tạo mới tài khoản nhân viên 101

6.1.3.21 Màn hình quản lý khuyến mãi 102

6.1.3.22 Màn hình tạo mới khuyến mãi 103

6.1.3.23 Màn hình chỉnh sửa khuyến mãi 104

6.1.3.24 Màn hình thống kê 105

6.2 Phía Website 106

11

6.2.1 Sơ đồ màn hình 106

6.2.2 Danh sách các màn hình 106

6.2.3 Chi tiết màn hình 108

6.2.3.1 Trang chủ 108

6.2.3.2 Xem sản phẩm theo thương hiệu 109

6.2.3.3 Xem sản phẩm theo phân loại 110

6.2.3.4 Xem giỏ hàng 111

6.2.3.5 Thông tin đặt hàng 112

6.2.3.6 Chi tiết sản phẩm 113

6.2.3.7 Lịch sử mua hàng 114

6.2.3.8 Thay đổi thông tin cá nhân 114

6.2.3.9 Thay đổi mật khẩu 115

6.2.3.10 Đăng nhập 116

6.2.3.11 Đăng ký 117

6.2.3.12 Quên mật khẩu 118

6.2.3.13 Đặt lại mật khẩu 119

KẾT LUẬN 120

TÀI LIỆU THAM KHẢO 122

12

DANH MỤC BẢNG

Bảng 3.1 Yêu cầu chức năng 28

Bảng 3.2 Danh sách Actor quản lý 30

Bảng 3.3 Danh sách use-case quản lý 31

Bảng 3.4 Đăc tả use-case đăng nhập (quản lý) 31

Bảng 3.5 Đặc tả use-case đăng xuất (quản lý) 32

Bảng 3.6 Đặc tả use-case chỉnh sửa thông tin (quản lý) 33

Bảng 3.7 Đặc tả use-case đổi mật khẩu (quản lý) 34

Bảng 3.8 Đặc tả use-case quản lý phân loại sản phẩm (quản lý) 36

Bảng 3.9 Đặc tả use-case quản lý thương hiệu sản phẩm (quản lý) 37

Bảng 3.10 Đặc tả use-case quản lý sản phẩm, phiên bản (quản lý) 40

Bảng 3.11 Đặc tả use-case quản lý đơn hàng (quản lý) 42

Bảng 3.12 Đặc tả use-case quản lý nhập hàng (quản lý) 43

Bảng 3.13 Đặc tả use-case quản lý tài khoản (quản lý) 45

Bảng 3.14 Đặc tả use-case quản lý khuyến mãi (quản lý) 47

Bảng 3.15 Đặc tả use-case thống kê (quản lý) 48

Bảng 3.16 Danh sách Actor (website) 50

Bảng 3.17 Danh sách use case (website) 50

Bảng 3.18 Đặc tả use case xem sản phẩm theo phân loại (website) 52

Bảng 3.19 Đặc tả use case xem sản phẩm theo thương hiệu (website) 53

Bảng 3.20 Đặc tả use case xem chi tiết sản phẩm (website) 54

Bảng 3.21 Đcặ tả use case giỏ hàng (website) 55

Bảng 3.22 Đặc tả use case đặt hàng (website) 56

Bảng 3.23 Đặc tả use case chỉnh sửa tài khoản (website) 57

Bảng 3.24 Đặc tả use case thay đổi mật khẩu (website) 58

Bảng 3.25 Đặc tả use case xem lịch sử đặt hàng (website) 58

Bảng 3.26 Đặc tả use case đăng ký (website) 59

Bảng 3.27 Đặc tả use case đăng nhập (website) 60

Bảng 3.28 Đặc tả use case quên mật khẩu (website) 61

13

Bảng 4.1 Mô tả thành phần hệ thống BackEnd – 1 64

Bảng 4.2 Mô tả thành phần hệ thống BackEnd - 2 64

Bảng 4.3 Mô tả thành phần hệ thống phía quản lý 65

Bảng 4.4 Mô tả thành phần hệ thống phía website 66

Bảng 5.1 Dach sách các bảng dữ liệu 69

Bảng 5.2 Bảng BRAND 69

Bảng 5.3 Bảng CATEGORY 70

Bảng 5.4 Bảng ATTRIBUTE 70

Bảng 5.5 Bảng TAG 70

Bảng 5.6 Bảng CATEGORY_ATTRIBUTE 71

Bảng 5.7 Bảng PRODUCT 71

Bảng 5.8 Bảng VARIANT 72

Bảng 5.9 Bảng VARIANT_ATTRIBUTE 72

Bảng 5.10 Bảng IMPORT 73

Bảng 5.11 Bảng IMPORT_DETAIL 73

Bảng 5.12 Bảng VOUCHER 74

Bảng 5.13 Bảng ORDERS 75

Bảng 5.14 Bảng ORDER_DETAIL 75

Bảng 5.15 Bảng USER 76

Bảng 5.16 Bảng ROLE 76

Bảng 5.17 bảng VERFICATION_TOKEN 77

Bảng 5.18 Bảng PASSWORD_RESET_TOKEN 77

Bảng 6.1 Danh sách các màn hình 81

Bảng 6.2 Bảng mô tả màn hình quản lý phân loại 82

Bảng 6.3 Bảng mô tả màn hình thêm phân loại 83

Bảng 6.4 Bảng mô tả màn hình chỉnh sửa phân loại 84

Bảng 6.5 Bảng mô tả màn hình quản lý thương hiệu 85

Bảng 6.6 Bảng mô tả màn hình tạo mới thương hiệu 86

Bảng 6.7 Bảng mô tả màn hình chỉnh sửa thương hiệu 87

14

Bảng 6.8 Bảng mô tả màn hình quản lý sản phẩm 88

Bảng 6.9 Bảng mô tả màn hình tạo mới sản phẩm 90

Bảng 6.10 Bảng mô tả màn hình chỉnh sửa sản phẩm 91

Bảng 6.11 Bảng mô tả màn hình chỉnh sửa phiên bản 93

Bảng 6.12 Bảng mô tả màn hình quản lý đơn hàng 94

Bảng 6.13 Bảng mô tả màn hình xem chi tiết đơn hàng 95

Bảng 6.14 Bảng mô tả màn hình xuất hoá đơn 95

Bảng 6.15 Bảng mô tả màn hình quản lý nhập hàng 96

Bảng 6.16 Bảng mô tả màn hình tạo mới đơn nhập 97

Bảng 6.17 Bảng mô tả màn hình xem chi tiết đơn nhập 98

Bảng 6.18 Bảng mô tả màn hình thống kê 105

Bảng 6.19 Danh sách các màn hình website 107

Bảng 6.20 Bảng mô tả chi tiết màn hình trang chủ 108

Bảng 6.21 Bảng mô tả chi tiết màn hình xem sản phẩm theo thương hiệu 110

Bảng 6.22 Bảng mô tả chi tiết màn hình xem sản phẩm theo thương hiệu 111

Bảng 6.23 Bảng mô tả chi tiết màn hình giỏ hàng 112

Bảng 6.24 Bảng mô tả chi tiết màn hình thông tin đặt hàng 112

Bảng 6.25 Bảng mô tả chi tiết màn hình 114

Bảng 6.26 Bảng mô tả chi tiết màn hình thay đổi mật khẩu 115

Bảng 6.27 Bảng mô tả chi tiết màn hình đăng nhập 116

Bảng 6.28 Bảng mô tả chi tiết màn hình đăng ký 117

Bảng 6.29 Bảng mô tả chi tiết màn hình quên mật khẩu 118

Bảng 6.30 Bảng mô tả chi tiết màn hình đặt lại mật khẩu 119

15

DANH MỤC HÌNH ẢNH

Hình 3.1 Sơ đồ use case quản lý 29

Hình 3.2 Sơ đồ use-case website 49

Hình 4.1 Kiến trúc hệ thống - BackEnd 62

Hình 4.2 Cấu trúc folder - BackEnd 63

Hình 4.3 Cấu trúc folder phía quản lý 65

Hình 4.4 Cấu trúc folder phía website 66

Hình 5.1 Sơ đồ dữ liệu 67

Hình 6.1 Sơ đồ các màn hình (quản lý) 78

Hình 6.2 Màn hình quản lý phân loại 81

Hình 6.3 Màn hình thêm phân loại 82

Hình 6.4 Màn hình chỉnh sửa phân loại 83

Hình 6.5 Màn hình quản lý thương hiệu 84

Hình 6.6 Màn hình tạo mới thương hiệu 85

Hình 6.7 Màn hình chỉnh sửa thương hiệu 87

Hình 6.8 Màn hình quản lý sản phẩm 88

Hình 6.9 Màn hình tạo mới sản phẩm 89

Hình 6.10 Màn hình chỉnh sửa sản phẩm 90

Hình 6.11 Màn hình chỉnh sửa phiên bản 92

Hình 6.12 Màn hình quản lý đơn hàng 93

Hình 6.13 Màn hình quản lý nhập hàng 96

Hình 6.14 Màn hình tạo mới đơn nhập 97

Hình 6.15 Màn hình xem chi tiết đơn nhập 98

Hình 6.16 Màn hình thống kê 105

Hình 6.17 Sơ đồ màn hình website 106

Hình 6.18 Màn hình trang chủ 108

Hình 6.19 Màn hình xem sản phẩm theo thương hiệu 109

Hình 6.20 Màn hình xem sản phẩm theo thương hiệu 110

Hình 6.21 Màn hình giỏ hàng 111

16

Hình 6.22 Màn hình thông tin đặt hàng 112

Hình 6.23 Màn hình chi tiết sản phẩm 113

Hình 6.24 Màn hình thay đổi thông tin cá nhân 114

Hình 6.25 Màn hình thay đổi mật khẩu 115

Hình 6.26 Màn hình đăng nhập 116

Hình 6.27 Màn hình đăng ký 117

Hình 6.28 Màn hình quên mật khẩu 118

Hình 6.29 Màn hình đặt lại mật khẩu 119

Tên gọi website của đề tài là GearShop GearShop là một website hỗ trợ quản

lý hàng hóa và cung cấp giải pháp bán hàng online cho cửa hàng công nghệ Ở GearShop là nơi cung cấp một thế giới về đồ công nghệ như laptop, màn hình, chuột, bàn phím, bàn ghế thông minh, …

Website cung cấp chức năng cho 2 phía người dùng chính: quản lý cửa hàng, khách hàng Về phía quản lý GearShop cung cấp các chức năng phục vụ cho việc quản lý phân loại sản phẩm, thương hiệu, sản phẩm và phiên bản, nhập hàng hóa, quản lý các đơn hàng, khuyến mãi, người dùng trong hệ thống và cuối cùng là thống

kê Về phía đối tượng sử dụng là khách hàng thì GearShop cung cấp các tính năng như: xem danh sách sản phẩm theo phân loại, thương hiệu, lọc sản phẩm, sắp xếp, xem chi tiết sản phẩm, quản lý giỏ hàng, quản lý hồ sơ và thông tin của khách hàng nếu khách hàng đăng nhập vào hệ thống

1.3 Lý do chọn thiết kế Website

- Lý do khách quan:

Cuộc cách mạng khoa học và công nghệ đã và đang diễn ra vô cùng sôi động trên toàn thế giới đã đưa thế giới bước sang một kỉ nguyên mới, kỉ nguyên của công nghệ thông tin Việc ứng dụng tin học vào đời sống nói chung và công tác quản lý nói riêng đang phát triển mạnh mẽ, nó góp vai trò không nhỏ trong việc đưa tin học trở thành một phần không thể thiếu trong tất cả mọi nghành nghề từ văn phòng, quảng cáo, tài chính

18

Từ khóa “e-Commerce” chắc chắn không còn xa lạ với chúng ta Các hoạt động kinh doanh mua bán đang chuyển dần từ trực tiếp sang các đơn đặt hàng online Điều đó đặt ra yêu cầu phải chuyển đổi mô hình kinh doanh của các cửa hàng, nhà bán lẻ nói chung và thị trường bán lẻ thiết bị điện tử nói riêng Để có thể triển khai tốt mô hình kinh doanh mới này các cửa hàng, nhà bán lẻ phải quản lý tốt được số lượng sản phẩm trong kho của mình cũng như quản lý các hoạt động khác trong kinh doanh online để tránh mất mát về lợi nhuận

- Lý do chủ quan:

Bản thân nhóm chúng em muốn xây dựng một ứng dụng gần hơn với ứng dụng thực tế, có thể giải quyết được vấn đề về việc xây dựng một cửa hàng kinh doanh online mà các cửa hàng bán đồ công nghệ mắc phải Cùng với đó là nhu cầu sử dụng phần mềm của một thành viên trong nhóm, tụi em sẽ cố gắng phát triển thêm để có thể đưa phần mềm vào sử dụng thực tế

19

1.4 Công nghệ sử dụng

- Front-End:

• Website bán hàng: Vue, Vuex, thư viện UI Vuetify

• Website quản lý: React Js, dva, umi, thư viện UI Ant design

20

Chương 2

CƠ SỞ LÝ THUYẾT 2.1 Tổng quan về ReactJS

- Tổng quan:

React là một thư viện để xây dựng giao diện người dùng có thể kết hợp Nó khuyến khích việc tạo ra các thành phần giao diện người dùng có thể tái sử dụng, hiển thị dữ liệu thay đổi theo thời gian Rất nhiều người sử dụng React làm V trong MVC React trừu tượng hóa DOM khỏi bạn, cung cấp mô hình lập trình đơn giản hơn và hiệu suất tốt hơn React cũng có thể hiển thị trên máy chủ bằng Node và nó

có thể cung cấp năng lượng cho các ứng dụng gốc bằng React Native React triển khai luồng dữ liệu phản ứng một chiều, điều này giúp giảm bớt phần soạn sẵn và dễ

lý luận hơn so với ràng buộc dữ liệu truyền thống

- Ưu điểm nổi bật:

• Sử dụng DOM ảo là một đối tượng JavaScript Điều này sẽ cải thiện hiệu suất ứng dụng, vì DOM ảo JavaScript nhanh hơn DOM thông thường

• Có thể được sử dụng trên máy khách và máy chủ cũng như với các khuôn khổ khác

• Các mẫu thành phần và dữ liệu cải thiện khả năng đọc, giúp duy trì các ứng dụng lớn hơn

2.2 Tổng quan về VueJS

- Tổng quan:

VueJS là một framework khá nổi tiếng, nó được xây dựng theo mô hình Step

by Step, nên khá là tiện và rất đễ sử dụng và phát triển website trên nền Front-end Vue hỗ trợ khá tốt cho các bạn, nó cũng rất dễ học và xây dựng website hiệu quả, đặc biết là nó sẽ xây dựng website của các bạn theo dạng SPA (Single Page

Application) nên cải thiện hiệu suất khá là tốt

21

- Ưu điểm nổi bật:

• Dễ dàng học và tiếp cận cho người mới

• Vue có thể tạo cấu trúc project nhanh chóng hơn nhờ vào command line interface

• Vue sở hữu một hệ sinh thái vững chắc nên có thể cung cấp một số ons rất hữu ích cho việc xây dựng một ứng dụng fontend điển hình nhất

add-Nó có thể bao gồm: router, vuex, test-utils, dev-tools, cli, …

vue-• No build step required: Nếu sử dụng Vue thì bạn sẽ không cần phải trải qua quá nhiều bước để build mà có thể đi thẳng vào vấn đề một cách

- Ưu điểm nổi bật:

• Phát triển web một cách đơn giản và nhanh chóng

- Tính năng nổi bật:

• Là một repository mạnh mẽ và object-mapping abstraction tùy chỉnh

• Hỗ trợ cho cross-store persistence Tức là một entity có thể được lưu trữ một phần trong MySQL và Neo4j (Hệ thống quản lý cơ sở dữ liệu

đồ thị)

• Tự động tạo các truy vấn từ ngay chính tên các phương thức truy vấn

• Các lớp dựa vào tên miền cung cấp các thuộc tính cơ bản

• Hỗ trợ kiểm tra quản lý minh bạch

• Khả năng tích hợp mã repository tùy chỉnh

• Dễ dàng tích hợp với Spring Framework với namespace tùy chỉnh

2.5 Tổng quan về Postgres SQL

- Tổng quan:

PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ và đối tượng (object-relational database management system) miễn phí và nguồn mở (RDBMS) tiên tiến nhất hiện nay khả năng mở rộng cao và tuân thủ các tiêu chuẩn kỹ thuật Nó được thiết kế để xử lý một loạt các khối lượng công việc lớn, từ các máy tính cá nhân đến kho dữ liệu hoặc dịch vụ Web có nhiều người dùng đồng thời

23

- Ưu điểm nổi bật:

• Cung cấp nhiều kiểu dữ liệu: PostgreSQL cung cấp đa dạng kiểu dữ liệu như nguyên hàm, cấu trúc, hình học,

• Bảo đảm toàn vẹn dữ liệu: Dữ liệu trong PostgreSQL luôn được đảm bảo tính toàn vẹn

• Tính năng thiết lập linh hoạt: PostgreSQL cho phép người dùng thiết lập danh mục từ cơ bản đến nâng cao, tối ưu ưu hóa tốc độ truy cập, hỗ trợ thống kê trên nhiều cột Cùng với đó là vô số thiết lập khác

• Chức năng bảo mật: PostgreSQL hỗ trợ xây dựng hàng rào bảo mật, xác thực mạnh

• Khả năng mở rộng: Người dùng có thể thực hiện mở rộng hệ thống qua các phức thức lưu trữ, kết nối cơ sở dữ liệu

• Chức năng tìm kiếm văn bản: PostgreSQL cung cấp tính năng tìm kiếm văn bản đầy đủ, hệ thống hóa ký tự theo cách khoa học

2.6 Tổng quan về Cloudinary

- Tổng quan:

Cloudinary là một giải pháp quản lý hình ảnh từ đầu đến cuối cho trang web

và ứng dụng di động của bạn Cloudinary bao gồm mọi thứ, từ tải lên hình ảnh, lưu trữ, thao tác, tối ưu hóa để phân phối Bạn có thể dễ dàng tải hình ảnh lên đám mây,

tự động thực hiện các thao tác hình ảnh thông minh mà không cần cài đặt bất kỳ phần mềm phức tạp nào Tất cả hình ảnh của bạn sau đó được phân phối liền mạch thông qua CDN nhanh, được tối ưu hóa và sử dụng các thực tiễn tốt nhất trong ngành Cloudinary cung cấp API toàn diện và khả năng quản trị và dễ dàng tích hợp với các ứng dụng web và di động mới và hiện có

- Ưu điểm nổi bật:

• Miễn phí

• Config dễ dàng tiện lợi

• Các chuỗi thông tin dạng JSON sẽ tiến hành mã hoá để trở thành một chuỗi ký tự lộn xộn, không có trật tự nhất định và rất khó hiểu khi nhìn vào Thông tin này có thể được xác minh và tin cậy vì nó được ký điện

tử – digitally signed JWT có thể được ký bằng cách sử dụng một secret (với thuật toán HMAC) hoặc cặp public/private key dùng chuẩn RSA hoặc ECDSA

• Nói một cách khác, JWT là sự kết hợp (bởi dấu ) một Object Header dưới định dạng JSON được encode base64, một payload object dưới định dạng JSOn được encode base64 và một Signature cho URI cũng được mã hóa base64 nốt

- Ưu điểm nổi bật:

• Nhỏ gọn: JWT luôn là một sự lựa chọn được ưu tiên hàng đầu khi thực hiện chuyển đổi trong môi trường HTTP và HTML, bởi các mã JWT nhỏ hơn rất nhiều so với mã thông báo SAML Lý do là bởi vì so với XML thì JSON ngắn gọn hơn rất nhiều

• Phổ biến: Bộ phân tích cú pháp JSON được sử dụng phổ biến trong hầu hết tất cả các ngôn ngữ lập trình bởi chúng có thể tạo ra bản đồ trực tiếp hướng đến các đối tượng và giúp quá trình làm việc được diễn ra dễ dàng hơn

25

• Dễ xử lý: Được sử dụng phổ biến trên nhiều nền tảng internet, JWT sẽ được xử lý một cách dễ dàng trên mọi thiết bị của người dùng miễn là các thiết bị đó được kết nối với mạng internet nhất là các thiết bị di động

• An toàn: JWT có thể thực hiện ký một cách bí mật bằng cách sử dụng cặp khóa public/private dưới dạng chứng chỉ X.509 và thuật toán HMAC Tương tự JWT, mã SAML cũng sử dụng cặp khóa này nhưng

nó có thể khiến thông tin bị đánh cắp do việc ký XML sẽ tạo ra các lỗ hổng bảo mật

26

Chương 3

PHÂN TÍCH ĐẶC TẢ YÊU CẦU 3.1 Mô tả yêu cầu

3.1.1 Yêu cầu chức năng

Khách hàng

Đăng ký tài khoản

Khách hàng có thể đăng ký tài khoản bằng email để dễ dàng sử dụng các chức năng và

ưu đãi của website

Xác thực tài khoản bằng email

Sau khi khách hàng đăng ký tài khoản, một email sẽ được gửi đến hòm thư khách hàng

để xác thực

tài khoản để đăng nhập

Quên mật khẩu

Khách hàng có thể chọn quên mật khẩu, một email sẽ được gửi đến hòm thư khách hàng, theo đường link và đặt lại mật khẩu mới

Chỉnh sửa thông tin tài khoản

Khách hàng có thể chỉnh sửa thông tin cá nhận cũng như mật khẩu tài khoản của mình

Xem lịch sử mua hàng

Khách hàng có thể theo dõi chi tiết danh sách chi tiết các đơn hàng mình đã đặt

27

Giỏ hàng

Khách hàng có thể chọn các sản phẩm và đưa vào giỏ hàng để thuận tiện cho việc mua sắm

Đặt hàng

Chức năng đặt hàng hỗ trợ cả hai đối tượng khách hàng đã có tài khoản và chưa có tài khoản

- Đối với các khách hàng đã có tài khoản: Yêu cầu đặt hàng sẽ được chuyển thẳng tới cho phía quản lý

- Đối với các khách hàng chưa có tài khoản: khách hàng phải nhập đầy đủ thông tin như số điện thoại, địa chỉ… Nhân viên sẽ gọi điện và xác nhận

Quản lý

chức năng thêm, sửa, xóa sản phẩm

Quản lý biến thể sản phẩm

Nhân viên quản lý có thể thực hiện các chức năng thêm, sửa xoá các biến thể của sản phẩm đó

chức năng thêm, sửa, xóa thể loại

Quản lý thương hiệu

Nhân viên quản lý có thể các thực hiện các chức năng thêm, sửa, xóa thương hiệu Quản lý mã giảm

giá

Nhân viên quản lý có thể các thực hiện các chức năng thêm, sửa, xóa các mã giảm giá Quản lý đơn hàng Nhân viên quản lý có thể xem và cập nhật

28

trạng thái của đơn hàng Nếu đơn hàng của tài khoản chưa đăng ký thì nhân viên sẽ gọi điện xác nhận

đơn nhập hàng

Quản lý tài khoản

Admin có thể thêm, sửa, xoá tài khoản cho nhân viên Ngoài ra admin có thể xem chi tiết, vô hiệu hoá tài khoản khách hàng

Thống kê

Hệ thống cung cấp các biểu đồ, số liệu trực quan và chức năng xuất file excel giúp nhân viên quản lí dễ dàng nắm bắt được tình hình kinh doanh của cửa hàng

Bảng 3.1 Yêu cầu chức năng

3.1.2 Yêu cầu phi chức năng

- Tính bảo mật: Phải đảm bảo an toàn dữ liệu người dùng, ngăn chặn các tấn

công từ bên ngoài, kiểm soát vận hành hệ thống, giảm thiểu tối đa mức độ rủi

ro, rò rỉ thông tin như các chức năng xác thực người dùng (đăng nhập, đăng ký)

- Tính tiện dụng: Phần mềm có giao diện đẹp mắt, dễ sử dụng và tiện lợi trong

việc mua sắm online và quản lý của nhân viên

- Tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu một lượng lớn dữ

liệu, tránh xảy ra lỗi ngoại lệ

- Tính tương thích: Ứng dụng có thể chạy ổn định và tương thích với nhiều

nền tảng hệ điều hành khác nhau

29

3.2 Phân tích Use case

3.2.1 Use case quản lý

3.2.1.1 Sơ đồ Use case

Hình 3.1 Sơ đồ use case quản lý

30

3.2.1.2 Danh sách Actor

Bảng 3.2 Danh sách Actor quản lý

3.2.1.3 Danh sách Use-case

1 Đăng nhập Thể hiện chức năng đăng nhập của phần mềm

2 Đăng xuất Thể hiện chức năng đăng xuất của phần mềm

3 Quản lý tài khoản

cá nhân

Thể hiện các chức năng quản lý tài khoản cá nhân (Thay đổi thông tin cá nhân, đổi mật khẩu)

4 Quản lý phân loại Thể hiện các chức năng quản lý phân loại (tìm kiếm,

sắp xếp, tạo mới, chỉnh sửa, xóa)

7 Quản lý đơn hàng Thể hiện các chức năng quản lý đơn hàng (tìm kiếm,

sắp xếp, thay đổi trạng thái, xóa, xuất hóa đơn)

8 Quản lý nhập hàng Thể hiện các chức năng quản lý đơn hàng (tìm kiếm,

sắp xếp, thêm mới, xóa, xuất phiếu nhập)

9 Quản lý tài khoản Thể hiện các chức năng quản lý tài khoản (tìm kiếm,

sắp xếp, thêm mới, xóa, vô hiệu hóa tài khoản)

11 Thống kê Thể hiện các chức năng xem thông tin kinh doanh

(xem thu, chi, sản phẩm bán chạy theo bộ lọc, xuất file Excel)

Bảng 3.3 Danh sách use-case quản lý

3.2.1.4 Đặc tả Use-case

a Đăng nhập

Tóm tắt Chức năng đăng nhập vào hệ thống

Dòng sự kiện chính 1 Người dùng điền tên đăng nhập, mật khẩu

2 Người dùng nhấn chọn button “Đăng nhập”

3 Hệ thống tiếp nhận và xác thực nếu đúng thông tin

4 đăng nhập màn hình sẽ được chuyển tới trang chủ.Dòng sự kiện khác Nếu như xác thực thành công phần mềm sẽ tiến hành tải

Chuyển tới trang chủ nếu như xác thực thành công

Đưa ra cảnh báo nếu như người dùng điền sai thông tin

Điểm mở rộng Không có

Bảng 3.4 Đăc tả use-case đăng nhập (quản lý)

32

b Đăng xuất

Tóm tắt Chức năng đăng xuất của hệ thống

Dòng sự kiện chính 1 Người dùng click chọn vào hình đại diện trên

góc phải màn hình

2 Người dùng click chọn vào “Đăng xuất”

3 Phần mềm chuyển về màn hình đăng nhập Dòng sự kiện khác Không có

Yêu cầu đặc biệt Không có

Bảng 3.5 Đặc tả use-case đăng xuất (quản lý)

c Chỉnh sửa thông tin

Tóm tắt Chức năng chỉnh sửa thông tin cá nhân của hệ thống Dòng sự kiện chính 1 Người dùng click chọn vào hình đại diện trên góc phải

màn hình

2 Người dùng chọn “chỉnh sửa thông tin” Sẽ xuất hiện popup để người dùng chỉnh sửa thông tin cá nhân bao

33

gồm: Tên hiển thị, email, số điện thoại, ảnh đại diện Phần mềm có những ràng buộc về số điện thoại, email, cũng như độ dài của tên hiển thị

3 Sau khi chỉnh sửa xong người dùng nhấn “Lưu” để tiến hành lưu lại hoặc nhấn “Esc” trên bàn phím để thoát Dòng sự kiện khác Xuất hiện cái Alert thông báo khi người dùng thao tác sai Yêu cầu đặc biệt Không có

Tóm tắt Chức năn đổi mật khẩu của hệ thống

Dòng sự kiện chính 1 Người dùng click chọn vào hình đại diện trên góc phải

màn hình

2 Nếu người dùng nhấn “đổi mật khẩu” thì sẽ xuất hiện popup “ĐỔI MẬT KHẨU”, người dùng tiến hành nhập mật khẩu cũ và 2 lần mật khẩu mới, 2 lần nhập phải trùng khớp nhau, mật khẩu mới phải khác với mật khẩu cũ

34

3 Sau khi điền đủ thông tin người dùng nhấn “Lưu thay đổi” để thay đổi mật khẩu hoặc nhấn “Esc” trên bàn phím

để thoát Dòng sự kiện khác Xuất hiện các Alert thông báo nếu người dùng nhập sai Yêu cầu đặc biệt Mật khẩu mới phải khác mật khẩu cũ, 2 lần nhập mật khẩu

mới phải trùng khớp nhau Trạng thái hệ thống

trước khi thực hiện

Bảng 3.7 Đặc tả use-case đổi mật khẩu (quản lý)

e Quản lý phân loại sản phẩm

Tên chức năng Quản lý phân loại sản phẩm

Tóm tắt Thực hiện các chức năng tìm kiếm, sắp xếp, tạo mới phân

loại, chỉnh sửa và xóa phân loại Dòng sự kiện chính 1 Sắp xếp: Khi người dùng ấn vào mũi tên lên xuống ở

cột “ID” thì phân loại sẽ được sắp xếp tăng dần hoặc giảm giần theo ID

2 Tìm kiếm: Khi người dùng nhấn vào icon “Search” ở cột “Tên phân loại” sẽ xuất hiện thanh tìm kiếm Người

3.3 Nhấn “Hoàn tất” để lưu lại hoặc nhấn “Hủy” để hủy thao tác

4 Chỉnh sửa:

4.1 Người dùng nhấn vào icon “Edit” trên dòng của phân loại muốn chỉnh sửa để chuyển sang trang chỉnh sửa 4.2 Người dùng tiến hành cập nhật hình ảnh, tên phân loại, mô tả

4.3 Nhấn “Hoàn tất” để lưu lại hoặc nhấn “Hủy” để hủy thao tác

5 Xóa:

5.1 Người dùng nhấn vào icon “delete” trên dòng phân loại muốn xóa để xóa phân loại

5.2 Người dùng xác nhận lại bằng popup để xóa

Dòng sự kiện khác Xuất hiện các thông báo lỗi nếu người dùng thao tác sai Yêu cầu đặc biệt Không có

Bảng 3.8 Đặc tả use-case quản lý phân loại sản phẩm (quản lý)

f Quản lý thương hiệu sản phẩm

Tên chức năng Quản lý thương hiệu sản phẩm

Tóm tắt Thực hiện các chức năng tìm kiếm, sắp xếp, tạo mới

phân loại, chỉnh sửa và xóa thương hiệu Dòng sự kiện chính 1 Sắp xếp: Khi người dùng ấn vào mũi tên lên xuống

ở cột “ID” thì thương hiệu sẽ được sắp xếp tăng dần hoặc giảm giần theo ID

2 Tìm kiếm: Khi người dùng nhấn vào icon “Search”

ở cột “Tên thương hiệu” sẽ xuất hiện thanh tìm kiếm Người dùng tiến hành nhập từ khóa, sau đó nhấn icon

“Search” hoặc “Filter” để tìm kiếm thương hiệu

38

g Quản lý sản phẩm, phiên bản

Tên chức năng Quản lý sản phẩm, phiên bản

Tóm tắt Thực hiện các chức năng tìm kiếm, sắp xếp, tạo mới sản

phẩm, chỉnh sửa và xóa sản phẩm, chỉnh sửa và xóa phiên bản

Dòng sự kiện chính 1 Sắp xếp: Khi người dùng ấn vào mũi tên lên xuống ở

cột “ID” thì sản phẩm sẽ được sắp xếp tăng dần hoặc giảm giần theo ID

2 Tìm kiếm: Khi người dùng nhấn vào icon “Search” ở cột “Tên thương hiệu” sẽ xuất hiện thanh tìm kiếm Người dùng tiến hành nhập từ khóa, sau đó nhấn icon “Search” hoặc “Filter” để tìm kiếm sản phẩm

3.5 Sau khi điền đầy đủ thông tin người dùng nhấn

“Hoàn tất” để lưu lại hoặc “Hủy” để hủy thao tác