Thiết kế website thương mại điện tử ứng dụng recommender system

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CNKT MÁY TÍNH THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ ỨNG DỤNG RECOMMENDER SYSTEM GVHD: ThS LÊ MINH SVTH: TRẦN HỒNG PHƯƠNG SKL009668 Tp.Hồ Chí Minh, tháng 12/2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP NGÀNH CƠNG NGHỆ KỸ THUẬT MÁY TÍNH THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ ỨNG DỤNG RECOMMENDER SYSTEM SVTH: TRẦN HỒNG PHƯƠNG MSSV: 18119108 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ KỸ THUẬT MÁY TÍNH THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ ỨNG DỤNG RECOMMENDER SYSTEM SVTH: TRẦN HỒNG PHƯƠNG MSSV: 18119108 GVHD: ThS.LÊ MINH TP HỒ CHÍ MINH – 12/2022 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -TP Hồ Chí Minh, ngày 20 tháng 12 năm 2022 NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Trần Hồng Phương MSSV: 18119108 Ngành: Công nghệ kỹ thuật máy tính Lớp: 18119CLA Giảng viên hướng dẫn: ThS Lê Minh Ngày nhâ ̣n đề tài: 20/10/2022 Ngày nộp đề tài: 20/10/2022 Tên đề tài: Thiết kế Website thương mại điện tử ứng dụng recommender system Các số liệu, tài liệu ban đầu: Nội dung thực hiện: - Các công nghệ sử dụng: Front-End: HTML, CSS, Bootstrap Back-End: Django Database: SQLite - Nghiên cứu, thiết kế website dựa công nghệ với chức quản lý sản phẩm, danh mục, đơn hàng, ( cho người quản trị ), xem sản phẩm, xem đơn hàng, thêm vào giỏ hàng, đăng ký, đăng nhập tài khoản, ( cho người mua hàng ) - Nghiên cứu xây dựng mơ hình recommender system để ứng dụng vào website Sản phẩm: website thương mại điện tử kinh doanh quần áo có ứng dụng recommender system TRƯỞNG NGÀ NH GIẢNG VIÊN HƯỚNG DẪN CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc TP Hồ Chí Minh, ngày 25 tháng 12 năm 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên: Trần Hồng Phương MSSV: 18119108 Ngành: Cơng nghệ kỹ thuật máy tính Tên đề tài: Thiết kế Website thương mại điện tử ứng dụng recommender system Họ tên Giáo viên hướng dẫn: ThS Lê Minh NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Thiết kế website bán hàng trực tuyến Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đề nghị bảo vệ Đánh giá loại: Điểm: ……… (Bằng chữ: ) GIẢNG VIÊN HƯỚNG DẪN Lê Minh CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -TP Hồ Chí Minh, ngày 20 tháng 12 năm 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên: Trần Hồng Phương MSSV: 18119108 Ngành: Công nghệ kỹ thuật máy tính Tên đề tài: Thiết kế Website thương mại điện tử ứng dụng recommender system Họ tên Giáo viên phản biện: 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: ………… (Bằng chữ: ) GIẢNG VIÊN PHẢN BIỆN LỜI CẢM ƠN Buổi hôm thuở vào trường, sinh viên thực tân sinh viên vầy mà thực đề tài tốt nghiệp ngày hơm Đó nhờ cơng lao bảo, giảng dạy tận tình thầy cô mái trường Đại học Sư Phạm kỹ Thuật thành phố Hồ Chí Minh Chính lẽ đó, sinh viên muốn gửi lời cảm ơn tới thầy cô quan tâm, chăm sóc sinh viên ngày cịn theo học mái trường mến yêu Đặc biệt thầy Th.S Lê Minh, người đồng hành sinh viên suốt chặn đường thực đề tài điều giúp đỡ bảo tận tình, chân quý Đồng thời sinh viên muốn gửi lời cảm ơn tới gia đình, bạn bè tập thể lớp 18119CLA, thành viên Khoa CLC giúp đỡ, động viên sinh viên lúc khó khăn để hồn thành đề tài cách tốt v LỜI CAM ĐOAN Sinh viên thực cam đoan đề tài “Thiết kế website thương mại điện tử ứng dụng recommender system” đề tài nghiên cứu sinh viên hướng dẫn thầy ThS.Lê Minh Kết công bố đề tài trung thực không chép từ đề tài khác Tp.HCM, ngày 20 tháng 12 năm 2022 SV thực đồ án (Ký ghi rõ họ tên) Trần Hồng Phương vi TÓM TẮT Trong báo cáo sinh viên phát triển website e commerce có chức việc ứng dụng thực tế, ứng dụng công nghệ học máy học sâu nhằm mục đích nghiên cứu, phát triển, đáp ứng cách đầy đủ nhu cầu khách hàng ngày tăng cao, là: Về phía user: Đăng ký tài khoản Đăng nhập Xem chi tiết sản phẩm Thêm sản phẩm vào giỏ hàng Mua hàng, thông báo đặt hàng Quản lý thông tin tài khoản Xem xét đơn hàng Nhận gợi ý sản phẩm Về phía admin: Quản lý tài khoản Quản lý sản phẩm Quản lý đơn hàng Quản lý đánh giá vii Mục lục DANH MỤC HÌNH X DANH MỤC BẢNG XII CHƯƠNG GIỚI THIỆU 1.1 GIỚI THIỆU 1.2 MỤC TIÊU ĐỀ TÀI 1.3 GIỚI HẠN ĐỀ TÀI 1.4 PHƯƠNG PHÁP NGHIÊN CỨU 1.5 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 1.6 BỐ CỤC QUYỂN BÁO CÁO CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 WEBSITE E COMMERCE 2.1.1 Giới thiệu 2.1.2 Giới thiệu Framework Django 2.2 RECOMMENDER SYSTEM 2.2.1 Giới thiệu 2.2.2 Image Similarity CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE 10 3.1 PHÂN TÍCH YÊU CẦU ĐỀ TÀI 10 3.2 LƯỢC ĐỒ CƠ SỞ DỮ LIỆU 13 3.3 ĐẶC TẢ CHI TIẾT USECASE 14 3.3.1 Chức đăng ký 14 3.3.2 Chức đăng nhập 14 3.3.3 Chức xem danh mục sản phẩm 15 3.3.4 Chức tìm kiếm sản phẩm 16 3.3.5 Chức xem chi tiết sản phẩm 16 viii Hình 4.2.2 Trang chủ Chứa vài thông tin website menu (1), trang giới thiệu, vài sản phẩm chứa ảnh, tên, giá, nút để vào trang thông tin tài khoản (1), nút để vào trang giỏ hàng (3) tìm kiếm(4) Nếu người mua đăng nhập tài khoản website, xuất chữu Đăng xuất menu (1) Cửa hàng Hình 4.2.3 Cửa hàng Từ trang chủ, người mua nhấn vào nút cửa hàng, có tìm kiếm (1) giúp tìm kiếm sản phẩm theo tên từ khóa Danh sách danh mục (2), ta nhấn vào danh mục lọc sản phẩm theo danh mục đó, chọn “Tất sản phẩm” để hiển thị toàn sản phẩm Trên phần hiển thị danh sách sản phẩm, có nút thêm vào giỏ hàng (3) để giúp người mua 35 thêm trực tiếp vào giỏ hàng Nhấn vào hình ảnh tên sản phẩm đưa người mua vô trang chi tiết sản phẩm Chi tiết sản phẩm Hình 4.2.4 Chi tiết sản phẩm Trang hiển thị chi tiết sản phẩm ảnh, tên, giá cả, mơ tả sản phẩm Ngồi ra, nút thêm vào giỏ hàng (1) cho phép ta thêm trực tiếp sản phẩm giỏ hàng Gợi ý sản phẩm tương tự Hình 4.2.5 Gợi ý sản phẩm tương tự 36 Bên chi tiết sản phẩm người mua truy cập vào, sản phẩm có màu sắc, kiểu dáng gần giống với sản phẩm người mua xem Nút thêm vào giỏ hàng (1) thêm sản phẩm trực tiếp vơ giỏ hàng, nhấn vào ảnh tên sản phẩm để tiến vào xem sản phẩm Đánh giá phản hồi Hình 4.2.6 Đánh giá phản hồi Bên mục gợi ý sản phẩm tương đương, mục đánh giá sản phẩm, người mua đánh giá sản phẩm (1) theo thang điểm cách chọn số từ đến 6, nhập phản hồi vào ô chatbox (2) bấm xác nhận (3) để gửi phản hồi Phản hồi người mua lưu vào hệ thống xuất bên (4) Giỏ hàng Hình 4.2.7 Giỏ hàng Khi người mua nhấn vào nút thêm vào giỏ hàng trang chi tiết sản phẩm, nút thêm vào giỏ hàng nhanh sản phẩm, nhấn vào nút giỏ hàng trang chủ, giỏ hàng cập nhật tên, ảnh, giá sản phẩm (1) người mau chọn mục 37 (2) giao diện, người mua chọn thêm bớt sản phẩm đơn vị, xóa sản phẩm cách nhấn nút trừ để trở Nếu người mua muốn toán, nhấn nút toán (3), bên canh tổng tiền giỏ hàng Hình 4.2.8 Thanh tốn Ở trang giỏ hàng, người mua toán, nhấn vào nút toán, đưa người mua đến trang tóan Người mua điền vào trường thơng tin (1) cho việc tốn Website lưu lại thông tin Để xác nhận đặt hàng thành công, người mua nhấn vào nút xác nhận đặt hàng (2) để kết thúc việc đặt hàng Thanh tốn thành cơng Hình 4.2.9 Thanh tốn thành công Sau xác nhận, Website đưa giao diện thơng báo đặt hàng thành cơng xóa giỏ hàng người mua Đồng thời, lưu thơng tin đơn hàng người mua 38 Thơng tin khách hàng Hình 4.2.10 Thơng tin khách hàng Trang xuất thơng tin người mua đăng ký trước (1) họ tên, email, tên tài khoản Nhấn vào nút thay đổi thơng tin(2) để thay đổi Ngồi ra, trang hiển thị lịch sử đơn hàng (3) mà người mua đặt hàng bao gồm thông tin sản phẩm, số lượng, ngày đặt, giá Đăng ký Hình 4.2.11 Đăng ký 39 Từ trang đăng nhập, nhấn vào nút đăng ký, cho người mua truy cập trang đăng ký, người mua điền thông tin cần thiết vào trường nhấn nút đăng ký để đăng ký, hệ thống lưu thông tin người mua Chỉnh sửa thơng tin cá nhân Hình 4.2.12 Chỉnh sửa thơng tin cá nhân Người mua thay đổi thông tin tài khoản mà người mua đăng ký trước 4.2.2 Kiểm thử chức cho người mua hàng Bảng 4.2.1 Bảng kiểm thử chức người mua hàng STT Testcase Kết mong đợi Quy trình Kết Kiểm tra chức Nhấn vào icon personal Website đăng ký chuyển Thành người mua đến trang công menu 40 Người mua chủ chuyển tới trang đăng Trong phần hệ thống nhập có phân quyền admin Nhấn vào đăng ký tài có liệu người dùng khoản Nhập đăng ký hết vào trường thông tin Nhấn nút đăng ký Kiểm tra chức Nhấn vào icon personal Website đăng menu nhập chuyển Thành người mua đến trang công Người mua chủ chuyển tới trang đăng nhập Nhập hết vào trường thông tin Nhấn nút đăng nhập Kiểm tra chức Người mua tiến hành Người mua thay đổi, Thành cập nhật đăng nhập vào website thông tin cập nhật thông tin công Nhấn vào icon personal thành công trên meu, menu giao diện trang web thông tin hệ thống phân người mua quyền admin Nhấn vào nút thay đổi thông tin Người mua điền trường thông tin nhấn nút xác nhận Kiểm tra chức Nhấn vào trang cửa Xuất tất Thành xem danh hàng, người mua danh mục sản phẩm công mục sản phẩm hiển thị tất website 41 danh mục bên phải danh sách sản phẩm Kiểm tra chức Nhấn vào tìm kiếm Có thể tìm thấy Thành tìm kiếm trang cưa hàng sản phẩm phù hợp với công sản phẩm accs từ khóa từ khóa người Nhấn enter button dùng có hình search bên Nếu khơng, khơng phải tìm kiếm xuất sản phẩm Kiểm tra chức Nhấn vào hình ảnh Website hiển thị toàn Thành xem chi tiêu đề sản phẩm thông tin sản phẩm công tiết sản phẩm trang chủ cho người dùng trang cửa hàng nhìn thấy Kiểm tra chức Nhấn vào hình ảnh Website hiển thị cho Thành tiêu đề sản phẩm người dùng thấy cơng sản phẩm có trang chủ sản phẩm có hình hình dạng trang cửa hàng dạng tương tự tương tự sản Người mua đưa phẩm tới trang chi tiết sản phẩm Phía trang chi tiết sản phẩm xuất sản phẩm có hình dạng tương tự với sản phẩm mà người mua dang xem Kiểm tra chức Nhấn vào hình ảnh Website hiển thị Thành đánh giá tiêu đề sản phẩm điểm đánh giá, bình cơng sản phẩm trang chủ luận, thời gian bình 42 trang cửa hàng luận người dùng Người mua đưa bên phần nhập tới trang chi tiết sản đánh giá Ở phần hệ phẩm thống admin xuất Phía trang chi tiết thêm tên người sản phẩm xuất dùng đánh giá sản mục đánh giá sản phẩm, phẩm người dùng chọn mức điểm đánh giá, nhập bình luận nhấn nút xác nhận Kiểm tra chức Người mua nhấn vào Sản phẩm Thành thêm sản nút giỏ hàng nhanh thêm vào giỏ hàng công phẩm vào giỏ sản phẩm, bên phải tiêu hàng đề sản phẩm, người mua nhấn trực tiếp vào nút thêm vào giỏ hàng trang sản phẩm 10 11 Kiểm tra chức Người mua nhấn vào Website hiển thị Thành xem giỏ icon cart giỏ hàng danh sách sản công hàng phẩm thêm vào Kiểm tra chức Từ mục giỏ hàng Số lượng sản phẩm Thành thay đổi sản phẩm, người mua tăng giảm công số lượng sản nhấn vào nút “+” đơn vị phẩm 12 “-“ sản phẩm Kiểm tra chức Từ mục giỏ hàng Sản phẩm biến Thành xóa sản sản phẩm, người mua khỏi gió hàng phẩm khỏi giỏ nhấn nút “-” hàng số lượng sản phẩm 43 công 13 Kiếm tra chức Người mua vào trang Xuất sản Thành lọc sản cửa hàng, từ phần danh phẩm với tên công phẩm dnah mục theo sách danh mục, danh mục chon danh mục 14 Kiếm tra chức Từ mục giỏ hàng, người Xuất trang hiển Thành toán mua nhấn nút thị tốn thành cơng tốn, cơng Người dùng điền đầy đủ trường xuất Người dùng nhấn nút toán 44 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 KẾT LUẬN Với đề tài “THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ ỨNG DỤNG RECOMMENDER SYSTEM” sinh viên thực thiết kế thành công website bán hàng với tính như: Về phía người quản trị: - Quản lý đơn hàng, - Quản lý sản phẩm , - Quản lý tài khoản, - Quản lý danh mục, - Quan lý thông tin sản phẩm đơn hàng, - Quản lý việc đánh giá hay phản hồi người mua hàng Về phía người mua hàng: - Đăng ký, đăng nhập tài khoản website, - Xem chi tiết sản phẩm, - Được gợi ý sản phẩm tương tự với sản phẩm xem, - Xem xét, lựa chọn sản phẩm có danh sách sản phấm, - Được đánh giá, phản hồi, bình luận sản phẩm, - Xem xét, lựa chọn sản phẩm có giỏ hàng, - Xác nhận toán giao hàng Đồng thời, ứng dụng recommender system, website có tính ứng dụng cao việc giải nhu cầu thực tiễn đưa nhiều gợi ý, lựa chọn mang tính hỗ trợ cho người mua hàng 5.2 HƯỚNG PHÁT TRIỂN Hiện nhiều công nghệ phát triển cách thần tốc, sinh viên thực mong muốn cải tiến phát triển đề tài theo nhiều hướng như: 45 - Cải thiện giao diện website - Chỉnh sửa thêm nhiểu tính cho lọc - Thêm đa dạng loại tài khoản đăng nhập Google, Facebook - Hỗ trợ nhiều loại ngơn ngữ, tiền tệ - Có thể phát triển lên mobile - Tối ưu hóa khả xử lý liệu để tối ưu website tốt - Cập nhật thêm nhiều liệu cho việc lựa chọn - Thêm nhiều tiện ích hỗ trợ Qua dễ dàng đưa đề tài vào ứng dụng thực tiễn 46 TÀI LIỆU THAM KHẢO [1] W Ballard, “Hands-On Deep Learning for Images with TensorFlow: Build intelligent computer vision applications using TensorFlow and Keras,” 2018 [2] A Melé, Django By Example - Fourth Edition, 2022 [3] A S H R A M M Sanjeevan Sivapalan, “Recommender Systems in ECommerce,” 2014 [4] U N Tanmayee Salunke, “Recommender Systems in E-commerce,” 2022 [5] G T E P O C C C F Matthijs Douze, “The 2021 Image Similarity Dataset and Challenge,” 2021 [6] X Z S R J S Kaiming He, “Deep Residual Learning for Image Recognition,” 2015 [7] V C Srikar Appalaraju, “Image similarity using Deep CNN and Curriculum Learning,” 2018 47 48 S K L 0