Website bán và cung cấp các dịch vụ về thú cưng tích hợp 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 ĐỒ ÁN ĐỀ TÀI: WEBSITE BÁN VÀ CUNG CẤP CÁC DỊCH VỤ VỀ THÚ CƯNG – TÍCH HỢP CHATBOT SE121.M21 Giảng viên hướng dẫn: Cô HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: NGUYỄN CAO CƯỜNG –MSSV: 19521298 ĐINH VIỆT HÀO–MSSV: 19521475 Thành phố Hồ Chí Minh, tháng năm 2022 ĐẠ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 ĐỒ ÁN ĐỀ TÀI: WEBSITE BÁN VÀ CUNG CẤP CÁC DỊCH VỤ VỀ THÚ CƯNG – TÍCH HỢP CHATBOT SE121.M21 Giảng viên hướng dẫn: Cơ HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: NGUYỄN CAO CƯỜNG –MSSV: 19521298 ĐINH VIỆT HÀO–MSSV: 19521475 Thành phố Hồ Chí Minh, tháng năm 2022 Lời cảm ơn Đồ án môn đặt tiền đề cho việc xây dựng khóa luận tốt nghiệp Đây mơn học có nhiều thử thách, địi hỏi người học phải dành nhiều thời gian, cơng sức để nghiên cứu, tìm tòi xây dựng Đồng thời, hội để sinh viên thực hành học suốt năm đại học học hỏi thêm nhiều kiến thức, kinh nghiệm kỹ phục vụ cho công việc sau Cho nên xem thử thách hội để sinh viên rèn luyện, hoàn thiện thân kĩ tích lũy suốt q trình làm đồ án Để đến đoạn cuối hành trình nỗ lực, cố gắng kiên trì Đồng hành sinh viên vượt qua thử thách có mặt giúp đỡ người thầy tận tâm cơng việc Nhóm xin chân thành cảm ơn cô Huỳnh Hồ Thị Mộng Trinh tận tình giúp đỡ nhóm em hồn thành đồ án Chính nhờ góp ý, động viên cô giúp đồ án nhóm hồn thiện chun nghiệp nhiều Bên cạnh đó, nhóm học hỏi nhiều kiến thức, kinh nghiệm học thú vị trình làm khố luận, hành trang hữu ích cho nhóm sau Nhóm xin chân thành cảm ơn anh chị, bạn bè giúp đỡ nhóm q trình thực đồ án Nhờ người mà nhóm có nhiều góc nhìn khác đề tài làm, từ giúp hồn thiện đồ án nhóm Một lần nữa, nhóm xin chân thành cảm ơn cô người NHẬN XÉT (Của giáo viên hướng dẫn) ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… MỤC LỤC Lời cảm ơn CHƯƠNG I: GIỚI THIỆU CHUNG Đề tài Lý chọn đề tài Tóm tắt đề tài Mục tiêu đề tài Phương pháp nghiên cứu Ý nghĩa hướng đề tài 6.1 Về mặt tài liệu 6.2 Về mặt sản phẩm CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN ReactJS 1.1 Giới thiệu 1.2 Lý sử dụng NestJS 2.1 Giới thiệu CHƯƠNG III: PHÂN TÍCH HỆ THỐNG Yêu cầu phần mềm 1.1 Yêu cầu nghiệp vụ 1.2 Yêu cầu chất lượng Use-case 2.1 Sơ đồ Use-case mức tổng quát 2.2 Danh sách actor 2.3 Danh sách Use-case 2.4 Đặc tả Use-case 2.4.1 Đặc tả Use-case “Tạo tài khoản khách hàng” 2.4.2 Đặc tả Use-case “Đăng nhập khách hàng” 2.4.3 Đặc tả Use-case “Đăng nhập admin” 2.4.4 Đặc tả Use-case “Thay đổi thông tin” 2.4.5 Đặc tả Use-case “Tạo thú cưng” 2.4.6 Đặc tả Use-case “Sửa thú cưng” 2.4.8 Đặc tả Use-case “Tạo sản phẩm” 2.4.9 Đặc tả Use-case “Sửa sản phẩm” 2.4.11 Đặc tả Use-case “Tạo dịch vụ” 1 2 2 3 4 6 7 8 9 10 12 12 14 15 16 17 18 2.4.12 Đặc tả Use-case “Sửa dịch vụ” 2.4.14 Đặc tả Use-case “Đặt lịch” 2.4.15 Đặc tả Use-case “Xem thông tin đơn hàng” 2.4.16 Đặc tả Use-case “Chỉnh sửa đơn hàng” 2.4.17 Đặc tả Use-case “Đặt đơn hàng” 2.4.18 Đặc tả Use-case “Tra cứu đơn hàng” 2.4.19 Đặc tả Use-case “ChatBot” 2.4.20 Đặc tả Use-case “Quản lý nhân viên” 2.4.21 Đặc tả Use-case “Quản lý khách hàng” 2.5 Activity Diagram: 2.5.1 Đăng nhập 2.5.2 Đăng ký 2.5.3 Đăng xuất 2.5.4 Chỉnh sửa hồ sơ 2.5.5 Thú cưng 2.5.6 Sản phẩm 2.5.7 Dịch vụ 2.5.8 ChatBot CHƯƠNG IV: THIẾT KẾ DỮ LIỆU Sơ đồ logic hoàn chỉnh Danh sách bảng liệu sơ đồ logic Mô tả bảng liệu 3.1 Bảng “address”: 3.2 Bảng “admin_user”: 3.3 Bảng “breed” 3.4 Bảng “cart”: 3.5 Bảng “category”: 3.6 Bảng “customer”: 3.7 Bảng “employee”: 3.8 Bảng “employee_to_service”: 3.9 Bảng “order”: 3.10 Bảng “pet”: 3.11 Bảng “pet_cart_item”: 3.12 Bảng “pet_order_item”: 3.13 Bảng “pet_photo”: 3.14 Bảng “pet_type”: 3.15 Bảng “product”: 19 20 21 22 23 24 24 25 26 27 27 27 28 29 30 30 32 33 34 34 34 36 36 36 37 37 37 38 38 39 39 40 40 41 41 41 42 3.16 Bảng “product_cart_item”: 3.17 Bảng “product_order_item”: 3.18 Bảng “product_photo”: 3.19 Bảng “reservation”: 3.20 Bảng “service”: 3.21 Bảng “service_order_item”: 3.22 Bảng “service_photo”: 3.23 Bảng “sub_category”: 42 CHƯƠNG V: THIẾT KẾ GIAO DIỆN Sơ đồ liên kết hình 2.Danh sách hình 3.Mơ tả hình 3.1 Màn hình đăng nhập Admin 3.2 Màn hình tổng quan Admin 3.3 Màn hình thú cưng Admin 3.4 Màn hình thêm thú cưng 3.5 Màn hình loại thú cưng Admin 3.6 Màn hình thêm loại thú cưng 3.7 Màn hình sửa loại thú cưng 3.8 Màn hình giống thú cưng Admin 3.9 Màn hình thêm giống 3.10 Màn hình sửa giống 3.11 Màn hình chi tiết thú cưng Admin 3.12 Màn hình sửa thú cưng 3.13 Màn hình sản phẩm Admin 3.14 Màn hình thêm sản phẩm 3.15 Màn hình danh mục Admin 3.16 Màn hình thêm danh mục 3.17 Màn hình sửa danh mục 3.18 Màn hình danh mục phụ Admin 3.19 Màn hình thêm danh mục phụ 3.20 Màn hình sửa danh mục phụ 3.21 Màn hình sản phẩm chi tiết Admin 3.22 Màn hình sửa sản phẩm 3.23 Màn hình dịch vụ Admin 3.24 Màn hình thêm dịch vụ 3.25 Màn hình đặt lịch Admin 46 43 43 43 44 44 45 45 46 46 52 52 53 53 55 56 57 58 59 60 61 61 62 62 63 64 65 66 66 67 68 69 69 70 71 72 3.26 Màn hình chi tiết dịch vụ 3.27 Màn hình sửa dịch vụ 3.28 Màn hình đơn hàng 3.29 Màn hình chi tiết đơn hàng 3.30 Màn hình khách hàng 3.31 Màn hình thêm khách hàng 3.32 Màn hình sửa khách hàng 3.33 Màn hình vơ hiệu hóa khách hàng 3.34 Màn hình kích hoạt khách hàng 3.35 Màn hình nhân viên 3.36 Màn hình thêm nhân viên 3.37 Màn hình sửa nhân viên 3.38 Màn hình người dùng 3.39 Màn hình thêm người dùng 3.40 Màn hình sửa người dùng 3.41 Màn hình kích hoạt người dùng 3.42 Màn hình vơ hiệu người dùng 3.43 Màn hình thay đổi thơng tin cá nhân 3.44 Màn hình thay đổi mật 3.45 Màn hình trang chủ khách hàng 3.46 Màn hình thú cưng khách hàng 3.47 Màn hình chi tiết thú cưng khách hàng 3.48 Màn hình sản phẩm khách hàng 3.49 Màn hình chi tiết sản phẩm khách hàng 3.50 Màn hình dịch vụ khách hàng 3.51 Màn hình đặt dịch vụ khách hàng 3.52 Màn hình liên hệ khách hàng 3.53 Màn hình 404 khách hàng 3.54 Màn hình giỏ hàng khách hàng 3.55 Màn hình đơn hàng khách hàng 3.56 Màn hình danh sách đơn hàng khách hàng 3.57 Màn hình đăng nhập khách hàng 3.58 Màn hình đăng ký khách hàng CHƯƠNG VI: TỔNG KẾT Độ hoàn thiện chức Kết đạt hướng phát triển 2.1 Kết đạt 72 73 73 74 74 75 76 77 77 78 79 80 81 82 83 84 84 85 86 87 90 91 92 92 93 94 95 96 96 97 98 98 100 105 105 106 106 2.2 Hướng phát triển 107 BẢNG PHÂN CÔNG CÔNG VIỆC 108 TÀI LIỆU THAM KHẢO 109 Danh mục hình ảnh Hình 1: Giới thiệu React Hình 2: Giới thiệu NestJs Hình 3: Sơ đồ usecase mức tổng quát Hình 4: Activity diagram đăng nhập Hình 5: Activity diagram đăng ký Hình 6: Activity diagram đăng xuất Hình 7: Activity diagram chỉnh sửa hồ sơ Hình 8: Activity diagram thú cưng Hình 9: Activity diagram sản phẩm Hình 10: Activity diagram dịch vụ Hình 11: Activity diagram Chatbot Hình 12: Activity diagram sơ đồ liệu tổng quát Hình 13:Sơ đồ liên kết hình tổng quát Hình 14: Màn hình đăng nhập Admin Hình 15:Màn hình tổng quan Admin Hình 16:Màn hình thú cưng Admin Hình 17: Màn hình thêm thú cưng Hình 18: Màn hình loại thú cưng Admin Hình 19: Màn hình thêm loại thú cưng Hình 20: Màn hình sửa loại thú cưng Hình 21: Màn hình giống thú cưng Admin Hình 22: Màn hình thêm giống Hình 23: Màn hình sửa giống Hình 24: Màn hình chi tiết thú cưng Admin Hình 25: Màn hình sửa thú cưng Hình 26: Màn hình sản phẩm Admin Hình 27: Màn hình thêm sản phẩm Hình 28: Màn hình danh mục Admin Hình 29: Màn hình thêm danh mục 26 27 27 28 29 30 31 32 32 44 49 50 50 52 53 54 55 56 57 58 58 59 59 60 61 61 Hình 30: Màn hình sửa danh mục Hình 31: Màn hình danh mục phụ Admin Hình 32: Màn hình thêm danh mục phụ Hình 33: Màn hình sửa danh mục phụ Hình 34 Màn hình sản phẩm chi tiết Admin Hình 35 Màn hình sửa sản phẩm Hình 36: Màn hình dịch vụ Admin Hình 37 Màn hình thêm dịch vụ Hình 38: Màn hình đặt lịch Admin Hình 39: Màn hình chi tiết dịch vụ Hình 40:Màn hình sửa dịch vụ Hình 41 Màn hình đơn hàng Hình 42 Màn hình chi tiết đơn hàng Hình 43 Màn hình khách hàng Hình 44 Màn hình thêm khách hàng Hình 45 Màn hình sửa khách hàng Hình 46 Màn hình vơ hiệu hóa khách hàng Hình 47 Màn hình kích hoạt khách hàng Hình 48 Màn hình nhân viên Hình 49 Màn hình thêm nhân viên Hình 50 Màn hình sửa nhân viên Hình 51 Màn hình người dùng Hình 52 Màn hình thêm người dùng Hình 53 Màn hình sửa người dùng Hình 54 Màn hình kích hoạt người dùng Hình 55 Màn hình vơ hiệu người dùng Hình 56 Màn hình thay đổi thơng tin cá nhân Hình 57 Màn hình thay đổi mật Hình 58 Màn hình trang chủ khách hàng Hình 59 Màn hình thú cưng khách hàng Hình 60 Màn hình chi tiết thú cưng khách hàng Hình 61 Màn hình sản phẩm khách hàng Hình 62 Màn hình chi tiết sản phẩm khách hàng Hình 63 Màn hình dịch vụ khách hàng Hình 64 Màn hình đặt dịch vụ khách hàng Hình 65 Màn hình liên hệ khách hàng Hình 66 Màn hình 404 khách hàng 62 63 64 65 66 66 67 68 68 69 70 70 71 71 72 73 74 74 75 76 77 78 79 80 81 81 82 83 84 87 88 88 89 90 90 91 92 3.52 Màn hình liên hệ khách hàng Màn hình hiển thị tổng quan liên hệ, gồm thành phần: ● Button “Gửi đi”: Khi điền đầy đủ thông tin, gửi ● TextField “Họ”: Nhập họ ● TextField “Tên”: Nhập tên ● TextFiel “Địa Email”: Nhập email ● TextField “Ghi chú”: Nhập ghi 3.53 Màn hình 404 khách hàng Màn hình hiển thị tổng quan khơng tìm thấy trang, gồm thành phần: ● Button “Trang chủ”: Đưa tới trang chủ ● Text “Liên hệ với chúng tôi”: Đưa tới trang liên hệ 3.54 Màn hình giỏ hàng khách hàng Màn hình hiển thị tổng quan giỏ hàng, gồm thành phần: ● Button “+”: Tăng số lượng ● Button “-”: Giảm số lương ● Butotn Icon “Thùng rác”: Xóa khỏi giỏ hàng ● Button “Đến trang toán”: Đưa đến trang tốn 3.55 Màn hình đơn hàng khách hàng Màn hình hiển thị tổng quan chi tiết giỏ hàng, gồm thành phần: ● Radio button “Anh, Chị”: Chọn giới tính ● TextField “Họ tên”: Nhập họ tên ● TextField “Email”: Nhập địa Email ● TextField “Số điện thoại”: Nhâp số điện thoại ● TextField “Địa liên hệ”: Nhập địa liên hệ ● Combobox “Tỉnh, Thành phố”: Chọn tỉnh, thành phố ● Combobox “Quận, huyện”: Chọn quẩn, huyện ● Combobox “Phường xã”: Chọn phường xã ● Radio button nhóm chọn cách thức để nhận hàng ● Radio button nhóm chọn phương thức tốn ● Button “Giỏ hàng”: Quay lại trang giỏ hàng ● Button “Hoàn tất đơn hàng”: Tiến hành đặt đơn hàng 3.56 Màn hình danh sách đơn hàng khách hàng Màn hình hiển thị tổng quan chi tiết đơn hàng gồm: ● Các FieldText điền sẵn khớp với thông tin đơn hàng, khơng chỉnh sửa 3.57 Màn hình đăng nhập khách hàng Màn hình đăng nhập khách hàng: ● TextField E-mail: Nhập vào email đăng nhập ● TextFiekd mật khẩu: Nhập vào mật ● Button “Đăng nhập”: Click chọn để đăng nhập vào website ● TextButton “Tạo tài khoản mới”: Đưa qua hình đăng ký tài khoản 3.58 Màn hình đăng ký khách hàng Màn hình hiển thị đăng ký: ● TextField “Họ tên”: Nhập họ tên ● TextField “Số điện thoại”: Nhập số điện thoại ● TextField “Email”: Nhập email ● TextField “Mật khẩu”: Nhập vào mật ● TextField “Nhập lại mật khẩu”: Nhập lại mật ● Checkbox “xanh”: Đồng ý điều khoản ● Button “Đăng ký”: Đăng ký tài khoản 3.59 Màn hình ChatBot Màn hình hiển thị tìm kiếm đơn hàng: ● TextField “SĐT”: Nhập số điện thoại cần tìm kiếm đơn hàng ● TextFiekd “Mã đơn hàng”: Nhập mã đơn hàng thông báo đặt hàng thành cơng ● Button “Tìm kiếm”: Tiến hành tìm kiếm sản phẩm Màn hình hiển thị tổng quan danh sách dịch vụ, gồm thành phần: ● Button “Đặt chỗ”: Đặt lịch hẹn dịch vụ ● Button “Quan lại thể loại”: Quay lại phần chọn thể loại ● Button “Menu chính”: Về lại menu chức ban đầu ChatBot Màn hình hiển thị đặt chỗ dịch vụ: ● TextField “Tên khách hàng”: Nhập tên khách hàng ● TextField “SĐT”: Nhập số điện thoại ● DateTimePicker “Thời gian mong muốn”: Nhập ngày đặt lịch ● Combobox “Loại dịch vụ”:Chọn loại dịch vụ muốn dùng ● Button “Xác nhận đặt”: Đặt lịch dịch vụ Màn hình hiển thị tổng quan đặt dịch vụ, gồm thành phần: ● Button “Menu chính”: Để quay lại menu chức ban đầu ChatBot CHƯƠNG VI: TỔNG KẾT Độ hoàn thiện chức STT Tên chức Đăng ký, đăng nhập Quản lý, theo dõi thú cưng, sản phẩm, dịch vụ Mức độ hoàn thành 100% 100% Khách hàng, nhân viên 100% Tra cứu đơn hàng 100% Ghi ChatBot Tạo, chỉnh sửa đơn hàng, giỏ hàng 100% 100% Bộ lọc sản phẩm 100% Báo cáo, thống kê 90% Chưa hoàn thành phần xếp hạng Bảng 45: Bảng độ hoàn thiện chức Kết đạt hướng phát triển 2.1 Kết đạt Về lý thuyết: - Tìm hiểu nắm quy trình xây dựng website bán cung cấp dịch vụ thú cưng, chatbot - Tìm hiểu vận dụng kiến thức liên quan đến phương pháp phát triển phần mềm hướng đối tượng, quy trình phát triển phần mềm vào trình xây dựng ứng dụng - Tìm hiểu áp dụng firebase storage, emailjs, nodejs, nestjs, reactjs, vào ứng dụng Kỹ mềm: - Phát triển hồn thiện kỹ sử dụng cơng cụ hỗ trợ lập trình viên như: GitHub, Trello, excel, figma… - Học tập phát triển kỹ làm việc nhóm, kỹ phân chia điều phối công việc, kỹ xếp thời gian Sản phẩm: - Phần mềm đạt chức cần có trang web bán cung cấp dịch vụ thú cưng - tích hợp ChatBot thời gian quy định - Giao diện thân thiện, dễ sử dụng 2.2 Hướng phát triển Tiếp tục phát triển, hoàn thiện chức phần mềm như: chatbot, theo dõi đơn hàng, đánh giá thú cưng, tin tức thú cưng, sổ sức khỏe thú cưng, Phát triển thêm chức hỗ trợ giúp người dùng tối ưu hóa hoạt động bán hàng Một số tính dự định phát triển thời gian tới: - Phân quyền: Admin, người dùng - Hỗ trợ tìm kiếm, hiển thị nâng cao tra cứu sản phẩm - Gợi ý mặt hàng dựa lịch sử mua sắm người dùng - Tích hợp thêm nhiều tính cho chatbot BẢNG PHÂN CÔNG CÔNG VIỆC Kết STT Họ tên Nhiệm vụ MSSV Chữ ký (%) Chọn đề tài, phân tích nghiệp vụ, xử lý CSDL, làm giao diện quản lý, làm chức phần quản lý gồm: Báo cáo Nguyễn Cao Cường thống kê, quản lý thú cưng, 19521298 quản lý sản phẩm, quản lý dịch 100 Đã ký 100 Đã ký vụ, quản lý đơn hàng, quản lý khách hàng, quản lý nhân viên,quản lý người dùng, tính ChatBot, xử lý api Chọn đề tài, phân tích nghiệp vụ, làm giao diện, chức phần khách hàng gồm: Hiển thị Đinh Việt 19521475 Hào thú cưng, sản phẩm, dịch vụ, liên hệ, lọc tìm kiếm, chỉnh sửa giỏ hàng, thống kê đơn hàng, gửi gmail theo dõi đơn hàng, đăng ký, đăng nhập, viết báo cáo Bảng 46: Bảng phân công công việc TÀI LIỆU THAM KHẢO https://reactjs.org/docs/getting-started.html https://docs.nestjs.com/modules https://nodejs.org/en/ https://www.mysql.com/ https://mui.com/ ... PHÂN TÍCH HỆ THỐNG Yêu cầu phần mềm 1.1 Yêu cầu nghiệp vụ Đảm bảo chức cần phải có website cung cấp dịch vụ thú cưng - tích hợp ChatBot Chia làm danh mục bán hàng thú cưng, sản phẩm, dịch vụ: ● Thú. .. ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN ĐỀ TÀI: WEBSITE BÁN VÀ CUNG CẤP CÁC DỊCH VỤ VỀ THÚ CƯNG – TÍCH HỢP CHATBOT SE121.M21 Giảng viên hướng dẫn: Cô HUỲNH HỒ THỊ MỘNG TRINH... hình thiết kế giao diện 6.2 Về mặt sản phẩm - Tạo ứng dụng Website cung cấp dịch vụ thú cưng, tích hợp Chatbot - Xử lý vấn đề hiệu suất ứng dụng cách hiệu - Chức phù hợp với tình hình thực tế dễ