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ử

Thực hành: ● Sử dụng Spring Security JWT, Oauth2Google để 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ả

THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

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

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Ử

GVHD:

S K L 0 1 1 4 7 9

LƯƠNG BÍCH LONG NGUYỄN HỒNG QUÂN ThS NGUYỄN HỮU TRUNG SVTH :

1

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

LINH KIỆN ĐIỆN TỬ

GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN HỮU TRUNG LƯƠNG BÍCH LONG - 19110391 NGUYỄN HỒNG QUÂN – 19110444

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

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)

4

ĐH SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

******

CỘNG HÒA XHCN VIỆT NAM Độ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

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)

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ông Nghệ 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ực hiệ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ời cả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ực hiệ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 đến giờ đã giúp cho chúng em tiếp thu thêm được nhiều kiến thức, kinh nghiệm để thực hiệ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 trong tươ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ộc số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ượng kiế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ọc hỏ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 kinh nghiệ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ễn Hữ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

ĐỀ 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

Thực hành:

● 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

▪ Cung cấp tính năng đánh giá sản phẩm cho người dùng

▪ 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

PHẦN NỘI DUNG

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

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

- Tìm hiểu về Oauth2 để ứng dụng vào xác thực, VNPAY integration để thanh toán

- Thiết kế lại UI Admin

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

Hoàn thành bài luận

Ý kiến của giáo viên hướng dẫn Ngày tháng năm 2023

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

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

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

10

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

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 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 157

12

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

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.7 Lược đồ tuần tự cập nhật sản phẩm 68

14

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

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

16

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

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

18

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à ứng dụ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ặp nhiề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ậy thì 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 linh kiệ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 Native và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

● 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

20

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

Hi ̀nh 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àng triệ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ụng lạ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ười dù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ển Java Desktop, ứng dụng mobile, Java Web Mục tiêu chính của Spring là giúp phát triể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 (Plain Old 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ạn khô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ất nhiều

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ần còn lại

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 như Struts

1.2 Spring boot

1.2.1 Giới thiệu về Spring boot

Hi ̀nh 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ới framework 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àm main() Vì thế, khi khởi chạy ứng dụng, các lập trình viên chỉ cần gọi method run() là được

 Externalized Configuration: Spring Boot cho phép người dùng có thể sử dụng cấ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ư: Developing web Applications, Working with SQL Technologies, Security, Messaging, Caching, Calling rest Services with RestTemplate/WebClient, Sending Email, Validation,…

1.2.4 Tổng kết

Spring Boot mang đến cho các lập trình viên rất nhiều những tính năng tuyệt vời

Hy vọng với những thông tin chia sẻ ở trên, các bạn đã hiểu hơn về Spring Boot là gì,

có nên sử dụng Spring Boot hay không và nên tìm hiểu những kiến thức gì để vận dụng Spring Boot được tốt nhất

1.3 JWT (JSON Web Token)

1.3.1 Khái niệm

JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa một phương thức nhỏ gọn và khép kín, là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bên client - server dưới dạng một JSON Các thông tin được truyền tải

đượ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 JWT token

● 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 gian tạ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 tin thê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 được chỉ định trong phần header

24

Để đả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

Hi ̀nh 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ện ngườ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ệc render 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ính trê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ủa Javascript, nó cho phép lập trình viên viết HTML trong React một cách dễ dàng Khi biê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ù

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ột framework được ta ̣o bởi Facebook React Native vượt trô ̣i ở chỗ chỉ cần viết mô ̣t 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ột 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 ̣i thành mô ̣t ứ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 ̣i các component này ta ̣i bất kì nơi nào

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

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ới 27% 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ình chuyển đổi số được thúc đẩy mạnh mẽ do đại dịch covid-19 Số lượng bán ra tăng cao ngoà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ính mớ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ệu suấ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 linh kiệ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ể

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

2.2.1 GearVN

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

Hi ̀nh 2.1 Màn hình trang chủ GEARVN

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

Hi ̀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

28

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

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

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

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

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

Hi ̀nh 2.8 Trang chủ của FPT Shop

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

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

32

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

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

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

34

2.2.3 Ứng dụng Shopee

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

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

36

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

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

cho phép đăng tải ảnh, video

- Một số màn hình chứa nhiều thông tin, gây khó khăn với những người mới sử dụng

- 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

40

CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU 3.1 Lược đồ Usecase

Hi ̀nh 3.1 Usecase người dùng