Báo cáo đồ án xây dựng website thương mại điện tử với chatbot tư vấn

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN - - BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT TƯ VẤN Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Nguyễn Hữu Hiếu Mã số sinh viên 18520053 : Sinh viên thực : Nguyễn Đặng Phương Nam Mã số sinh viên : 18521125 Lớp : SE122.M21 Bộ môn : Phát triển phần mềm Thành phố Hồ Chí Minh, tháng năm 2022 LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người trực tiếp tận tình hướng dẫn nhóm em suốt q trình thực đồ án Không gợi ý định hướng chúng em thực đề tài, cịn nhiệt tình đưa nhận xét, góp ý để em hồn thành đồ án cách tốt Nếu khơng có lời hướng dẫn, dạy bảo thầy đồ án khó hoàn thiện Một lần nữa, chúng em xin chân thành cảm ơn Đề tài nhóm thực khoảng thời gian tháng nên bước đầu vào thực tế, kiến thức kinh nghiệm thực tiễn chúng em nhiều hạn chế Do vậy, chắn khơng thể tránh khỏi sai sót, nhóm mong nhận bảo, ý kiến đóng góp q báu bạn học lớp để chúng em có điều kiện bổ sung, nâng cao kiến thức lĩnh vực này, giúp hồn thiện tích lũy thêm cho thân nhiều kinh nghiệm, phục vụ tốt cho công việc thực tế sau Chúng em xin chân thành cảm ơn cơ! Thành phố Hồ Chí Minh, ngày 03 tháng 06 năm 2022 Nhóm sinh viên thực NGUYỄN HỮU HIẾU – NGUYỄN ĐẶNG PHƯƠNG NAM ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Xây dựng website thương mại điện tử với chatbot tư vấn Cán hướng dẫn: THS TRẦN THỊ HỒNG YẾN Thời gian thực hiện: Từ ngày 21/2/2022 đến ngày 10/6/2022 Sinh viên thực hiện: NGUYỄN HỮU HIẾU - 18520053 NGUYỄN ĐẶNG PHƯƠNG NAM - 18521125 Nội dung đề tài:(Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực hiện, kết mong đợi đề tài) Mục tiêu: Website thương mại điện tử thực dựa ba mục đích sau: Thứ nghiên cứu cơng nghệ lập trình như: lập trình ứng dụng web với ReactJs, xây dựng hệ thống backend với NET Core, xây dựng chatbot với Microsoft Bot Framework Thứ hai phát triển ứng dụng web có tính thực tiễn cao, có khả triển khai ứng dụng vào thực tế, hỗ trợ shop bán đồ thời trang với nội dung phong phú, độc đáo, giao diện thân thiện với người dùng, bố cục hợp lý, đáp ứng chức cần thiết website thương mại điện tử Ngoài xây dựng trang quản trị với chức quản lý thông tin đa dạng tiện dụng Thứ ba tích hợp chatbot tự động vào website với kịch tư vấn đa dạng cho khách hàng Nhóm hy vọng dựa tảng lý thuyết thầy cô truyền thụ lại, kết hợp với tìm hiểu cơng nghệ nhóm, đồ án nhóm đạt mục đích mong đợi Phương pháp thực hiện: làm việc với nhóm 02 thành viên, phân chia công việc phù hợp với lực kinh nghiệm người, thực đồ án theo lượng công việc thời gian lập kế hoạch chi tiết Các vấn đề liên quan đến đồ án trao đổi trực tiếp thành viên Công nghệ sử dụng: - Front-end: ReactJs - Back-end: C# NET Core - Database: SQL Azure - Chatbot: Microsoft Bot Framework Facebook Messenger Chatbot - Caching: In-memory-cache - Authentication: Json Web Token - Source Control: Github - Swagger UI - REST API Kết mong đợi: Sau xác định đề tài nghiên cứu, tìm hiểu thực tế, nhóm xây dựng ý tưởng thiết kế website bán hàng online đạt mục tiêu sau: - Đăng nhập, đăng ký - Quản lý danh mục, sản phẩm - Tìm kiếm theo danh mục, sản phẩm - Đặt hàng - Quản lý đơn đặt hàng, giỏ hàng, toán - Chatbot tư vấn Đối tượng: - Người dùng có nhu cầu mua hàng online - Nhân viên, quản lý cửa hàng Các tiêu chí khác: Tính thẩm mỹ - Phần mềm có giao diện đẹp, dễ sử dụng, bố cục hợp lý hút người dùng sử dụng Tính logic bảo mật - Tạo liên kết logic hình để người dùng chuyển hình cách nhanh thuận tiện - Đảm bảo tính bảo mật thông tin nhạy cảm, tạo cảm giác an tồn cho người dùng - Có thể cập nhật, thêm xóa sửa đổi thơng tin liên quan đến sản phẩm vấn đề khác liên quan khác đến người dùng Kế hoạch thực hiện: Thời gian Nội dung 21/02/2022 – 20/03/2022 - Tìm hiểu đề tài, xác định chức Chuẩn bị kiến thức cơng nghệ hệ thống - Tìm hiểu Reactjs để xây dựng Frontend - Tìm hiểu Web API C# để xây dựng Backend - Tìm hiểu Azure SQL để xây dựng Database online - Tìm hiểu Microsoft Bot Framework Facebook Messenger Chatbot để xây dựng chatbot - Tìm hiểu Json Web Token (JWT) để xác thực người dùng - Tìm hiểu In-memory-cache để cải thiện tốc độ caching giúp tăng tốc độ website - Tìm hiểu microservice 21/03/2022 – 10/04/2022 - Phân tích, xác định, đặc tả chức Phân tích thiết kế hệ thống - Xác định luồng xử lí - Thiết kế base source hệ thống - Xây dựng CSDL - Thiết kế UI 11/04/2022 – 22/05/2022 Xây dựng ứng dụng - Xây dựng Frontend Reactjs - Xây dựng Backend Web API C# - Xây dựng Chatbot - Tích hợp API vào ứng dụng web - Tích hợp Chatbot vào ứng dụng web 23/05/2022 – 29/05/2022 - Thực kiểm thử luồng chức Kiểm thử sửa lỗi - Sửa lỗi, cải thiện giao diện, hoàn thiện ứng dụng 30/05/2022 – 10/06/2022 - Hoàn thiện báo cáo Hoàn thiện báo cáo Xác nhận CBHD TP HCM, ngày tháng 03 năm 2022 (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Nguyễn Đặng Phương Nam Nguyễn Hữu Hiếu MỤC LỤC CHƯƠNG - TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu đề tài 1.2 Khảo sát trạng 1.3 Đối tượng nghiên cứu 1.4 Phạm vi nghiên cứu 1.5 Phương pháp nghiên cứu 1.6 Nhiệm vụ đề tài CHƯƠNG - CƠ SỞ LÝ THUYẾT 2.1 Tổng quan ReactJs Redux 2.1.1 ReactJs 2.1.2 Redux 2.2 Tổng quan NET Core 10 2.2.1 Giới thiệu 10 2.2.2 Khả sử dụng 10 2.2.3 Thành phần 11 2.2.4 Phân biệt NET Framework, NET Core Mono 12 2.2.5 Trường hợp sử dụng 13 2.3 Tổng quan SQL Azure 14 2.3.1 Giới thiệu 14 2.3.2 Quy trình hoạt động 15 2.3.3 Các lợi ích SQL Azure 17 2.3.4 Sự khác biệt SQL Azure SQL Server 18 2.4 Tổng quan Microsoft Bot Framework, Azure Bot Service 19 2.4.1 Khái niệm 19 2.4.2 Cấu trúc 20 2.4.3 Cách xây dựng bot với Microsoft Bot Framework 23 2.5 Tìm hiểu Facebook Messenger 25 2.5.1 Tổng quan 25 2.5.2 Đánh giá 25 2.5.3 Giới thiệu Chatbot Facebook 26 2.5.4 Cách hoạt động 26 2.5.5 Một số khái niệm 27 2.6 Tìm hiểu In-Memory-Cache 28 2.6.1 Đặt vấn đề 28 2.6.2 In-Memory-Cache 28 2.6.3 Ưu điểm 29 2.6.4 Hạn chế 29 2.7 Tổng quan JSON Web Token 30 2.7.1 Giới thiệu 30 2.7.2 Các thành phần 30 2.7.3 Trường hợp sử dụng 31 CHƯƠNG - PHÂN TÍCH THIẾT KẾ HỆ THỐNG 32 3.1 Mô tả yêu cầu 32 3.1.1 Yêu cầu chức 32 3.1.2 Yêu cầu phi chức 34 3.2 Kiến trúc hệ thống 34 3.2.1 Sơ đồ kiến trúc tổng quát 34 3.2.2 Mô tả kiến trúc Front-End 35 3.2.3 Mô tả kiến trúc Microsoft Bot Framework 37 3.2.4 Mô tả kiến trúc Back-End 38 CHƯƠNG - HIỆN THỰC HỆ THỐNG 40 4.1 Thiết kế liệu 40 4.1.1 Danh sách đối tượng hệ thống 40 4.1.2 Dữ liệu đối tượng người dùng 41 4.1.3 Dữ liệu đối tượng giỏ hàng 42 4.1.4 Dữ liệu đối tượng sản phẩm 43 4.1.5 Dữ liệu đối tượng danh mục 44 4.1.6 Dữ liệu đối tượng đơn hàng 44 4.1.7 Dữ liệu đối tượng hóa đơn 45 4.1.8 Dữ liệu đối tượng lịch sử đơn hàng 46 4.2 Thiết kế giao diện 47 4.2.1 Danh sách hình 47 4.2.2 Sơ đồ liên kết hình 49 4.2.3 Giao diện hình chức xác thực người dùng 50 4.2.4 Giao diện hình chức liên quan đến mua hàng 51 4.2.5 Giao diện hình chức liên quan đến quản lý 58 4.2.6 Giao diện hình chức chatbot tư vấn 62 4.2.7 Giao diện hình chức lưu trữ thao tác với API 66 CHƯƠNG - KẾT LUẬN 69 5.1 Đánh giá 69 5.1.1 Thuận lợi 69 5.1.2 Khó khăn 69 5.2 Kết đạt 69 5.2.1 Ưu điểm 69 5.2.2 Nhược điểm 70 5.3 Hướng phát triển 70 TÀI LIỆU THAM KHẢO 71 Hình 4.18 Giao diện hình trang đặt hàng (B1) Hình 4.19 Giao diện hình trang đặt hàng (B2) 57 Hình 4.20 Giao diện hình đặt hàng thành công 4.2.5 Giao diện hình chức liên quan đến quản lý Hình 4.21 Giao diện hình trang chủ trang quản trị 58 Hình 4.22 Giao diện hình trang quản lý sản phẩm Hình 4.23 Giao diện hình chức thêm sản phẩm 59 Hình 4.24 Giao diện hình chức cập nhật sản phẩm 60 Hình 4.25 Giao diện hình chức xóa sản phẩm Hình 4.26 Giao diện hình quản lý tài khoản 61 4.2.6 Giao diện hình chức chatbot tư vấn Hình 4.27 Giao diện click biểu tưởng hỏi để khởi động chatbot Hình 4.28 Giao diện hình chức hỏi thơng tin shop 62 Hình 4.29 Giao diện hình chọn đồ (B1: chọn danh mục + B2: chọn màu sắc) 63 Hình 4.30 Giao diện hình chọn đồ (B3: chọn kích thước) kết Hình 4.31 Giao diện hình nhấn vào link chọn đồ chatbot gửi 64 Hình 4.32 Giao diện hình chức chọn đồ ngẫu nhiên Hình 4.33 Giao diện hình nhấn vào link chọn đồ ngẫu nhiên chatbot gửi 65 4.2.7 Giao diện hình chức lưu trữ thao tác với API Hình 4.34 Giao diện hình quản lý API thơng qua Swagger UI 66 Hình 4.35 Giao diện hình quản lý chi tiết API thông qua Swagger UI 67 Hình 4.36 Giao diện hình quản lý thực thi API thông qua Swagger UI 68 CHƯƠNG - KẾT LUẬN 5.1 Đánh giá 5.1.1 Thuận lợi - Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài - Cộng đồng lớn giúp giải vấn đề thường gặp phải sử dụng cơng nghệ cách nhanh chóng - Vận dụng kiến thức, quy trình phát triển học - Nguồn liệu shop thời trang vô phong phú internet 5.1.2 Khó khăn - Vấn đề tìm hiểu, nghiên cứu thực công nghệ ReactJs, NET Core, Microsoft Bot Framework,… nhiều thời gian 5.2 Kết đạt 5.2.1 Ưu điểm - Hoàn thành yêu cầu đặt ban đầu, đáp ứng tính cần thiết ứng dụng website bán hàng online có hỗ trợ chatbot tư vấn - Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng thao tác website - Tốc độ phản hồi thao tác nhanh, tối ưu hóa trải nghiệm người dùng - Sinh viên thực nắm cách tổ chức, xây dựng hệ thống hoàn thiện tạo ứng website để phục vụ cho nhu cầu người mua người bán - Sinh viên nắm công nghệ phổ biến ReactJs, NET Core, Microsoft Bot Framework số kỹ thuật caching, xác thực người dùng - Website triển khai nghiệm thu thành công môi trường web với giao thức HTTPS giúp ứng dụng đạt độ bảo mật an toàn cao - Hỗ trợ chatbot tự động có khả phản hồi realtime Giúp hỗ trợ tư vấn khách hàng cách tốt Ngồi cịn thơng qua Facebook fanpage để trị chuyện trực tiếp với khách hàng 69 - Cung cấp hệ sinh thái đầy đủ phục vụ cho doanh nghiệp, cung cấp nơi mua bán sản phẩm quần áo dành cho phụ nữ cập nhật sản phẩm xu hướng giới trẻ 5.2.2 Nhược điểm - Dữ liệu cịn chưa đầy đủ để đáp ứng nhu cầu người dùng - Dữ liệu tổ chức chưa tối ưu nên việc truy vấn cịn chậm - Hạn chế hình thức tốn - Khơng có kinh phí dùng máy chủ mạnh - Các quyền Facebook cấp phát cho chatbot hạn chế 5.3 Hướng phát triển - Liên kết ứng dụng toán để tiện lợi cho người dùng - Phát triển UI thêm animation - Hồn thiện trang quản trị - Thêm tính hồn tiền - Phát triển chatbot thông minh hơn, tư vấn tối ưu cho người dùng, giúp người dùng phối đồ, … - Thêm cách để marketing tới người dùng website (SEO) 70 TÀI LIỆU THAM KHẢO [1] Trung Nguyen (2021), “Cách xây dựng REST API sử dụng ASP.NET Core, Entity Framework Core JWT”, [Online] Available: https://comdy.vn/asp-net-core-webapi/cach-xay-dung-rest-api-su-dung-aspnet-core-entity-framework-core-va-jwt/ [2] Han Van Hiep (2017), “Làm việc với Distributed Cache ASP.NET Core”, [Online] Available: https://viblo.asia/p/lam-viec-voi-distributed-cache-trong-aspnetcore-m68Z0O69KkG [3] Chiasekinang (2021), “.NET CORE gì? Tổng quan, phân biệt NET core, NET FW, MONO”, [Online] Available: https://chiasekinang.com/net-core-la-gi/amp/ [4] Tran Vuong Minh (2016), “Tìm hiểu json web token (JWT)”, [Online] Available: https://viblo.asia/p/tim-hieu-ve-json-web-token-jwt-7rVRqp73v4bP [5] Rick Anderson & Kirk Larkin (2021), “Create a web API with ASP.NET Core”, [Online] Available: https://docs.microsoft.com/vi-vn/aspnet/core/tutorials/first-webapi?view=aspnetcore-6.0&tabs=visual-studio [6] D Abramov (2022), “Redux Usage Guides,”, [Online] Available: https://redux.js.org/usage/index [7] Facebook (2022), “ReactJs Documentation”, [Online] Available: https://reactjs.org/docs/getting-started.html [8] Microsoft (2022), “In-memory cache Documentation”, [Online] Available: https://docs.microsoft.com/enus/aspnet/core/performance/caching/memory?view=aspnetcore-6.0 [9] Microsoft (2022), “Microsoft Bot Framework SDK Documentation”, [Online] Available: https://docs.microsoft.com/en-us/azure/bot-service/index-bfsdk?view=azure-bot-service-4.0 [10] Microsoft (2022), “Azure SQL Documentation”, [Online] Available: https://docs.microsoft.com/en-us/azure/azure-sql/database/sqldatabase-paas-overview?view=azuresql 71 ... đề tài đồ án 2, nhóm nghiên cứu ? ?Xây dựng website thương mại điện tử với chatbot tư vấn? ?? để hỗ trợ, chia sẻ, giảm bớt khó khăn việc chợ trực tiếp góp phần hạn chế gia tăng dịch bệnh, tránh tiếp... Minh, ngày 03 tháng 06 năm 2022 Nhóm sinh viên thực NGUYỄN HỮU HIẾU – NGUYỄN ĐẶNG PHƯƠNG NAM ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Xây dựng website thương mại điện tử với chatbot tư vấn Cán hướng dẫn:... đọc tài liệu - Phương pháp phân tích ứng dụng website có 1.6 Nhiệm vụ đề tài Đề tài ? ?Xây dựng website thương mại điện tử với chatbot tư vấn? ?? ứng dụng website chạy môi trường web đáp ứng yêu cầu