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ử

LỜI CẢM ƠN 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 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 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ả chuyên 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 rút học kinh nghiệm, song với hồ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 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 15 DANH SÁCH BẢNG 18 PHẦN MỞ ĐẦU 20 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 20 MỤC TIÊU ĐỀ TÀI 20 PHƯƠNG PHÁP THỰC HIỆN 20 PHẦN NỘI DUNG 22 CHƯƠNG 22 1.1 CƠ SỞ LÝ THUYẾT Spring 22 1.1.1 Giới thiệu Spring 22 1.1.2 Ưu điểm 22 1.2 Spring boot 23 1.2.1 Giới thiệu Spring boot 23 1.2.2 Ưu điểm bật Spring Boot 23 1.2.3 Đặc điểm bật Spring Boot 24 1.2.4 Tổng kết 24 1.3 JWT (JSON Web Token) 24 1.3.1 Khái niệm 24 1.3.2 Cấu trúc 25 1.4 React JS 26 1.4.1 Giới thiệu 26 1.4.2 Đặc trưng 26 1.5 React Native 27 MỤC LỤC 1.5.1 Giới thiệu 27 1.5.2 Đặc trưng 27 CHƯƠNG KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 28 2.1 Phân tích trạng 28 2.2 Khảo sát số phần mềm 28 2.2.1 GearVN 28 2.2.2 FPT Shop 32 2.2.3 Ứng dụng Shopee 36 2.3 Phân tích yêu cầu dự án 40 2.4 Danh sách yêu cầu chức nghiệp vụ 40 2.5 Danh sách yêu cầu chức hệ thống 41 2.6 Danh sách yêu cầu phi chức 41 CHƯƠNG 3.1 MƠ HÌNH HĨA U CẦU Lược đồ Usecase 42 42 3.1.1 Đăng nhập 45 3.1.2 Đăng ký 46 3.1.3 Đăng xuất 47 3.1.4 Xem thông tin cá nhân 48 3.1.5 Sửa thông tin cá nhân 49 3.1.6 Thay đổi mật 50 3.1.7 Đặt mua linh kiện 51 3.1.8 Xem thông tin sản phẩm 52 3.1.9 Tìm kiểm sản phẩm 53 3.1.10 Xem lịch sử giao dịch 54 3.1.11 Xem thống kê 54 3.1.12 Xác nhận đơn hàng 55 3.1.13 Xoá đơn hàng 56 MỤC LỤC 3.1.14 Thêm sản phẩm 57 3.1.15 Cập nhật sản phẩm 58 3.1.16 Xoá sản phẩm 59 3.1.17 Xem lịch sử đơn hàng 60 3.1.18 Thêm thương hiệu 61 3.1.19 Chỉnh sửa thương hiệu 62 3.1.20 Xoá thương hiệu 63 THIẾT KẾ PHẦN MỀM 64 CHƯƠNG 4.1 Lược đồ 64 4.1.1 Đăng ký 64 4.1.2 Đăng nhập 65 4.1.3 Chỉnh sửa thông tin cá nhân 66 4.1.4 Duyệt đơn hàng 67 4.1.5 Nhận giao hàng 68 4.1.6 Thêm sản phẩm 69 4.1.7 Cập nhật sản phẩm 70 4.1.8 Xố sản phẩm 71 4.1.9 Tìm kiếm sản phẩm 72 4.1.10 Xem thông tin chi tiết sản phẩm 73 4.1.11 Lọc sản phẩm 73 4.1.12 Thêm sản phẩm vào giỏ hàng 74 4.1.13 Xoá sản phẩm khỏi giỏ hàng 75 4.2 Lược đồ ERD CHƯƠNG THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 76 77 5.1 Trang chủ (App Mobile) 77 5.2 Đăng nhập 80 5.3 Đăng ký 82 MỤC LỤC 5.4 Sidebar 84 5.5 Màn hình mua sắm 86 5.6 Lọc sản phẩm 89 5.7 Chi tiết sản phẩm 91 5.8 Đánh giá sản phẩm 95 5.9 Giỏ hàng 97 5.10 Thông tin tài khoản 99 5.11 Địa 101 5.12 Thêm địa 103 5.13 Chỉnh sửa địa 105 5.14 Voucher 107 5.15 Voucher 109 5.16 Đơn hàng 111 5.17 Chi tiết đơn hàng 113 5.18 Tạo đơn hàng 115 5.19 Home (Website) 117 5.20 Đăng nhập (Website) 120 5.21 Đăng kí Website 121 5.22 Reset password 123 5.23 Màn hình shopping website 125 5.24 Chi tiết giỏ hàng (Website) 127 5.25 Trang cá nhân (Website) 129 5.26 Voucher tơi (Website) 131 5.27 Màn hình địa (Website) 133 5.28 Kho ưu đãi (Website) 135 5.29 Đơn hàng (Website) 137 5.30 Chi tiết đơn hàng tơi (Website) 138 MỤC LỤC 5.31 Màn hình vận chuyển (Website) 139 5.32 Thanh toán (Website) 141 5.33 Chatbox (Website) 143 5.34 Dashboard (Admin) 144 5.35 Shipper (Mobile) 146 5.36 Shipper delivery detail (Mobile) 148 CHƯƠNG 6.1 CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG Cài đặt Back-end 151 6.1.2 Front-end 152 6.2 Kiểm thử ứng dụng 154 154 6.2.1 Các chức quản lý tài khoản 154 6.2.2 Các chức quản lý đơn hàng, giỏ hàng 156 6.2.3 Các chức quản lý danh mục, sản phẩm 157 PHẦN KẾT LUẬN 151 6.1.1 6.1.3 Front-end (App mobile) 151 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 158 158 1.1 Về kiến thức 158 1.2 Về đề tài 158 1.3 Về kinh nghiệm 159 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 159 2.1 Ưu điểm 159 2.2 Nhược điểm 159 THUẬN LỢI 159 KHÓ KHĂN 159 HƯỚNG PHÁT TRIỂN 160 TÀI LIỆU THAM KHẢO 161 MỤC LỤC DANH SÁCH HÌNH DANH SÁCH HÌNH Hình 1.1 Logo Spring Framework [1] 22 Hình 1.2 Logo Spring boot [3] 23 Hình 1.3 Logo ReactJS [7] 26 Hình 2.1 Màn hình trang chủ GEARVN 28 Hình 2.2 Màn hình đăng nhập GEARVN 29 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 GEARVN 29 Hình 2.4 Màn hình chi tiết sản phẩm GEARVN 30 Hình 2.5 Màn hình sản phẩm theo loại GEARVN 30 Hình 2.6 Màn hình giỏ hàng trang GEARVN 31 Hình 2.7 Trang thông tin người dùng lịch sử GEARVN 31 Hình 2.8 Trang chủ FPT Shop 32 Hình 2.9 Trang sản phẩm theo phân loại FPT Shop 33 Hình 2.10 Trang chi tiết sản phẩm PFT Shop 33 Hình 2.11 Trang quản lý tài khoản, đơn hàng, điểm thưởng FPT Shop 34 Hình 2.12 Trang giỏ hàng FPT Shop 34 Hình 2.13 Phần tương tác, đánh giả sản phẩm FPT Shop 35 Hình 2.14 Màn hình trang shopee 36 Hình 2.15 Màn hình chi tiết sản phẩm Shopee 37 Hình 2.16 Màn hình giỏ hàng Shopee 38 Hình 2.17 Màn hình đánh giá Shopee 39 Hình 3.1 Usecase người dùng 42 Hình 3.2 Usecase admin 43 Hình 3.3 Usecase shipper 44 Hình 4.1 Lược đồ đăng kí 64 Hình 4.2 Lược đồ đăng nhập 65 Hình 4.3 Lược đồ chỉnh sửa thơng tin cá nhân 66 Hình 4.4 Lược đồ duyệt đơn hàng 67 Hình 4.5 Lược đồ nhận giao hàng 68 Hình 4.6 Lược đồ thêm sản phẩm 69 Hình 4.7 Lược đồ cập nhật sản phẩm 70 Hình 4.8 Lược đồ xố sản phẩm 71 DANH SÁCH HÌNH Hình 4.9 Lược đồ tìm kiểm sản phẩm 72 Hình 4.10 Lược đồ xem thông tin chi tiết sản phẩm 73 Hình 4.11 Lược đồ lọc sản phẩm 73 Hình 4.12 Lược đồ thêm sản phẩm vào giỏ hàng 74 Hình 4.13 Lược đồ xố sản phẩm khỏi giỏ hàng 75 Hình 4.14 Lược đồ ERD 76 Hình 5.1 Màn hình trang chủ 77 Hình 5.2 Màn hình đăng nhập 80 Hình 5.3 Màn hình trang đăng ký 82 Hình 5.4 Giao diện danh mục 84 Hình 5.5 Màn hình mua sắm 86 Hình 5.6 Màn hình lọc sản phẩm 89 Hình 5.7 Màn hình chi tiết sản phẩm 92 Hình 5.8 Màn hình đánh giá sản phẩm 95 Hình 5.9 Màn hình giỏ hàng 97 Hình 5.10 Màn hình thơng tin tài khoản 99 Hình 5.11 Màn hình địa 101 Hình 5.12 Màn hình thêm địa 103 Hình 5.13 Màn hình chỉnh sửa địa 105 Hình 5.14 Màn hình Voucher tơi 107 Hình 5.15 Màn hình kho voucher 109 Hình 5.16 Màn hình đơn hàng tơi 111 Hình 5.17 Màn hình chi tiết đơn hàng 113 Hình 5.18 Màn hình tạo đơn hàng 115 Hình 5.19 Màn hình trang chủ Website 117 Hình 5.20 Màn hình đăng nhập Website 120 Hình 5.21 Màn hình đăng kí website 121 Hình 5.22 Màn hình reset password website 123 Hình 5.23 Màn hình shopping website 125 Hình 5.24 Màn hình chi tiết giỏ hàng website 127 Hình 5.25 Màn hình trang cá nhân website 129 Hình 5.26 Màn hình voucher tơi website 131