Website bán quần áo, phụ kiện thời trang với chat bot tư vấn

ĐẠ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 BÁO CÁO ĐỒ ÁN WEBSITE BÁN QUẦN ÁO, PHỤ KIỆN THỜI TRANG VỚI CHAT BOT TƯ VẤN LỚP: SE121.M21 – KHÓA K14 GIẢNG VIÊN HƯỚNG DẪN ThS Nguyễn Thị Thanh Trúc Võ Thành Phát – 19522003 Võ Tấn Việt – 19522519 TP HỒ CHÍ MINH, 2022 LỜI CẢM ƠN Nhóm chúng em xin chân thành cảm ơn trường Đại học Cơng nghệ thơng tin nói chung GV ThS Nguyễn Thị Thanh Trúc nói riêng tạo điều kiện cho chúng em thực đồ án Với giúp đỡ GV ThS Nguyễn Thị Thanh Trúc chúng em xây dựng thành công trang web full stack với chức phù hợp với nhu cầu người dùng Đề tài nhóm hồn thành vịng tháng tính ln thời gian học ngôn ngữ front end back end Vì lần đầu nhóm chúng em tiếp cận với lập trình web nên cịn tồn lỗi khơng mong muốn Nhóm em mong nhận góp ý để giúp ngày hồn thiện có nhiều kinh nghiệm để chuẩn bị cho đồ án, sản phẩm cho tương lai Một lần nữa, chúng em xin chân thành cảm ơn GV ThS Nguyễn Thị Thanh Trúc chúc cô dồi sức khỏe để tiếp tục công việc đào tạo lớp trẻ IT NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………… ……., ngày…… tháng……năm 2022 Người nhận xét (Ký tên ghi rõ họ tên) Tên đề tài: Xây dựng website bán quần áo, phụ kiện thời trang với chatbot tư vấn Giảng viên hướng dẫn: ThS Nguyễn Thị Thanh Trúc Thời gian thực hiện: Từ ngày 21/2/2022 đến ngày 11/6/2022 Sinh viên thực hiện: Võ Thành Phát – 19522003 Võ Tấn Việt - 19522519 Nội dung đề tài: Giới thiệu toán: Ngày nay, xã hội ngày phát triển, đời sống người cải thiện, người ta khơng no đủ vật chất mà cịn trọng nhiều đến đời sống tinh thần, đặc biệt thời trang nhằm thỏa mãn nhu cầu thẩm mỹ ngày cao Dân gian có câu "Người đẹp lụa, lúa tốt phân" lẽ đó, cách ăn mặc có mối quan hệ mật thiết với văn hoá, phản ánh phần đời sống, văn minh người Chính thế, lẽ tự nhiên thời đại công nghệ 4.0, website thương mại, buôn bán quần áo ngày phát triển tín dụng Một phần cung cấp cho người dùng tiện lợi, nhanh gọn mua bán sản phẩm, vừa giúp người dùng lựa cho đồ ưng ý, hợp với nhu cầu mà không thiết phải tận cửa hàng để lựa chọn Nhờ có webstie thương mại mà chủ cửa hàng quần áo tạo website đơn giản, phục vụ mục đích bán hàng lại cịn tăng cao thu nhập Mục tiêu Mục tiêu kết hợp kiến thức học tự học, kèm theo hiểu biết trải nghiệm từ phía người dùng, để tạo nên website bán hàng online hồn chỉnh – tối ưu hố mặt, để sau dễ phát triển - Học tìm hiểu ngơn ngữ lập trình, cơng nghệ hỗ trợ phát triển trang web full stack - Tìm hiểu kiến trúc hệ thống quản lý database - Tìm hiểu nghiên cứu chatbot - Tìm hiểu cách mơ giao diện ứng dụng Figma - Vẽ diagram mô tả chức hệ thống - Xây dựng thành công website bán quần áo, phụ kiện thời trang Phạm vi Đề tài tập trung vào nghiên cứu website bán thời trang, phục vụ việc kinh doanh online shop quần áo Đối tượng:  Các shop quần áo có nhu cầu mở rộng việc kinh doanh internet hình thức bán hàng qua website online thương mại  Các khách hàng, người dùng có nhu cầu mua quần áo thời trang internet, vừa tiện lợi, dễ sử dụng lại có ship hàng đến tận nhà Phương pháp thực hiện: - Tìm hiểu học HTML, CSS, Javascript, Bootstrap, JSP, Servlet, Java, MySQL - Khảo sát thực trạng website bán quần áo thị trường - Phân tích thiết kế hệ thống xây dựng website - Tìm hiểu thiết kế UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho người dung nhân viên - Tiến hành triển khai kiểm thử Công nghệ dự kiến sử dụng: Các ngôn ngữ, công nghệ lập trình front end: HTML, Css/Scss, Javascript, Bootstrap, JSP(JavaServerPages) Các ngơn ngữ cơng nghệ lập trình back end: Servlet, JDBC, Java Database: MySQL Công nghệ, ngôn ngữ nghiên cứu thiết kế chatbot: Rasa framework, Python Công cụ thiết kế UI : Figma Cơng cụ phân tích thiết kế, vẽ diagram: draw.io Công cụ coding/quản lý database: Eclipse IDE, MySQL Workbench 8.0 CE Công cụ quản lý dự án: Github, Messenger Group, MicrosoftTeams Công cụ lưu trữ tài liệu liên quan: Google Drive, Github Kết mong đợi - Hoàn thành yêu cầu đặt ban đầu, đáp ứng đầy đủ tính cần thiết ứng dụng Website thương mại bán quần áo phụ kiện thời trang - Giao diện thân thiện, thao tác nhanh gọn, dễ sử dụng - Nắm ngôn ngữ, công nghệ bước đầu tạo website như: HTML, CSS, Javascript, Bootstrap, JSP, Servlet, Java, MySQL - Nắm công cụ sử dụng trình thực đồ án như: Github, Figma, DrawIO - Nắm trình phát triển tạo nên chatbot thông qua tảng RASA - Học cách nghiên cứu, học công nghệ cách nhanh gọn hiệu Đặc biệt có hướng để từ ngơn ngữ, cơng nghệ mà tiến đến Framework cao cấp hỗ trợ tốt tạo nên sản phẩm tốt - Học cách tổ chức làm việc nhóm, tập trung vào cơng việc, đưa ý kiến nhân vào đồ án nhóm, đặt thân vào mắt, nhu cầu người dùng nhằm phát triển đồ án tốt Các tiêu chí khác: Tính thẩm mỹ: Website có giao diện thân thiện, dễ sử dụng Tính logic bảo mật: + Các tính hoạt động mượt mà, khơng bị lỗi + Dữ liệu người dùng bảo mật Link Github: Website bán hàng: https://github.com/19522003/Ecommerce_DoAn1_Full Chatbot: https://github.com/19522003/Rasa_Chatbot Kế hoạch thực hiện: Nội dung Thời gian 23/2/2022 – 28/2/2022 1/3/2022 – 6/3/2022 Võ Thành Phát Võ Tấn Việt Tìm hiểu đề tài Tìm hiểu đề tài Tham khảo trang web có Tham khảo trang web có chức tương tự chức tương tự 10/3/2022 – 11/3/2022 Lựa chọn ngôn ngữ, công nghệ phù hợp với trang web Phân tích hệ thống Phác thảo sơ giao diện Phác thảo sơ giao diện figma figma Thiết kế database bước đầu Thiết kế database bước đầu Tìm hiểu học HTML, Tìm hiểu học HTML, CSS CSS Dựng khung design trang Dựng khung design trang web html, css web html, css 5/4/2022 – 13/4/2022 Học javascript, bootstrap Học javascript, bootstrap 14/4/2022 – 17/4/2022 Vận dụng kiến thức Vận dụng kiến thức học tạo hiệu ứng, design học tạo hiệu ứng, design lại website html, css lại website html, css 11/3/2022 – 14/3/2022 14/3/2022 – 15/3/2022 16/3/2022 – 25/3/2022 25/3/2022 – 5/4/2022 17/4/2022 – 30/4/2022 Tìm hiểu học java, jsp, servlet Tìm hiểu học java, jsp, servlet 2/5/2022 - 7/5/2022 Tổng thay đổi giao diện web Thiết kế database tổng kết sau nghiên cứu hết JSP kết hợp html,css,javascript chức app bootstrap 8/5/2022 – 12/5/2022 Dùng Java,Servlet, JDBC Dùng Java,Servlet, JDBC xây dựng chức bên xây dựng chức bên phía người dùng bao gồm: phía người dùng bao gổm: Đăng nhập, Show sản đăng ký tài khoản, thay đổi phẩm Homepage, Thêm thông tin người dùng, xem sản phẩm vào giỏ hàng, xem hóa đơn mua hàng chi tiết 12/5/2022 – 14/5/2022 Xây dựng chức tìm Xây dựng chức tìm kiếm sản phẩm, xem giỏ kiếm sản phẩm, xem giỏ hàng, đặt hàng Xây dựng hàng, đặt hàng Xây dựng chức bên phía chức bên phía admin như: thêm sản phẩm admin như: thêm sản phẩm vào trang web, quản lý sản vào trang web, quản lý sản phẩm, thêm, xóa sửa, quản phẩm, thêm, xóa sửa, quản lý hóa đơn mua hàng, đặt lý hóa đơn mua hàng, đặt hàng giao hàng hàng giao hàng 14/5/2022 – 10/6/2022 Thực chatbot nghiên cứu RASA Thực chatbot nghiên cứu RASA framework kết hợp viết báo framework kết hợp viết báo cáo đồ án cáo đồ án 11/6/2022 – 13/6/2022 Thực chatbot nghiên Thực chatbot nghiên cứu IDE visual cứu IDE visual studio studio 10/6/2022 – 13/6/2022 Test trang web, thực Test trang web, thực kiểm thử test case kiểm thử test case hoàn thiện báo cáo đồ án hoàn thiện báo cáo đồ án Xác nhận CBHD TP HCM, ngày 21 tháng năm 2022 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Nguyễn Thị Thanh Trúc Võ Thành Phát Võ Tấn Việt 10 Con bot hoạt động giống vậy, bạn muốn giải đáp thắc mắc cho bạn cần hiểu người nói Để hiểu nhu cầu khách hàng Rasa Chatbot thơng qua NLU data, NLU viết tắt Natural Language Understanding Cụ thể hơn, NLU có cấu trúc ví dụ sau: Hình 5.18 file nlu.yml Ta tùy chỉnh, thêm mục intent để thực giao tiếp với chatbot ngơn ngữ tự nhiên Mỗi intent có nhiều loại câu hỏi câu trả lời người dùng Chatbot thực phán đốn câu ngữ ngơn ngữ tự nhiên để đưa câu trả lời cho phù hợp Về domain.yml Giờ chatbot bạn hiểu người dùng muốn thơng qua file nlu.yml thực trả lời người dùng Và phần responses đảm nhận nhiệm vụ Chúng ta thực viết response file domain.yml sau: 128 Hình 5.19 file domain.yml Intents: liệt kê mục mà người dùng hỏi nói Responses: trả lời chatbot Và bạn thêm mục mà chatbot nói utter_name Ở đây, bạn cho bot trả lời nhiều câu Nếu có nhiều lựa chọn dùng phương pháp random để chọn câu trả lời response Stories.yml Vì cách giao tiếp người sống phức tạp.Vì thế, chatbot nắm bắt kịch có khả xảy hội thoại diễn mượt mà Kịch gọi Stories Và ta viết file stories.yml 129 Hình 5.20 file stories.yml Ví dụ story: happy path Đầu tiên người dùng intent thực lời chào đó, chatbot chào lại sau người dùng thể cảm xúc vui vẻ chatbot đáp lại cảm xúc câu nói vui vẻ, hạnh phúc Việc soạn trước kịch giúp chatbot giao tiếp mượt mà, thuận lợi Về config.yml Đây phần cấu hình cho NLU, nơi lựa chọn ngôn ngữ, model cần thiết Ngơn ngữ mà có en(English) Tiếp theo đến pipeline cách mà chọn cách train – hướng dẫn ngôn ngữ tiếp học câu chữ soạn trước cách phù hợp, việc chọn pipeline phù hợp giúp chatbot học tốt 130 Ví dụ với ngơn ngữ tiếng việt pipeline: supervised_embeddings lựa chọn tốt thực train lại từ đầu Hình 5.21 file config.yml Về rules.yml Rules mang nghĩa luật, hội thoại người dùng theo đường mòn định Các intent response action cụ thể để chắn action gọi giải vấn đề ta thêm cho điều điện (condition) 131 Hình 5.22 file rules.yml Ví dụ bot phải nói goodbye người dùng nói goodbye luật đặt Tiếp theo thực gõ câu lệnh rasa train để chat bot bắt đầu trình “học” 132 Hình 5.23 Quá trình train chat bot Cmd chatbot train thành công Thực gõ câu lệnh rasa run -m models enable-api cors "*" để bắt đầu chạy chat bot Mở browser lên gõ localhost Ví dụ em truy xuất tới đường dẫn: file:///D:/Rasa_project/index.html Hình 5.24 Giao diện chatbot 133 Chatbot có giao diện sau Thực gõ sad – từ mà chatbot học -> chatbot có câu trả lời thích hợp Here is something to cheer you up Hình 5.25 Các phân đoạn tương tác 134 Chatbot hỏi Did that help you, người dùng nhắn yes chatbot trả lời lại great, carry on Có thể thực đổi giao diện chatbot theo bảng css sau: Hình 5.26 Bảng class css để thay đổi giao diện chatbot Ví dụ đổi màu chatbot: Hình 5.27 Đổi màu chatbot 135 Hình 5.28 Thay đổi màu tương tác chatbot khác 136 Hình 5.29 Tương tác chatbot Rút kinh nghiệm: Biết cách sử dụng rasa để tạo chatbot theo dạng kịch học Hạn chế: lập trình viên cần chuẩn bị trước mẫu hội thoại người dùng chatbot 137 Có ý tưởng cho tương lai như: apply vào trang web bán hàng tại, lưu câu người dùng nhắn vào sở liệu để sau chatbot dùng trả lời lại cách phong phú, chân thật CHƯƠNG - KẾT LUẬN 6.1 Đánh giá 6.1.1 Thuận lợi  Với phát triển Internet, tài liệu học thuật mạng, video hướng dẫn học ngôn ngữ, công nghệ chia sẻ, hướng dẫn tận tình giúp nhóm chúng em vừa nghiên cứu, vừa học hoàn thành đồ án  Vận dụng kiến thức, quy trình phát triển học từ giảng viên dạy dỗ tận tình  Vừa học vừa làm khiến việc hiểu nắm rõ công nghệ diễn thuận lợi 6.1.2 Khó khăn  Lần tiếp cận với lập trình web nên bỡ ngỡ Có nhiều ngơn ngữ, cơng nghệ thị trường giúp phát triển web Nhưng thời gian để học thực đồ án khơng nhiều Vì chúng em định lựa chọn ngơn ngữ, cơng nghệ tảng để phát triển gốc cho framework tiến tiến sau Vừa có đủ thời gian học làm, vừa tạo trang web full stack hồn chỉnh  Để lập trình nên website cần phải biết ngôn ngữ Front End Back End Vì cần tốn nhiều thời gian để nghiên cứu học  Tài liệu chatbot Internet có nhiều lần đầu vào mảng AI nên khó khăn việc chọn lọc nghiên cứu  Vì năm nên thành viên nhóm bận nhiều cơng việc, thực tập Vì khó gặp mặt để giao tiếp bàn luận dẫn đến trễ số giai đoạn đồ án 138 6.2 Kết đạt 6.2.1 Ưu điểm  Hoàn thành yêu cầu đặt ban đầu, đáp ứng đầy đủ tính cần thiết ứng dụng Website thương mại bán quần áo phụ kiện thời trang  Giao diện thân thiện, thao tác nhanh gọn, dễ sử dụng  Nắm ngôn ngữ, công nghệ bước đầu tạo website như: HTML, CSS, Javascript, Bootstrap, JSP, Servlet, Java, MySQL  Nắm công cụ sử dụng trình thực đồ án như: Github, Figma, DrawIO  Nắm trình phát triển tạo nên chatbot thông qua tảng RASA  Học cách nghiên cứu, học công nghệ cách nhanh gọn hiệu Đặc biệt có hướng để từ ngơn ngữ, cơng nghệ mà tiến đến Framework cao cấp hỗ trợ tốt tạo nên sản phẩm tốt  Học cách tổ chức làm việc nhóm, tập trung vào cơng việc, đưa ý kiến nhân vào đồ án nhóm, đặt thân vào mắt, nhu cầu người dùng nhằm phát triển đồ án tốt 6.2.2 Nhược điểm  Website đơn giản  Giao diện chưa thật đẹp  Các công nghệ sử dụng chưa thật bật thời điểm ngày  Chỉ có chatbox với kịch có sẵn, chatbot giai đoạn nghiên cứu chưa apply vào đồ án  Vẫn chậm trễ thông báo tiến độ đến từ giảng viên 6.3 Hướng phát triển  Mở rộng hướng phát triến website từ ngôn ngữ, công nghệ sang ngôn ngữ, công nghệ tiên tiến bật như: 139  FrontEnd: HTML,CSS,Javascript,Bootstrap,JSP -> REACTJS  BackEnd: Servlet, JDBC, Java -> SpringBoot  Tiếp tục nghiên cứu hoàn thiện chat bot tảng chatbot RASA mà chat bot phụ thuộc vào kịch mà người lập trình soạn thảo trước, chatbot có thời gian học trả lời câu hỏi khác từ phía người dùng  Xây dựng mở rộng thêm chức : đánh giá khách hàng, mua hàng hình thức tốn thẻ, thiết kế giao diện đẹp  Tối ưu hóa code để dễ cập nhật mở rộng tính 140 CHƯƠNG - TÀI LIỆU THAM KHẢO 7.1 Tài liệu tiếng Việt Học Java: https://freetuts.net/hoc-java/java-core Học Design Pattern – DAO: https://freetuts.net/data-access-object-patterntrong-java 2917.html Học HTML: https://youtu.be/R6plN3FvzFY Học CSS: https://youtu.be/NsSsJTg29oE Học Bootstrap: https://freetuts.net/hoc-bootstrap HTML/CSS: https://freetuts.net/hoc-html-css Javascript: https://freetuts.net/hoc-javascript https://youtu.be/0SJE9dYdpps JSP: https://www.vietjack.com/jsp/index.jsp https://viettuts.vn/jsp/kien-truc-jsp Servlet: https://hoclaptrinh.vn/tutorial/hoc-servlets https://www.vietjack.com/servlets/ MySQL: https://freetuts.net/hoc-mysql Github: https://codelearn.io/sharing/git-github-tu-co-ban-den-nang-cao-p1 Rasa(chatbot): https://youtu.be/ZhRo3gfLk90 https://viblo.asia/p/tap-tanh-lam-rasa-chatbot-gAm5y8Nwldb 141 https://mentorofdev.com/2021/08/19/tong-quan-ve-rasachatbot/ https://sbrasa.wordpress.com/2020/03/24/tat-ca-ve-cach-thietke-cau-chuyen-cho-rasa-chatbot/ https://youtu.be/zw7tghCxr78 7.2 Tài liệu tiếng Anh HTML/CSS: https://www.w3schools.com/html/default.asp https://www.w3schools.com/css/default.asp Javascript: https://www.w3schools.com/js/default.asp Bootstrap: https://www.w3schools.com/bootstrap4/default.asp Java: https://www.w3schools.com/java/default.asp JSP:https://www.infoworld.com/article/3336161/what-is-jsp-introduction-tojavaserver-pages.html https://www.geeksforgeeks.org/introduction-to-jsp/ Servlet: https://www.javatpoint.com/servlet-tutorial https://www.tutorialspoint.com/servlets/index.htm https://youtu.be/OuBUUkQfBYM Rasa: https://omdena.com/blog/how-to-build-a-chatbot-using-rasa/ https://www.tigergraph.com/blog/building-a-next-level-intelligent-rasachatbot-with-tigergraph/ https://www.geeksforgeeks.org/chatbots-using-python-and-rasa/ 142 ... WEBSITE BÁN QUẦN ÁO, PHỤ KIỆN THỜI TRANG VỚI CHAT BOT TƯ VẤN” để phục vụ cho nhu cầu tìm kiếm mua sản phẩm thời trang internet cách thuận lợi cho người dùng 1.2 Khảo sát trạng Thực khảo sát trang. .. người trước - Thực khảo sát trang web có chức tư? ?ng tự, phân tích yêu cầu người dùng 1.6 Nhiệm vụ đề tài Đề tài ? ?Website bán quần áo, phụ kiện thời trang với chatbot tư vấn? ?? ứng dụng chạy web đáp... (Ký tên ghi rõ họ tên) Tên đề tài: Xây dựng website bán quần áo, phụ kiện thời trang với chatbot tư vấn Giảng viên hướng dẫn: ThS Nguyễn Thị Thanh Trúc Thời gian thực hiện: Từ ngày 21/2/2022 đến