Nghiên cứu và xây dựng website thương mại điện tử về sản phẩm chăm sóc da tích hợp hệ khuyến nghị khách hàng trên nền tảng NextJs.

OVA BO THONG TIN VA TRUYEN THONG TEN HỌC VIEN CONG NGHỆ BUU CHÍNH VIEN THONG SINH ĐÔ AN TOT NGHIỆP DAI HỌC VIEN: TRUO NG THI XUA TUOI OP: Đè tai: “NGHIÊN CUU VA XÂY DUNG WEBSITE THƯƠNG D19P MAI ĐIỆN TU VE SAN PHAM CHAM SOC DA TÍCH HỢP HỆ TOl KHUYEN NGHỊ KHACH HANG TREN NEN TANG NEXTJS” Người hướng dan : TS VU HỮU TIEN Sinh viên thực hiện: | TRƯƠNG THỊ XUAN TƯƠI Lớp: DI9PTDPT Hệ: ĐẠI HỌC CHÍNH QUY HÀ NỘI - 2023 BO THONG TIN VÀ TRUYEN THONG HỌC VIEN CONG NGHỆ BUU CHÍNH VIÊN THONG ¬ S yS t ĐÔ AN TOT NGHIỆP ĐẠI HỌC Đà tai: “NGHIÊN CỨU VÀ XÂY DỰNG WEBSITE THUONG MẠI ĐIỆN TỬ VE SAN PHAM CHAM SOC DA TÍCH HỢP HỆ KHUYEN NGHỊ KHÁCH HANG TREN NEN TANG NEXTJS” Người hướng dan: TS VŨ HỮU TIEN Sinh viên thực hiện: TRƯƠNG THỊ XUÂN TƯƠI Lớp: DI9PTDPT Hệ: ĐẠI HỌC CHÍNH QUY HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIÊN THÔNG CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA ĐA PHƯƠNG TIEN Độc lập — Tự do — Hạnh phúc ĐỎ ÁN TÓT NGHIỆP ĐẠI HỌC Họ và tên sinh viên: Trương Thị Xuân Tươi Lớp: DI9PTDPT Khoá: 2019-2023 Ngành đào tạo: Công Nghệ Đa Phương Tiện Hệ đào tạo: Đại học chính quy 1 Tên dé án/khóa luận tốt nghiệp: Nghiên cứu và xây dựng website thương mại điện tử về sản phâm chăm sóc da tích hợp hệ khuyên nghị khách hàng trên nên tảng NextJs 2 Lý do chọn đề tài: Làm đẹp và chăm sóc da là một phần quan trọng trong cuộc sống của nhiều phụ nữ và cả nam giới Đó không chỉ là việc trang điểm và tạo ra vẻ đẹp tạm thời, mà còn là về việc bảo vệ và duy trì sức sống cho làn da, giúp nó luôn khỏe mạnh và rạng ngời Tuy nhiên, việc lựa chọn sản pham chăm sóc da phù hợp có thể không dễ dàng, và điều này thường dẫn đến việc người tiêu dùng phải bỏ nhiều thời gian và công sức dé tìm kiếm thông tin về các sản phẩm và thương hiệu phù hợp với nhu cầu của họ Với mục tiêu mang đến các sản phâm chăm sóc da chất lượng từ các nhãn hàng quốc tế đáng tin cậy nhưng với một mức giá phải chăng, website thương mại điện tử Glow&Grace sẽ cung cap đa dạng các sản pham skincare với hy vọng rằng phái dep sẽ có cơ hội tiếp cận với các san phâm chất lượng mà họ xứng đáng có Một điểm đáng chúý khác là sự áp dụng của Recommendation Systems, hệ thống sẽ đưa ra những quảng cáo, gợi ý hướng đúng nhu cầu của từng khách hàng Điểm khác nhau căn bản giữa các cửa hàng thực và cửa hàng điện tử là khu trưng bày và kho Nguyên tắc dé thay dé đạt doanh thu cao là trưng ra các sản phẩm phổ biến nhất ở những nơi dễ nhìn thấy và những sản phẩm ít phổ biến hơn được cất trong kho, cách làm này có một hạn chế rõ rệt: những sản phâm được trưng ra mang tính phô biến chứ chưa chắc đã phù hợp với một khách hang cụ thé Một cửa hàng có thé có món hàng một khách hàng tìm kiếm nhưng có thể không bán được vì khách hàng không nhìn thấy sản phẩm đó trên giá; việc này dẫn đến việc khách hàng không tiếp cận được sản phẩm ngay cả khi chúng đã được trưng ra _ Ngoài ra, vì không gian có han, cửa hàng không thé trưng ra tất cả các sản phẩm mà mỗi loại chỉ đưa ra một số lượng nhỏ Ở đây, phan lớn doanh thu (80%) đến từ phan nhỏ số sản phẩm phổ biến nhất (20%) Néu sap xêp các san pham của cửa hàng theo doanh sỐ từ cao đến thấp, ta sẽ nhận thấy có thé phần nhỏ các sản phẩm tạo ra phan lớn doanh số; và một danh sách dài phía sau chỉ tạo ra một lượng nhỏ đóng góp Hiện tượng này còn được gọi là long tail phenomenon, tức phần đuôi dai của những sản phẩm ít phố biến Với cửa hàng online, nhược điểm trên hoan toàn có thé tránh được, vì không gian trưng bày của các cửa hàng online gần như là vô tận, mọi sản phẩm đều có thể được trưng ra Hơn nữa, việc sắp xếp online là linh hoạt, tiện lợi với chi phí chuyên đổi gần như bằng 0 khiến việc mang đúng sản phẩm tới khách hàng trở nên thuận tiện hơn Doanh thu, vì thế có thể được tăng lên Chính vì vậy, em đã lựa chọn đề tài “Nghiên cứu và xây dựng website thương mại điện tử về sản phẩm chăm sóc da tích hợp hệ khuyến nghị khách hàng trên nên tảng NextJs” Website có chức năng như xem các sản phâm, thêm sản phẩm vào giỏ hàng, xem thông tin chi tiết một cửa hàng, thu thập voucher, đặt hàng, hủy đơn, tìm kiếm sản phẩm tương tự, gợi ý các sản phâm dựa trên mức độ quan tâm của khách hàng, 3 Nội dung chính của đồ an: Đô án được chia làm các chương như sau: Chương 1: Tổng quan đề tài Chương này miêu tả bài toán, các chức năng của hệ thống và cơ sở lý thuyết của đồ án Chương 2: Phân tích và thiết kế hệ thống Chương này sẽ phân tích kiến trúc tổng quát của hệ thống, xây dựng biểu dé usecase, biểu đô lớp và biéu đồ tuần tự, thiết kế giao diện cho website _ Chương 3: Nghiên cứu va áp dụng Hệ thống gợi ý trong xây dựng website bán các sản phâm chăm sóc da Chương 4: Nghiên cứu va xây dựng ứng dụng Back-end cho website Glow&Grace Chương 5: Nghiên cứu và xây dựng ứng dung Front-end Chương 6: Đánh giá, nhận xét kết quả 4 Cơ sở dữ liệu ban dau: 5 Ngày giao dé tài: 20 6 Ngày nộp quyển: ⁄ /2 GIẢNG VIÊN HƯỚNG DẪN SINH VIÊN THỰC HIỆN (Ký, ghi rõ họ tên) (Ky, ghi rõ họ tên) TRƯỞNG KHOA (Ký, ghi rõ họ tên) Đồ án tốt nghiệp NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN NHAN XÉT CUA GIANG VIÊN HƯỚNG DAN Điêm: (Bằng chữ: ) Hà Nội, ngày thang năm 2023 Giảng viên hướng dẫn Trương Thị Xuân Tươi - DI9PTDPT Đồ án tốt nghiệp LỜI CẢM ƠN LỜI CẢM ƠN Lời đầu tiên, em xin được gửi lời cảm ơn chân thành đến Ban giám hiệu nhà trường cùng toàn thê thầy cô trong Học viện Công nghệ Bưu chính Viễn Thông đã luôn đành tâm huyết, sự quantâm dạy dỗ và đồng hành cùng em trong suốt 4 năm học tập tại trường Dưới sự dìu dắt của thầy cô mà em ngày một trưởng thành, tự tin với kiến thức mình có được, em không chỉ tiếp thu được kiến thức, kĩ năng liên quan đến chuyên môn mà còn có được nhiều kĩ năng sống, bài học từ kinh nghiệm của thầy cô truyền đạt Đặc biệt, em xin gửi lời cảm ơn đến thầy Vũ Hữu Tiến, thầy đã luôn đồng hành, trợ giúp, giúp đỡ em từng bước trên con đường nghiên cứu, hoàn thành Đồ án tốt nghiệp Sự kiên nhẫn và sự chia sẻ kiến thức sâu rộng của thay là nguồn động viên quý báu, đã góp phần quan trọng vào sự thành công của dự án này Nếu không có những sự chỉ bảo của thay thì thực sự khó khăn dé có thể hoàn thiện tốt nhất đồ án này Một lần nữa em xin chân thành cảm ơn thay rất nhiều Em cũng xin chân thành cảm ơn các Thầy/Cô trong Ban hội đồng đã dành thời gian lắng nghe, góp ý và nhận xét bản đồ án tốt nghiệp của em Sự chấp nhận và đánh giá từ phíaBan hội đồng không chỉ là một phần quan trọng của quá trình kiểm tra ma còn là nguồn động viên lớn lao đối với em Em cam kết sẽ tiếp tục phát triển và áp dụng những kiến thức, kinh nghiệm mà em đã học được từ quá trình này vào sự nghiệp và cuộc sống hàng ngày Trong thời gian hoàn thiện đồ án, em đã dồn hết tâm sức của mình để xây dựng và hoàn thiện bản đồ án này Tuy nhiên, do kiến thức còn hạn hẹp, kinh nghiệm thực tế chưa nhiều nên không thể tránh khỏi những thiếu sót, em rất mong nhận được sự thông cảm và góp ý từ quý Thay cô dé bản đồ án của em được hoàn thiện hơn Em xin chân thành cảm ơn ! Trương Thị Xuân Tươi - DI9PTDPT Đồ án tốt nghiệp MỤC LỤC MỤC LỤC NHAN XÉT CUA GIẢNG VIÊN HƯỚNG DAN LỜI CÁM ƠN MỤC LỤC DANH MỤC HÌNH ANH MỞ ĐẦU CHUONG 1: TONG QUAN DE TÀI 1.1 Khao sat 1.1.1 Amazon 1.1.1.1 Giới thiệu 1.1.1.2 Đặc điểm của trang web Amazon 1.1.1.3 Hệ thống Đề xuất Sản phẩm 1.1.2 Shopee 1.1.2.1 Giới thiệu 1.1.2.2 Hệ thống Đề xuất sản phẩm 1.2 Phát biểu bài toán 1.2.1 Mô tả chung 1.2.2 Lý do chọn đề tài 1.2.3 Mục tiêu nghiên cứu 1.2.4 Phương pháp nghiên cứu 1.3 Phương pháp tiếp cận giải quyết vấn đề 1.3.1 Mô hình tổng quát 1.3.2 Phương pháp xây dựng 1.4 Công nghệ nền tảng 1.4.1 Python 1.4.1.1 Python là gì 1.4.1.2 Lịch sử phát triển 1.4.1.3 Ứng dụng của Python 1.4.1.4 Python IDE 1.4.2 Reactjs 1.4.2.1 Giới thiệu chung về React 1.4.2.2 Đặc điểm, tính năng 1.4.2.3 Ưu điểm của React 1.4.2.4 Hạn chế của React 1.4.3 React-query 1.4.3.1 Tổng quan về react-query 1.4.3.2 Lý do sử dung React Query 1.4.3.3 Cách hoạt động của React Query 1.4.3.4 Ưu điểm 1.4.3.5 Nhược điểm 1.4.4 Zustand 1.4.4.1 Tổng quan về Zustand 1.4.4.2 Lý do sử dung Zustand 1.4.4.3 Các khái niệm cơ bản 1.4.5 NestJs Trương Thị Xuân Tươi - D19PTDPT Đồ án tốt nghiệp MỤC LỤC 1.4.5.1 Tổng quan về Nestjs 1.4.5.2 Cấu trúc của NestJS 1.4.5.3 Tính năng 1.4.5.4 Ưu điểm của Nestjs 1.4.6 Postgresql 1.4.6.1 Tìm hiểu chung về Postgresql 1.4.6.2 Tính năng của Postgresql 1.4.6.3 Sự khác biệt giữa MySql và Postgresql 1.4.7 Framer Motion CHUONG 2: PHAN TÍCH VA THIET KE HỆ THONG 2.1 Phân tích hệ thống 2.1.1 Xác định yêu cầu 2.1.2 Bléu đồ usecase và kịch ban 2.1.2.1 Biểu đồ usecase tổng quan của hệ thống 2.1.2.2 Xây dựng kịch bản 2.2 Thiết kế hướng đối tượng 2.2.1 Biểu đồ lớp thiết kế 2.2.2 Thiết kế giao diện của hệ thống 2.2.2.1 Giao diện trang Đăng nhập/ Đăng ký 2.2.3.2 Giao diện Giỏ hàng 2.2.3.3 Giao diện Trang chủ 2.2.2.7 Giao diện Thanh toán 2.2.2.8 Giao diện Cửa hàng 2.2.2.9 Giao diện Dashboard của Admin 2.2.2.10 Giao diện quan lý Sản phâm 2.2.2.11 Giao diện Thêm/ Sửa Sản phẩm CHƯƠNG 3: NGHIÊN CỨU VÀ ÁP DỤNG HỆ THÓNG GỢI Ý TRONG WEBSITE THƯƠNG MẠI ĐIỆN TỨ 3.1 Giới thiệu Hệ thống gợi ý 3.1.1 Tổng quan 3.1.2 Thành phần và chu trình của Hệ thống gợi ý 3.2 Các phương pháp của Hệ thống gợi ý 3.2.1 Hệ gợi ý không cá nhân hóa (non-personalized) 3.2.2 Hệ gợi ý cá nhân hóa (personalized) 3.2.2.1 Content-based systems 3.2.2.2 Collaborative filtering 3.3 Khai phá dữ liệu San phâm 3.3.1 Miêu tả dataset 3.3.2 Các độ đo tương tự 3.3.2.1 Cosine similarity 3.3.2.2 Euclidean Distance 3.3.2.3 Manhattan Distance 3.3.3 Don dep dtr liệu 3.3.3.1 Lam sạch dữ liệu 3.3.3.2 Chuyển đổi dit liệu ( Data transformation) 3.3.4 Đề xuất các sản phẩm có tính tương đồng Trương Thị Xuân Tươi - D19PTDPT Đồ án tốt nghiệp MỤC LỤC 3.3.4.1 Cosine similarity 3.3.4.2 Euclid similarity 3.4 Khai pha dữ liệu người dùng 3.4.1 Phương pháp tiếp cận 3.4.2 Miêu tả về dữ liệu người ding 3.4.3 Dọn dẹp dữ liệu 3.4.3.1 Làm sạch dữ liệu (data cleaning) 3.4.3.2 Chuyển đổi dữ liệu (data transformation) 3.4.3.3 Thu giảm di liệu 3.4.4 Mô hình K Means phân cụm người dùng 3.4.4.1 Khái niệm phân cụm 3.4.4.2 Thuật toán Kmeans 3.4.4.3 Kỹ thuật khuỷu tay Elbow chọn số cụm tối ưu 3.4.5 Đề xuất sản phẩm dựa trên nhóm người dùng CHƯƠNG 4: NGHIÊN CỨU VÀ XÂY DỰNG ỨNG DỤNG BACKEND CHO WEBSITE 4.1 Phương pháp tiếp cận và giải quyết vấn đề 4.2 Cơ sở dữ liệu 4.2.1 Kết nói tới cơ sở dữ liệu 4.2.2 Tạo Entity 4.3 APIs 4.3.1 Thiết Kế Endpoints API 4.3.2 Xử ly dit liệu và truy vấn 4.4 Quản Lý Người Dùng và Xác Thực 4.4.1 Quản ly người dùng 4.4.2 Xác thực và phân quyền 4.5 Nested Set Model 4.5.1 Giới thiệu về cây phân cấp 4.5.2 Các phương pháp cài đặt và triển khai cây phân cấp 4.5.3 Ứng dung với “Reviews Nested” trong website 4.6 Xây dựng APIs với Flask 4.6.1 Giới thiệu về Flask 4.6.2 Cài đặt và xây dựng APIs Flask CHƯƠNG 5: NGHIÊN CỨU VÀ XÂY DỰNG ỨNG DỤNG FRONT-END 5.1 Phương pháp tiếp cận và giải quyết van đề 5.1.1 Client-side rendering va Server-side rendering 5.1.2 Nextjs 5.2 Đề xuất sản phâm với người ding 5.2.1 Giao điện tổng quan 5.2.2 Xây dựng Giao diện Gợi ý sản phẩm 5.3 Quản trị hệ thống 5.4 Đa ngôn ngữ voi Internationalization (118n) 5.4.1 Giới thiệu về Internationalization (¡18n) 5.4.2 Cài đặt và sử dung 11 8next 5.4.2.1 Cai đặt và cầu hình il 8next 5.4.2.2 Ứng dụng ¡18next vào Trang chủ Trương Thị Xuân Tươi - DI9PTDPT 5 Đồ án tốt nghiệp MỤC LỤC KET LUẬN TÀI LIỆU THAM KHẢO PHỤ LỤC Trương Thị Xuân Tươi - DI9PTDPT 6