ứng dụng mua sắm trực tuyến các sản phẩm công nghệ

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN Đề tài: ỨNG DỤNG MUA SẮM TRỰC TUYẾN CÁC SẢN PHẨM CÔNG NGHỆ Giảng viên hướng dẫn : ThS NGUYỄN CÔNG HOAN Sinh viên thực : ĐINH NGỌC UYÊN PHƯƠNG - 18520335 PHẠM NGỌC THỊNH - 18520368 Thành phố Hồ Chí Minh, ngày 25 tháng 12 năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… LỜI CẢM ƠN Để thực tốt đề tài này, với tất kính trọng, nhóm em xin kính gửi lời cảm ơn đến thầy Nguyễn Công Hoan trực tiếp giảng dạy, truyền đạt hỗ trợ cho nhóm q trình nghiên cứu để nhóm em hồn thành đề tài Trong q trình thực hiện, trình làm báo cáo, chúng em khó tránh khỏi sai sót, nhóm em hi vọng thầy bỏ qua chúng em mong nhận ý kiến đóng góp thầy để học thêm nhiều kinh nghiệm để hoàn thành tốt đồ án lần sau Một lần nhóm em xin chân thành cảm ơn thầy Chúng em xin chân thành cảm ơn! Nhóm nghiên cứu Tp Hồ Chí Minh, tháng 12 năm 2021 MỤC LỤC I GIỚI THIỆU TỔNG QUAN Thơng tin nhóm Tổng quan đề tài 2.1 Bài toán thực tế 2.2 Tổng quan đề tài 2.3 Phạm vi nghiên cứu 2.4 Nội dung nghiên cứu 2.5 Kết hướng tới Công cụ sử dụng Source code 1 1 2 2 II CÔNG NGHỆ SỬ DỤNG ReactJS 1.1 Giới thiệu chung 1.2 Cách thức hoạt động ReactJS 1.3 Lý sử dụng ReactJS Spring Boot 2.1 Giới thiệu chung 2.2 Ưu điểm Spring Boot: 4 4 5 III ĐẶC TẢ YÊU CẦU Product Requirement Document 1.1 Objective 1.2 Release 1.3 Features 1.3.1 Theo dõi chi tiết quy trình mua hàng 1.3.2 Gợi ý dịng sản phẩm liên quan 1.3.3 Khách hàng đánh giá chất lượng sản phẩm sau mua hàng 1.3.4 Tạo giỏ hàng đặt hàng nhanh chóng 1.3.5 Tạo danh sách sản phẩm yêu thích 1.3.6 Tạo chương trình khuyến 1.3.7 Theo dõi cập nhật trạng thái đơn hàng 1.3.8 Phân loại hạng mục khách hàng để tri ân 1.3.9 Quản lý sản phẩm, đơn hàng, khách hàng 1.3.10 Báo cáo thống kê doanh thu, sản phẩm, khách hàng 7 9 10 10 11 12 12 13 14 14 15 1.3.11 Theo dõi lịch sử mua hàng khách hàng 1.3.12 Phản hồi đánh giá khách hàng sản phẩm 1.4 Future work - Hướng phát triển Các hình minh hoạ 3.1 Trang chủ 3.2 Trang sản phẩm 3.3 Trang chi tiết sản phẩm 3.4 Giỏ hàng 3.5 Đăng nhập - Đăng ký tài khoản mua hàng 3.6 Trang sản phẩm yêu thích 3.7 Các đơn hàng 3.8 Màn hình theo dõi đơn hàng thuộc phân quyền nhân viên 3.9 Trang quản lý loại sản phẩm cung cấp nhãn hàng 3.10 Trang quản lý sản phẩm phân quyền nhân viên 16 16 17 18 18 19 19 21 22 23 24 26 27 28 V KIẾN TRÚC HỆ THỐNG 30 VI KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN Kết đạt Hướng phát triển 32 32 32 VII TÀI LIỆU THAM KHẢO 33 I GIỚI THIỆU TỔNG QUAN Thông tin nhóm MSSV Họ tên Email 18520335 Đinh Ngọc Uyên Phương 18520335@gm.uit.edu.vn 18520368 Phạm Ngọc Thịnh 18520368@gm.uit.edu.vn Tổng quan đề tài 2.1 Bài toán thực tế Các ứng dụng mua hàng online đời từ lâu trước Tiki, Shopee Tuy nhiên, ứng dụng không chuyên mảng cung cấp thiết bị điện tử, số cửa hàng chuyên cung cấp thiết bị cơng nghệ khơng tạo tin tưởng tuyệt đối cho khách hàng mặt chất lượng sản phẩm vấn đề bảo mật thông tin khách hàng Do đó, thị trường cần trang web chuyên cung cấp mặt hàng liên quan đến cơng nghệ mà cịn phải đảm bảo chất lượng sản phẩm giống với quảng cáo, đồng thời bảo mật thông tin khách hàng đặt lên hàng đầu Không thế, chủ cửa hàng cần trang web chuyên hỗ trợ bán hàng trực tuyến mà bên cạnh ứng dụng cần cung cấp tính cần thiết cho họ quản lý nắm bắt tình trạng kinh doanh cửa hàng 2.2 Tổng quan đề tài Nhóm đề kế hoạch phát triển trang web mua hàng online TechShop để giải vấn đề tốn thực tế TechShop cung cấp mặt hàng liên quan đến thiết bị điện tử Với mặt hàng đa dạng, chất lượng với giá tiền mà người sử dụng bỏ ra, TechShop mong muốn đem đến cho người dùng trải nghiệm tốt việc mua hàng online mà không cần nghi ngại chiêu trị lừa đảo vấn đề thơng tin khách hàng bị lộ bên ngồi Bên cạnh đó, TechShop hỗ trợ cửa hàng việc kinh doanh quản lý cửa hàng TechShop mang đến tính giúp cho chủ doanh nghiệp nắm bắt tình hình kinh doanh, mặt hàng cửa hàng từ có đề chiến lược kinh doanh hợp lý cho cửa hàng 2.3 Phạm vi nghiên cứu Phạm vi toán bao gồm nghiệp vụ mức trung bình ứng dụng quản lý hỗ trợ mua sắm trực tuyến Ứng dụng không sâu vào nghiệp vụ nhập kho, quản lý nhân viên cửa hàng 2.4 Nội dung nghiên cứu Các nghiệp vụ liên quan đến ứng dụng mua sắm trực tuyến với tính giúp chủ cửa hàng quản lý cửa hàng đồng thời giúp khách hàng có trải nghiệm tốt mua hàng online 2.5 Kết hướng tới Về phía chủ cửa hàng: Ứng dụng hỗ trợ chủ cửa hàng quản lý cửa hàng cách tiện lợi, nhanh chóng, tạo chương trình khuyến nhằm tăng doanh thu Về phía khách mua hàng trực tuyến: Ứng dụng hỗ trợ mua hàng trực tuyến với quy trình nhanh chóng, đơn giản, theo dõi tình trạng đơn hàng cách chi tiết, nâng cao trải nghiệm người dùng với giao diện tiện dụng, thu hút người xem dễ sử dụng Công cụ sử dụng Trong q trình xây dựng phần mềm, nhóm sử dụng phần mềm sau: ● Eclipse IDE: IDE hỗ trợ xây dựng ứng dụng phía server (Spring Boot) ● Visual Studio Code: hỗ trợ xây dựng giao diện người dùng (ReactJS) ● Postman: hỗ trợ nhóm test api để lấy liệu từ phía server ● MySQL Workbench: hỗ trợ nhóm lưu trữ sở liệu Source code Frontend: https://github.com/dinhngocup/TechShop Backend: https://github.com/ngocthinhboyy/TechShopBackend II CÔNG NGHỆ SỬ DỤNG ReactJS 1.1 Giới thiệu chung React thư viện Javascript, phát triển Facebook, hỗ trợ xây dựng giao diện người dùng Một ứng dụng có giao diện xây dựng React JS tạo nhiều thành phần nhỏ (component), đó, output component đoạn code HTML nhỏ tái sử dụng xuyên suốt ứng dụng Component xem từ khố (key concept) nhắc đến React Mỗi component chứa component nhỏ hơn, đó, ứng dụng với cấu trúc phức tạp hình thành từ nhiều component Đồng thời, cần định nghĩa component lần sử dụng nhiều nơi 1.2 Cách thức hoạt động ReactJS ReactJS thường sử dụng để tạo giao diện cho SPA - single page application Khi sử dụng ReactJS, ứng dụng web chia thành component nhỏ, component chứa hai thành phần state props Dữ liệu truyền từ component cha sang gọi props, state định nghĩa liệu riêng component Component re-render state thay đổi, lý này, ứng dụng khơng render lại toàn trang web mà re-render component mà người dùng thao tác lên Chính ngun tắc hoạt động với component định nghĩa lần mà sử dụng nhiều nơi, ReactJS tăng hiệu suất ứng dụng web trở thành thư viện phát triển giao diện nhiều người sử dụng 1.3 Lý sử dụng ReactJS Một số lợi ích ReactJS khiến nhóm định chọn thư viện để tìm hiểu đồ án ● So với đối thủ cạnh tranh Angular, React có số điểm trội khiến nhóm định tìm hiểu áp dụng React đồ án ○ Về mặt hiệu suất: React sử dụng công nghệ DOM ảo cịn Angular sử dụng DOM thường Với DOM thường, Angular sử dụng DOM API để tìm cập nhật element, hiệu suất ứng dụng giảm đáng kể phải liên tục tìm cập nhật DOM Chính thế, DOM ảo đời giải toán cập nhật DOM cho hiệu tốt Tất thay đổi React cập nhật DOM ảo, React sử dụng thuật toán Diff để kiểm tra khác biệt DOM ảo DOM gốc cập nhật thay đổi vị trí cần thiết ○ Về mặt cộng đồng hỗ trợ: Mặc dù non trẻ, React.js đạt 163 nghìn 32,7 nghìn lần Fork Github vượt qua AngularJS cách rõ ràng xoay quanh 59,5 nghìn Sao 1,578 nghìn Người đóng góp Do đó, cộng đồng hỗ trợ ReactJS mạnh, điều hỗ trợ nhóm việc tìm sửa chữa lỗi ● JSX: Để tạo giao diện web ReactJS, nhà phát triển phải sử dụng câu lệnh React.createElement, nhiên điều làm cho file thiết kế giao diện trở nên khó quản lý, sửa lỗi mở rộng Do đó, JSX đời, cho phép viết mã code HTML ứng dụng React biển đổi HTML tags thành React elements Chính thế, JSX hỗ trợ lập trình viên tốt việc xây dựng giao diện ứng dụng web ● Để khởi tạo ứng dụng React cần dùng lệnh “create-react-app" mà không cần tốn nhiều thời gian cho việc config ● Component: component tách thành file nhỏ tái sử dụng, tránh việc code bị trùng nhau, dễ sửa chữa, trì phát triển ứng dụng Spring Boot 2.1 Giới thiệu chung Spring Boot module Spring Framework, cung cấp tính RAD (Rapid Application Development - Phát triển ứng dụng nhanh) 3.2 Trang sản phẩm Tất sản phẩm TechShop cung cấp phân loại trang sản phẩm, hỗ trợ người dùng tìm kiếm sản phẩm nhanh Màn hình thiết bị đồng hồ thông minh 3.3 Trang chi tiết sản phẩm Khách hàng xem chi tiết sản phẩm trang trước thêm vào giỏ hàng Trang chứa thông tin quan trọng sản phẩm thơng số kỹ thuật, số hình ảnh liên quan, sản phẩm khác loại nhãn hiệu số đánh giá từ phía khách hàng trải nghiệm dịch vụ TechShop cung cấp Một số hình ảnh tổng hợp số thông số kỹ thuật quan trọng sản phẩm Một số sản phẩm khác loại nhãn hiệu 3.4 Giỏ hàng Khách hàng thêm sản phẩm muốn mua, chỉnh sửa số lượng xoá sản phẩm chọn tiến hành toán giỏ hàng Màn hình sản phẩm có giỏ hàng tạm tính tổng giá tiền đơn hàng Màn hình chỉnh sửa địa giao hàng kiểm tra giỏ hàng trước đặt hàng 3.5 Đăng nhập - Đăng ký tài khoản mua hàng Để thực thao tác đặt hàng, theo dõi tình trạng đơn hàng người dùng phải đăng nhập tài khoản TechShop Trang đăng ký tài khoản mua hàng Màn hình đăng nhập 3.6 Trang sản phẩm yêu thích Người dùng lưu lại sản phẩm u thích chưa muốn tốn hàng tình trạng chờ hàng nhập kho vào Wishlist để khơng bỏ lỡ hàng u thích mua sau Màn hình danh sách sản phẩm yêu thích 3.7 Các đơn hàng Người dùng xem lại chi tiết đơn hàng đặt đánh giá dịch vụ cho TechShop cung cấp Các đơn hàng vận chuyển Chi tiết đơn hàng Màn hình đánh giá đơn hàng từ người dùng 3.8 Màn hình theo dõi đơn hàng thuộc phân quyền nhân viên Trước nhân viên định tiếp nhận xử lý đơn hàng, nhân viên phải xem lịch sử mua hàng khách hàng Danh sách hoá đơn tất khách hàng Lịch sử mua hàng khách hàng 3.9 Trang quản lý loại sản phẩm cung cấp nhãn hàng Màn hình quản lý loại hàng cung cấp Màn hình quản lý nhãn hàng 3.10 Trang quản lý sản phẩm phân quyền nhân viên Nhân viên thêm chỉnh sửa thông tin sản phẩm cửa hàng Đồng thời, nhân viên chỉnh sửa thơng số kỹ thuật sản phẩm loạt sản phẩm loại nhãn hàng Màn hình quản lý sản phẩm Màn hình chi tiết sản phẩm Màn hình quản lý thông số kỹ thuật tất sản phẩm loại nhãn hàng V KIẾN TRÚC HỆ THỐNG Ứng dụng xây theo kiểu client server với hai tầng frontend ReactJS backend viết Java Spring Boot hai tầng giao tiếp với thông qua Restful API Đối với phần frontend ReactJS, Khi người dùng tương tác với giao diện web main component, bên main component nhóm có đặt router, router có chức điều hướng render component tương ứng với url browser người dùng Dữ liệu component đến từ hai nguồn: ● Thứ từ store redux, nhóm áp dụng redux để quản lý tồn state ứng dụng Để tránh việc truyền state component cao xuống thấp dùng redux tiện nhiều, mà với redux action khơng chứa hành vi bất đồng nhóm sử dụng redux thunk middleware để gọi api lấy data từ server ● Nguồn liệu thứ truyền vào component gọi trực tiếp api mà không cần lưu trữ hay thông qua store Các api trước bước trước vào tầng frontend qua Axios HTTP request Ở interceptor, gắn header token cho request xử lý response trả từ backend Đối với phần backend xây dựng Spring Boot, nhóm có sử dụng Spring Security để xử lý việc phân quyền xác thực người dùng Mọi request trước muốn truy cập vào backend để lấy tài nguyên đểu phải qua lớp security Nếu thông qua lớp này, request Controller điều hướng đến service nhằm xử lý business logic Sau áp dụng business logic, data muốn gửi lên database yêu cầu lấy liệu từ database xử lý repository Ở repository nhóm khơng viết câu lệnh sql mà sử dụng Spring data JPA để áp dụng nhiều database mà không cần phải viết lại query Entity đối tượng ứng với bảng database, muốn gửi data lên database dùng Entity cịn nhận data từ database hứng DTO sau dựa liệu trả frontend hiển thị lên cho người dùng VI KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN Kết đạt Nhóm phát triển xây dựng ứng dụng tương đối hoàn chỉnh, đáp ứng đầy đủ nghiệp vụ yêu cầu thực tế mà ứng dụng tương tự thị trường làm Bên cạnh đó, ứng dụng cịn tích hợp tính lạ nhằm tăng trải nghiệm doanh thu cho người dùng người mua ứng dụng Nhóm nắm rõ hiểu q trình hoàn thiện cho việc xây dựng phần mềm ứng dụng, từ việc phân tích yêu cầu đến triển khai phát triển phần mềm Đúc kết nhiều kiến thức kinh nghiệm thực tế q trình hồn thiện sản phẩm nhóm Hướng phát triển Trong tương lai, nhóm tập trung nghiên cứu thêm công nghệ phổ biến liên quan đến ReactJS Spring Boot Microservice Docker nhằm tăng khả xử lý ứng dụng Đồng thời, nhóm phát triển thêm số tính nâng cao cho ứng dụng tốn online, tích hợp hệ thống khuyến nghị sản phẩm nhằm tăng trải nghiệm người dùng VII TÀI LIỆU THAM KHẢO Sự hướng dẫn góp ý thầy Nguyễn Cơng Hoan - giảng viên trường Đại học Công nghệ thông tin ĐHQG TPHCM khoa Công nghệ phần mềm Tài liệu Java Spring Boot trang: https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/ Tài liệu Spring Security trang: https://spring.io/projects/spring-security Tài liệu Swagger trang: https://www.baeldung.com/swagger-2-documentation-for-spring-rest-api Tài liệu Java JWT GitHub: https://github.com/jwtk/jjwt Tài liệu Spring Data JPA trang: https://spring.io/projects/spring-data-jpa Tài liệu ReactJS trang: https://reactjs.org/ Tài liệu React Router trang: https://reactrouter.com/web/guides/quick-start Tài liệu Redux trang: https://redux.js.org/ Tài liệu Redux Thunk GitHub: https://github.com/reduxjs/redux-thunk Tài liệu Redux Toolkit trang: https://redux-toolkit.js.org/ Cộng đồng chia sẻ kinh nghiệm lập trình: https://stackoverflow.com/ ... bình ứng dụng quản lý hỗ trợ mua sắm trực tuyến Ứng dụng không sâu vào nghiệp vụ nhập kho, quản lý nhân viên cửa hàng 2.4 Nội dung nghiên cứu Các nghiệp vụ liên quan đến ứng dụng mua sắm trực tuyến. .. Microservices ứng dụng Spring Boot dễ dàng III ĐẶC TẢ YÊU CẦU Product Requirement Document 1.1 Objective Vision TechShop - Giải pháp số việc mua sắm sản phẩm công nghệ Mua với giá tối thiểu, sản phẩm. .. thuật quan trọng sản phẩm Một số sản phẩm khác loại nhãn hiệu 3.4 Giỏ hàng Khách hàng thêm sản phẩm muốn mua, chỉnh sửa số lượng xoá sản phẩm chọn tiến hành toán giỏ hàng Màn hình sản phẩm có giỏ