Đồ á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ử

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 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 năm 2023 Đ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ự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Lương Bích Long MSSV 1: 19110391 Họ 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ọ tên giảng viên hướng dẫn: ThS Nguyễn Hữu Trung NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: TP Hồ Chí Minh, tháng năm 2023 Giảng viên hướng dẫn (Ký & ghi rõ họ tên) Đ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ự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Lương Bích Long MSSV 1: 19110391 Họ 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ọ tên giảng viên phản biện: ThS Nguyễn Minh Đạo NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: TP Hồ Chí Minh, tháng năm 2023 Giảng viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN LỜI CẢM ƠN Lời mở đầu, nhóm chúng em xin 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 học tập, phát triển tảng kiến thức thực đề tài lần Kế đến nhóm chúng em xin gửi đến thầy Nguyễn Hữu Trung lời cảm ơn sâu sắc thầy giúp đỡ nhận lời hướng dẫn nhóm chúng em thực luận Nhận đào tạo từ thầy cô Khoa Công Nghệ Thông Tin từ trước đến giúp cho chúng em tiếp thu thêm nhiều kiến thức, kinh nghiệm để thực luận văn tốt nghiệp, giúp ích nhiều cho công việc học vấn tương lai Đây hành trang vô lớn chúng em trước bước sống Tuy nhiên với khả chun mơn cịn nhiều hạn chế so với lượng kiến thức vô tận, chúng em cố gắng để hồn thành cách tốt Vì việc xảy thiếu sót chúng em điều khó tránh khỏi q trình học hỏi thực luận Chúng em hi vọng nhận thơng cảm góp ý tận tình, q báu q thầy (cơ) Thơng qua chúng em có thể rút học kinh nghiệm, song với hoàn thiện nâng cấp lại sản phẩm tốt Một lần chúng em xin gửi lời cảm ơn sâu sắc đến với thầy Nguyễn Hữu Trung tập thể 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 tất điều thầy cô gửi gắm dạy chúng em Nhóm xin kính chúc thầy ln có sức khỏe thật tốt ln thành cơng sống Đ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ự – Hạnh phúc ****** ****** ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên sinh viên 1: Lương Bích Long Mã số sinh viên: 19110391 Họ 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ụ 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 API ● Sử dụng Google Firebase để lưu trữ file ảnh user, sản phẩm ● Xây dựng sản phẩm đề tài theo kiến trúc RESTful Web Service ● Sử dụng MySQL lưu trữ database Spring Data JPA để tương tác với CSDL ● Xây dựng chức sau cho 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 người dùng ▪ Cung cấp tính đá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 sản phẩm Đề cương luận văn tốt nghiệp PHẦN MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Cách tiếp cận phương pháp nghiên cứu ● Đối tượng nghiên cứu ● Phạm vi nghiên cứu Phân tích cơng trình có liên quan Kết dự kiến đạt Những kết đạt Ưu điểm Nhược điểm Hướng phát triển TÀI LIỆU THAM KHẢO 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 hố lại u cầu, thiết kế chỉnh sửa lại CSDL Ghi 25/02/2023 26/02/2023– - Tìm hiểu thư viện React Native Javacript - Tìm hiểu Oauth2 để ứng dụng vào xác thực, 12/03/2023 VNPAY integration để toán 13/03/2023– - Tiến hành phát triển API dựa kiến thức tìm hiểu 26/04/2023 - Tiến hành xây dựng UI người dùng mobile 27/04/2023 – - Thiết kế lại UI Admin 23/05/2023 - Xây dựng tính voucher giảm giá 24/05/2023– - Kết hợp phần xây dựng lại với : Giao diện, API 05/06/2023 - Sửa lỗi, hoàn thiện hệ thống 06/06/2023– Kiểm thử hệ thống 29/06/2023 30/06/2023– Hoàn thành luận 11/07/2023 Ý kiến 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 MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP DANH SÁCH HÌNH 13 DANH SÁCH BẢNG 16 PHẦN MỞ ĐẦU 18 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 18 MỤC TIÊU ĐỀ TÀI 18 PHƯƠNG PHÁP THỰC HIỆN 18 PHẦN NỘI DUNG 20 CHƯƠNG 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 KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 26 2.1 Phân tích trạng 26 2.2 Khảo sát số phần mềm 26 2.3 Phân tích yêu cầu dự án 38 2.4 Danh sách yêu cầu chức nghiệp vụ 38 2.5 Danh sách yêu cầu chức hệ thống 39 2.6 Danh sách yêu cầu phi chức 39 CHƯƠNG MƠ HÌNH HĨA U CẦU 40 MỤC LỤC 3.1 Lược đồ Usecase 40 CHƯƠNG THIẾT KẾ PHẦN MỀM 62 4.1 Lược đồ 62 4.2 Lược đồ ERD 74 CHƯƠNG 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 99 5.12 Thêm địa 101 5.13 Chỉnh sửa địa 103 5.14 Voucher 105 5.15 Voucher 107 5.16 Đơn hàng 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í Website 119 5.22 Reset password 121 5.23 Màn hình shopping website 123 5.24 Chi tiết giỏ hàng (Website) 125 5.25 Trang cá nhân (Website) 127 5.26 Voucher (Website) 129 5.27 Màn hình địa (Website) 131 5.28 Kho ưu đãi (Website) 133 5.29 Đơn hàng (Website) 135 5.30 Chi tiết đơn hàng (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 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 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