Khóa luận xây dựng website thương mại điện tử với chatbot

ĐẠ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 TRẦN ĐOÀN PHƯƠNG – 19520230 ĐỖ ĐỨC TÂM - 19520253 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHATBOT Building an e-commerce website with a chatbot KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2023 ĐẠ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 TRẦN ĐOÀN PHƯƠNG – 19520230 ĐỖ ĐỨC TÂM- 19520253 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI CHAT BOT Building an e-commerce website with a chatbot KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN TH.S TRẦN THỊ HỒNG YẾN TP HỒ CHÍ MINH, 2023 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin LỜI CẢM ƠN Trải qua trình học tập trường Đại học Cơng nghệ Thơng tin, chúng em tích luỹ nhiều kiến thức kỹ bổ ích Đầu tiên, nhóm em xin gửi lời cảm ơn chân thành đến tất thầy, cô giảng dạy trường Đại học Công nghệ Thông tin Các giảng viên khơng người truyền đạt kiến thức, mà cịn người hướng dẫn, truyền cảm hứng tạo động cho sinh viên Bằng am hiểu sâu rộng, kiến thức kinh nghiệm mà thầy cô chia sẻ ln đồng hành nhóm em đến sau Nhóm em xin bày tỏ lịng biết ơn ThS Trần Thị Hồng Yến, người ln đồng hành, hướng dẫn nhóm em q trình thực Khố luận tốt nghiệp Cuối nhóm em xin gửi lời cảm ơn đến gia đình, bạn bè ln cổ vũ, động viên để nhóm em hoàn thành tốt đề tài lần Thành phố Hồ Chí Minh, ngày 02/07/2023 Nhóm sinh viên thực Trần Đoàn Phương – Đỗ Đức Tâm MỤC LỤC Chương GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài 1.2 Lí chọn đề tài 1.3 Mô tả sản phẩm 1.4 Chức 1.5 Công nghệ sử dụng 1.6 Thông tin nhóm Chương CƠ SỞ LÝ THUYẾT 2.1 HTML 2.2 CSS 2.3 JavaScript 2.4 Thư viện React.JS 2.5 Node.JS 2.6 Express.JS 2.7 MongoDB 10 Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 12 3.1 Mơ hình hệ thống 12 3.2 Sơ đồ Use-case 13 3.3 Danh sách use-case 14 3.4 Đặc tả use-case 15 3.4.1 Use-case “Đăng nhập” 15 3.4.2 Use-case “Đăng ký” 16 3.4.3 Use-case “Đăng xuất” 16 3.4.4 Use-case “Quản lý thông tin cá nhân” 17 3.4.5 Use-case “Mua hàng” 20 3.4.6 Use-case “Tra cứu đơn hàng” 21 3.4.7 Use-case “Chat với người bán” 22 3.4.8 Use-case “Bán hàng” 23 3.4.9 Use-case “Tra cứu đơn bán” 24 3.4.10 Use-case “Quản lý thông tin sản phẩm” 25 3.4.11 Use-case “Quản lý kho hàng” 26 3.4.12 Use-case “Thống kê” 28 3.4.13 Use-case “Quản lý mã giảm giá” 28 3.5 Thiết kế liệu 31 3.5.1 Sơ đồ logic 31 3.5.2 Bảng “Account” 32 3.5.3 Bảng “Address” 32 3.5.4 Bảng “Product” 33 3.5.5 Bảng “Color” 33 3.5.6 Bảng “ProductInCart” 34 3.5.7 Bảng “ProductInFavorite” 34 3.5.8 Bảng “ProductInBill” 34 3.5.9 Bảng “Bill” 35 3.5.10 Bảng “Evalute” 35 3.5.11 Bảng “DiscountCode” 35 Chương XÂY DỰNG WEBSITE 37 4.1 Thiết kế giao diện 37 4.1.1 Danh sách hình 37 4.1.2 Màn hình “Đăng nhập” 39 4.1.3 Màn hình “Đăng ký” 40 4.1.4 Màn hình “Trang chủ” 41 4.1.5 Màn hình “Danh sách sản phẩm” 44 4.1.6 Màn hình “Chi tiết sản phẩm” 46 4.1.7 Màn hình “Giỏ hàng” 47 4.1.8 Màn hình “u thích” 49 4.1.9 Màn hình “Yêu cầu đăng nhập” 50 4.1.10 Màn hình “Hồ sơ” 51 4.1.11 Màn hình “Cửa hàng” 52 4.1.12 Màn hình “Đơn mua” 54 4.1.13 Màn hình “Đơn bán” 55 4.1.14 Màn hình “Tài khoản” 56 4.1.15 Màn hình “Thêm sản phẩm” 57 4.1.16 Màn hình “Mã giảm giá” 58 4.1.17 Màn hình “Chi tiết đơn mua” 59 4.1.18 Màn hình “Chi tiết đơn bán” 60 4.1.19 Màn hình “Sửa sản phẩm” 61 4.1.20 Màn hình “Thêm mã giảm giá” 62 4.1.21 Màn hình “Cập nhật mã giảm giá” 63 4.2 Chatbot hỗ trợ 64 4.2.1 Giới thiệu chat bot FPT.AI 64 4.2.2 Danh sách chức sử dụng 65 4.2.3 Chi tiết chức 66 4.2.4 Một số kịch xây dựng 83 KẾT LUẬN 88 TÀI LIỆU THAM KHẢO 89 DANH MỤC HÌNH Hình 2.1 Cấu trúc file html Hình 2.2 Cấu trúc CSS [2] Hình 2.3 Phương thức hoạt động JavaScript [4] Hình 2.4 Một đoạn code trong ứng dụng sử dụng React Hình 2.5 Một vài file components ứng dụng Hình 2.6 Một đoạn code gọi router từ tệp định tuyến định nghĩa Hình 2.7 Một đoạn code sử dụng phương thức định tuyến 10 Hình 2.8 Một đoạn code đối tượng tài khoản sở liệu 10 Hình 2.9 Một đoạn code gọi hàm xử lý sở liệu 11 Hình 3.1 Mơ hình hệ thống 12 Hình 3.2 Sơ đồ use-case tổng quát 13 Hình 3.3 Sơ đồ logic liệu 31 Hình 4.1 Hình ảnh hình “Đăng nhập” 39 Hình 4.2 Hình ảnh hình “Đăng ký” 40 Hình 4.3 Hình ảnh hình “Trang chủ” 42 Hình 4.4 Hình ảnh hình “Trang chủ” 42 Hình 4.5 Hình ảnh hình “Danh sách sản phẩm” 44 Hình 4.6 Hình ảnh hình “Chi tiết sản phẩm” 47 Hình 4.7 Hình ảnh hình “Giỏ hàng” 47 Hình 4.8 Hình ảnh hình “u thích” 49 Hình 4.9 Hình ảnh hình “Yêu cầu đăng nhập” 50 Hình 4.10 Hình ảnh hình “Hồ sơ” 51 Hình 4.11 Hình ảnh hình “Cửa hàng” 52 Hình 4.12 Hình ảnh hình “Đơn mua” 54 Hình 4.13 Hình ảnh hình “Đơn bán” 55 Hình 4.14 Hình ảnh hình “Tài khoản” 56 Hình 4.15 Hình ảnh hình “Thêm sản phẩm” 57 Hình 4.16 Hình ảnh hình “Mã giảm giá” 58 Hình 4.17 Hình ảnh hình “Chi tiết đơn mua” 59 Hình 4.18 Hình ảnh hình “Chi tiết đơn bán” 60 Hình 4.19 Hình ảnh hình “Sửa sản phẩm” 61 Hình 4.20 Hình ảnh hình “Thêm mã giảm giá” 62 Hình 4.21 Hình ảnh hình “Cập nhật mã giảm giá” 63 Hình 4.22 Hình ảnh bắt đầu sử dụng bot 67 Hình 4.23 Hình ảnh tin nhắn bot có sẵn nút tính 68 Hình 4.24 Hình ảnh hình thiết kế kịch 69 Hình 4.25 Hình ảnh hình sơ đồ kịch 70 Hình 4.26 Hình ảnh bot trả lời theo tin nhắn cần hỗ trợ 71 Hình 4.27 Hình ảnh bot trả lời tin nhắn người dùng 71 Hình 4.28 Hình ảnh bot trả lời tin nhắn người dùng 72 Hình 4.29 Hình ảnh bot trả lời tin nhắn người dùng 72 Hình 4.30 Hình ảnh tính máy học “Câu mẫu” 73 Hình 4.31 Hình ảnh tính máy học “Ý định” 74 Hình 4.32 Hình ảnh tính máy học “Loại thực thể” 75 Hình 4.33 Hình ảnh tính máy học “Từ khóa” 76 Hình 4.34 Hình ảnh tính máy học “Từ điển” 77 Hình 4.35 Màn hình nhân viên hỗ trợ 78 Hình 4.36 Hình ảnh hình thống kê 80 Hình 4.37 Hình ảnh hình lịch sử 81 Hình 4.38 Hình ảnh chat bot tương tác với người dùng trang web 82 Hình 4.39 Hình ảnh chat bot tương tác với người dùng trang facebook 82 Hình 4.40 Kịch hồn trả hàng 83 Hình 4.41 Chatbot gợi ý sản phẩm 84 Hình 4.42 Chatbot xác nhận thông tin đơn hàng 85 Hình 4.43 Chatbot yêu cầu thông tin 86 Hình 4.44 Chatbot yêu cầu nhập địa 86 Hình 4.45 Tạo đơn hàng thành cơng 87 DANH MỤC BẢNG Bảng 1.1 Thơng tin thành viên nhóm Bảng 3.1 Danh sách use-case 14 Bảng 3.2 Đặc tả use-case Đăng nhập 15 Bảng 3.3 Đặc tả use-case Đăng ký 16 Bảng 3.4 Đặc tả use-case Đăng xuất 16 Bảng 3.5 Đặc tả use-case Quản lý thông tin cá nhân 17 Bảng 3.6 Đặc tả use-case Chỉnh sửa thông tin cá nhân 18 Bảng 3.7 Đặc tả use-case Đổi mật 18 Bảng 3.8 Đặc tả use-case Tìm kiếm sản phẩm 19 Bảng 3.9 Đặc tả use-case Mua hàng 20 Bảng 3.10 Đặc tả use-case Tra cứu đơn hàng 21 Bảng 3.11 Đặc tả use-case Đánh giá sản phẩm 22 Bảng 3.12 Đặc tả use-case “Chat với người bán” 22 Bảng 3.13 Đặc tả use-case “Bán hàng” 23 Bảng 3.14 Đặc tả use-case Tra cứu đơn bán 24 Bảng 3.15 Đặc tả use-case “Quản lý thông tin sản phẩm” 25 Bảng 3.16 Đặc tả use-case “Quản lý kho hàng” 26 Bảng 3.17 Đặc tả use-case “Thống kê” 28 Bảng 3.18 Đặc tả use-case “Quản lý mã giảm giá” 28 Bảng 3.19 Danh sách bảng liệu 31 Bảng 3.20 Chi tiết bảng Account 32 Bảng 3.21 Chi tiết bảng Address 32 Bảng 3.22 Chi tiết bảng Product 33 Bảng 3.23 Chi tiết bảng Color 33 Bảng 3.24 Chi tiết bảng ProductInCart 34 Bảng 3.25 Chi tiết bảng ProductInFavorite 34 Bảng 3.26 Chi tiết bảng ProductInBill 34 Bảng 3.27 Chi tiết bảng Bill 35 Bảng 3.28 Chi tiết bảng Evaluate 35 Bảng 3.29 Chi tiết bảng DiscountCode 35  Loại thực thể: câu nói mang liệu từ người dùng, loại thực thể giúp mô tả ý nghĩa loại liệu Hình 4.32 Hình ảnh tính máy học “Loại thực thể” 75  Từ khóa: thông tin quan trọng câu mẫu, định đến logic trả lời Bot Mỗi từ khóa thể ý nghĩa biểu trưng đó, định nghĩa Loại thực thể Hình 4.33 Hình ảnh tính máy học “Từ khóa” 76  Từ điển: Thay bổ sung đa dạng câu mẫu phương pháp thủ công, người xây dựng thêm vào Từ điển từ thay thế, từ đồng nghĩa với từ cụm từ có sẵn Câu mẫu, giúp khả nhận diện Ý định bot xác Hình 4.34 Hình ảnh tính máy học “Từ điển” 4.2.3.4 Tư vấn trực tiếp  Chức tư vấn trực tiếp sử dụng người dùng muốn hỗ trợ chuyên sâu 77 Hình 4.35 Màn hình nhân viên hỡ trợ 78 4.2.3.5 Thớng kê 79 Hình 4.36 Hình ảnh màn hình thớng kê 80 4.2.3.6 Lịch sử Hình 4.37 Hình ảnh màn hình lịch sử 81 4.2.3.7 Liên kết - Liên kết trang web Hình 4.38 Hình ảnh chat bot tương tác với người dùng trang web - Liên kết facebook Hình 4.39 Hình ảnh chat bot tương tác với người dùng trang facebook 82 4.2.4 Một số kịch đã xây dựng 4.2.4.1 Kịch bản hoàn trả hàng Hình 4.40 Kịch hồn trả hàng Khi người dùng có nhu cầu hồn trả hàng, chatbot đưa thơng tin sách hồn trả hàng cách người dùng liên hệ với người bán để yêu cầu hoàn trả hàng 83 4.2.4.2 Kịch bản mua hàng với chatbot Hình 4.41 Chatbot gợi ý sản phẩm Khi người dùng bấm vào “Mua ngay”, chatbot tạo đơn hàng để người dùng xác nhận lại thơng tin 84 Hình 4.42 Chatbot xác nhận thông tin đơn hàng Chatbot yêu cầu người dùng nhập thông tin địa giao hàng 85 Hình 4.43 Chatbot u cầu thơng tin Hình 4.44 Chatbot yêu cầu nhập địa 86 Hình 4.45 Tạo đơn hàng thành cơng Sau nhập đầy đủ thông tin, chatbot thông báo tạo đơn hàng thành công 87 KẾT LUẬN  Ưu điểm - Vì cơng nghệ sử dụng để xây dựng giao diện ReactJS, nên ứng dụng SPA (Single Page Application) Cũng nên hạn chế việc tải lại trang, giúp nâng cao tốc độ phản hồi trải nghiệm người dùng - Giao diện tối giản dễ sử dụng Hầu cần nhìn vào biết cách sử dụng Tuy nhiên có tính thẩm mỹ, không bị đơn điệu thiết kế - Tông màu chủ đạo màu xanh, tạo cảm giác thoải mái cho người dùng sử dụng lâu dài - Có sử dụng thiết kế bo trịn kết hợp đổ bóng đại - Đã tích hợp hệ thống giao tiếp tự động với người dùng thông qua Chatbot - Hệ thống mã nguồn tổ chức khoa học, dễ dàng bảo trì nâng cấp Đáp ứng chức website thương mại điện tử  Hạn chế - Mới đáp ứng tính bản, chưa đa dạng website thương mại điện tử lớn có - Vì quỹ thời gian có hạn nên chưa thể xây dựng ứng dụng mobile, giúp trải nghiệm người dùng thiết bị di động tối ưu  Hướng phát triển - Nâng cao hiệu suất trang web, đáp ứng nhiều lượt truy cập lúc - Xây dựng ứng dụng mobile Bổ sung thêm tính năng: quản lý khách hàng thân thiết, tự động gợi ý chương trình khuyến mãi, - Áp dụng AI để gợi ý sản phẩm thông minh - Đa dạng hoá kịch chatbot 88 TÀI LIỆU THAM KHẢO [1] “Tài liệu FPT.AI Conversation” – FPT.AI Documentation https://docs.fpt.ai/docs/vi/conversation/documentation/introduction (accessed May 19, 2023) [2] “Tài liệu ReactJS” – ReactJS.org - https://reactjs.org/docs/gettingstarted.html (accessed May 12, 2023) [3] “MongoDB Documentation” – MongoDB - https://www.mongodb.com/docs/ (accessed June 24, 2023) [4] “Beginning MERN Stack” - Greg Lim (2021) [5] “Chuỗi slide giảng Công nghệ Web ứng dụng” - Th.S Trần Anh Dũng Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin (2022) [6] “Biểu mẫu khố luận tốt nghiệp” – Khoa Cơng nghệ Phần mềm, Trường Đại học Công nghệ Thông tin (2020) 89