Đề tài ứng dụng chatbot vào phát triển e commerce web

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN Đề tài: ỨNG DỤNG CHATBOT VÀO PHÁT TRIỂN E-COMMERCE WEB GIẢNG VIÊN HƯỚNG DẪN Mai Trọng Khang Nhóm sinh thực Phạm Hớn Tuyền – 19521092 Phạm Gia Bảo – 19521254 TP HỒ CHÍ MINH, tháng 12 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA HỆ THỐNG THÔNG TIN ĐỒ ÁN Đề tài: ỨNG DỤNG CHATBOT VÀO PHÁT TRIỂN E-COMMERCE WEB GIẢNG VIÊN HƯỚNG DẪN Mai Trọng Khang Nhóm sinh thực Phạm Hớn Tuyền – 19521092 Phạm Gia Bảo – 19521254 TP HỒ CHÍ MINH, tháng 12 2022 LỜI CẢM ƠN Để hoàn thành dự án cho môn Đồ án này, chúng em xin gửi lời cảm ơn chân thành đến: Thầy Mai Trọng Khang tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực đồ án mơn học mà cịn hành trang tiếp bước cho chúng em trình học tập thực khóa luận tốt nghiệp sau Trong trình làm đồ án chúng em khơng tránh khỏi sai sót, chúng em kính mong nhận dẫn góp ý thầy để đồ án hoàn thiện Chúng em xin chân thành cảm ơn Xin chúc điều tốt đẹp đồng hành thầy TP.HCM, ngày 24 tháng 12 năm 2022 Nhóm sinh viên PHẠM HỚN TUYỀN PHẠM GIA BẢO ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Ứng dụng cung cấp dịch vụ mua bán đồ nội thất online Cán hướng dẫn: Giảng viên Mai Trọng Khang Thời gian thực hiện: Từ ngày 30/09/2022 đến ngày 10/01/2023 Sinh viên thực hiện: Phạm Hớn Tuyền – 19521092 Phạm Gia Bảo – 19521254 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 Nghiên cứu cơng nghệ lập trình website ngơn ngữ JavaScript, xây dựng Frontend ReactJS, xây dựng Backend ngôn ngữ JavaScript sử dụng NodeJS Express framework, hệ quản trị sở liệu…., nghiệp vụ hay bước xử lý toán đặc trưng ứng dụng bán hàng online cụ thể đồ án cung cấp dịch vụ mua bán trực tiếp, hiểu cách xử lý liệu để giảm thiểu thời gian tải, gia tăng hiệu suất ứng dụng, giải đa dạng hàng hóa Nhiệm vụ Đề tài “Ứng dụng cung cấp dịch vụ mua bán đồ nội thất” ứng dụng chạy trình duyệt web chạy trình duyệt Ứng dụng gồm có phần: Ứng dụng xây dựng cho người bán, ứng dụng xây dựng cho người mua ứng dụng website backend truy vấn liệu viết Javascript • • • • • Ứng dụng người tiêu dùng: Đăng kí Đăng nhập Xem Sản phẩm Tìm kiếm sản phẩm Xem Chi tiết sản phẩm • • • • • • • • • • • Lọc sản phẩm theo thể loại trang trí Thêm sản phẩm vào giỏ hang Quản lý giỏ hàng Đặt hàng Trả ví Paypal Quản lý thông tin cá nhân Quản lý địa Quản lý đơn hàng Hủy đơn hàng Xem chi tiết đơn hàng Chatbot ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ Ứng dụng người bán hàng: Đăng nhập hệ thống Tìm kiếm sản phẩm Quản lý sản phẩm Quản lý kho Quản lý đơn đặt hàng Cập nhật trạng thái giao hàng Hủy đơn hàng Quản lý người dùng Báo cáo doanh thu • • • • • • Phương pháp thực hiện: Tìm hiểu quy trình nghiệp vụ mua bán hàng có Tìm hiểu nghiệp vụ, quy trình hoạt động shop mua sắm đồ nội thất Phác họa hệ thống tổng quát (thiết kế liệu, xử lý liệu…) Tham khảo ứng dụng tương tự: Nhà xinh, Phố xinh, Shopee, Tiki, … Tham khảo ý kiến giảng viên hướng dẫn để định hướng đúng, đạt kết tốt Thiết kế giao diện, sở liệu đáp ứng yêu cầu cho ứng dụng Kết mong đợi Đối với kết mong đợi chung: • Xây dựng cách xử lý toán tải liệu tăng hiệu suất • Biết kỹ thuật lập trình với JavaScript, ReactJS, SCSS, TailwindCSS, Axios, Redux, Antd, NodeJS, ExpressJS, MongoDB, Mongoose, JsonWebToken, Bcrypt • Hoàn thành ứng dụng với giao diện trực quan, hoạt động tốt tảng trình duyệt (mobile desktop) • Giải tốn đa dạng hàng hóa Đối với ứng dụng bên mua: • Với khách hàng người dùng chưa đăng nhập, xem sản phẩm, tìm kiếm sản phẩm đăng ký tài khoản • Với khách hàng người mua đăng nhập thực chức xem sản phẩm, quản lý giỏ hàng, quản lý địa giao hàng, tạo đơn hàng, xem tình trạng đơn hàng, hủy đơn hàng Đối với ứng dụng bên bán • Với khách hàng cửa hàng đăng nhập quản lí, thực CRUD sản phẩm, thực cập nhật trạng thái giao hàng, hủy đơn hàng phát bất thường, thực quản lý kho… Các tiêu chí khác • Tính thẩm mỹ: Ứng dụng có giao diện dễ nhìn, dễ dàng thực thao tác, khơng gây cảm giác khó chịu hay khó sử dụng cho người dùng Kế hoạch thực Với thời gian thực từ ngày xx/yy/2022 đến ngày xx/yy/2023, nhóm chia thành cơng việc cụ thể sau: STT Công việc Phân công Giai đoạn 1: Khảo sát tìm hiểu ứng dụng, tốn cần giải có liên quan Khảo sát ứng dụng Nhà xinh, Phố xinh, Shopee, Tiki,… Cả hai Tìm hiểu thêm hoạt động khác lĩnh vực thương mại điện tử: liên kết liệu, kiến trúc phần mềm Cả hai Hình toán riêng cho đồ án Cả hai Lập báo cáo khảo sát bao gồm, hình ảnh UI, luồng, bào toán Cả hai Giai đoạn 2: Thiết kế giải toán, phân rã yêu cầu, hình thành chức Thảo luận cách giải toán Cả Hai Viết user-story Cả hai Vẽ use-case Cả hai Vẽ kịch chatbot Cả hai Giai đoạn 3: Tìm hiểu công nghệ liên quan sử dụng Javascript, ReactJS, NodeJS, ExpressJS, Cả hai 10 Antd, MongoDB, Mongoose Cả hai 11 JSON, JWT, BCrypt, Postman, Heroku, Vercel Cả hai 12 Dialogflow Cả hai Giai đoạn 4: Mô tả chi tiết toán, usecase, hoạt động đồ án, thiết kế kiến trúc, UI/UX, sở liệu, class 13 Viết đặc use-case Cả hai 14 Vẽ Sequence Diagram, Activity Diagram Cả hai 15 Thiết kế sơ đồ liệu Cả hai 16 Thiết kế UI/UX Cả hai 17 Thiết kế kiến trúc ứng dụng Cả hai Giai đoạn 5: Tiến hành triển khai xây dựng đồ án 18 Code phần UI/UX cho web bán hàng nội thất Phạm Hớn Tuyền 19 Code phần Model Backend (xây dựng model backend theo bảng thiết kế class diagram – MongoDB CSDL NoSQL nên mơ hình CSDL) Phạm Gia Bảo 20 Xây dựng APIs kết hợp với kiểm thử Postman, sau kết nối với bên UI/UX web Axios Cả hai MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG CHI TIẾT MỤC LỤC DANH MỤC TỪ VIẾT TẮT 10 I - GIỚI THIỆU 11 1.1 Giới thiệu đề tài 11 1.2 Khảo sát người dùng 11 1.3 Giải pháp 15 1.4 Các yêu cầu chức 16 1.5 Các yêu cầu phi chức 17 1.6 Các công nghệ sử dụng 17 1.7 Quản lý Project 18 II - CÔNG NGHỆ & KIẾN TRÚC 2.1 19 Cơng nghệ 19 2.1.1 MongoDB 19 2.1.2 JavaScript 19 2.1.3 ReactJS 20 2.1.4 NodeJS 21 2.1.5 ExpressJS 21 2.1.6 Ant Design 22 2.2 Kiến trúc ứng dụng web 23 2.3 Dialogflow 24 2.3.1 Giới thiệu thuật ngữ chuyên dụng 24 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 Giới thiệu Dialogflow 25 Lý cho việc dùng Dialogflow 25 Các phiên Dialogflow 26 Các thành phần Dialogflow 27 Khả tích hợp 31 III - CHI TIẾT CẤU TRÚC HỆ THỐNG 3.1 32 Mơ hình Usecase 32 3.2 Danh sách Actors 32 3.3 Danh sách Usecases 33 3.4 Đặc tả Usecases 34 3.4.1 Đặc tả Usecase - Quản lý giỏ hàng 34 3.4.2 Đặc tả Usecase – Thêm sản phảm vào giỏ hàng 35 3.4.3 Đặc tả Usecase – Đặt hàng 35 3.4.4 Đặc tả Usecase – Quản lý sản phẩm 36 3.4.5 3.4.6 3.4.7 3.4.8 3.4.9 Đặc tả Usecase - Quản lý hóa đơn 37 Đặc tả Usecase – Cập nhật trạng thái hóa đơn 38 Đặc tả Usecase – Tìm kiếm khách hàng 38 Đặc tả Usecase – Hiển thị thông tin chi tiết sản phẩm 39 Đặc tả Usecase – Đăng nhập 40 3.4.10Đặc tả Usecase – Đăng ký 41 3.4.11Đặc tả Usecase – Thoát 41 3.4.12Đặc tả Usecase – Đổi password 42 3.4.13Đặc tả Usecase – Tìm kiếm sản phẩm 43 3.4.14Đặc tả Usecase – Xem chi tiết hóa đơn 44 3.4.15Đặc tả Usecase – Thay đổi thông tin cá nhân 44 3.4.16Đặc tả Usecase – Quản lý địa giao hàng 45 3.4.17Đặc tả Usecase – Chatbot 46 3.5 Mơ hình Usecase 47 3.5.1 3.5.2 3.5.3 3.5.4 3.5.5 UC1: Quản lý giỏ hàng 47 UC2: Thêm sản phẩm vào giỏ hàng 48 UC3: Đặt hàng 49 UC4: Quản lý sản phẩm 50 UC5: Quản lý hóa đơn 51 3.5.6 UC6: Hiển thị danh sách hóa đơn 52 3.5.7 UC7: Tìm kiếm khách hàng 53 3.5.8 UC8: Hiển thị thông tin chi tiết sản phẩm 54 3.5.9 UC9: Đăng nhập 55 3.5.10UC10: Đăng kí 56 3.5.11UC11: Thoát 57 3.5.12UC12: Đổi password 58 3.5.13UC13: Tìm kiếm sản phẩm 59 3.5.14UC14: Xem chi tiết hóa đơn 60 3.5.15UC15: Thay đổi thông tin nhân 61 3.5.16UC16: Quản lý địa giao hàng 62 3.6 Các sơ đồ Sequence Diagrams 63 IV - GIAO DIỆN NGƯỜI DÙNG Hình ảnh trang chi tiết sản phẩm Hình ảnh trang đăng nhập/đăng ký 79 IV - GIAO DIỆN NGƯỜI DÙNG Hình ảnh trang chi tiết đơn hàng 80 IV - GIAO DIỆN NGƯỜI DÙNG Hình ảnh trang chi tiết giao hàng 81 IV - GIAO DIỆN NGƯỜI DÙNG Hình ảnh trang chi tiết cá nhân dành cho người dùng 82 IV - GIAO DIỆN NGƯỜI DÙNG 83 IV - GIAO DIỆN NGƯỜI DÙNG Hình ảnh trang nhóm chúng em 84 IV - GIAO DIỆN NGƯỜI DÙNG 85 IV - GIAO DIỆN NGƯỜI DÙNG Hình ảnh trang Dashboard (dành cho Admin) Màn hình đăng nhập Màn hình Dashboard 86 IV - GIAO DIỆN NGƯỜI DÙNG Màn hình theo dõi thông tin khách hàng 87 IV - GIAO DIỆN NGƯỜI DÙNG Màn hình theo dõi quản lý đơn hàng 88 IV - GIAO DIỆN NGƯỜI DÙNG Màn hình quản lý sản phẩm 89 IV - GIAO DIỆN NGƯỜI DÙNG Màn hình quản lý danh mục sản phẩm Màn hình quản lý thơng tin cá nhân Admin 90 V - KẾT LUẬN V - KẾT LUẬN 5.1 Giao diện người dùng Về công nghệ ứng dụng Sau tìm hiểu, nghiên cứu phát triển ứng dụng web, nhóm chúng em đạt được: - Hiểu biết ngôn ngữ HTML, CSS Javascript - Hiểu biết sử dụng ReactJS để xây dựng phần Frontend - Hiểu biết sử dụng NodeJS kết hợp ExpressJS để xây dựng phía Backend - Hiểu biết sử dụng MongoDB để xây dựng Database - Hiểu biết sử dụng Postman để kiểm tra API - Sử dụng frameworks Ant Design, TailwindCSS, SCSS để tạo phần thiết kế cho UI - Đáp ứng số yêu cầu bản: o Đăng kí, đăng nhập o Các thao tác việc xem mua sản phẩm trực tuyến o Các thao tác việc gửi liệu qua lại Frontend Backend o Quản lý sản phẩm thông tin liên quan đến sản phẩm o Giao diện thân thiện, dễ sử dụng người dùng o Hiểu biết cách triển khai server backend lên heroku Link github nhóm chúng em: https://github.com/FurnitureShop Về nghiệp vụ mua hàng trực tuyến Ngồi nhóm chúng em tìm hiểu nghiên cứu số quy trình nghiệp vụ việc mua bán hàng hóa trực tuyến - Hiểu biết quy trình nghiệp vụ bán hàng trực tuyến - Hiểu vấn đề thương mại điện tử Giải toán đa dạng hàng hóa Giải tốn đặt hàng 91 V - KẾT LUẬN 5.2 Khó khăn Tuy nhiên, nhóm chúng em cịn vài hạn chế mà khơng thể hoàn toàn khắc phục đồ án lần cần phải cố gắng cho lần sau o Chưa tích hợp việc tốn trực tuyến o Tối ưu code chưa hợp lý nên tốc độ trang web có độ trễ nhỏ việc tải liệu o Chưa có thơng báo nhỏ để thơng báo hay gợi lưu ý dành cho người dùng o Một số tính chưa thực hồn thiện o Một số tính khơng tương thích với trình duyệt cũ o Chatbot chưa thực hồn thiện Việc thiết kế responsive lỗi nhỏ vài điểm số thiết bị 5.3 Hướng phát triển Nhóm chúng em đưa sáng kiến hướng phát triển cho đồ án sản phẩm • Tiếp tục phát triển tính cịn chưa hồn thiện • Tiếp tục cải thiện khả tương tác với chatbot thông qua số cách cho thêm kịch thường gặp người dùng với máy, phân tích thêm câu thoại mà người dùng gửi đến chatbot, tham khảo người dùng kỳ vọng họ tương tác với chatbot, cải thiện phần UI/UX chatbot • Có thể tích hợp số cách tuyến trực tuyến Momo, Zalopay, hay đơn vị ngân hàng khác • Cung cấp thêm số lựa chọn đơn vị vận chuyển • Phát triển tính Coupon - mã thẻ giảm giá • Tối ưu hóa code để cải thiện tốc độ web tăng tốc trải nghiệm cho người dùng • Quản lý chi tiết nghiệp vụ nhập hàng, xuất hàng tồn kho sản phẩm (dành cho Admin) • Cải tiển số thuật tốn việc xử lý backend để giảm thiểu thời gian phải cho việc truy xuất liệu • Cấu trúc lại nguồn code để dễ dàng bảo trì nâng cấp dành cho sau đồ án 92 VI - TÀI LIỆU THAM KHẢO VI - TÀI LIỆU THAM KHẢO Các thư viện dành cho việc xây dựng ứng dụng ReactJS • ReactJS: https://reactjs.org/docs/introducing-jsx.html • Redux: https://redux.js.org/ • React Router: https://reactrouter.com/ • React Hook Form: https://react-hook-form.com/ Các thư viện framework dành cho việc xây dựng UI • TailwindCSS: https://tailwindcss.com/ • SCSS: https://sass-lang.com/ • Template Konsept: https://konsept.qodeinteractive.com/furniture-store/ • Ant Design: https://ant.design/ MongoDB • MongoDB: https://docs.mongodb.com/manual/core/document/ • MongoDB Compass: https://www.mongodb.com/products/compass NodeJS & ExpressJS • NodeJS: https://nodejs.org/en/download/ • ExpressJS: https://expressjs.com/en/api.html Dialogflow • Dialogflow ES documentation: https://cloud.google.com/dialogflow/es/docs Một số nguồn tham khảo khác • Stackoverflow: https://stackoverflow.com/ • Github: https://github.com/ 93 ... Pagination, Steps • Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker, Upload 22 II -... Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table • Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton... Skeleton • Other: Anchor, BackTop, Divider, LocaleProvider 2.2 Kiến trúc ứng dụng web Furniturer phát triển với MERN Stack bao gồm: MongoDB, Express, ReactJS NodeJS Với sức mạnh ReactJS, framework mã