Ứng dụng mạng xã hội cho người yêu thú cưng hỗ trợ chatbot

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ĐỀ TÀI: ỨNG DỤNG MẠNG XÃ HỘI CHO NGƯỜI YÊU THÚ CƯNG HỖ TRỢ CHATBOT Giảng viên: Trần Anh Dũng Sinh viên thực hiện: Vũ Phạm Ngọc Tân Trương Thành Quang Thành phố Hồ Chí Minh, năm 2022 19520930 19520884 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ĐỀ TÀI: ỨNG DỤNG MẠNG XÃ HỘI CHO NGƯỜI YÊU THÚ CƯNG HỖ TRỢ CHATBOT Giảng viên: Trần Anh Dũng Sinh viên thực hiện: Vũ Phạm Ngọc Tân Trương Thành Quang Thành phố Hồ Chí Minh, năm 2022 19520930 19520884 Báo cáo đồ án Mục lục DANH MỤC TỪ VIẾT TẮT LỜI CẢM ƠN ĐỀ CƯƠNG CHI TIẾT Lí chọn đề tài Mục tiêu: bao gồm mục tiêu Phạm vi Đối tượng sử dụng 10 Phương pháp thực 10 Nền tảng: 11 Kết mong đợi 11 Hướng phát triển đề tài 11 Kế hoạch làm việc 11 10 Phân công công việc 13 NỘI DUNG 14 CHƯƠNG 1: GIỚI THIỆU CHUNG 14 1.1 Tổng quan đề tài 14 1.2 Lý chọn đề tài 14 1.3 Đối tượng sử dụng 14 1.4 Phạm vi nghiên cứu 15 1.4.1 Phạm vi chức năng: 15 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 16 2.1 ReactJS 16 2.2 JavaScript 17 2.3 Firebase 18 2.4 HTML 19 2.5 CSS 20 2.6 Github 21 CHƯƠNG 3: CHATBOT: DIALOGFLOW 22 3.1 Công nghệ sử dụng : 22 Báo cáo đồ án DialogFlow 22 3.2 a Giao diện chatbot 23 Mô tả tổng quát 23 b Các đối tượng hình 24 3.3 a Quy trình hoạt động 24 Về Agent Bot 24 b Về Intent 25 c Về Entity 26 d Về cách bot xử lý input để đưa output 27 3.4 Sơ đồ kịch đối thoại 28 CHƯƠNG 4: THIẾT KẾ HỆ THỐNG 31 4.1 Kiến trúc hệ thống: Mơ hình lớp 31 4.2 Chi tiết thành phần hệ thống 32 CHƯƠNG 5: ĐẶC TẢ USE CASE 33 5.1 Sơ đồ Use Case 33 5.2 Danh sách tác nhân 34 5.3 Danh sách Use Case 34 5.4 Mô tả chi tiết Use Case 36 CHƯƠNG 6: THIẾT KẾ CƠ SỞ DỮ LIỆU 49 6.1 Sơ đồ logic 49 6.2 Danh sách quan hệ 50 CHƯƠNG 7: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 52 7.1 Screen Flow 52 7.2 Danh sách hình 53 7.3 Mô tả chi tiết hình 54 CHƯƠNG 8: CÀI ĐẶT VÀ KIỂM THỬ 71 8.1 Môi trường cài đặt kiểm thử: 71 8.2 Kết kiểm thử 71 CHƯƠNG 9: KẾT LUẬN 72 9.1 Tổng kết 72 9.2 Khó khăn 72 9.3 Kết đạt 73 Báo cáo đồ án 9.4 Hạn chế đồ án 73 9.5 Hướng phát triển 73 TÀI LIỆU THAM KHẢO 74 LINK ĐỒ ÁN TRÊN GITHUB 75 https://github.com/Quangaka/pet-lovers 75 Báo cáo đồ án Hình 7.3-15: Trang Hỏi đáp (dành cho nhân viên) 80 Hình 7.3-16: Trang Đăng hỏi đáp 82 Hình 7.3-17: Trang Cập nhật hỏi đáp 82 Hình 7.3-18: Trang Quản lý tài khoản 84 Hình 7.3-19: Trang Hồ sơ nhân viên 86 Hình 7.3-20: Trang Tạo tài khoản 88 Hình 7.3-21: Thanh công cụ (dành cho nhân viên) 90 Hình 7.3-22: Thanh cơng cụ (dành cho quản lý) 90 Hình 7.3-23: Trang Hồ sơ người (Mặc định) 92 Hình 7.3-24: Trang Hồ sơ người dùng (Cập nhật mật khẩu) 92 Hình 7.3-25: Trang Hồ sơ người dùng (Cập nhật ảnh đại diện) 92 Hình 7.3-26: Trang Đăng ký thi thử 94 Báo cáo đồ án DANH MỤC TỪ VIẾT TẮT # Từ viết tắt Từ đầy đủ Ý nghĩa CSDL Cơ sở liệu Cơ sở liệu cho ứng dụng API Application Programming Interface Giao diện lập trình ứng dụng AI Artificial Intelligence Trí tuệ nhân tạo Báo cáo đồ án LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM chúng em trang bị kiến thức bản, kỹ thực tế để lần đầu thực Đồ án Để hồn thành Đồ án này, chúng em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thơng tin Chúng em xin gửi lời cảm ơn chân thành đến thầy Trần Anh Dũng 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 luận văn mà cịn hành trang tiếp bước cho chúng em trình học tập lập nghiệp sau Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất thầy cô khoa, bạn bè, tập thể lớp KTPM2019 người sẵn sàng sẻ chia giúp đỡ học tập sống Mong rằng, mãi gắn bó với Trong q 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 ý quý thầy để hồn thiện phát triển đồ án mơn học Đồ án Khóa luận tốt nghiệp tương lai Chúng em xin chân thành cảm ơn Xin chúc điều tốt đẹp đồng hành người Thành phố Hồ Chí Minh, … tháng … năm 2021 Sinh viên Vũ Phạm Ngọc Tân Trương Thành Quang Báo cáo đồ án ĐỀ CƯƠNG CHI TIẾT Lí chọn đề tài Hiện nay, nhu cầu chia sẻ kinh nghiệm chăm sóc tham gia kết nối cộng đồng người yêu thú cưng ngày mở rộng Để đáp ứng nhu cầu đó, nhóm em định chọn đề tài này, phát triển ứng dụng mạng xã hội chia sẻ hình ảnh, video, cung cấp nhanh chóng thơng tin cách thức chăm sóc, mẹo vặt thú cưng tích hợp chatbot hỗ trợ tự động tư vấn chăm sóc với người dùng truy cập vào ứng dụng Ứng dụng hỗ trợ: - Mạng xã hội kết nối cộng đồng người yêu thích thú cưng - Chatbot chia sẻ chăm sóc thú cưng - bác sĩ AI - cẩm nang chăm sóc - Báo cứu trợ, cưu mang thú cưng - Tìm kiếm trung tâm chăm sóc phịng thú y cafe thú cưng gần Ứng dụng cung cấp tính tiện ích giúp người dùng tiếp cận đến thông tin chăm sóc sức khỏe thú cưng cách nhanh tiện lợi nhất, ChatBot tự động tư vấn Bên cạnh đó, người dùng truy cập vào ứng dụng để cập nhật, đăng tin cách dễ dàng nhanh chóng Mục tiêu: bao gồm mục tiêu a Xây dụng mạng xã hội - Cho phép đăng tải, chia sẻ hình ảnh, video liên quan đến thú cưng - Cập nhật thông tin cách chăm sóc sức khỏe thú cưng - Liên lạc, trao đổi với người dùng khác - Kinh doanh, quảng cáo mạng xã hội - Bày tỏ, thể cảm xúc b Xây dụng chatbot hỗ trợ mạng xã hội - FAQ giải đáp nhanh thắc mắc chung, giảm tối đa thời gian tiêu tốn cần thiết cho việc tư vấn chăm sóc sức khỏe thú cưng - Tìm kiếm địa điểm trung tâm chăm sóc thú cưng, quán cafe thú cưng - Báo cứu trợ, cưu mang thú cưng Phạm vi Báo cáo đồ án Phạm vi môi trường: ứng dụng web Phạm vi chức năng: - Đối với ứng dụng: oCung cấp chức chia sẻ khoảnh khắc thú cưng oCung cấp thơng tin chăm sóc sức khỏe thú cưng oKết nối cộng đồng oCung cấp chức quản lí viết bao gồm đăng tải, thay đổi xóa bỏ oCung cấp quảng cáo cho bên kinh doanh, dịch vụ chăm sóc - Đối với chatbot: oCó khả trả lời câu hỏi cách chi tiết oPhân tích nhu cầu đưa tư vấn hợp lý người dùng oCung cấp liên hệ trực tiếp đến với nhân viên tư vấn vấn đề đặt phạm vi thân cập nhập cách xử lý trường hợp oChatbot hiểu tương đối ngơn ngữ tự nhiên oTìm kiếm địa điểm trung tâm chăm sóc thú cưng, quán cafe thú cưng oBáo cứu trợ, cưu mang thú cưng Đối tượng sử dụng - Ứng dụng mạng xã hội cho cộng đồng người yêu thú cưng phù hợp với lứa tuổi, đặc biệt hướng đến giới trẻ - Các trung tâm dịch vụ hỗ trợ liên quan đến thú cưng Phương pháp thực - Phương pháp làm việc: Làm việc nhóm thành viên thơng qua phương thức online hướng dẫn giảng viên hướng dẫn - Phương pháp nghiên cứu: oPhân tích nhu cầu sử dụng đối tượng người dùng oNghiên cứu tài liệu công nghệ liên quan - Phương pháp công nghệ: oTìm hiểu xây dựng chatbot web app dựa vào DialogFlow oXây dựng giao diện web app để tương tác với người dùng oQuản lý source code thông qua Github oSử dụng Trello, Google doc,… để quản lý tiến trình tài liệu 10 Báo cáo đồ án Chuyển sang hình Tạo đăng Create Post Link Home Link Chuyển sang hình Chính Sign Out Link Người dùng thoát khỏi hệ thống chuyển sang trang Đăng nhập Profile Link Chuyển sang trang Cá nhân 7.3.5 Trang chủ Hình 7.3-6: Trang chủ a Giới thiệu tổng quát Đây trang mở đầu người dùng khác truy cập vào ứng dụng Nó có chức thị đăng người dùng khác đồng thời gợi ý người dùng liên quan 61 Báo cáo đồ án b Các đối tượng hình Chung STT Tên đối tượng Loại Chức Time line div Hiển thị đăng người dùng khác Sidebar div Hiển thị thông tin người dùng gợi ý tài khoản 62 Báo cáo đồ án 7.3.6 Bài đăng Hình 7.3-7: Bài đăng a Mô tả tổng quát Bài đăng thể thơng tin hình ảnh, đầu đề, cho phép người dùng u thích, bình luận, đọc bình luận đ 63 Báo cáo đồ án b Các đối tượng hình STT Tên đối tượng Loại Chức Header div Hiển thị username, hình ảnh người đăng Image Image Hiển thị ảnh đăng Action div Cho phép người dùng thích, bình luận Footer div Hiển thị thông tin liên quan đăng Comment div Cho phép người dùng đọc, thêm bình luận 64 Báo cáo đồ án 7.3.7 Sidebar Hình 7.3-8: Trang Danh sách tin tức (dùng chung) a Mô tả tổng quát Hiển thị thông tin người dùng, thị đề xuất tài khoản người dùng khác 65 Báo cáo đồ án b Các đối tượng hình STT Tên đối tượng Loại Chức Ảnh đại diện Link Hiển thị ảnh đại diện, chuyển sang trang cá nhân Follow Button Follow nguoi dung 66 Báo cáo đồ án 7.3.8 Trang Đăng viết Hình 7.3-10: Trang Đăng viết a Mô tả tổng quát Đây nơi giúp người dùng đăng tải nội dung viết bao gồm caption hình ảnh đăng tải 67 Báo cáo đồ án b Các đối tượng hình Dành cho người dùng Nhân viên STT Tên đối tượng Loại Chức Caption Input Nhập caption viết Image Source ImagePicker Chọn ảnh từ máy để đăng tair Create post Button Thực việc tạo viết 68 Báo cáo đồ án 7.3.9 Trang cá nhân Hình 7.3-12: Trang cá nhân a Mơ tả tổng quát Đây trang cho phép người dùng xem thông tin cá nhân viết tài khoản xem 69 Báo cáo đồ án b Các đối tượng hình Chung STT Tên đối tượng Loại Chức Header Personal Div Hiển thị thông tin cá nhân tài khoản: tên, follow chưa, số người follow follow List post Div Hiển thị danh sách viết đăng tải 70 Báo cáo đồ án CHƯƠNG 8: CÀI ĐẶT VÀ KIỂM THỬ 8.1 Môi trường cài đặt kiểm thử: Môi trường cài đặt: Window 10 11 Thiết bị cài đặt: laptop Acer 8.2 Kết kiểm thử STT Tính Mức độ hồn thiện Đăng nhập 100% Đăng ký 100% Xem, tạo, xóa đăng 100% Chatbot 100% Tương tác: thích bình luận 100% Xem trang cá nhân 100% Theo dõi người dùng khác 100% 71 Ghi ỨNG DỤNG TƯ VẤN KHÓA HỌC HỖ TRỢ CHATBOT Báo cáo đồ án CHƯƠNG 9: KẾT LUẬN 9.1 Tổng kết - Điều quan trọng làm website mạng xã hội cho người nuôi thú cưng hỗ trợ chatbot phải kết nối người dùng cung cấp thơng tin xác vấn đề sức khỏe thú cưng đến người dùng - Website mạng xã hội cho người nuôi thú cưng tập trung cung cấp xoay quanh thông tin từ nguồn xác Cung cấp thơng tin đến người dùng nhiều hình thức, thơng qua Chatbot, thơng qua văn - Cần phân tích kỹ xác định tính trước thực code, thiết kế giao diện, thiết kế sở liệu - Cần xếp thời gian code cho chức cách hợp lý hơn, không nên tốn nhiều thời gian cho phần - Có khả đọc tài liệu tiếng anh lợi hướng dẫn bản, hay tài liệu đa số viết tiếng Anh 9.2 Khó khăn - Việc làm đồ án theo nhóm gặp nhiều trở ngại cơng đoạn xác định tính ứng dụng, phần việc phân chia chưa thật hợp lý, công với thành viên nhóm - Nhóm tốn nhiều thời gian cho việc làm quen với cách hoạt động Chatbot cách làm việc nhóm - Khó khăn việc đọc tài liệu chuyên ngành tiếng Anh - Các thành viên có xung đột thiết kế giao diện logic ứng dụng 72 ỨNG DỤNG TƯ VẤN KHÓA HỌC HỖ TRỢ CHATBOT Báo cáo đồ án 9.3 Kết đạt - Kết nhóm cố gắng để hồn thành chức đưa từ đầu - Hiểu cách hoạt động Dialogflow Chatbot tích hợp với ứng dụng web - Cách kết nối làm việc ReactJs Firebase - Cách hợp code thành viên lại với thông qua Github - Các thành viên giải thắc mắc cách trao đổi qua tin nhắn hay qua mạng xã hội, tìm hiểu sửa lỗi chương trình - Cải thiện khả đọc tài liệu tiếng Anh 9.4 Hạn chế đồ án - Code chưa tối ưu tốt nên load ứng dụng chậm - Giao diện người dùng mức tạm - Cịn nhiều tính chưa tối ưu, chưa tiện dụng người dùng - Chưa cho phép người dùng cập nhật thoại ChatBot thông qua ứng dụng - Chatbot hỗ trợ loại ngôn ngữ tiếng anh - Chưa có phần tin nhắn người dùng 9.5 Hướng phát triển - Thêm hiệu ứng ứng dụng trạng thái “Đang thực thi” tính - Đầu tư, phát triển thiết kế giao diện - Tối ưu hóa code - Nâng cấp thêm tính tiện ích hỗ trợ người dùng - Nâng cấp ChatBot - Cập nhật thêm tính để hồn thiện phần kết nối cộng đồng 73 ỨNG DỤNG TƯ VẤN KHÓA HỌC HỖ TRỢ CHATBOT Báo cáo đồ án TÀI LIỆU THAM KHẢO ❖ Các Thư viện sử dụng trình phát triển [1] Tailwind CSS: https://tailwindcss.com/ [2] React Loader Spinner: https://mhnpd.github.io/react-loader-spinner/ ❖ Tài liệu hướng dẫn code mẫu xây dựng ứng dụng [1] Code thao khảo: https://stackoverflow.com/ [2] Hướng dẫn lập trình ReactJs: https://reactjs.org/ [3] Hướng dẫn sử dụng Kommunicate.io: https://docs.kommunicate.io/ [4] Hướng dẫn sử dụng Firebase: https://firebase.google.com/docs ❖ [1] Tài liệu code mẫu xây dựng ChatBot Hướng dẫn kết nối Dialogflow Kommunicate.io: https://www.youtube.com/watch?v=nZXS9ri-ND8 [2] Hướng dẫn sử dụng DialogFlow: https://cloud.google.com/dialogflow/es/docs 74 ỨNG DỤNG TƯ VẤN KHÓA HỌC HỖ TRỢ CHATBOT Báo cáo đồ án LINK ĐỒ ÁN TRÊN GITHUB https://github.com/Quangaka/pet-lovers 75 ỨNG DỤNG TƯ VẤN KHÓA HỌC HỖ TRỢ CHATBOT ... sóc, mẹo vặt thú cưng tích hợp chatbot hỗ trợ tự động tư vấn chăm sóc với người dùng truy cập vào ứng dụng Ứng dụng hỗ trợ: - Mạng xã hội kết nối cộng đồng người yêu thích thú cưng - Chatbot chia... sóc, mẹo vặt thú cưng tích hợp chatbot hỗ trợ tự động tư vấn chăm sóc với người dùng truy cập vào ứng dụng Ứng dụng hỗ trợ: - Mạng xã hội kết nối cộng đồng người yêu thích thú cưng - Chatbot chia... hợp oChatbot hiểu tương đối ngôn ngữ tự nhiên oTìm kiếm địa điểm trung tâm chăm sóc thú cưng, quán cafe thú cưng oBáo cứu trợ, cưu mang thú cưng Đối tượng sử dụng - Ứng dụng mạng xã hội cho cộng