Đồ án xây dựng website bán đồng hồ tích hợp hệ thống gợi ý sản phẩm

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN XÂY DỰNG WEBSITE BÁN ĐỒNG HỒ TÍCH HỢP HỆ THỐNG GỢI Ý SẢN PHẨM NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS Nguyễn Thị Thanh Trúc SINH VIÊN THỰC HIỆN Trần Trọng Hoàng – 20520521 Thành phố Hồ Chí Minh, tháng năm 2023 LỜI CẢM ƠN Đồ án với đề tài “Xây dựng website bán đồng hồ tích hợp hệ thống gợi ý sản phẩm” minh chứng cho trình cố gắng khơng ngừng việc tìm tịi, học hỏi suốt năm học tập trường Đại học Công nghệ Thông tin Thể khả thân việc áp dụng kiến thức chuyên môn vào giải toán thực tế Em xin gửi lời cảm ơn sâu sắc tới ThS.Nguyễn Thị Thanh Trúc, người trực tiếp hướng dẫn, bảo, giúp đỡ em lúc khó khăn, đưa lời khuyên bổ ích để đồ án hoàn thành tiến độ đáp ứng yêu cầu đề ban đầu Thành phố Hồ Chí Minh, tháng 06 năm 2023 Sinh viên Trần Trọng Hồng ĐẠI HỌC QUỐC GIA CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TP HỒ CHÍ MINH Độc Lập - Tự Do - Hạnh Phúc TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒNG HỒ TÍCH HỢP HỆ THỐNG GỢI Ý SẢN PHẨM Cán hướng dẫn: ThS Nguyễn Thị Thanh Trúc Thời gian thực hiện: Từ ngày 1/03/2023 đến ngày 29/06/2023 Sinh viên thực hiện: Trần Trọng Hoàng – 20520521 Nội dung đề tài: Mục tiêu: - Xây đựng website bán đồng hồ với chức hệ thống gợi ý sản phẩm theo nội dung - Khách hàng dễ dàng truy cập trang web tìm kiếm sản phẩm, đặt hàng sản phẩm, gợi ý các sản phẩm tương tự với sản phẩm xem - Người quản trị dễ dàng quản lý sản phẩm, đơn hàng - Tìm hiểu ứng dụng công nghệ mới, nâng cao kỹ phát triển phần mềm Phạm vi: - Cho phép đăng nhập email google tiến hành đặt mua sản phẩm máy chủ local - Hệ thống gợi ý tìm kiếm giúp hỗ trợ người mua dễ dàng - Quản lý mặt hàng bán Đối tượng sử dụng: - Người dùng Intenet Phương pháp thực hiện: - Tìm hiểu phân tích trang website bán đồng hồ có - Tìm hiểu phân tích hệ thống gợi ý sản phẩm - Xây dựng hệ thốngở mức MVP (Minimum Viable Product) để đo lường tính hiệu Kết mong đợi: - Hiểu rõ công nghệ: o Front – end: HTML-CSS, Template Engine o Back – end: NodeJS, ExpressJS, Cloudinary, Google API, Hệ thống gợi ý sản phẩm - Hoàn thành sản phẩm với chức phân tích - Giao diện thân thiện tạo giá trị mục tiêu hướng tới Kế hoạch thực hiện: Đồ án thực 15 tuần, thời gian mô tả nội dung công việc thể bảng bên dưới: Thời gian thực Công việc Giai đoạn 1: Tìm hiểu, nghiên cứu Iteration (01-21/03/2023) • Nghiên cứu trạng thị trường Nghiên cứu, đánh giá, phân • Nghiên cứu, đánh giá cơng nghệ phát triển web – BE tích • Phân tích sản phẩm có • Nghiên cứu, đánh giá cơng nghệ phát triển web – FE Iteration (22-15/04/2023) Tìm hiểu thực code với • Chuẩn bị kiến thức cơng nghệ JavaScript, NodeJS, ExpressJS Tìm hiểu thực code với • Template Engine Handlebars Giai đoạn 2: Triển khai Iteration (16-1/05/2023) • Thiết kế database Chuẩn bị source code thiết • Cấu hình tạo cấu trúc code cho BE kế database • Thiết kế giao diện phù hợp • Cầu hình tạo cấu trúc code cho FE Iteration (2-20/05/2023) Hoàn thành chức CRUD dành cho: Chức quản lý người Admin dùng, sản phẩm, đơn hàng, tag, categories,… Iteration (20-04/06/2023) Hoàn thành chức dành cho khách Chức tìm kiếm, đặt mua, hàng xem sản phẩm, thêm vào giỏ Khách hàng xem sản phẩm, thêm sản hàng, đăng nhập, … phẩm vào giỏ hàng, tiến hành đặt mua, tìm kiếm sản phẩm theo tên, tags, category Iteration (5-22/06/2023) Tìm hiểu, nghiên cứu hệ thống gợi ý sản phẩm, Tìm hiểu xây dựng hệ content-base recommender thống gợi ý sản phẩm Sau đánh giá nghiên cứu áp dụng thư viện vào đồ án để áp dụng Iteration (22-25/06/2023) Hoàn thiện chức thống kê: Thống kê thu chi, lợi luận, … Giai đoạn 3: Hồn thiện, trình bày Iteration (22-29/06/2023) Cải thiện giao diện, sẵn sàng trình bày Cải thiện giao diện MỤC LỤC CHƯƠNG GIỚI THIỆU CHUNG .1 1.1 Giới thiệu đề tài 1.2 Lý chọn đề tài .1 1.3 Mục tiêu đề tài 1.4 Đối tượng nghiên cứu 1.4.1 Các công nghệ 1.4.2 Đối tượng phạm vi đề tài hướng đến .2 1.5 Phạm vi .2 1.6 Phương pháp thực .2 1.7 Ý nghĩa thực tiễn .2 1.8 Kết dự kiến CHƯƠNG CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ SỬ DỤNG 2.1 Hệ thống gợi ý dựa theo nội dung 2.1.1 Giới thiệu: 2.1.2 Cách thức hoạt động 2.1.3 Giới thiệu thư viện Content Based Recommender .10 2.2 Mơ hình ứng dụng web MVC .14 2.2.1 Giới thiệu mơ hình ứng dụng web MVC .14 2.2.2 Các đặc trưng mơ hình MVC 14 2.2.3 Lý chọn mơ hình MVC cho đề tài .15 2.3 Server-Side Rendering 15 2.3.1 Giới thiệu Server-Side Rendering .15 2.3.2 Các đặc trưng Server-Side Rendering 16 2.3.3 Lý chọn Server-Side Rendering cho đề tài .16 2.4 NodeJS 17 2.4.1 Giới thiệu NodeJS 17 2.4.2 Các đặc trưng NodeJS 17 2.4.3 Lý chọn NodeJS cho đề tài 19 2.5 ExpressJS 20 2.5.1 Giới thiệu 20 2.5.2 Các đặc trưng ExpressJS 21 2.5.3 Lý chọn ExpressJS cho đề tài 21 2.6 MongoDB 22 2.6.1 Giới thiệu MongoDB 22 2.6.2 Các đặc trưng MongoDB 22 2.6.3 Lý chọn MongoDB cho đề tài 23 2.7 Cloudinary .23 2.7.1 Giới thiệu Cloudinary 24 2.7.2 Các đặc trưng cloudinary 24 2.7.3 Lý lựa cọn Cloudianry .24 2.8 Bootstrap .24 2.8.1 Giới thiệu Bootstrap .24 2.8.2 Lý lựa chọn Bootstrap .25 CHƯƠNG 3.1 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 26 Phân tích yêu cầu hệ thống .26 3.1.1 Xác định yêu cầu 26 3.1.2 Sơ đồ phân rã chức 26 3.1.3 Phân tích yêu cầu phi chức 27 3.1.4 Mơ hình hóa u cầu 27 3.1.5 Đặc tả use case 28 3.2 Thiết kế hệ thống .61 3.2.1 Thiết kế xử lý 61 3.2.2 Thiết kế sở liệu .63 3.2.3 Thiết kế kiến trúc hệ thống .69 3.2.4 Thiết kế giao diện 72 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 107 4.1 Kết đạt 107 4.2 Thuận lợi khó khăn 108 4.2.1 Thuận lợi 108 4.2.2 Khó khăn 108 4.3 Hướng phát triển 108 TÀI LIỆU THAM KHẢO 109 3.2.4.1.21 Giao diện thêm sản phẩm 95 Mô tả đối tượng hình STT Tên thành phần Loại Mơ tả thành phần Input name input Nhập tên sản phẩm Select brand select Chọn thương hiệu Code input Nhập code sản phẩm Dial Text area Nhập thông tin mặt đồng hồ Case Text area Nhập thông tin vỏ đồng hồ Strap Text area Nhập thông tin quai đồng hồ Description Text area Nhập mô tả thêm đồng hồ Price Input Nhập giá bán đồng hồ 10 Media Input file Chọn ảnh đồng hồ 11 Thumbnail Input file Chọn ảnh thumbnail đồng hồ 12 Status Chọn trạng thái sản Radio phẩm 13 Category Select Chọn danh mục cho đồng hồ 14 Tags Select Gắn tag cho đồng hồ 15 Button save Button Sau nhập đầy đủ thơng tin click để lưu sản phẩm vào hệ thống 96 3.2.4.1.22 Giao diện chỉnh sửa sản phẩm 97 Mơ tả đối tượng hình STT Tên thành phần Loại Mô tả thành phần Input name input Nhập tên sản phẩm Select brand select Chọn thương hiệu Code input Nhập code sản phẩm Dial Text area Nhập thông tin mặt đồng hồ Case Text area Nhập thông tin vỏ đồng hồ Strap Text area Nhập thông tin quai đồng hồ Description Text area Nhập mô tả thêm đồng hồ Price Input Nhập giá bán đồng hồ 10 Media Input file Chọn ảnh đồng hồ 11 Thumbnail Input file Chọn ảnh thumbnail đồng hồ 12 Status Chọn trạng thái sản Radio phẩm 13 Category Select Chọn danh mục cho đồng hồ 14 Tags Select Gắn tag cho đồng hồ 15 Button save Button Lưu thông tin chỉnh sửa sản phẩm 98 3.2.4.1.23 Popup xóa sản phẩm Mơ tả đối tượng hình STT Tên thành phần Loại Mô tả thành phần Button close Button Hủy xóa sản phẩm Yes Anchor link Đồng ý xóa sản phẩm khỏi cửa hàng Button edit Anchor link Chuyển đến trang chỉnh sửa sản phẩm 99 3.2.4.1.24 Giao diện xem chi tiết sản phẩm 100 Mô tả đối tượng hình STT Tên thành phần Loại Mô tả thành phần Input name input Hiển thị tên sản phẩm Select brand select Hiển thị thương hiệu Code input Hiển thị code sản phẩm Dial Text area Hiển thị thông tin mặt đồng hồ Case Text area Hiển thị thông tin vỏ đồng hồ Strap Text area Hiển thị thông tin quai đồng hồ Description Text area Hiển thị mô tả thêm đồng hồ Price Input Hiển thị giá bán đồng hồ 10 Media Input file Hiển thị ảnh đồng hồ 11 Thumbnail Input file Hiển thị ảnh thumbnail đồng hồ 12 Status Radio Hiển thị trạng thái sản phẩm 13 Category Select Hiển thị danh mục cho đồng hồ 14 Tags 3.2.4.1.25 Select Hiển thị tag đồng hồ Popup import sản phẩm 101 Mô tả đối tượng hình STT Tên thành phần Name product Loại Mô tả thành phần Hiển thị tên sản phẩm Input nhập hàng Quantity Input Nhập số lượng hàng Unit price Input Đơn giá sản phẩm Cancel Button Hủy nhập hàng Import Anchor link Tạo đơn nhập hàng 102 3.2.4.1.26 Giao diện quản lý đơn nhập hàng Mô tả đối tượng hình STT Tên thành phần Loại Mơ tả thành phần Icon ba chấm button Pop up lựa chọn Button edit Anchor link Chuyển đến trang chỉnh sửa danh mục Button delete Xóa danh mục Xóa danh mục Select entries Select Chọn số dòng liệu muốn xem Input search Input Nhập liệu muốn tìm kiếm Button next Button Chuyển đến trang liệu Button number page Button Chuyển đến trang liệu tương ứng với số trang 103 3.2.4.1.27 Giao diện quản lý đơn bán hàng Mô tả đối tượng hình STT Tên thành phần Loại Mơ tả thành phần Icon ba chấm button Pop up lựa chọn Button view detail Anchor link Chuyển đến trang xem chi tiết dơn Status Chỉnh sửa trạng thái đơn Select hàng Select entries Chọn số dòng liệu muốn Select xem Input search Input Nhập liệu muốn tìm kiếm Button next Button Chuyển đến trang liệu Button number page Button Chuyển đến trang liệu tương ứng với số trang 104 3.2.4.1.28 Giao diện xem chi tiết đơn bán hàng Mơ tả đối tượng hình STT Tên thành phần Loại Mô tả thành phần status Text Hiển thị trạng thái đơn hàng Purchase information Text Hiển thị thông tin sản phẩm đặt mua Customer Hiển thị thông tin khách Text information hàng Delivery information Text Hiển thị địa chị giao hàng Button number page Button Chuyển đến trang liệu tương ứng với số trang 105 3.2.4.1.29 Giao diện quản lý tài khoản khách hàng Mô tả đối tượng hình STT Tên thành phần Select entries Loại Mơ tả thành phần Chọn số dịng liệu muốn Select xem Input search Nhập liệu muốn tìm Input kiếm Button next Button Chuyển đến trang liệu Button number page Button Chuyển đến trang liệu tương ứng với số trang 106 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết đạt Link source code: https://github.com/LightCode5794/LuxeWatch.git Thông qua việc nghiên cứu tìm hiểu lý thuyết cơng nghệ, em phát triển website bán đồng hồ với hệ thống gợi ý hoàn chỉnh Về mặt kỹ thuật, nhóm em đạt kết sau: - Tìm hiểu, áp dụng framework ExpressJS database mã nguồn mở MongoDB việc thao tác CRUD với liệu, upload file - Tìm hiểu Handlebars thư viện JavaScript giúp bạn binding data vào template để hiển thị website - Tìm hiểu dịch vụ lưu trữ hình ảnh cloudinary - Tìm hiểu nghiên cứu kiến thức liên quan đến mơ hình hệ thống gợi ý sau áp dụng chúng - Tìm hiểu biết cách để lập trình server, cách tương tác client với server Về mặt thực tiễn em đạt được: - Rèn luyện kĩ nhận dạng toán, nghiên cứu khảo sát thực tế, phân tích chức thực tài liệu mô tả - Nâng cao khả tìm hiểu nghiên cứu cơng nghệ, đặc biệt lý thuyết công nghệ than - Kinh nghiệm áp dụng thực tế quy trình phát triển phần mềm gồm Waterfall Scrum - Phát triển kỹ mềm cá nhân lên kế hoạch, trình bày văn bản, dự trù thời gian, kỹ làm việc nhóm khả tranh luận, thuyết phục hỗ trợ lẫn 107 4.2 Thuận lợi khó khăn 4.2.1 Thuận lợi - Có kiến thức lập trình web UI server - Giảng viên hướng dẫn có tâm huyết em tâm thực từ ý tưởng thành phẩm có khả áp dụng vào thực tế Giảng viên có nhiều góc nhìn thực tế kinh nghiệm dày dặn dẫn dắt em hướng từ đầu - Được giảng viên hướng dẫn quan tâm, cho lời khuyên để cải thiện tiến độ lúc bị “trơi” 4.2.2 Khó khăn - Đồ án làm cá nhân lần đầu thực nên khối lượng công việc phải xử lý lớn khó khăn - Đặt mục tiêu nghiên cứu hệ thống gợi ý nên phải research nhiều - Dự án thực giai đoạn có nhiều mơn học khác phải hoàn thành đồ án nên việc phân chia thời gian điều khó khăn 4.3 Hướng phát triển - Hoàn thiện bổ sung chức cịn thiếu - Tích hợp hệ thống tốn điện tử - Tối ưu hoá giao diện, tốc độ tính bảo mật website - Thu thập phân tích liệu khách hàng từ để hiểu rõ nhu cầu, thói quen hành vi mua sắm họ, từ xây dựng mơ hình gợi ý sản phẩm cho riêng cá nhân - Phát triển tính đánh giá bình luận cho sản phẩm - Deploy cho người dùng thử 108 TÀI LIỆU THAM KHẢO Documentation | Node.js (nodejs.org) Express - Node.js web application framework (expressjs.com) Introduction | Handlebars (handlebarsjs.com) Sass: Syntactically Awesome Style Sheets (sass-lang.com) MongoDB Documentation Mongoose ODM v7.3.1 (mongoosejs.com) Get started with Bootstrap · Bootstrap v5.3 (getbootstrap.com) Machine Learning (machinelearningcoban.com) Machine Learning in Recommendation Systems: an Overview (itransition.com) 10 What is a Content-based Recommendation System in Machine Learning?| Analytics Steps 11 Beginners Guide to learn about Content Based Recommender Engine (analyticsvidhya.com) 109