Xây dựng website bán đồ công nghệ với spring boot và reactjs

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670 Bùi Minh Huy 19521597 Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670 Bùi Minh Huy 19521597 Thành phố Hồ Chí Minh, 16 tháng 06 năm 2022 LỜI CẢM ƠN Đầu tiên, nhóm xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Công nghệ phần mềm giúp cho em có kiến thức làm tảng để thực đề tài Đặc biệt, em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới cô Trần Thị Hồng Yến (Giảng viên khoa Công Nghệ Phần Mềm) Cô trực tiếp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến q báu giúp em hồn thành tốt báo cáo mơn học Trong thời gian học đề tài, em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, em vận dụng tối đa thu thập để hồn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, em khơng tránh khỏi thiếu sót Chính vậy, em mong nhận góp ý từ phía Cơ nhằm hồn thiện kiến thức mà em học tập hành trang để em thực tiếp đề tài khác tương lai Xin chân thành cảm ơn quý Thầy Cơ! Nhóm sinh viên thực Phạm Tấn Khang Bùi Minh Huy ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS TÊN ĐỀ TÀI TIẾNG ANH: BUILDING TECHNOLOGY SHOP WEBSITE WITH SPRING BOOT AND REACTJS Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày: 21/02/2022 đến ngày: 10/06/2022 Sinh viên thực hiện: Phạm Tấn Khang – 19521670 Bùi Minh Huy – 19521597 Nội dung đề tài: Giới thiệu đề tài: Trong thời đại chuyển giao công nghệ cộng với tác động đại dịch mà người tiêu dùng chuyển thói quen mua hàng cửa hàng siêu thị sang mua sắm online Bởi tiện lợi, giá rõ ràng, vận chuyển đơn hàng ngày nhanh chóng hơn, cửa hàng kinh doanh nhận thấy tiềm việc tiếp thị bán hàng online.Đặc biệt cửa hàng bán đồ công nghệ cần phải mở rộng việc quảng bá mặt hàng tới khách hàng Nhận thấy nhu cầu cửa hàng tiềm việc kinh doanh online, nhóm chúng em tiến hành xây dựng "Website bán hàng công nghệ" nhằm thúc đẩy doanh thu cửa hàng thông qua việc bán hàng online Phần mềm nơi cấp cho người dùng thơng tin xác giá trực quan sản phẩm, góp phần làm cho việc mua bán thiết bị cơng nghệ thời kì dịch bệnh trở nên dễ dàng Ngồi cịn giúp hàng quản lý kho hàng, đơn xuất nhập hàng doanh thu Mục tiêu đề tài: Nắm bắt áp dụng framework Spring Boot ReactJS để xây - dựng sản phẩm đề tài Xây dựng website bán đồ công nghệ với nội dung phong phú, giao - diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng chức cần thiết website thương mại điện tử Website phát triển dựa VueJs Xây dựng website quản trị cho nhân viên hàng với chức - quản lý thông tin đa dạng tiện dụng Website phát triển dựa ReactJs Phạm vi đề tài: • Phạm vi mơi trường: o • Triển khai sản phẩm mơi trường web Phạm vi chức năng: o Đối với phía admin: ▪ Quản lý sản phẩm, biến thể sản phẩm ▪ Quản lý thương hiệu, loại sản phẩm ▪ Quản lý đơn hàng ▪ Quản lý nhập hàng ▪ Quản lý khuyến ▪ Quản lý tài khoản nhân viên ▪ Thống kê o Đối với phía website: ▪ Đăng nhập, đăng ký tài khoản ▪ Xác thực mail, quên mật ▪ Quản lý thông tin tài khoản ▪ Hiển thị danh sách sản phẩm, chi tiết sản phẩm ▪ Tìm kiếm sản phẩm ▪ Bộ lọc chi tiết sản phẩm ▪ Chức giỏ hàng ▪ Chức đặt hàng ▪ Lịch sử mua hàng Đối tượng sử dụng: - Tất người dùng có nhu cầu mua đồ công nghệ cửa hàng - Nhân viên, chủ cửa hàng Phương pháp thực hiện: - Tìm hiểu Spring Boot, ReactJS, VueJS, PostgreSQL - Tham khảo website liên quan để hiểu rõ nghiệp vụ - Tiến hành phân tích thiết kế hệ thống - Tìm hiểu UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho người dùng website cho nhân viên - Tiến hành triển khai kiểm thử Công nghệ sử dụng: - Backend: Spring Boot - Front-end: ReactJS, VueJS - Database: PostgreSQL - Source Control: GitHub Kết mong đợi: - Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức website thương mại điện tử - Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý triển khai dự án phần mềm để xây dựng website sản phẩm đề tài - Giao diện website đẹp mắt, dễ sử dụng người dùng - Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực hiện: Giai đoạn Thời gian - Tìm hiểu Spring Boot ReactJS, Chuẩn bị kiến thức Công việc 21/02/2022 – 07/03/2022 PostgreSQL cơng nghệ - Phân tích, xác định, chức Phân tích, thiết kế 08/03/2022 – 08/04/2021 hệ thống - Thiết kế database - Xây dựng base source - Thiết kế UI - Xây dựng giao diện admin với ReactJS - Xây dựng giao diện website với VueJS Xây dựng ứng dụng - Xây dựng RESTful API cho chức 09/04/2021 – 16/05/2021 - Tích hợp API để hoàn thiện giao diện admin website - Thực kiểm thử luồng chức Kiểm thử sửa lỗi 17/05/2021 – 31/05/2021 - Tiến hành sửa lỗi phát sinh có - Cải thiện giao diện hoàn thành ứng dụng - Viết báo cáo Hoàn thiện báo cáo slide thuyết 01/06/2022 – 10/06/2022 - Làm slide thuyết trình trình Phân cơng cơng việc: Công việc Công việc chung Mô tả công việc - Tìm hiểu cơng nghệ - Phân tích, xác định, chức yêu cầu - Kiểm thử - Chuẩn bị tài liệu, viết báo cáo - Xây dựng website bán hàng Công việc cá nhân Phạm Tấn Khang Bùi Minh Huy - Lập trình Backend, xây - Lập trình Frontend, xây dựng dựng RESTful API giao diện admin - Thiết kế sở liệu - Crawl data cho website TP HCM, ngày 10 tháng 06 năm 2022 Xác nhận CBHD Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Phạm Tấn Khang | Bùi Minh Huy MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG CHI TIẾT .2 MỤC LỤC DANH MỤC BẢNG 12 DANH MỤC HÌNH ẢNH 15 Chương GIỚI THIỆU ĐỀ TÀI 17 1.1 Tên đề tài 17 1.2 Mô tả đề tài 17 1.3 Lý chọn thiết kế Website 17 1.4 Công nghệ sử dụng .19 Chương CƠ SỞ LÝ THUYẾT 20 2.1 Tổng quan ReactJS 20 2.2 Tổng quan VueJS .20 2.3 Tổng quan Spring Boot 21 2.4 Tổng quan Spring Data JPA 22 2.5 Tổng quan Postgres SQL 22 2.6 Tổng quan Cloudinary .23 2.7 Tổng quan Json Web Token (JWT) 24 Chương PHÂN TÍCH ĐẶC TẢ YÊU CẦU 26 3.1 Mô tả yêu cầu 26 3.1.1 Yêu cầu chức 26 3.1.2 Yêu cầu phi chức 28 3.2 Phân tích Use case 29 3.2.1 Use case quản lý .29 3.2.1.1 Sơ đồ Use case 29 3.2.1.2 Danh sách Actor 30 3.2.1.3 Danh sách Use-case 30 3.2.1.4 Đặc tả Use-case 31 3.2.2 Use case website 49 3.2.2.1 Sơ đồ Use case 49 6.2.3 Chi tiết hình 6.2.3.1 Trang chủ Hình 6.18 Màn hình trang chủ STT Tên Kiểu Ý nghĩa categoryBtn Button Mở đóng Category categoryItem Button Chuyển tới trang xem sản phẩm ứng với phân loại CartBtn Button Chuyển tới giỏ hàng OrderBtn Button Chuyển tới xem danh sách đơn đặt hàng userProfile Button Mở modal profile brandItem Button Chuyển tới trang xem sản phẩm thương hiệu chọn prevSlide Button Cuộn danh sách sang trái nextSlide Button Cuộn danh sách sang phải Bảng 6.20 Bảng mơ tả chi tiết hình trang chủ 108 Ghi 6.2.3.2 Xem sản phẩm theo thương hiệu Hình 6.19 Màn hình xem sản phẩm theo thương hiệu STT Tên Kiểu Ý nghĩa brandItem Button Chuyển tới trang xem sản phẩm thương hiệu chọn filterBtn Button Bật, Tắt chế độ filter rangePrice RangeSlide Lựa chọn vùng giá sản phẩm searchProduct TextField Tìm kiếm sản phẩm rdSort Radio Sắp xếp sản phẩm productCard Custom Chuyển tới trang xem chi tiết sản phẩm 109 Ghi Bảng 6.21 Bảng mô tả chi tiết hình xem sản phẩm theo thương hiệu 6.2.3.3 Xem sản phẩm theo phân loại Hình 6.20 Màn hình xem sản phẩm theo thương hiệu STT Tên Kiểu Ý nghĩa categoryBtn Button Mở tắt danh sách phân loại categoryItem Button Chuyển tới trang xem sản phẩm phân loại chọn filterBtn Button Bật, Tắt chế độ filter rangePrice RangeSlide Lựa chọn vùng giá sản phẩm openTag Button Tắt mở thuộc tính Tag Chip Lựa chọn tag 110 Ghi searchProduct TextField Tìm kiếm sản phẩm rdSort Radio Sắp xếp sản phẩm productCard Custom Chuyển tới trang xem chi tiết sản phẩm Bảng 6.22 Bảng mơ tả chi tiết hình xem sản phẩm theo thương hiệu 6.2.3.4 Xem giỏ hàng Hình 6.21 Màn hình giỏ hàng STT Tên Kiểu Ý nghĩa minusBtn Button Giảm số lượng sản phẩm plusBtn Button Tăng số lượng sản phảm delBtn Button Xóa sản phẩm khỏi giỏ hàng 111 Ghi voucher TextField Nhập mã voucher chkBtrn Button Chuyển tới trang đặt hàng Bảng 6.23 Bảng mô tả chi tiết hình giỏ hàng 6.2.3.5 Thơng tin đặt hàng Hình 6.22 Màn hình thơng tin đặt hàng STT Tên Kiểu Ý nghĩa Name TextField Điền tên người nhận phoneNo TextField Điền số điện thoại người nhận address Select Nhập địa người nhận checkoutBtn Button Hòan tất đặt hàng Bảng 6.24 Bảng mô tả chi tiết hình thơng tin đặt hàng 112 Ghi 6.2.3.6 Chi tiết sản phẩm Hình 6.23 Màn hình chi tiết sản phẩm STT Tên Kiểu Ý nghĩa nextBtn Button Chuyển tới xem hình ảnh radioVariant Radio Chọn phiên minusBtn Button Giảm số lượng plusBtn Button Tăng số lượng addCartBtn Button Thêm sản phẩm vào giỏ 113 Ghi 6.2.3.7 Lịch sử mua hàng 6.2.3.8 Thay đổi thơng tin cá nhân Hình 6.24 Màn hình thay đổi thơng tin cá nhân STT Tên Kiểu Ý nghĩa name TextField Điền tên người dùng phoneNo TextField Điền số điện thoại người dùng email TextField Địa Email birthday TextField Ngày sinh người dùng province TextField Tỉnh district TextField ward TextField Xã address TextField Địa saveBtn Button Lưu thay đổi Huyện Bảng 6.25 Bảng mô tả chi tiết hình 114 Ghi Chỉ xem 6.2.3.9 Thay đổi mật Hình 6.25 Màn hình thay đổi mật STT Tên Kiểu Ý nghĩa oldPass TextField Mật cũ newPass TextField Mật saveBtn Button Lưu thay đổi Bảng 6.26 Bảng mô tả chi tiết hình thay đổi mật 115 Ghi 6.2.3.10 Đăng nhập Hình 6.26 Màn hình đăng nhập STT Tên Kiểu Ý nghĩa email TextField Email người dùng password TextField Mật login Button Thực đăng nhập register Label Chuyển qua tab đăng ký forgotPassword Label Chuyển qua tab quên mật Bảng 6.27 Bảng mơ tả chi tiết hình đăng nhập 116 Ghi 6.2.3.11 Đăng ký Hình 6.27 Màn hình đăng ký STT Tên Kiểu Ý nghĩa email TextField Email người dùng password TextField Mật confirmPassword TextField Nhập lại mật register Button Thực đăng ký login Label Chuyển qua tab đăng nhập Bảng 6.28 Bảng mô tả chi tiết hình đăng ký 117 Ghi 6.2.3.12 Quên mật Hình 6.28 Màn hình quên mật STT Tên Kiểu Ý nghĩa email TextField Email người dùng sendMail Button Thực gửi mail login Label Chuyển tới tab đăng nhập Bảng 6.29 Bảng mô tả chi tiết hình quên mật 118 Ghi 6.2.3.13 Đặt lại mật Hình 6.29 Màn hình đặt lại mật STT Tên Kiểu Ý nghĩa password TextField Mật confirmPassword TextField Nhập lại mật saveBtn Button Thực thay đổi mật Bảng 6.30 Bảng mơ tả chi tiết hình đặt lại mật 119 Ghi Phải giống mật (1) KẾT LUẬN ❖ Đánh giá - Thuận lợi: • Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài • Vận dụng kiến thức học để áp dụng vào đồ án • Các tài liệu hướng dẫn phong phú giúp giải vấn đề thực đồ án - Khó khăn • Lần đầu áp dụng cơng nghệ ReactJS, VueJS Spring Boot q trình tìm hiểu gặp nhiều khó khăn tốn nhiều thời gian • Gặp nhiều rắc rối việc thiết kế sở liệu cho phù hợp • Khó khăn việc trả liệu cho phía front-end theo yêu cầu ❖ Kết đạt - Ưu điểm: • Hồn thành đầy đủ u cầu tính cần thiết hệ thống quản lý website bán đồ cơng nghệ • Website ưa nhìn, xem sản phẩm đầy đủ chi tiết cấu hình • Sinh viên nắm cơng nghệ phổ biến ReactJS, VueJS Spring Boot • Dữ liệu đầy đủ, phù hợp với nhu cầu người dùng - Nhược điểm: • Chưa có tài liệu hướng dẫn sử dụng phía hệ thống quản lý • Chưa cho hỗ trợ tốn online chưa tích hợp phí vận chuyển • Website chưa tương tích với hình nhỏ • Tốc độ truy vấn liệu chậm ❖ Hướng phát triển - Cải thiện UI/UX 120 - Tích hợp tốn online - Thêm tính cho phép so sánh sản phẩm thể loại - Thêm tính cho phép người dùng bình luận, đánh giá sản phẩm - Xây dựng mở rộng thêm chức gợi ý sản phẩm, chatbot hỗ trợ tư vấn - Hoàn thiện chức có - Tối ưu hoá code để tăng tốc độ truy vấn liệu để dễ dàng mở rộng sau 121 TÀI LIỆU THAM KHẢO [1] Trần Thị Hồng Yến (2021), Slide giảng môn Internet Công nghệ Web, Khoa Khoa Học Kỹ Thuật Thông Tin, Trường ĐH Công Nghệ Thông Tin [2] Spring Boot https://loda.me/courses/spring-boot [3] Learn Spring Boot https://www.baeldung.com/spring-boot [4] Learn Spring Data JPA https://vladmihalcea.com/ [5] Vuettify Web Docs: https://vuetifyjs.com/en/ [6] Vue Web Docs: https://vuejs.org/ [7] Ant Design Web Docs: https://ant.design/ [8] W3Schools Online Web Tutorials: https://www.w3schools.com/ [9] Tìm hiểu Json Web Token https://viblo.asia/p/tim-hieu-ve-json-web-tokenjwt-7rVRqp73v4bP [10] Khố học HTML-CSS: https://www.youtube.com/watch?v=R6plN3FvzFY&list=PL_VfJajZj0U9nEXa4qyf B4U5ZIYCMPlz [11] Khoá học ReactJS: https://www.youtube.com/watch?v=w7ejDZ8SWv8 [12] Khoá học VueJS: https://www.youtube.com/c/HenryWebDev 122 ... CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS TÊN ĐỀ TÀI TIẾNG ANH: BUILDING TECHNOLOGY SHOP WEBSITE WITH SPRING BOOT AND REACTJS Cán hướng dẫn: ThS... HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI SPRING BOOT VÀ REACTJS Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến... thống - Thiết kế database - Xây dựng base source - Thiết kế UI - Xây dựng giao diện admin với ReactJS - Xây dựng giao diện website với VueJS Xây dựng ứng dụng - Xây dựng RESTful API cho chức 09/04/2021