Đồ án tìm hiểu spring boot, reactjs xây dựng website quản lý cửa hàng bán linh kiện điện tử

KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự do – Hạnh phúcPHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ và tên Sinh viên 1: Lương Bích Long MSSV 1: 19110391 Họ và tên Sinh viên 2: Nguyễn Hồng Quâ

CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM

LƯƠNG BÍCH LONG - 19110391 NGUYỄN HỒNG QUÂN – 19110444

TÌM HIỂU SPRING BOOT, REACTJS XÂY DỰNG WEBSITE QUẢN LÝ CỬA HÀNG

BÁN LINH KIỆN ĐIỆN TỬ

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN HỮU TRUNG

KHÓA 2019 - 2023

TP Hồ Chí Minh, tháng 7 năm 2023

1

KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Lương Bích Long MSSV 1: 19110391

Họ và tên Sinh viên 2: Nguyễn Hồng Quân MSSV 2: 19110444 Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Tìm hiểu Spring boot, ReactJS xây dựng website quản lý cửa hàng bán linh kiện điện tử.

Họ và tên giảng viên hướng dẫn: ThS Nguyễn Hữu

Trung NHẬN XÉT

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

2 Ưu điểm:

3 Khuyết điểm:

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

5 Đánh giá loại:

6 Điểm:

TP Hồ Chí Minh, tháng 7 năm 2023

Giảng viên hướng dẫn

(Ký & ghi rõ họ tên)

KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự do – Hạnh phúc

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

Họ và tên Sinh viên 1: Lương Bích Long MSSV 1: 19110391

Họ và tên Sinh viên 2: Nguyễn Hồng Quân MSSV 2: 19110444 Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Tìm hiểu Spring boot, ReactJS xây dựng website quản lý cửa hàng bán linh kiện điện tử.

Họ và tên giảng viên phản biện: ThS Nguyễn Minh Đạo

NHẬN XÉT

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

2 Ưu điểm:

3 Khuyết điểm:

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

5 Đánh giá loại:

6 Điểm:

TP Hồ Chí Minh, tháng 7 năm 2023

Giảng viên phản biện

(Ký & ghi rõ họ tên)

4

LỜI CẢM ƠN

Lời mở đầu, nhóm chúng em xin được phép gửi lời cảm ơn đến với Khoa CôngNghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đãtạo điều kiện cho nhóm chúng em được học tập, phát triển nền tảng kiến thức và thựchiện đề tài lần này

Kế đến thì nhóm chúng em cũng xin được gửi đến thầy Nguyễn Hữu Trung lờicảm ơn sâu sắc nhất khi thầy đã giúp đỡ và nhận lời hướng dẫn nhóm chúng em thựchiện bài luận của mình

Nhận được sự đào tạo từ các thầy cô Khoa Công Nghệ Thông Tin từ trước đếngiờ đã giúp cho chúng em tiếp thu thêm được nhiều kiến thức, kinh nghiệm để thựchiện bài luận văn tốt nghiệp, nó sẽ giúp ích rất nhiều cho công việc và học vấn trongtương lai Đây sẽ là hành trang vô cùng lớn của chúng em trước khi bước ra một cuộcsống mới

Tuy nhiên với khả năng và chuyên môn còn nhiều hạn chế của mình so với lượngkiến thức vô tận, chúng em luôn rất cố gắng hết sức để hoàn thành một cách tốt nhất Vìvậy việc xảy ra những thiếu sót của chúng em là điều khó tránh khỏi trong quá trình họchỏi và thực hiện bài luận Chúng em hi vọng nhận được sự thông cảm và góp ý tận tình,quý báu của quý thầy (cô) Thông qua đó chúng em có thể rút ra được bài học kinhnghiệm, song với đó là hoàn thiện và nâng cấp lại sản phẩm của mình tốt hơn nữa

Một lần nữa chúng em xin gửi lời cảm ơn sâu sắc nhất đến với thầy NguyễnHữu Trung và tập thể các quý thầy, cô Khoa Công Nghệ Thông Tin – Trường Đại Học

Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh vì tất cả những điều thầy cô đã gửi gắm

và chỉ dạy chúng em Nhóm xin kính chúc các thầy cô luôn có sức khỏe thật tốt vàluôn thành công trong cuộc sống

KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự do – Hạnh phúc

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và tên sinh viên 1: Lương Bích Long Mã số sinh viên: 19110391

Họ và tên sinh viên 2: Nguyễn Hồng Quân Mã số sinh viên: 19110444

Thời gian làm luận văn tốt nghiệp: Từ ngày 14/02/2023 đến ngày 10/7/2023

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Tìm hiểu Spring boot, ReactJS xây dựng website quản lý cửa hàng bán linh kiện điện tử.

Giáo viên hướng dẫn: Th.S Nguyễn Hữu Trung

Nhiệm vụ của khóa luận tốt nghiệp:

Lý thuyết:

● Spring, Spring boot, Spring Data JPA, Spring Security, REST API, ReactJS, React Native

● Sử dụng Spring Security JWT, Oauth2(Google) để xác thực người dùng

● Sử dụng Spring, Spring boot để cung cấp các API

● Sử dụng Google Firebase để lưu trữ các file ảnh user, sản phẩm

● Xây dựng sản phẩm của đề tài theo các kiến trúc RESTful Web Service

● Sử dụng MySQL lưu trữ database và Spring Data JPA để tương tác với CSDL

● Xây dựng các chức năng sau cho các sản phẩm:

o User Website, Mobile Application:

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

▪ Quản lý tài khoản người dùng

▪ Kiểm tra tình trạng đơn hàng

▪ Tìm kiếm sản phẩm

▪ Hiển thị sản phẩm theo danh mục

▪ Cung cấp lịch sử mua hàng của người dùng

6

▪ Tích điểm để tăng cấp độ tài khoản người dùng.

o Administrator Website:

▪ Quản lý người dùng

▪ Quản lý đơn hàng, sản phẩm, …

▪ Thống kê lượng mua hàng của sản phẩm

Đề cương luận văn tốt nghiệp

PHẦN MỞ ĐẦU

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

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

3 Cách tiếp cận và phương pháp nghiên cứu

● Đối tượng nghiên cứu

● Phạm vi nghiên cứu

4 Phân tích những công trình có liên quan

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

STT Thời gian Công việc Ghi chú

14/02/2023– - Chỉnh sửa, mô hình hoá lại yêu cầu, thiết kế chỉnh

25/02/2023

26/02/2023– - Tìm hiểu về thư viện React Native của Javacript

2 - Tìm hiểu về Oauth2 để ứng dụng vào xác thực,

12/03/2023 VNPAY integration để thanh toán

13/03/2023– - Tiến hành phát triển API dựa trên các kiến thức

đã tìm hiểu được.

3

26/04/2023 - Tiến hành xây dựng UI người dùng trên mobile

27/04/2023 – - Thiết kế lại UI Admin

4

23/05/2023 - Xây dựng tính năng voucher giảm giá

24/05/2023– - Kết hợp các phần đã xây dựng lại với nhau : Giao

diện, API 5

05/06/2023 - Sửa lỗi, hoàn thiện hệ thống

Người viết đề cương

8

MỤC LỤC

LỜI CẢM ƠN 5

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 6

DANH SÁCH HÌNH 13

DANH SÁCH BẢNG 16

PHẦN MỞ ĐẦU 18

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 18

2 MỤC TIÊU ĐỀ TÀI 18

3 PHƯƠNG PHÁP THỰC HIỆN 18

PHẦN NỘI DUNG 20

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 20

1.1 Spring 20

1.2 Spring boot 21

1.3 JWT (JSON Web Token) 22

1.4 React JS 24

1.5 React Native 25

CHƯƠNG 2 KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 26

2.1 Phân tích hiện trạng 26

2.2 Khảo sát một số phần mềm 26

2.3 Phân tích yêu cầu của dự án 38

2.4 Danh sách yêu cầu chức năng nghiệp vụ 38

2.5 Danh sách yêu cầu chức năng hệ thống 39

2.6 Danh sách yêu cầu phi chức năng 39

3.1 Lược đồ Usecase 40

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

4.1 Lược đồ tuần tự 62

4.2 Lược đồ ERD 74

CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 75

5.1 Trang chủ (App Mobile) 75

5.2 Đăng nhập 78

5.3 Đăng ký 80

5.4 Sidebar 82

5.5 Màn hình mua sắm 84

5.6 Lọc sản phẩm 87

5.7 Chi tiết sản phẩm 89

5.8 Đánh giá sản phẩm 93

5.9 Giỏ hàng 95

5.10 Thông tin tài khoản 97

5.11 Địa chỉ 99

5.12 Thêm địa chỉ mới 101

5.13 Chỉnh sửa địa chỉ 103

5.14 Voucher của tôi 105

5.15 Voucher 107

5.16 Đơn hàng của tôi 109

5.17 Chi tiết đơn hàng 111

5.18 Tạo đơn hàng 113

5.19 Home (Website) 115

5.20 Đăng nhập (Website) 118

10

5.21 Đăng kí trên Website 119

5.22 Reset password 121

5.23 Màn hình shopping trên website 123

5.24 Chi tiết giỏ hàng (Website) 125

5.25 Trang cá nhân (Website) 127

5.26 Voucher của tôi (Website) 129

5.27 Màn hình địa chỉ (Website) 131

5.28 Kho ưu đãi (Website) 133

5.29 Đơn hàng của tôi (Website) 135

5.30 Chi tiết đơn hàng của tôi (Website) 136

5.31 Màn hình vận chuyển (Website) 137

5.32 Thanh toán (Website) 139

5.33 Chatbox (Website) 141

5.34 Dashboard (Admin) 142

5.35 Shipper (Mobile) 144

5.36 Shipper delivery detail (Mobile) 146

CHƯƠNG 6 CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 149

6.1 Cài đặt 149

6.2 Kiểm thử ứng dụng 152

PHẦN KẾT LUẬN 156

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 156

1.1 Về kiến thức 156

1.2 Về đề tài 156

1.3 Về kinh nghiệm 157

2.1 Ưu điểm 157

2.2 Nhược điểm 157

3 THUẬN LỢI 157

4 KHÓ KHĂN 157

5 HƯỚNG PHÁT TRIỂN 158

TÀI LIỆU THAM KHẢO 159

12

DANH SÁCH HÌNH

Hình 1.1 Logo của Spring Framework [1] 20

Hình 1.2 Logo của Spring boot [3] 21

Hình 1.3 Logo của ReactJS [7] 24

Hình 2.1 Màn hình trang chủ GEARVN 26

Hình 2.2 Màn hình đăng nhập của GEARVN 27

Hình 2.3 Màn hình hiển thị sản phẩm bán chạy theo loại sản phẩm của GEARVN 27

Hình 2.4 Màn hình chi tiết một sản phẩm của GEARVN 28

Hình 2.5 Màn hình các sản phẩm theo loại của GEARVN 28

Hình 2.6 Màn hình giỏ hàng của trang GEARVN 29

Hình 2.7 Trang thông tin người dùng và lịch sử của GEARVN 29

Hình 2.8 Trang chủ của FPT Shop 30

Hình 2.9 Trang sản phẩm theo phân loại của FPT Shop 31

Hình 2.10 Trang chi tiết sản phẩm của PFT Shop 31

Hình 2.11 Trang quản lý tài khoản, đơn hàng, điểm thưởng của FPT Shop 32

Hình 2.12 Trang giỏ hàng của FPT Shop 32

Hình 2.13 Phần tương tác, đánh giả sản phẩm của FPT Shop 33

Hình 2.14 Màn hình trang chính của shopee 34

Hình 2.15 Màn hình chi tiết sản phẩm của Shopee 35

Hình 2.16 Màn hình giỏ hàng của Shopee 36

Hình 2.17 Màn hình đánh giá của Shopee 37

Hình 3.1 Usecase người dùng 40

Hình 3.2 Usecase admin 41

Hình 3.3 Usecase shipper 42

Hình 4.1 Lược đồ tuần tự đăng kí 62

Hình 4.2 Lược đồ tuần tự đăng nhập 63

Hình 4.3 Lược đồ tuần tự chỉnh sửa thông tin cá nhân 64

Hình 4.4 Lược đồ tuần tự duyệt đơn hàng 65

Hình 4.5 Lược đồ tuần tự nhận giao hàng 66

Hình 4.6 Lược đồ tuần tự thêm sản phẩm 67

Hình 4.8 Lược đồ tuần tự xoá sản phẩm 69

Hình 4.9 Lược đồ tuần tự tìm kiểm sản phẩm 70

Hình 4.10 Lược đồ tuần tự xem thông tin chi tiết sản phẩm 71

Hình 4.11 Lược đồ tuần tự lọc sản phẩm 71

Hình 4.12 Lược đồ tuần tự thêm sản phẩm vào giỏ hàng 72

Hình 4.13 Lược đồ tuần tự xoá sản phẩm khỏi giỏ hàng 73

Hình 4.14 Lược đồ ERD 74

Hình 5.1 Màn hình trang chủ 75

Hình 5.2 Màn hình đăng nhập 78

Hình 5.3 Màn hình trang đăng ký 80

Hình 5.4 Giao diện danh mục 82

Hình 5.5 Màn hình mua sắm 84

Hình 5.6 Màn hình lọc sản phẩm 87

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

Hình 5.8 Màn hình đánh giá sản phẩm 93

Hình 5.9 Màn hình giỏ hàng 95

Hình 5.10 Màn hình thông tin tài khoản 97

Hình 5.11 Màn hình địa chỉ 99

Hình 5.12 Màn hình thêm địa chỉ mới 101

Hình 5.13 Màn hình chỉnh sửa địa chỉ 103

Hình 5.14 Màn hình Voucher của tôi 105

Hình 5.15 Màn hình kho voucher 107

Hình 5.16 Màn hình đơn hàng của tôi 109

Hình 5.17 Màn hình chi tiết đơn hàng 111

Hình 5.18 Màn hình tạo đơn hàng 113

Hình 5.19 Màn hình trang chủ Website 115

Hình 5.20 Màn hình đăng nhập trên Website 118

Hình 5.21 Màn hình đăng kí trên website 119

Hình 5.22 Màn hình reset password trên website 121

Hình 5.23 Màn hình shopping trên website 123

Hình 5.24 Màn hình chi tiết giỏ hàng trên website 125

14

Hình 5.25 Màn hình trang cá nhân trên website 127

Hình 5.26 Màn hình voucher của tôi trên website 129

Hình 5.27 Màn hình kho ưu đãi trên web 133

Hình 5.28 Màn hình đơn hàng của tôi trên web 135

Hình 5.29 Màn hình chi tiết đơn hàng của tôi trên web 136

Hình 5.30 Màn hình xem vận chuyển trên web 137

Hình 5.31 Màn hình mô tả thanh toán trên web 139

Hình 5.32 Màn hình mô tả trang chatbox trên web 141

Hình 5.33 Hình ảnh mô tả trang chủ trang admin 142

Hình 5.34 Màn hình mô tả trang chủ shipper 144

Hình 5.35 Màn hình chi tiết đơn vận chuyển 146

Hình 6.1 Cài đặt backend 149

Hình 6.2 Thay đổi thông tin phù hợp để kết nối MySQL 149

Hình 6.3 Cài đặt API 150

Hình 6.4 Mở Source code Front-end bằng phần mềm Visual studio Code 150

Hình 6.5 Cập nhật các package trong thư mục node_module 151

Hình 6.6 Chạy dự án Front-end 151

Hình 6.7 Tiến hành quét Qr code trong terminal 152

DANH SÁCH BẢNG

Bảng 2.1 Chức năng và hạn chế của GEARVN 30

Bảng 2.2 Chức năng và hạn chế của FPT Shop 33

Bảng 2.3 Chức năng và hạn chế của Shopee 38

Bảng 5.1 Bảng mô tả màn hình trang chủ 77

Bảng 5.2 Bảng mô tả màn hình trang đăng nhập 79

Bảng 5.3 Bảng mô tả màn hình trang đăng kí 81

Bảng 5.4 Bảng mô tả giao diện danh mục 83

Bảng 5.5 Bảng mô tả màn hình mua sắm 86

Bảng 5.6 Bảng mô tả màn hình lọc sản phẩm 88

Bảng 5.7 Bảng mô tả màn hình chi tiết sản phẩm 92

Bảng 5.8 Bảng mô tả màn hình đánh giá sản phẩm 94

Bảng 5.9 Bảng mô tả màn hình giỏ hàng 96

Bảng 5.10 Bảng mô tả màn hình thông tin tài khoản 98

Bảng 5.11 Bảng mô tả màn hình địa chỉ 100

Bảng 5.12 Bảng mô tả màn hình thêm địa chỉ mới 102

Bảng 5.13 Bảng mô tả màn hình chỉnh sửa 104

Bảng 5.14 Bảng mô tả màn hình voucher của tôi 106

Bảng 5.15 Bảng mô tả màn hình kho voucher 108

Bảng 5.16 Bảng mô tả màn hình đơn hàng của tôi 110

Bảng 5.17 Bảng mô tả màn hình chi tiết đơn hàng 112

Bảng 5.18 Bảng mô tả màn hình tạo đơn hàng 115

Bảng 5.19 Bảng mô tả màn hình trang chủ Website 117

Bảng 5.20 Bảng mô tả màn hình đăng nhập trên Website 118

Bảng 5.21 Bảng mô tả màn hình đăng kí trên Website 120

Bảng 5.22 Bảng mô tả màn hình reset password trên website 122

Bảng 5.23 Bảng mô tả màn hình shopping trên website 124

Bảng 5.24 Bảng mô tả màn hình chi tiết giỏ hàng trên website 126

.Bảng 5.25 Bảng mô tả màn hình trang cá nhân trên Website 128

Bảng 5.26 Bảng mô tả màn hình voucher của tôi trên Website 130

Bảng 5.27 Bảng mô tả màn hình địa chỉ người dùng trên web 132

16

Bảng 5.28 Bảng màn hình mô tả kho ưu đãi trên web 134

Bảng 5.29 Bảng mô tả màn hình đơn hàng của tôi trên web 135

Bảng 5.30 Bảng mô tả màn hình chi tiết đơn hàng của tôi trên web 137

Bảng 5.31 Bảng mô tả màn hình xem vận chuyển trên web 138

Bảng 5.32 Bảng mô tả màn hình thanh toán trên web 140

Bảng 5.33 Bảng mô tả màn hình trang chatbox trên web 141

Bảng 5.34 Bảng mô tả trang chủ Admin 143

Bảng 5.35 Bảng mô tả trang chủ Shipper 143

Bảng 6.1 Kiểm thử các chức năng quản lý tài khoản 153

Bảng 6.2 Kiểm thử các chức năng đơn hàng, giỏ hàng 154

Bảng 6.3 Kiểm thử các chức năng quản lý danh mục, sản phẩm 155

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại mà mà cuộc sống của mỗi người đã và đang được tiếp cận với sựphát triển vượt bậc và nhanh chóng của khoa học và công nghệ Một thời đại mà ứngdụng của công nghệ thông tin được tìm thấy ở khắp mọi nơi thế nên việc mỗi ngườiđều sở hữu cho mình một chiếc máy tính cá nhân là điều rất cần thiết và những thứkhông thể thiếu với một chiếc máy tính chính là những linh kiện cấu thành nên chúng

Ta có thể thấy, ở thời điểm hiện tại nhóm chúng em đang thực hiện bài luận văn này,tình hình dịch Covid – 19 ở nước ta đang tuy đã gần như là đưọc kiểm soát hoàn toàn.Nhưng nhìn về một khoảng thời gian trước khi các chỉ thị giản cách liên tục được tiếp tục

áp dụng trong khoảng thời gian dài, khiến cho cuộc sống của mọi người ngày càng gặpnhiều khó khắn Trước diễn biến phức tạp cũng như tình hình xã hội căng thẳng như vậythì việc mua bán online trở nên phổ biến hơn cả và vẫn còn duy trì cho đến ngày nay.Chính vì thế nhóm em muốn xây dựng lên một website và app bán linh kiện máy tính đểkhách hàng có thể dễ dàng tìm kiếm, kiểm tra thông số của linh kiện trước ở nhà rồi sau

đó có thể đến cửa hàng để mua hoặc cũng có thể đặt hàng về đến tận nhà Việc mua linhkiện máy tính trở nên dễ dàng, nhanh chóng, tiện lợi và hiệu quả hơn

2 MỤC TIÊU ĐỀ TÀI

● Xây dựng website cho quản trị viên quản trị cơ sở dữ liệu

● Xây dựng website cho người dùng có thể mua linh kiện máy tính online

● Xây dựng app mobile cho người dùng có thể mua linh kiện máy tính online

● Vận dụng thành các công công nghệ mới, ngôn ngữ lập trình hiện đại vào để xây dựng website và app mobile của đề tài

● Tìm hiểu và vận dụng thành công Spring, Spring boot, ReactJS và React Nativevào đề tài

3 PHƯƠNG PHÁP THỰC HIỆN

Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:

● Các kỹ thuật phân tích thiết kế hệ thống

● Tìm hiểu về REST API, Spring , Spring boot

● Tìm hiểu về Spring Data JPA để tương tác với CSDL nhanh chóng

● Tìm hiểu về Spring Security, JWT và Oauth2 để tăng độ bảo mật cho trang web

18

● Tìm hiểu về ReactJS, React Native để thiết kế phần UI

● Tìm hiểu và sử dụng Postman để thuận tiện cho việc code riêng biệt Frontend vàBacken

PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT

1.1 Spring

1.1.1 Giới thiệu về Spring

Hinh ̀ 1.1 Logo của Spring Framework [1]

Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàngtriệu lập trình viên Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụnglại code

Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng 2MB;trong suốt: hoạt động một cách trong suốt với lập trình viên)

Spring là một mã nguồn mở, được phát triển, chia sẻ và có cộng đồng ngườidùng rất lớn

Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là:Dependency Injection và Aspect Oriented Programming

Những tính năng core (cốt lõi) của Spring có thể được sử dụng để phát triểnJava Desktop, ứng dụng mobile, Java Web Mục tiêu chính của Spring là giúp pháttriển các ứng dụng J2EE một cách dễ dàng hơn dựa trên mô hình sử dụng POJO (PlainOld Java Object)

1.1.2 Ưu điểm

Spring cho phép lập trình viên sử dụng POJOs Việc sử dụng POJOs giúp bạnkhông phải làm việc với EJB, ứng dụng, các luồng chạy, cấu hình… đơn giản hơn rấtnhiều

20

Spring được tổ chức theo kiểu mô đun Số lượng các gói và các lớp khá nhiều,nhưng bạn chỉ cần quan tâm đến những gì bạn cần và không cần quan tâm đến phầncòn lại.

Spring hỗ trợ sử dụng khá nhiều công nghệ như ORM Framework, các loggingframework, 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 như Struts

1.2 Spring boot

1.2.1 Giới thiệu về Spring boot

Hinh ̀ 1.2 Logo của Spring boot [3]

Spring Boot chính là một Java framework siêu to và khổng lồ và có nhiều khảnăng hữu ích vì nó có thể giúp lập trình viên giải quyết rất nhiều vấn đề So vớiframework Spring thông thường, Spring Boot tỏ ra những lợi thế vượt trội Khi sửdụng Spring Boot, rất nhiều thứ được cải tiến hỗ trợ lập trình viên như:

 Auto config: tự động cấu hình thay lập trình viên, bạn chỉ cần viết code và tiến hành chạy hệ thống là được

 Dựa trên các Annotation để tạo lập các bean thay vì XML

 Server Tomcat có thể được nhúng ngay trong file JAR build ra và có thể chạy

ở bất kì đâu mà java chạy được

1.2.2 Ưu điểm nổi bật của Spring Boot

Những tính năng nổi bật của Spring Boot mà bạn không thể bỏ qua như:

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

 Config an toàn

1.2.3 Đặc điểm nổi bật của Spring Boot

 Spring Application: Đây là class được dùng để khởi chạy ứng dụng từ hàmmain() Vì thế, khi khởi chạy ứng dụng, các lập trình viên chỉ cần gọi methodrun() là được

 Externalized Configuration: Spring Boot cho phép người dùng có thể sử dụngcấu hình (config) từ bên ngoài Chính vì vậy mà mỗi ứng dụng được tạo ra cóthể chạy được trên nhiều môi trường khác nhau

 Profiles: Dùng để phân chia các loại cấu hình cho các môi trường khác nhau

 Loggin: Sử dụng phục vụ cho toàn bộ chức năng log trong phạm vi nội bộ Những

logging này sẽ được quản lý một cách mặc định

Ngoài ra còn rất nhiều các tính năng tương tự khác của Spring Boot như: Developingweb Applications, Working with SQL Technologies, Security, Messaging, Caching,Calling rest Services with RestTemplate/WebClient, Sending Email, Validation,…

22

được đính kèm với một chữ ký điện được mã hóa lại bằng HMAC hoặc RSA có thể xác minh tính đúng đắn do đó tạo ra sự tin cậy cho dữ liệu.

Sau đó JSON này sẽ được mã hóa Base64Url và thêm vào phần đầu tiên của JWTtoken

● Payload

Phần thứ 2 của token là payload, chứa các nội dung của thông tin (claim).Thông tin được truyền đi có thể là mô tả của một thực thể hoặc có thể là thông tin bổsung cho phần Header Có 3 kiểu claims: registered, public, và private claims

Registered claims: Một tập hợp các nội dung thông tin đã được quy định sẵn,chúng không bắt buộc nhưng tùy vào các ứng dụng thực hiện thì khuyến khích sử dụngđể tạo ra các điều kiện bắt buộc đối với những thông tin cần thiết Ví dụ iss (thời giantạo token), exp (thời gian token hết hạn), sub (tiêu đề)

Public claims: Những thông tin có thể tự định nghĩa tùy theo ý muốn của người sửdụng ví dụ role, username, v.v Nhưng để tránh trùng lặp với các Registered claims chúng

ta nên quy định các claims được liệt kê trong IANA JSON Web Token Registry

Private claims: Đây cũng là những thông tin tự định nghĩa hoặc các thông tinthêm, thường được sử dụng để chia sẻ thông tin giữa các Client

● Signature

Để tạo ra phần chữ ký này cần có encoded header, và encoded payload đã được

mã hóa ở trên cùng kèm theo một khóa bí mật (chuỗi secret) và một thuật toán đượcchỉ định trong phần header

Để đảm bảo tính đúng đắn của dữ liệu, chữ ký được sử dụng để xác minh thôngđiệp vẫn nguyên vẹn trong quá trình truyền nhận Nếu thông tin đã bị ai đó cố ý thayđổi trong phần header hoặc payload và gửi mạo danh đến server (nơi tạo và ký token)thì quá trình xác nhận thông tin sẽ không hợp lệ.

1.4 React JS

1.4.1 Giới thiệu

Hinh ̀ 1.3 Logo của ReactJS [7]

ReactJS ra mắt vào năm 2013, là một mã nguồn mở được phát triển bởi Facebook,bản thân nó được biết đến là một thư viện Javascript dùng để xây dựng các giao diệnngười dùng hay UI một cách dễ dàng và tiện lợi Điểm nổi bật nhất của ReactJS đó là việcrender dữ liệu được thực hiện cả ở trên tầng Server và ở dưới Client

Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chínhtrên 2 thành phần sau: UI và xử lý tương tác của người dùng Điểm đến cuối cùng của việc

sử dụng ReactJS đó là đảm bảo tốc độ nhanh, mượt và có khả năng mở rộng cao

1.4.2 Đặc trưng

JSX: Trong React, lập trình viên sẽ thường dùng JSX thay vì thường xuyên sử

dụng JavaScript để thiết kế bố cục trang web JSX là một cú pháp mở rộng củaJavascript, nó cho phép lập trình viên viết HTML trong React một cách dễ dàng Khibiên soạn, JSX tối ưu hóa code, vì thế nó chạy nhanh hơn so với code JavaScript tươngđương

Redux: Redux là một vùng chứa trạng thái có thể dự đoán được hay còn biết đến là

một thư viện của JavaScript Redux được thiết kế nhằm hỗ trợ lập trình viên khi viết cácứng dụng của JavaScript có thể hoạt động trong các môi trường khác nhau Mặc dù

24

Redux chủ yếu được sử dụng như một công cụ quản lý trạng thái với React, nhưng nó

có thể được sử dụng với bất kỳ Framework hoặc thư viện JavaScript khác

1.5 React Native

1.5.1 Giới thiệu

React Native là môṭframework được taọ bởi Facebook React Native vượt trôịở chỗ chỉ cần viết môṭlần là có thể build ứng dụng cho cả iOS lẫn Android

Mục tiêu cốt lõi của thư viện này là nhằm cung cấp hiệu suất làm việc cao nhất

vì cần tìm hiểu 2 hệ sinh thái hoàn toàn khác biệt (IOS, Android)

Cho phép các lập trình viên sử dụng JavaScript để làm mobile apps trên cả Android và iOS với có trải nghiệm và hiệu năng như native

1.5.2 Đặc trưng

React Native cho phép lập trình viên viết ứng dụng trực tiếp trên Javasript.Dễtiếp cận đối với người đã kiến thức lập trình căn bản vềJavascript

Do react native cung cấp môṭcấu trúc dựa trên component, tức là các

component là những mảnh ghép được ghép laịthành môṭứng dụng

Mỗi component sẽ tự quyết định nó render như thếnào và logic riêng bên trong

đó - Có thể tái sử dụng laịcác component này taịbất kì nơi nào

Bô ̣công cụ phát triển cho lập trình là môṭyếu tố quan trọng khi chọn nền tền phát triển

CHƯƠNG 2 KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ

2.1 Phân tích hiện trạng

Công nghệ kĩ thuật là một trong những lĩnh vực quan trọng trong cơ cấu kinh tếViệt Nam cũng như quan trọng cho việc phát triển đất nước ngày càng hiện đại hơnTheo số liệu nghiên cuứu cuối quý năm 2021 chứng kiến số lượng máy tính để bàn,máy tính xách tay bán ra tăng 1% so với cùng kỳ năm 2020, đạt 92 triệu chiếc Thànhtích này góp phần vào tổng doanh số máy tính cả nhân toàn cầu trong năm 2021 là 341triệu chiếc, tăng 15% so với năm 2020

Giới chuyên môn nhận định, số máy tính bán ra tăng cao chưa từng thấy, vượt tới27% so với thời điểm trước dịch là năm 2019, là minh chứng rõ nét cho tiến trìnhchuyển đổi số được thúc đẩy mạnh mẽ do đại dịch covid-19 Số lượng bán ra tăng caongoài mọi kỳ vọng cũng cho thấy người dùng đang tích cực mua bổ sung máy tínhmới, nâng cấp các máy tính đang sử dụng với những linh kiện hiện đại hơn, có hiệusuất cao hơn như Card màn hình, nâng cấp Ram, ổ cứng, …

Để phần nào giải quyết nhu cầu mua máy tính, nhóm chúng em xây dựng website

và app mobile bán linh kiện máy tính giúp cho việc xây dựng máy tính từ những linhkiện này có thể dễ dàng hàng nhờ việc mua chúng một cách thật thuận tiện nhất có thể

Hinh ̀ 2.2 Màn hình đăng nhập của GEARVN

Hinh ̀ 2.3 Màn hình hiển thị sản phẩm bán chạy theo loại sản phẩm của GEARVN

Hinh ̀ 2.4 Màn hình chi tiết một sản phẩm của GEARVN

Hinh ̀ 2.5 Màn hình các sản phẩm theo loại của GEARVN

28

Hinh ̀ 2.6 Màn hình giỏ hàng của trang GEARVN

Hinh ̀ 2.7 Trang thông tin người dùng và lịch sử của GEARVN

Nhận xét

- Đa dạng về loại sản phẩm - Chưa có tính năng tích lũy điểm mua

- Tốc độ phản hồi nhanh hàng

- Hiển thị đầy đủ, chi tiết hình ảnh và - UI/UX chưa được bắt mắt người

thông số của các sản phẩm dùng cho lắm

- Chưa có hệ thống người dùng đánhgiá sản phẩm

Bảng 2.1 Chức năng và hạn chế của GEARVN

2.2.2 FPT Shop

Các màn hình chính

Hinh ̀ 2.8 Trang chủ của FPT Shop

30

Hinh ̀ 2.9 Trang sản phẩm theo phân loại của FPT Shop

Hinh ̀ 2.10 Trang chi tiết sản phẩm của PFT Shop

Hinh ̀ 2.11 Trang quản lý tài khoản, đơn hàng, điểm thưởng của FPT Shop

Hinh ̀ 2.12 Trang giỏ hàng của FPT Shop

32

Hinh ̀ 2.13 Phần tương tác, đánh giả sản phẩm của FPT Shop

Nhận xét

- Có tính năng tích lũy điểm mua hàng - Quản lý địa chỉ còn hạn chế

Mặt hàng đa dạng - Quản lý thông tin cá nhân còn đơn

- Có hệ thống cho phép người dùng

tương tác, đánh giá sản phẩm

Bảng 2.2 Chức năng và hạn chế của FPT Shop

KẾ 2.2.3 Ứng dụng Shopee

Hinh ̀ 2.14 Màn hình trang chính của shopee

34

Hinh ̀ 2.15 Màn hình chi tiết sản phẩm của Shopee

Hinh ̀ 2.16 Màn hình giỏ hàng của Shopee

36

Hinh ̀ 2.17 Màn hình đánh giá của Shopee

- Hệ thống ưu đãi đa dạng, thu hút

người sử dụng

Bảng 2.3 Chức năng và hạn chế của Shopee

2.3 Phân tích yêu cầu của dự án

Xây dựng ứng dụng để bán các linh kiện máy tính cho phép người dùng thực hiệnlựa chọn, đặt hàng và thanh toán đơn hàng Bên cạnh đó là website để quản trị hệthống bằng quyền Quản trị viên Các chức năng chính của chương trình bao gồm:

- Quản lý tài khoản người dùng

- Thống kê lượt truy cập của sản phẩm

- Quản lý người dùng

● Đăng nhập

● Đăng ký

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

● Loại thành viên: bronze, silver, gold, diamond

● Lịch sử mua hàng

- Thanh toán

● Thanh toán COD

● Thanh toán VNPAY

2.5 Danh sách yêu cầu chức năng hệ thống

- Thống kê lượt mua của từng sản phẩm

- Thêm, xóa, cập nhật sản phẩm

2.6 Danh sách yêu cầu phi chức năng

- Hệ thống có chức năng bảo mật và phân quyền

- Mật khẩu, thông tin nhạy cảm của người dùng được mã hóa trước khi ghi vào cơ sở

dữ liệu

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

3.1 Lược đồ Usecase

Hinh ̀ 3.1 Usecase người dùng

40

Hinh ̀ 3.2 Usecase admin