Xây dựng website thương mại điện tử với chatbot tư vấn

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM 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 : Trần Đoàn Phương - 19520230 Sinh viên thực : Đỗ Đức Tâm - 19520253 Lớp SE122.N11 : TP HCM, tháng 12 năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM 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 : Trần Đoàn Phương - 19520230 Sinh viên thực : Đỗ Đức Tâm - 19520253 Lớp SE122.N11 : TP HCM, tháng 12 năm 2022 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc   ĐỀ 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 Tên đề tài tiếng Anh: BUILDING AN E-COMMERCE WEBSITE WITH CONSULTING CHATBOT Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 5/9/2022 đến ngày 31/12/2022 Sinh viên thực hiện: Trần Đoàn Phương – 19520230 Đỗ Đức Tâm - 19520253 Nội dung đề tài: Giới thiệu: - Trong suốt lịch sử phát triển loài người, nhu cầu mua bán, trao đổi hàng hố ln nhu cầu thiết yếu Trước đây, người mua sắm thông qua buổi họp chợ, sau hệ thống siêu thị, cửa hàng tiện lợi đời, giúp dễ dàng việc mua bán Tuy nhiên, thời đại công nghệ phát triển nay, mua sắm online ngày phổ biến hơn, đặc biệt giới trẻ - Có thể thấy nhiều ưu điểm vượt trội mua sắm online so với mua trực tiếp truyền thống: o Nhanh chóng: vài thao tác để tìm mặt hàng cần o Tiện lợi: khơng cần trực tiếp cửa hàng, mua đâu vào thời gian o Đa dạng mặt hàng: gần tìm thấy tất mặt hàng trang thương mại điện tử o Dễ dàng lựa chọn: so sánh sản phẩm dựa vào lượt đánh giá người mua trước, dễ dàng cân nhắc mua sản phẩm o Giá tốt: cạnh tranh giá sàn thương mại điện tử cao nên sản phẩm thường có giá rẻ ngồi thị trường - Hiện có nhiều website thương mại điện tử phổ biến Việt Nam Shopee, Tiki, Sendo, Lazada, - Nhận thấy tiềm phát triển ngành thương mại điện tử, nhóm em mong muốn tự tạo nên website thương mại điện tử riêng mình, lí chúng em chọn đề tài Mục tiêu: - Xây dựng website thương mại điện tử đáp ứng tiêu chí: o Giao diện thân thiện, dễ sử dụng o Đáp ứng tính cần có website thương mại điện tử o Tích hợp chatbot tư vấn giúp dễ dàng việc tra cứu thông tin Phạm vi: • Phạm vi mơi trường: o Triển khai sản phẩm đề tài môi trường web • Phạm vi chức năng: o Quản lý sản phẩm theo danh mục o Tìm kiếm sản phẩm o Quản lý tài khoản, thông tin khách hàng theo đối tượng o Quản lý giỏ hàng, toán o Quản lý, tra cứu thơng tin đơn hàng o Tích hợp chatbot tư vấn o Tích hợp tốn online o Quản lý mã giảm giá Đối tượng: - Người bán có nhu cầu bán sản phẩm - Khách hàng có nhu cầu mua sản phẩm Phương pháp thực hiện: - Trải nghiệm website thương mại điện tử có, từ phân tích, xác định tính cần triển khai - Nâng cấp, bổ sung tính từ sản phẩm Đồ án - Lập kế hoạch, phân công công việc cho thành viên - Tìm hiểu cơng nghệ sử dụng - Triển khai xây dựng website theo kế hoạch đề - Kiểm thử, phát sửa lỗi (nếu có) - Báo cáo đồ án Cơng nghệ: - Sử dụng MERN Stack để triển khai ứng dụng: MongoDB, ExpressJS, ReactJS, NodeJS Kết mong đợi - Tạo website với giao diện đại, thân thiện dễ sử dụng - Nâng cao trải nghiệm người dùng - Bổ sung thêm số tính hữu ích - Nâng cấp chatbot để hỗ trợ tra cứu thơng tin tốt - Có tính tiến hố: phát triển, mở rộng thêm tính tương lai - Quá trình thực đạt tiến độ môn học Kế hoạch thực hiện: Thời gian Công việc thực Từ 05/09/2022 đến Trao đổi, thống tính 17/09/2022 quy trình thực đồ án Từ 18/09/2022 đến Tìm hiểu cơng nghệ sử dụng: MongoDB, 18/10/2022 ExpressJS, ReactJS, NodeJS Từ 19/10/2022 đến Lên ý tưởng thiết kế giao diện, vẽ phác 31/10/2022 thảo giao diện Thành viên thực Cả thành viên Cả thành viên Trần Đoàn Phương Front-end: triển khai cài đặt hình Đăng Từ 01/11/2022 đến nhập, Đăng ký, Trang chủ 25/11/2022 Back-end: thiết lập sở liệu, thực Cả thành viên chức quản lý tài khoản Front-end: triển khai cài đặt hình Từ 26/11/2022 đến 10/12/2022 Quản lý tài khoản, Giỏ hàng, u thích, Thanh tốn Cả thành viên Back-end: thực chức quản lý sản phẩm, giỏ hàng, u thích Trần Đồn Phương: triển khai hình cịn lại, bắt đầu ghép phần cơng việc với Từ 11/12/2022 đến 24/12/2022 Đỗ Đức Tâm: tìm hiểu chatbot cách thực Cả thành viên phương thức tốn online, làm báo cáo Trần Đồn Phương: Tiếp tục thực chỉnh Từ 25/12/2022 đến sửa hồn thành tính 31/12/2022 Đỗ Đức Tâm: kiểm tra lỗi Cả thành viên Sau deploy hoàn thiện sản phẩm TP HCM, ngày 21 tháng 02 năm 2022 Xác nhận CBHD Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Trần Đoàn Phương Đỗ Đức Tâm MỤC LỤC ĐỀ CƯƠNG CHI TIẾT MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG BIỂU 11 Chương GIỚI THIỆU ĐỀ TÀI 14 1.1 Tên đề tài 14 1.2 Lí chọn đề tài 14 1.3 Mô tả sản phẩm 14 1.4 Chức 14 1.5 Công nghệ sử dụng 16 1.6 Thơng tin nhóm 16 Chương CƠ SỞ LÝ THUYẾT 17 2.1 HTML 17 2.2 CSS 18 2.3 JavaScript 18 2.4 Thư viện React.JS 20 2.5 Node.JS 22 2.6 Express.JS 23 2.7 MongoDB 24 Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 25 3.1 Mô hình hệ thống 25 3.2 Sơ đồ Use-case 26 3.3 Danh sách use-case 27 3.4 Đặc tả use-case 27 3.4.1 Use-case “Đăng nhập” 27 3.4.2 Use-case “Đăng ký” 28 3.4.3 Use-case “Đăng xuất” 29 3.4.4 Use-case “Quản lý thông tin cá nhân” 30 3.4.5 Use-case “Mua hàng” 32 3.4.6 Use-case “Tra cứu đơn hàng” 33 3.4.7 Use-case “Bán hàng” 34 3.4.8 Use-case “Tra cứu đơn bán” 35 3.4.9 Use-case “Quản lý thông tin sản phẩm” 36 3.4.10 Use-case “Quản lý mã giảm giá” 37 Chương THIẾT KẾ DỮ LIỆU 39 4.1 Sơ đồ logic 39 4.1.1 Bảng “Account” 40 4.1.2 Bảng “Address” 40 4.1.3 Bảng “Product” 40 4.1.4 Bảng “Color” 41 4.1.5 Bảng “ProductInCart” 41 4.1.6 Bảng “ProductInFavorite” 42 4.1.7 Bảng “ProductInBill” 42 4.1.8 Bảng “Bill” 42 4.1.9 Bảng “Evalute” 43 4.1.10 Bảng “DiscountCode” 43 Chương THIẾT KẾ GIAO DIỆN 44 5.1 Danh sách hình 44 5.2 Chi tiết hình 46 5.2.1 Màn hình “Đăng nhập” 46 5.2.2 Màn hình “Đăng ký” 47 5.2.3 Màn hình “Trang chủ” 48 5.2.4 Màn hình “Danh sách sản phẩm” 50 5.2.5 Màn hình “Chi tiết sản phẩm” 52 5.2.6 Màn hình “Giỏ hàng” 53 5.2.7 Màn hình “Yêu thích” 55 5.2.8 Màn hình “Yêu cầu đăng nhập” 56 5.2.9 Màn hình “Hồ sơ” 57 5.2.10 Màn hình “Cửa hàng” 58 5.2.11 Màn hình “Đơn mua” 59 5.2.12 Màn hình “Đơn bán” 60 5.2.13 Màn hình “Tài khoản” 61 5.2.14 Màn hình “Thêm sản phẩm” 62 5.2.15 Màn hình “Mã giảm giá” 64 5.2.16 Màn hình “Chi tiết đơn mua” 65 5.2.17 Màn hình “Chi tiết đơn bán” 66 5.2.18 Màn hình “Sửa sản phẩm” 67 5.2.19 Màn hình “Thêm mã giảm giá” 68 5.2.20 Màn hình “Cập nhật mã giảm giá” 68 Chương CHAT BOT TƯ VẤN 70 6.1 Giới thiệu chat bot FPT.AI 70 6.1.1 Phạm vi mục đích 70 6.1.2 Tổng quan quy trình 71 6.2 Danh sách chức sử dụng 71 6.3 Chi tiết chức 72 6.3.1 Kịch có sẵn 72 6.3.2 Kịch theo tin nhắn người dùng 74 6.3.3 Hỗ trợ máy học 76 6.3.4 Tư vấn trực tiếp 81 6.3.5 Thống kê 82 6.3.6 Lịch sử 83 6.3.7 Liên kết 84 Chương KẾT LUẬN 85 7.1 Ưu điểm 85 7.2 Hạn chế 85 7.3 Hướng phát triển 85 TÀI LIỆU THAM KHẢO 86 Kịch theo tin nhắn Loại kịch để trả lời theo tin nhắn người người dùng dùng Hỗ trợ máy học Các tính hỗ trợ máy học Tư vấn trực tiếp Chức tư vấn trực tiếp để tư vấn chuyên sâu Thống kê Thống kê, báo cáo hoạt động bot Lịch sử Hiển thị lịch sử chat bot Liên kết Liên kết với website, facebook Bảng 6.1 Bảng danh sách chức chat bot 6.3 Chi tiết chức 6.3.1 Kịch có sẵn • Kịch có sẵn tính chat bot, người dùng cần bấm theo nút tin nhắn để tiếp tục Hình 6.1 Hình ảnh bắt đầu sử dụng bot 72 Hình 6.2 Hình ảnh tin nhắn bot có sẵn nút tính • Các kịch dễ dàng thiết kế Hình 6.3 Hình ảnh màn hình thiết kế kịch bản 73 Hình 6.4 Hình ảnh màn hình sơ đồ kịch bản 6.3.2 Kịch theo tin nhắn người dùng • Ngồi việc bấm theo nút tin nhắn bot, người dùng hồn tồn nhắn tin trực tiếp cho bot • Dưới kịch người dùng nhắn cần hỗ trợ, cần mua áo o Cần hỗ trợ Hình 6.5 Hình ảnh bot trả lời theo tin nhắn cần hỗ trợ 74 o Cần mua áo Hình 6.6 Hình ảnh bot trả lời tin nhắn người dùng Hình 6.7 Hình ảnh bot trả lời tin nhắn người dùng 75 Hình 6.8 Hình ảnh bot trả lời tin nhắn người dùng 6.3.3 Hỗ trợ máy học • Đây tính giúp bot “thơng minh” hơn, bot hiểu tin nhắn người dùng với câu học từ trước 76 o Câu mẫu Hình 6.9 Hình ảnh tính máy học “Câu mẫu” 77 o Ý định Hình 6.10 Hình ảnh tính máy học “Ý định” 78 o Loại thực thể Hình 6.11 Hình ảnh tính máy học “Loại thực thể” 79 o Từ khóa Hình 6.12 Hình ảnh tính máy học “Từ khóa” 80 o Từ điển Hình 6.13 Hình ảnh tính máy học “Từ điển” 6.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 Hình 6.14 Màn hình nhân viên hỗ trợ 81 6.3.5 Thống kê Hình 6.15 Hình ảnh màn hình thống kê 82 6.3.6 Lịch sử Hình 6.16 Hình ảnh màn hình lịch sử 83 6.3.7 Liên kết • Liên kết trang web Hình 6.17 Hình ảnh chat bot tương tác với người dùng trang web • Liên kết facebook Hình 6.18 Hình ảnh chat bot tương tác với người dùng trang facebook 84 Chương KẾT ḶN 7.1 Ư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 ❖ 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 ❖ Đáp ứng chức website thương mại điện tử đơn giản ❖ Hệ thống chia tách riêng biệt Client Server, dễ dàng phát triển, bảo trì nâng cấp 7.2 Hạn chế ❖ Vì hướng đến tối giản nên website chưa bắt mắt số trang thương mại điện tử khác ❖ Bởi đồ án nhóm sử dụng MERN Stack, nên thành viên nhiều thời gian để học hỏi sửa lỗi ❖ Hiện website có trải nghiệm tốt thiết bị máy tính, chưa tương thích giao diện với hình nhỏ ❖ Chưa hỗ trợ tính chi phí vận chuyển đến vị trí địa lý khác 7.3 Hướng phát triển Trong tương lai, nhóm em mong muốn phát triển tiếp sản phẩm đồ án này: ➢ Nâng cao hiệu suất trang web, đáp ứng nhiều lượt truy cập cùng lúc ➢ Thêm đối tượng sử dụng để đáp ứng nhu cầu thực tế người vận chuyển, người kiểm duyệt ➢ Bổ sung tính năng: quên mật khẩu, kiểm kho, … ➢ Nâng cao bảo mật cho trang web 85 TÀI LIỆU THAM KHẢO [1] HTML – Bách khoa toàn thư Wikipedia tiếng Việt - https://vi.wikipedia.org/wiki/HTML [2] CSS ? – TopDev - https://topdev.vn/blog/css-la-gi/ [3] CSS ? Lịch sử phát triển phiên CSS – Software4win https://software4win.com/css-la-gi/ [4] JavaScript gì? Kiến thức ngơn ngữ lập trình JS – Bizfly Cloud https://bizflycloud.vn/tin-tuc/javascript-la-gi-va-no-hoat-dong-nhu-the-nao20181123142006163.htm#:~:text=JavaScript%20%C4%91%C6%B0%E1%BB%A3c %20b%E1%BA%AFt%20%C4%91%E1%BA%A7u%20v%C3%A0o,nh%C3%BAng %20v%C3%A0o%20Scheme%20Programming%20language [5] Hướng dẫn xây dựng ứng dụng full stack sử dụng MERN Stack – Henry Web Dev - https://www.youtube.com/watch?v=rgFd17fyM4A [6] Chuỗi video Hướng dẫn sử dụng FPT.AI Conversation – FPT.AI https://youtube.com/playlist?list=PLfYi-Ru_DaqNqJbP5DX_nVt4LSLHsZwzi [7] Tài liệu FPT.AI Conversation – FPT.AI Documentation - https://docs.fpt.ai/docs/vi/conversation/documentation/introduction [8] Tài liệu ReactJS – ReactJS.org - https://reactjs.org/docs/getting-started.html [9] Th.S Trần Anh Dũng – Chuỗi slide giảng Công nghệ Web ứng dụng - Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin [10] Th.S Trần Thị Hồng Yến (2022) - Mẫu báo cáo môn học – Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin 86 ... tài - Xây dựng website thương mại điện tử với chatbot tư vấn - Building an E-Commerce website with consulting chatbot 1.2 Lí chọn đề tài Với phát triển nhanh chóng ngành thương mại điện tử, mua... tài Mục tiêu: - Xây dựng website thương mại điện tử đáp ứng tiêu chí: o Giao diện thân thiện, dễ sử dụng o Đáp ứng tính cần có website thương mại điện tử o Tích hợp chatbot tư vấn giúp dễ dàng... nhiều website thương mại điện tử phổ biến Việt Nam Shopee, Tiki, Sendo, Lazada, - Nhận thấy tiềm phát triển ngành thương mại điện tử, nhóm em mong muốn tự tạo nên website thương mại điện tử riêng