Đồ án shop quần áo online tích hợp gợi ý sản phẩm

ĐẠ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 ĐỀ TÀI: SHOP QUẦN ÁO ONLINE TÍCH HỢP GỢI Ý SẢN PHẨM Giảng viên hướng dẫn: ThS Trần Anh Dũng Danh sách sinh viên: Nguyễn Trí Đức MSSV: 20520453 Trương Kim Điền MSSV: 20520442 TP Hồ Chí Minh, tháng năm 2023 LỜI CẢM ƠN Nhóm chúng em xin gửi lời cảm ơn chân thành tri ân sâu sắc đến thầy Trần Anh Dũng hướng dẫn, tạo điều kiện cho nhóm chúng em hồn thành Đồ án Trong vòng 16 tuần, qua buổi tương tác, báo cáo tiến độ, nhờ dẫn nhiệt tình thầy, chúng em tiếp thu kiến thức quan trọng, bổ ích góp ý chân thành để làm đồ án hoàn chỉnh Trong khoảng thời gian thực đồ án, chúng em học hỏi thêm nhiều kiến thức, kinh nghiệm, tiếp cận công nghệ áp dụng vào thực tiễn đồ án Mặc dù cố gắng hoàn thành báo cáo với tất nỗ lực song báo cáo nhóm chúng em chắn khơng tránh khỏi thiếu sót, chúng em mong nhận thơng cảm góp ý chân thành từ thầy Nhóm em xin chân thành cảm ơn Thành phố Hồ Chí Minh, tháng 07 năm 2023 Nguyễn Trí Đức Trương Kim Điền MỤC LỤC TÓM TẮT ĐỒ ÁN CHƯƠNG MỞ ĐẦU 1.1 Lý chọn đề tài: 1.2 Mục đích nghiên cứu: 1.2.1 Khách quan: 1.2.2 Chủ quan 1.3 Mục tiêu đề tài: 1.3.1 Mục tiêu tổng quát: 1.3.2 Mục tiêu cụ thể: 1.4 Đối tượng nghiên cứu: 1.4.1 Các công nghệ nghiên cứu: 1.4.2 Đối tượng sử dụng đề tài hướng đến: 10 1.5 Phạm vi nghiên cứu: 10 1.5.1 Phạm vi môi trường: 10 1.5.2 Phạm vi chức năng: 10 CHƯƠNG KIẾN THỨC NỀN TẢNG 12 2.1 Typescript: 12 2.2 Node.js: 12 2.3 ReactJS: 14 2.4 NestJS: 14 2.5 Prisma: 15 2.6 PostgreSQL: 16 CHƯƠNG HỆ THỐNG GỢI Ý RECOMMENDER SYSTEM 17 3.1 Khái niệm 17 3.1.1 Giới thiệu hệ thống gợi ý - Recommender system 17 3.1.2 Phương pháp Content-based Filtering 18 3.2 Thư viện Content-based-recommender-ts: 21 3.2.1 Giới thiệu thư viện: 21 3.2.2 Chi tiết bước thuật toán 22 3.3 Áp dụng vào đề tài 30 3.3.1 Luồng xử lý 31 CHƯƠNG THIẾT KẾ HỆ THỐNG 34 4.1 Kiến trúc hệ thống: Mơ hình Client-Server 34 4.2 Chi tiết thành phần hệ thống: 35 4.3 Thiết kế sơ đồ lớp: 35 CHƯƠNG ĐẶC TẢ USE-CASE 37 5.1 Sơ đồ Use-case: 37 5.2 Danh sách tác nhân: 37 5.3 Danh sách Use-case: 38 5.4 Đặc tả Use-case: 41 5.4.1 Đăng nhập 41 5.4.2 Đăng kí: 42 5.4.3 Quên mật khẩu: 43 5.4.4 Đặt mua sản phẩm 45 5.4.5 Quản lý đơn hàng 48 5.4.6 Thêm sản phẩm 50 5.4.7 Nhập sản phẩm: 52 CHƯƠNG THIẾT KẾ CƠ SỞ DỮ LIỆU 54 6.1 Sơ đồ logic: 54 6.2 Danh sách quan hệ: 54 CHƯƠNG THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 56 7.1 Danh sách hình: 56 7.2 Sơ đồ liên kết hình: 58 7.3 Mô tả chi tiết hình: 59 7.3.1 Navigation Bar: 59 7.3.2 Màn hình Trang chủ: 60 7.3.3 Màn hình Danh sách sản phẩm: 62 7.3.4 Màn hình Chi tiết sản phẩm: 64 7.3.5 Màn hình Giỏ hàng: 66 7.3.6 Màn hình Thanh toán: 68 7.3.7 Màn hình Thơng tin cá nhân: 70 7.3.8 Màn hình Danh sách đơn hàng: 72 7.3.9 Màn hình Chi tiết đơn hàng: 74 7.3.10 Màn hình Chính sách đổi trả: 75 7.3.11 Màn hình Đăng nhập: 77 7.3.12 Màn hình Đăng kí: 78 7.3.13 Màn hình Quên mật khẩu: 80 7.3.14 Navigation SideBar: 82 7.3.15 Màn hình Thống kê: 86 7.3.16 Màn hình Đơn hàng chờ: 88 7.3.17 Màn hình Đơn hàng hồn thành: 89 7.3.18 Màn hình Đơn hàng huỷ: 90 7.3.19 Màn hình Nhãn: 91 7.3.20 Màn hình Bộ sưu tập: 94 7.3.21 Màn hình Sản phẩm: 96 7.3.22 Form tạo/chỉnh sửa sản phẩm: 100 7.3.23 Màn hình Tình trạng đơn hàng: 103 7.3.24 Màn hình Hố đơn toán: 104 7.3.25 Màn hình Hố đơn chưa tốn: 107 7.3.26 Màn hình Giảm giá: 108 7.3.27 Màn hình Voucher: 110 7.3.28 Màn hình Chính sách (đang phát triển): 114 7.3.29 Màn hình Khách hàng: 115 7.3.30 Màn hình Lịch sử nhập hàng: 116 7.3.31 Màn hình Nhập hàng: 117 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ 120 8.1 Môi trường cài đặt kiểm thử: 120 8.2 Kết kiểm thử: 120 CHƯƠNG KẾT LUẬN 121 9.1 Kết đạt được: 121 9.2 Hạn chế: 122 9.2.1 Về việc tổ chức quản lí nhóm: 122 9.2.2 Về sản phẩm phần mềm: 122 9.3 Hướng phát triển: 122 TÀI LIỆU THAM KHẢO 123 DANH MỤC HÌNH ẢNH Hình 3.1: Cách thức hoạt động Content Based Filtering 20 Hình 3.2: Hình minh họa phương pháp Content-based filtering tập trung vào sản phẩm 20 Hình 3.3: Hình minh họa phương pháp Content-based filtering tập trung vào sản phẩm 21 Hình 3.4: Thư viện Content-based-recommender-ts 22 Hình 3.5: Mã nguồn cài đặt phần tiền xử lí liệu thư viện content-basedrecommender-ts 24 Hình 3.6: Mã nguồn cài đặt phần tạo vector thư viện content-based-recommenderts 27 Hình 3.7: Mã nguồn cài đặt phần tính tốn cosine similarity thư viện contentbased-recommender-ts 30 Hình 3.8: Sơ đồ Activity hệ thống gợi ý 31 Hình 3.9: Dữ liệu trả từ hệ thống gợi ý 32 Hình 3.10: Hình ảnh sản phẩm gợi ý ở trang chi tiết sản phẩm 33 Hình 4.1: Mơ hình Client-Server 34 Hình 4.2: Sơ đồ lớp 36 Hình 5.1: Sơ đồ Use-case 37 Hình 5.2: Sơ đồ hoạt động toán hoá đơn 46 Hình 6.1: Sơ đồ logic 54 Hình 7.1: Sơ đồ liên kết hình 59 Hình 7.2: Giao diện Navigation Bar trước đăng nhập 59 Hình 7.3: Giao diện Navigation Bar sau đăng nhập 59 Hình 7.4: Giao diện hình Trang chủ 61 Hình 7.5: Giao diện hình Danh sách sản phẩm 63 Hình 7.6: Giao diện hình Chi tiết sản phẩm 65 Hình 7.7: Giao diện hình Giỏ hàng 67 Hình 7.8: Giao diện hình Thanh tốn 69 Hình 7.9: Giao diện hình Thơng tin cá nhân 72 Hình 7.10: Giao diện hình Danh sách đơn hàng 73 Hình 7.11: Giao diện hình Chi tiết đơn hàng 74 Hình 7.12: Giao diện hình Chính sách đổi trả 76 Hình 7.13: Giao diện hình Đăng nhập 77 Hình 7.14: Giao diện hình Đăng kí 79 Hình 7.15: Giao diện hình Quên mật khẩu 81 Hình 7.16: Giao diện hình thơng báo cập nhật mật khẩu thành công 81 Hình 7.17: Giao diện Navigation SideBar thu gọn 83 Hình 7.18: Giao diện Navigation SideBar mở rộng 84 Hình 7.19: Giao diện hình Thống kê 87 Hình 7.20: Giao diện hình Đơn hàng chờ 89 Hình 7.21: Giao diện hình Đơn hàng hoàn thành 90 Hình 7.22: Giao diện hình Đơn hàng huỷ 91 Hình 7.23: Giao diện hình Nhãn 92 Hình 7.24: Giao diện form tạo nhãn 92 Hình 7.25: Giao diện chỉnh sửa sản phẩm 93 Hình 7.26: Giao diện hình Bộ sưu tập 94 Hình 7.27: Giao diện form tạo sưu tập 95 Hình 7.28: Giao diện chỉnh sửa sưu tập 95 Hình 7.29: Giao diện hình Sản phẩm 97 Hình 7.30: Giao diện thông tin chi tiết sản phẩm 98 Hình 7.31: Giao diện thông tin chi tiết sản phẩm 99 Hình 7.32: Giao diện form tạo sản phẩm 100 Hình 7.33: Giao diện form tạo sản phẩm 101 Hình 7.34: Giao diện form chỉnh sửa sản phẩm 102 Hình 7.35: Giao diện form chỉnh sửa sản phẩm 102 Hình 7.36: Giao diện hình Tình trạng đơn hàng 104 Hình 7.37: Giao diện hình Hoá đơn toán 105 Hình 7.38: Giao diện thơng tin chi tiết hố đơn 106 Hình 7.39: Giao diện hình Hoá đơn chưa toán 107 Hình 7.40: Giao diện hình Giảm giá 108 Hình 7.41: Giao diện form tạo Giảm giá 109 Hình 7.42: Giao diện chỉnh sửa giảm giá 109 Hình 7.43: Giao diện hình Voucher 111 Hình 7.44: Giao diện form tạo voucher 112 Hình 7.45: Giao diện chỉnh sửa voucher 112 Hình 7.46: Giao diện hình Chính sách 114 Hình 7.47: Giao diện hình Khách hàng 115 Hình 7.48: Giao diện hình Thơng tin chi tiết khách hàng 116 Hình 7.49: Giao diện hình Lịch sử nhập hàng 117 Hình 7.50: Giao diện hình Nhập hàng 118 Hình 7.51: Giao diện form nhập hàng 118 Hình 7.41: Giao diện form tạo Giảm giá Hình 7.42: Giao diện chỉnh sửa giảm giá • Các thành phần: STT Tên đối tượng Loại Ý nghĩa Tìm kiếm Input Ơ nhập thơng tin tìm kiếm tên giảm giá Danh sách giảm giá Table Hiển thị danh sách thông tin giảm giá Thêm Button Nút chọn mở form thêm giảm giá Edit Button Nút chọn chỉnh sửa giảm giá Delete Button Nút chọn xố giảm giá 109 Name Input Ơ nhập tên cho giảm giá Giảm giá Select Ô chọn mức giảm giá cho giảm giá Lưu Button Nút chọn lưu thông tin giảm giá Huỷ Button Nút chọn huỷ thông tin giảm giá 10 Tên giảm giá Input Ô nhập tên cho giảm giá chỉnh sửa 11 Giảm giá Select Ô chọn mức giảm giá cho giảm giá chỉnh sửa 12 Lưu Button Nút chọn lưu thông tin giảm giá chỉnh sửa 13 Huỷ Button Nút chọn huỷ thông tin giảm giá chỉnh sửa Bảng 7.27: Danh sách thành phần giao diện hình Giảm giá 7.3.27.Màn hình Voucher: • Giao diện: 110 Hình 7.43: Giao diện hình Voucher 111 Hình 7.44: Giao diện form tạo voucher Hình 7.45: Giao diện chỉnh sửa voucher • Các thành phần: 112 STT Tên đối tượng Loại Ý nghĩa Tìm kiếm Input Ơ nhập thơng tin tìm kiếm tên voucher Danh sách voucher Hiển thị danh sách thông tin Table voucher Thêm Button Nút chọn mở form thêm voucher Edit Button Nút chọn chỉnh sửa voucher Delete Button Nút chọn xố voucher Mã khuyến Input Ơ nhập mã cho voucher Tên khuyến Input Ô nhập tên cho voucher Giảm giá Input Ô nhập mức giảm giá cho voucher Ngày hết hạn DatePicker Chọn ngày hết hạn cho voucher 10 Mô tả Input Ơ nhập thơng tin mơ tả cho voucher 11 Lưu Button Nút chọn lưu thông tin voucher 12 Huỷ Button Nút chọn huỷ thông tin voucher 13 Code Input Ô nhập mã cho voucher sửa 14 Tên khuyến Input Ô nhập tên cho voucher sửa 15 Giảm giá Input Ô nhập mức giảm giá cho voucher sửa 113 16 Ngày hết hạn DatePicker Chọn ngày hết hạn cho voucher 17 Mô tả Input Ơ nhập thơng tin mơ tả cho voucher 18 Lưu Button Nút chọn lưu thông tin voucher sửa 19 Huỷ Button Nút chọn huỷ thông tin voucher sửa Bảng 7.28: Danh sách thành phần giao diện hình Voucher 7.3.28.Màn hình Chính sách (đang phát triển): • Giao diện: Hình 7.46: Giao diện hình Chính sách • Các thành phần: STT Tên đối tượng Ý nghĩa Loại 114 Phạm vi áp dụng Layout Hiển thị nội dung sách, click để mở rộng/thu gọn Cách hình thành Layout hợp đồng Giá Hiển thị nội dung sách, click để mở rộng/thu gọn Layout Hiển thị nội dung sách, click để mở rộng/thu gọn toán Bảng 7.29: Danh sách thành phần giao diện hình Chính sách 7.3.29.Màn hình Khách hàng: • Giao diện: Hình 7.47: Giao diện hình Khách hàng 115 Hình 7.48: Giao diện hình Thơng tin chi tiết khách hàng • Các thành phần: STT Tên đối tượng Loại Ý nghĩa Danh sách khách Table Hiển thị danh sách khách hàng đăng kí tài khoản với hệ thống hàng Thơng tin chi tiết Layout Hiển thị thông tin chi tiết khách hàng chọn khách hàng Bảng 7.30: Danh sách thành phần giao diện hình Khách hàng 7.3.30.Màn hình Lịch sử nhập hàng: • Giao diện: 116 Hình 7.49: Giao diện hình Lịch sử nhập hàng • Các thành phần: STT Tên đối tượng Loại Ý nghĩa Danh sách lịch sửa Table Hiển thị lịch sử nhập hàng cửa hàng Bảng 7.31: Danh sách thành phần giao diện hình Lịch sử nhập hàng 7.3.31.Màn hình Nhập hàng: • Giao diện: 117 Hình 7.50: Giao diện hình Nhập hàng Hình 7.51: Giao diện form nhập hàng 118 • Các thành phần: STT Tên đối tượng Loại Ý nghĩa Danh sách sản Table Hiển thị danh sách sản phẩm để người dùng chọn sản phẩm cần phẩm nhập hàng Giá nhập Ô nhập giá trị đơn vị hàng Input cần nhập Số lượng Ô nhập số lượng hàng nhập cho Input kích cỡ màu tương ứng Số lượng hàng nhập Layout Hiển thị tổng số lượng hàng nhập Thành tiền Layout Hiển thị tổng số tiền nhập Huỷ Button Nút chọn huỷ thông tin nhập Đồng ý Button Nút chọn xác nhận thông tin nhập hàng Bảng 7.32: Danh sách thành phần giao diện hình Nhập hàng 119 CHƯƠNG 8.1 CÀI ĐẶT VÀ KIỂM THỬ Môi trường cài đặt kiểm thử: Môi trường cài đặt: Windows / Android 11.0 Thiết bị cài đặt: - Máy tính cá nhân có trình duyệt Microsoft Edge, Chrome, Cốc Cốc, … 8.2 STT Kết kiểm thử: Mức độ hồn Tính thiện Đăng nhập / Đăng xuất 100% Xem, tạo, cập nhật Sản phẩm 95% Xem, Tạo, Xóa, Cập nhật Nhãn 100% Xem, Tạo, Xóa, Cập nhật Bộ sưu tập 100% Nhập hàng 100% Xem báo cáo thống kê 80% Cập nhật thông tin tài khoản 91% Hệ thống gợi ý sản phẩm 100% Bảng 8.1: Kết quả kiểm thử 120 Ghi Cập nhật ảnh đại diện CHƯƠNG KẾT LUẬN Kết đạt được: 9.1 Thông qua việc nghiên cứu tìm hiểu cơng nghệ, đặc biệt thuật toán gợi ý sản phẩm Recommender, nhóm phát triển website “Shop quần áo online tích hợp hệ thống gợi ý sản phẩm” đáp ứng chức nghiệp vụ lĩnh vực thương mại điện tử Source code ứng dụng: https://github.com/DucllOwO/ecommerce-shop Ứng dụng truy cập với tài khoản truy cập sau: Vai trò Email đăng nhập Password Khách hàng 20520442@gm.uit.edu.vn 123456 Nhân viên 20520453@gm.uit.edu.vn 123456 Bảng 9.1: Danh sách tài khoản hệ thống Về việc tổ chức quản lý nhóm: - Hiểu vận dụng tốt kiến thức học lớp quy trình phát triển phần mềm để tăng tính hiệu việc làm teamwork - Sử dụng quản lý source code GitHub, giúp việc giao tiếp, phát triển phần mềm thành viên nhóm tốt - Các thành viên chịu học hỏi kiến thức trao đổi kiến thức cho Về mặt kỹ thuật, nhóm em đạt kết sau: - Cách xây dựng website thương mại điện tử - Tìm hiểu biết cách triển khai máy chủ lên tảng đám mây để sử dụng khơng ở mạng cục - Tìm hiểu vận dụng kiến thức để xây dựng hệ thống gợi ý sản phẩm Về mặt thực tiễn nhóm đạt được: - Nâng cao khả tìm hiểu nghiên cứu cơng nghệ, đặc biệt thuật tốn máy học 121 - Hiểu quy trình phát triển ứng dụng hoàn chỉnh - Cải thiện kỹ lên kế hoạch điều phối công việc 9.2 Hạn chế: 9.2.1 Về việc tổ chức quản lí nhóm: - Có số cơng việc khơng hồn thành gì đặt Phải thay đổi linh hoạt sát để theo kịp tiến độ 9.2.2 Về sản phẩm phần mềm: - Chưa đáp ứng đầy đủ chức nghiệp vụ chuyên sâu - Chưa đánh giá độ xác thuật tốn gợi ý sản phẩm - Một số tính chưa hồn thiện 100% 9.3 Hướng phát triển: Đề tài cịn mở rộng phát triển thêm nhiều tính hữu ích cho người dùng như: - Tích hợp chatBot hỗ trợ tư vấn kích cỡ quần áo cho khách hàng - Phát triển ứng dụng chạy tảng Mobile - Tích hợp công nghệ AR cho phép người dùng mặc thử quần áo - Hoàn thiện chức nghiệp vụ chuyên sâu thiếu - Cải thiện giao diện người dùng trực quan - Hỗ trợ thao tác viết post cho nhân viên quản lý - Hỗ trợ tính đánh giá sản phẩm, viết phản hồi - Hỗ trợ đa ngôn ngữ 122 TÀI LIỆU THAM KHẢO [1] SQL ADVICE COMMUNITY, “PostgreSQL Là Gì? So Sánh MySQL Và PostgreSQL Trong Lập Trình”, https://sqladvice.com/postgresql-la-gi-so-sanh-mysql-va-postgresql/ (accessed June 28, 2023) [2] Bùi Thị Huyền, “Tìm hiểu TypeScript kiến thức bản”, https://viblo.asia/p/tim-hieu-typescript-va-kien-thuc-co-ban-PmeRQpnyGoB (accessed June 28, 2023) [3] Fpt Aptech Computer Education, “NodeJS gì? Những kiến thức liên quan tới NodeJS”, https://aptech.fpt.edu.vn/nodejs-la-gi.html (accessed June 28, 2023) [4] Nguyễn Hưng, “NestJS gì? Hướng dẫn NestJS dành cho người bắt đầu”, https://vietnix.vn/nestjs-la-gi/ (accessed June 28, 2023) [5] Phạm Minh Khoa, “React gì? Lộ trình trở thành lập trình viên React”, https://topdev.vn/blog/react-la-gi-lo-trinh/ (accessed June 28, 2023) [5] FPT Cloud, “Client Server gì? Tìm hiểu mơ hình Client Server từ A – Z”, https://fptcloud.com/client-server/ (accessed June 28, 2023) 123