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 HỆ THỐNG XUẤT NHẬP KHO VÀ CHATBOX TƯ VẤN CHO WEBSITE BÁN LAPTOP Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Phạm Võ Di Thiên Mã sinh viên 19522267 : Sinh viên thực : Vòng Minh Huỳnh Mã sinh viên : 19521652 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 HỆ THỐNG XUẤT NHẬP KHO VÀ CHATBOX TƯ VẤN CHO WEBSITE BÁN LAPTOP Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Phạm Võ Di Thiên Mã sinh viên 19522267 : Sinh viên thực : Vòng Minh Huỳnh Mã sinh viên : 19521652 Lớp : SE122.N11 TP HCM, tháng 12 năm 2022 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng hệ thống xuất nhập kho chatbot tư vấn cho website bán laptop 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: Phạm Võ Di Thiên - 19522267 Vòng Minh Huỳnh - 19521652 Nội dung đề tài: Lí chọn đề tài Khách quan: Trong kinh tế nay, nhu cầu trao đổi hàng hóa (mua, bán) diễn vơ sơi dường hoạt động luôn hữu Nhu cầu người mua hàng tăng khả đáp ứng, cung cấp người bán tăng theo Thế việc mua bán trực tiếp trở nên lỗi thời khiến cho chi phí mặt đầu tư người bán hàng trở nên ngày lớn, cộng hưởng thêm người mua hàng xã hội cơng nghệ lại khơng có nhu cầu ngồi gặp trực tiếp người bán hàng Chính điều đó, việc xây dựng hệ thống website bán hàng hệ thống quản lí mảng xuất nhập kho cửa hàng bán vật dụng nói chung, bán đồ cơng nghệ nói riêng ngày đòi hỏi nhanh gọn đáp ứng nhu cầu thực tế Bên cạnh đó, hệ thống bán hàng tiện lợi cho người mua hàng phải mang tính thuận tiện, bảo mật thơng tin cá nhân hay đáp ứng nhu cầu toán, chương trình khuyến mãi, … điều quan trọng việc xây dựng hệ thống cỡ vừa Hơn nữa, với phát triển nhu cầu mang tính đại, tảng hay website mua hàng trực tuyến ngày lại có xu hướng tự động hóa mà biểu website hay tảng có tích hợp chatbot hỗ trợ khách hàng tìm kiếm phân tích nhu cầu khách hàng việc giao tiếp trực tiếp với chúng Nhận thấy thay đổi, phát triền nhu cầu thực tế vấn đề trên, nhóm định tiếp tục phát triển website ComeBuy đồ án để nâng cấp số chức quan trọng xây dựng thêm hệ thống xuất nhập kho phân phối hàng hóa đến chi nhánh chatbot tự động để hỗ trợ khách hàng sử dụng website Chủ quan: Trong trình trải nghiệm làm việc cơng ty q trình học tập trường, nhóm chúng em muốn thử sức việc nâng cấp website tiếp xúc, tìm hiểu xây dựng chatbot tự động để hỗ trợ người dùng website Mục tiêu đề tài - Xây dựng hệ thống phân phối sản phẩm chi nhánh cửa hàng - Xây dựng chatbot hỗ trợ khách hàng - Xây dựng chức xuất report hỗ trợ chủ cửa hàng - Thiết lập live-update cho chức cần thiết Phạm vi đề tài Đề tài tập trung xây dựng website giải toán e-commerce bao gồm ba phân quyền người dùng: Owner – Staff – Customer ➢ Phạm vi môi trường: − Triển khai sản phẩm đề tài môi trường web ➢ Phạm vi chức năng: − Chatbot tư vấn bán hàng − Hệ thống diều phối hàng hóa chi nhánh cửa hàng − Lịch sử xuất nhập kho − Xuất báo cáo cửa hàng Đối tượng sử dụng - Chủ cửa hàng để quản lý sản phẩm, nhân viên - Nhân viên để kiểm tra đơn hàng, quản lý chi nhánh - Khách hàng cửa hàng Phương pháp thực - Phân tích giải pháp website tương tự thị trường - Thực khảo sát nhu cầu, tình trạng thực tế người dùng mua bán hàng online thơng qua website Cơng nghệ sử dụng • Front-end: ReactJS – ReduxToolkit • Back-end: GoogleAPI/NodeJS, ExpressJS, Mongoose connected MongoDB, Sequelize connected PostgreSQL • Security Standard: JWT • Database: MongoDB, PostgreSQL Kết mong đợi - Nắm bắt áp dụng công nghệ để xây dựng hoàn thiện sản phẩm đề tài - Học thêm cách sử dụng websocket, transaction, … chức - Xây dựng hệ thống sử dụng với số lượng liệu lớn Kế hoạch thực hiện: Tuần Tuần (5/9 – 11/9) Công việc Công việc thành viên (Thiên) thành viên (Huỳnh) • Tìm hiểu transaction sequelize Tuần (12/9 – 18/9) • Tìm hiểu số phương thức • Học viết transaction áp hiển thị sản phẩm số dụng vào nghiệp vụ quản lí trang web cửa hàng • Thay đổi vận hành số trang web để tối đa • Gắn transaction cho toàn api quan trọng server hiệu phù hợp với liệu lớn • Tìm kiếm thêm liệu thêm thắt vào hệ thống Tuần (19/9 – 25/9) Tuần (26/9 – 2/10) • Chỉnh sửa hệ thống đặt hàng • Tìm hiểu Websocket • Xây dựng Websocket cho hệ • Tìm hiểu cấu trúc hệ thống thống • Ứng online dụng cơng nghệ Websocket vào số chức có sẵn để tăng hiệu • Xây dựng Live Banner để cập phân phối sản phẩm quan hệ kho tổng – chi nhánh • Xây dựng giao diện Request Product chi nhánh main stock nhật sản phẩm, kiện tới hệ thống Tuần (3/10 – 9/10) Tuần (10/10 – 16/10) • Xây dựng phần lịch sử xuất • Viết api cho phân phối hàng nhập sản phẩm để hỗ trợ cho hóa main stock branch việc quản lý hàng hóa • Tìm hiểu cấu trúc hệ thống chi nhánh • Xây dựng API tương ứng để hỗ trợ testing • Tìm hiểu chat bot thuật tốn AI liên quan • Xây dựng liệu cho chat bot phân phối sản phẩm quan hệ chi nhánh – chi nhánh • Xây dựng giao diện Request Prod chi nhánh chi nhánh • Viết api cho phân phối hàng hóa branch branch Tuần (17/10 – 23/10) Tuần (24/10 – 30/10) • Xây dựng chatbot cho ứng • Xây dựng Admin site cho hệ thống phân phối hàng dụng • Tìm hiểu tính điểm • Viết API liên quan • Đánh giá sản phẩm qua chương trình khuyến • Sửa lỗi giao diện có comment • Viết model đánh giá sản • Hồn thiện chức customer cịn sơ sài phẩm qua comment • Viết lại api cho nghiệp vụ request product phân phối hàng hố stored procedure stored function • Xây dựng hệ thống khuyến Tuần (31/10 – 6/11) Tuần 10 (7/11 – 13/11) Tuần 11 (14/11 – 20/11) • Hoàn thiện giao diện cho website • Hoàn thiện chức cịn thiếu sót • Làm powerpoint kì hàng khách hàng • Thêm chức export Tuần 12 • Review lại hệ thống (21/11 – • Lên kế hoạch cho buổi 27/11) • Cập nhật thêm trạng thái đơn report cho staff • Xây dựng breakcrumb báo cáo • Testing tồn feature sửa chữa có • Testing tồn feature cũ sửa lỗi có Tuần 13 (28/11 – 4/12) • Deloy Heroku Server • Viết tài liệu báo cáo Tuần 14 (5/12 – 11/12) • Deloy Client Vercel • Vẽ sơ đồ cho báo cáo • Vẽ sơ đồ cho báo cáo Tuần 15 Hoàn thành tài liệu báo cáo (12/12 – Chuẩn bị slide thuyết trình 18/12) Tuần 16 Tiến hành báo cáo (19/12 – Tiến hành báo cáo 25/12) Tuần 17 (26/12 – 31/12) TP HCM, ngày 07 tháng 09 năm 2022 Xác nhận CBHD (Ký tên ghi rõ họ tên) Trần Thị Hồng Yến Sinh viên Sinh viên (Ký tên ghi rõ họ (Ký tên ghi rõ họ tên) tên) Thiên Huynh Phạm Võ Di Thiên Vòng Minh Huỳnh LỜI CẢM ƠN Đồ án ‘Xây dựng hệ thống xuất nhập kho chatbot tư vấn cho website bán laptop’ minh chứng cho q trình cố gắng, khơng ngừng việc tìm tịi, học hỏi suốt qng thời gian mà nhóm dành cho mơn học Thể khả thân việc áp dụng kiến thức chuyên mơn vào giải tốn mà nhóm chưa trải nghiệm trước Trong q trình thực đồ án, nhóm nhận hướng dẫn tận tình từ q thầy cơ, giúp đỡ hỗ trợ từ gia đình bạn bè Một cách đặc biệt, nhóm xin gửi lời cảm ơn chân thành đến: • Các thầy trường Đại học Cơng nghệ Thơng Tin nói chung Trần Thị Hồng Yến nói riêng tận tình truyền đạt kiến thức đưa cho nhóm ý kiến suốt thời gian học tập Đó tài sản quý báu giúp nhóm hồn thành đồ án hành trang cho đường nghiệp thân sau • Các thành viên nhóm ln nổ lực phấn đấu, lắng nghe sẵn sàng hỗ trợ suốt trình học tập thực đồ án Để đạt kết ngày hơm • Lời cuối cùng, nhóm xin dành lời cảm ơn gửi tới gia đình, anh chị, bạn bè bên cạnh để động viên đóng góp ý kiến q trình hồn thành đồ án Thành phố Hồ Chí Minh, ngày 05 tháng 09 năm 2022 Nhóm sinh viên thực 4.21 My Favorite Page 4.21.1 Giao diện Hình 21 Giao diện My Favorite Page 4.21.2 Mô tả Bảng 20 Mô tả giao diện My Favorite Page STT Kiểu Tên Navbar Bar Ràng buộc Khơng có Chức Hiển thực tác vụ tắt hệ thống (cart, user, search bar…) pagesBreadcrumb Breadcrumb Khơng có Lối tắt di chuyển đến page đồng thời địa để người dùng biết đâu web searchFavoriteBar AutoComplete Khơng có Hỗ trợ tìm hàng hóa có u thích 96 productItem Box Khơng có Hiển thị sản phẩm yêu thích arrowBtn Button Khơng có Cách thức để xem chi tiết đơn hàng deleteBtn IconButton Khơng có Cho phép xóa hàng hóa khỏi u thích cartBtn IconButton Khơng có Cho phép chuyển hàng hóa đến giỏ hàng để phục vụ đặt hàng floatAction Floating button Khơng có Chứa tác vụ trang yêu thích allToCartBtn IconButton Khơng có Cho phép chuyển tồn u thích đến giỏ hàng 10 allDeleteBtn IconButton Khơng có Cho phép xóa tồn sản phẩm u thích STT Biến cố Xử lí Mousover UI hai tác vụ nhỏ hia icon button đại diện cho floatActions xóa tồn di chuyển tồn đến giỏ hàng Nhấn search Hệ thống dựa vào chuỗi người dùng cung cấp vào tên sản phẩm để thực tìm sản phẩm Nhấn allToCartBtn Hệ thống băt sđầu xử lí đưa tồn hàng u thích hay cartBtn hay hàng hóa thao tác đến giỏ hàng khách hàng Xử lí xong UI cập liệu lên database Nhấn allDeleteBtn Hệ thống xóa tồn hàng hóa hay hàng hóa hay deleteBtn thao tác khỏi dnah sách u thích UI sau thực xóa database Nhấn vào Di chuyển đến trang chi tiết sản phẩm tương ứng productitem 97 4.22 Pre-Access To Profile Page 4.22.1 Giao diện Hình 22 Giao diện Pre-Access To Profile Page 4.22.2 Mô tả Bảng 21 Mô tả giao diện Pre-Access to Profile Page STT Tên avatar, name Kiểu Typography Ràng buộc Khơng có Chức Hiển thị thông tin tên ảnh đại diện người dùng password Textfield Không có Nhập mật người dùng forgotPassBtn Button Khơng có Di chuyển đến trang reset pasword signInBtn Button Khơng có Thực đăng nhập truy cập 98 STT Biến cố Nhập liệu Xử lí UI thực ghi nhận lưu password vào biến tạm password Nhấn forgotPassBtn Hệ thống cho người dùng quên mật chuyển đến trang quên mặt giúp người dùng reset lại mật Nhấn SignInBtn Hệ thống thực thi đăng nhập hợp lệ hay không, hợp lệ chuyển đến trang hồ sơ cá nhân, không hệ thống hiển thị thông báo sai mật đến người dùng 99 4.23 Profile Page 4.23.1 Giao diện Hình 23 Giao diện Profile Page 4.23.2 Mô tả Bảng 22 Mô tả giao diện Profile Page STT Kiểu Tên Navbar Bar Ràng buộc Khơng có Chức Hiển thực tác vụ tắt hệ thống (cart, user, search bar…) pagesBreadcrumb Breadcrumb Khơng có Lối tắt di chuyển đến page đồng thời địa để người dùng biết đâu web Name, contact, TextField Khơng có Cho phép lưu, chứa thông tin người dùng (tên, liên hệ, địa address chỉ) penBtn IcnButton Khơng có Cho phép truy cập chỉnh sửa trường thông tin 100 avatar Image Hiển thị ảnh đại diện người Khơng có dùng từ hệ thống người dùng chọn photoBtn IconButton Cho phép người dùng thực Khơng có mở sổ chọn ảnh đại diện từ máy stickBtn IconButton Cho phép mở modal thơng tin Khơng có điểm số xếp hạng, ưu đãi tương ứng rank Progress + Icon Hiển thị cấp bậc tài khoản Khơng có người dùng birthdayPicker Cho phép chọn ngày sinh hay DateTimePicker Khơng có hiển thị ngày sinh từ hệ thống 10 genderPicker Selection Cho phép chọn giới tính hay Khơng có hiển thị giới tính từ hệ thống 11 saveBtn Button Thực lưu thông tin giới Không có tính ngày sinh chỉnh sửa STT Biến cố Nhập liệu Xử lí Mỗi nhấn penBtn bên phải thông tin, hệ thống xuất hộp thoại cho phép chỉnh sửa thông tin cá nhân → nhấn save hộp thoại hệ thống bắt đầu validate thông tin hợp lệ hay không để lưu lên database Nhấn save Hệ thống thực lưu thơng tin giới tính ngày sinh thay đổi vào database 4.24 Checkout Now Page 4.24.1 Giao diện 101 Hình 24 Giao diện Checkout Now Page 4.24.2 Mô tả Bảng 23 Mô tả giao diện Checkout Now Page STT Tên Kiểu avatar, name, contact, Typography, address Ràng buộc Khơng có Chức Hiển thị thông tin khách Textfield, hàng, cho phép nhập để Avatar đại diện cho đơn hàng đặt Province, District, Selection Phải Chọn địa nhận hàng chọn theo thứ Commune tự: tỉnh – huyện – xã Mycart Button Khơng có Cho phép quay giỏ hàng continueBtn Button Khơng có Tiếp tục đặt hàng việc đến hồn thành tốn 102 Biến cố STT Nhập liệu Xử lí Ui lưu thơng tin liệu nhập, validate hợp lí người dùng nhấn vào continueBtn có thông báo không hợp lệ Nhấn continueBtn Hệ thống di chuyển đến tác vụ toán đơn hàng liệu nhập vào đầy đủ hợp lí 4.25 Banner Management Page 4.25.1 Giao diện Hình 25 Giao diện Payment Page 4.25.2 Mô tả Bảng 25 Mô tả giao diện Banner STT Tên AddBannerBtn Kiểu Button Ràng buộc Khơng có Chức Chọn để mở hộp thoại thêm Banner BannerItem Card Khơng có Hiển thị thơng tin Banner DeleteBtn Button Khơng có Xóa Banner 103 Biến cố STT Nhấn vào nút Add Xử lí Hệ thống dẫn tới hình thêm Banner Banner Nhấn vào nút Delete Hệ thống xóa Banner Banner Item 4.26 Log Management Page 4.26.1 Giao diện Hình 26 Mơ tả giao diện Log 4.26.2.Mô tả Bảng 26 Mô tả giao diện Log Page STT Tên Item Kiểu Card Ràng buộc Khơng có Chức Hiển thơng tin Log 4.27 Coupon Management Page 4.27.1 Giao diện 104 Hình 27 Giao diện Coupon management Page 4.27.2 Mô tả Bảng 27 Mô tả giao diện Coupon Management Page STT Tên statusSelect Kiểu Select Ràng buộc Chức Chọn phương kiểu coupon Khơng có hiển thị couponTypeSelect Select Chọn phương kiểu coupon Khơng có hiển thị CouponList Grid Table Hiển thị danh sách Khơng có coupon có hệ thống STT Biến cố Xử lí Nhấn chọn Hệ thống load liệu ứng với lựa chọn mà admin chọn Nhấn statusSelect couponTypeSelect tương tự 4.28 Promotion Management Page 4.28.1 Giao diện 105 Hình 28 Mô tả giao diện Promotion Management Page 4.28.2 Mô tả Bảng 28 Mô tả giao diện Promotion Management Page STT Tên ItemPack Kiểu Card Ràng buộc Khơng có Chức Hiển thị thơng tin Pack giảm giá ItemProduct RadioButtn Khơng có Hiển thị thơng tin sản phẩm Pack DeletePackBtn Biến cố STT Butotn Nhấn vào Item Pack Khơng có Chọn để xóa Pack Xử lí Hệ thống hiển thị thơng tin sản phẩm nằm pack giảm giá Nhấn vào nút Delete Hệ thống xóa Pack khỏi danh sách giảm giá Pack 106 4.29 Branch Distribution Page 4.29.1 Giao diện Hình 29 Giao diện Distribution Page 4.29.2 Mô tả Bảng 29 Mô tả giao diện Payment Page Tên Kiểu currentBranchCircleBtn IconButton Không có Hiển thị Menu requestCircleBtn IconButton Khơng có Hiển thị Menu branchCard Card Khơng có Hiển thị thơng tin branch requestCard Card Khơng có Hiển thị thơng tin request STT Biến cố STT Nhấn Ràng buộc Chức Xử lí Hiển thị danh sách chức nghiệp cho admin trang currentBranchCircleBtn Nhấn requestCircleBtn Hiển thị danh sách chức nghiệp cho admin trang 107 Chương 5: KẾT LUẬN 5.1 Ưu điểm đồ án: 5.1.1 Về giao diện - Nhờ linh hoạt công việc nghiên cứu, luyện tập ứng dụng công nghệ (React JS, …) nên đồ án design cách nhanh chóng, ý nhóm - Nhóm có tinh chỉnh màu sắc, giao diện để phù hợp so với ban đầu 5.1.2 Về chức (khả ứng dụng thực tế) - Thêm vào đó, chúng em cịn kết hợp thêm Machine Learning vào đồ án để làm thêm chức chatbox, xử lý thông tin comment người dùng, Điều vừa chứng minh tìm tịi học hỏi sáng tạo nhóm - Và chúng em tiến hành cải cách logic số function để khiến chúng hoạt động đắn số trường hợp phù hợp với liệu lớn - Phần Recommend System thêm thắt số sản phẩm bán chạy shop - Thêm transaction sử dụng stored produce function PostgresSQL để tối ưu - 5.2 Thêm chức phục vụ cho chương trình giảm giá, kiện Hạn chế đồ án: - Có số chức chưa hồn chỉnh hồn tồn - Code xây dựng cịn dài, chưa tối ưu code - Một số chức chưa tối ưu triệt để để tạo độ mượt mà cho trang web (thanh tốn cịn chậm) - Database chưa mang tính tiến hóa cao - Tốc độ xử lý số chức chưa nhanh - Phân tích xử lý bình luận chưa tối ưu 5.3 Hướng phát triển đồ án: − Cải thiện UI cho đồng toàn hệ thống − Xây dựng lại Database để tăng tính tiến hóa − Tối ưu tốc độ nâng cấp toán trực tuyến − Có thể thêm chức theo dõi đơn hàng khách hàng 108 − Bổ sung trường trạng thái đơn hàng để khách hàng quan sát, theo dõi kĩ trình đơn hàng − Kiếm sốt quản lí điều lệ hủy đơn hàng khách hàng − Quản lí chăm sóc khách hàng: tặng quà thành viên, sinh nhật, lễ lớn, … 109 TÀI LIỆU THAM KHẢO [1] Trần Thị Hồng Yến (2022), Temple báo cáo môn học, Khoa Công nghệ Phần Mềm, Trường ĐH Công Nghệ Thông Tin [2] Nguyễn Lưu Thủy Ngân & Dương Ngọc Hảo (2019), Slide Quy trình thực dự án máy học, Khoa Khoa Học Máy Tính, Trường ĐH Công nghệ Thông Tin [3] Nguyen Thi Hop, “Introduction to Recommender Systems” [Online] Available: Link [4] I Stack Exchange, “Stack Overflow,” [Online] Available: Stack Overflow - Where Developers Learn, Share, & Build Careers [5] © 2015–2022 Dan Abramov and the Redux documentation authors, “Redux-Toolkit Documentary” [Online] Avaialable: Redux-Toolkit [6] © 2022 Meta Platforms, Inc , “React Documentary” [Online] Avaialable: React [7] © 2022 Remix, “React Router Dom Documentary” [Online] Available : React-RouterDom [8] © 2022 Material UI SAS, “MUI Library Documentary” [Online] Available : MUI [9] EmailEngine, “Nodemailer” [Online] Avaialable: Nodemailer [10] © 2022 Sequelize Contributors, “Sequelize Documentary” [Online] Available: Sequelize [11] © 1999–2022 Paypal Pte Ltd., “Paypal Documentary” [Online] Available: Paypal [12] Cloud, “Cloundinary” [Online] Available: Cloundinary Documentation [13] MongoDB Inc., “MongoDB” [Online] Available: MongoDB: MongoDB [14] StrongLoop, IBM, and other expressjs.com contributors., “Express” [Online] Available: Express [15] Valeri Karpov, Kathryn Radovan, Hafez, “Mongoose” [Online] Available: Mongoosejs [16] © Copyright 2022 Tutorials Point, “Scikit-learn” [Online] Available: Scikitlearn [17] Apache License 2.0 Google, Google, “TensorFlow” [Online] Available: Tensorflow Hết -110 ...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 HỆ THỐNG XUẤT NHẬP KHO VÀ CHATBOX TƯ VẤN CHO WEBSITE BÁN LAPTOP Giảng viên hướng... CẢM ƠN Đồ án ? ?Xây dựng hệ thống xuất nhập kho chatbot tư vấn cho website bán laptop? ?? minh chứng cho q trình cố gắng, khơng ngừng việc tìm tịi, học hỏi suốt quãng thời gian mà nhóm dành cho môn... : 19521652 Lớp : SE122.N11 TP HCM, tháng 12 năm 2022 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng hệ thống xuất nhập kho chatbot tư vấn cho website bán laptop Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời