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ử

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

ĐỒ Á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: ThS. NGUYỄN HỮU TRUNG
SVTH : LƯƠNG BÍCH LONG
NGUYỄN HỒNG QN

SKL011479

Tp. Hồ Chí Minh, tháng 07/2023


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA 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 QN – 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


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

CỘNG HÒA XHCN VIỆT NAM

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)

3

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

CỘNG HÒA XHCN VIỆT NAM

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 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 để hồ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 q 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,
q báu của q 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à hồ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ơ ln có sức khỏe thật tốt và luôn thành
công trong cuộc sống


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

CỘNG HÒA XHCN VIỆT NAM

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
Chun 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

6


▪

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 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
PHẦN KẾT LUẬN
1. Những kết quả đạt được

2. Ưu điểm
3. Nhược điểm
4. Hướng phát triển
TÀI LIỆU THAM KHẢO

7


KẾ HOẠCH THỰC HIỆN
STT

Thời gian

Cơng việc

14/02/2023–

- Chỉnh sửa, mơ hình hoá lại yêu cầu, thiết kế chỉnh

1
25/02/2023
26/02/2023–
2
12/03/2023

13/03/2023–
3
26/04/2023
27/04/2023 –

Ghi chú

sửa lại CSDL
- 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
- Tiến hành phát triển API dựa trên các kiến thức
đã tìm hiểu được.
- Tiến hành xây dựng UI người dùng trên mobile
- Thiết kế lại UI Admin

4
23/05/2023
24/05/2023–
5
05/06/2023
06/06/2023–

- Xây dựng tính năng voucher giảm giá
- Kết hợp các phần đã xây dựng lại với nhau : Giao
diện, API
- Sửa lỗi, hoàn thiện hệ thống
Kiểm thử hệ thống

7
29/06/2023
30/06/2023–

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

8
11/07/2023

Ý 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

8


MỤC LỤC
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 U CẦU ......................................................... 40

9

MỤC LỤC
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


MỤC LỤC
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.

2.

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

ƯU ĐIỂM VÀ NHƯỢC ĐIỂM .................................................................... 157

11


MỤC LỤC
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

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
13


DANH SÁCH HÌNH
Hình 4.8. Lược đồ tuần tự xố 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


DANH SÁCH HÌNH
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 tố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

15


DANH SÁCH BẢNG

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


DANH SÁCH BẢNG
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 tố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

17


PHẨN MỞ ĐẦU

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 sốt hồn tồ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
18


PHẨN MỞ ĐẦU
● 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

19


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

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

Hin
̀ h 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.

20