Tài liệu Ứ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 1 ĐỀ 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 1 ĐỀ 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 1 Mục lục DANH MỤC TỪ VIẾT TẮT ......................................................................................... 7 LỜI CẢM ƠN .................................................................................................................. 8 ĐỀ CƯƠNG CHI TIẾT .................................................................................................. 9 1. Lí do chọn đề tài .................................................................................................... 9 2. Mục tiêu: bao gồm 2 mục tiêu chính ..................................................................... 9 3. Phạm vi .................................................................................................................. 9 4. Đối tượng sử dụng ............................................................................................... 10 5. Phương pháp thực hiện ........................................................................................ 10 6. Nền tảng: .............................................................................................................. 11 7. Kết quả mong đợi ................................................................................................ 11 8. Hướng phát triển của đề tài.................................................................................. 11 9. 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ý do 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 3 Báo cáo đồ án 1 DialogFlow...................................................................................................................... 22 3.2. a. Giao diện chatbot ................................................................................................. 23 Mô tả tổng quát .................................................................................................... 23 b. Các đối tượng trên màn 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 ra output ............................................................. 27 3.4. Sơ đồ kịch bản đố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 3 lớp ...................................................................... 31 4.2. Chi tiết các thành phần trong 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 các 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 màn hình............................................................................................. 53 7.3. Mô tả chi tiết từng màn hình ................................................................................ 54 CHƯƠNG 8: CÀI ĐẶT VÀ KIỂM THỬ ...................................................................... 71 8.1. Môi trường cài đặt và kiểm thử: .......................................................................... 71 8.2. Kết quả 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 quả đạt được .................................................................................................. 73 4 Báo cáo đồ án 1 9.4. Hạn chế của đồ á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 5 Báo cáo đồ án 1 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 mới ......................................................................... 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 6 Báo cáo đồ án 1 DANH MỤC TỪ VIẾT TẮT # Từ viết tắt Từ đầy đủ Ý nghĩa 1 CSDL Cơ sở dữ liệu Cơ sở dữ liệu cho ứng dụng 2 API Application Programming Interface Giao diện lập trình ứng dụng 3 AI Artificial Intelligence Trí tuệ nhân tạo 7 Báo cáo đồ án 1 LỜI CẢM ƠN Sau quá trình học tập và rèn luyện tại 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 đã được trang bị các kiến thức cơ bản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 1 của mình. Để hoà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 vì đã tạo điều kiện về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các 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ư duy và cách làm việc khoa học. Đó là những góp ý hết sức quý báu không chỉ trong quá trình thực hiện luận văn này mà còn là hành trang tiếp bước cho chúng em trong quá trình học tập và lập nghiệp sau này. Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất cả thầy cô trong khoa, bạn bè, tập thể lớp KTPM2019 là những người luôn sẵn sàng sẻ chia và giúp đỡ trong học tập và cuộc sống. Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau. Trong quá trình làm Đồ án này chúng em không tránh khỏi được những sai sót, chúng em kính mong nhận được sự chỉ dẫn và góp ý của quý thầy cô để hoàn thiện và phát triển đồ án hơn trong môn học Đồ án 2 cũng như trong Khóa luận tốt nghiệp trong tương lai. Chúng em xin chân thành cảm ơn. Xin chúc những điều tốt đẹp nhất sẽ luôn đồng hành cùng mọi 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 8 Báo cáo đồ án 1 ĐỀ CƯƠNG CHI TIẾT 1. Lí do chọn đề tài Hiện nay, nhu cầu về chia sẻ về những kinh nghiệm chăm sóc và tham gia kết nối cộng đồng người yêu thú cưng ngày càng được mở rộng. Để đáp ứng những nhu cầu đó, nhóm em quyết định chọn đề tài này, phát triển một ứng dụng mạng xã hội chia sẻ hình ảnh, video, cung cấp nhanh chóng thông tin về cách thức chăm sóc, những mẹo vặt về thú cưng và 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ẻ về 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 những trung tâm chăm sóc hoặc phòng thú y hoặc cafe thú cưng gần nhất Ứng dụng cung cấp những tính năng tiện ích giúp người dùng có thể tiếp cận đến những thông tin mới về chăm sóc sức khỏe thú cưng 1 cách nhanh nhất và tiện lợi nhất, hoặc ChatBot tự động tư vấn. Bên cạnh đó, người dùng cũng có thể truy cập vào ứng dụng để cập nhật, đăng tin một cách dễ dàng và nhanh chóng. 2. Mục tiêu: bao gồm 2 mục tiêu chính 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 về cách chăm sóc sức khỏe thú cưng. - Liên lạc, trao đổi với những người dùng khác. - Kinh doanh, quảng cáo trên mạng xã hội. - Bày tỏ, thể hiện cảm xúc. b. Xây dụng chatbot hỗ trợ mạng xã hội - FAQ giải đáp nhanh các 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 về chăm sóc sức khỏe thú cưng. - Tìm kiếm những địa điểm như trung tâm chăm sóc thú cưng, các quán cafe thú cưng. - Báo cứu trợ, cưu mang thú cưng. 3. Phạm vi 9 Báo cáo đồ án 1 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 năng chia sẻ khoảnh khắc về 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 các chức năng quản lí bài viết bao gồm đăng tải, thay đổi và xóa bỏ. oCung cấp quảng cáo cho các bên kinh doanh, các dịch vụ chăm sóc. - Đối với chatbot: oCó khả năng trả lời các câu hỏi về một cách chi tiết. oPhân tích được nhu cầu và đưa ra tư vấn hợp lý đối với người dùng. oCung cấp liên hệ trực tiếp đến với nhân viên tư vấn khi vấn đề đặt ra ngoài phạm vi của bản thân nó và cập nhập được cách xử lý đối với các trường hợp này. oChatbot hiểu được tương đối ngôn ngữ tự nhiên. oTìm kiếm những địa điểm như trung tâm chăm sóc thú cưng, các quán cafe thú cưng. oBáo cứu trợ, cưu mang thú cưng. 4. Đối tượng sử dụng - Ứng dụng là mạng xã hội cho cộng đồng người yêu thú cưng cho nên phù hợp với mọi lứa tuổi, đặc biệt là hướng đến giới trẻ. - Các trung tâm dịch vụ hỗ trợ liên quan đến thú cưng. 5. Phương pháp thực hiện - Phương pháp làm việc: Làm việc nhóm 2 thành viên thông qua cả 2 phương thức online dưới sự hướng dẫn của 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 của đối tượng người dùng. oNghiên cứu tài liệu các công nghệ liên quan. - Phương pháp công nghệ: oTìm hiểu xây dựng chatbot trên 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 và tài liệu 10 Báo cáo đồ án 1 6. Nền tảng: - ReactJS - Javascript - Firebase - HTML - CSS - DialogFlow Chatbot 7. Kết quả mong đợi - Chatbot có khả năng phản hồi nhanh và chính xác ở mức tương đối. - Ứng dụng mạng xã hội hoạt động ổn định, có thể xử lý thông tin nhanh chóng… 8. Hướng phát triển của đề tài - Tính năng cập nhật thoại chatbot dành cho người dùng. - Tính năng chuyển đổi gói ngôn ngữ. - Nâng cấp khả năng xử lý ngôn ngữ tự nhiên của chatbot. - Kiểm duyệt nội dung chia sẻ của người dùng. 9. Kế hoạch làm việc Thời gian thực hiện từ ngày 14/3/2022 đến ngày kết thúc môn Đồ án 1. Nhóm chia thành 2 giai đoạn cụ thể: - Giai đoạn 1: Hoàn thiện giao diện người dùng và các tính năng cơ bản. Gồm 3 sprint với thời gian mỗi sprint kéo dài 2 tuần: Thời gian: 14/3/2022 - 25/4/2022 oSprint 1: Tìm hiểu công nghệ. oSprint 2: Phân tích yêu cầu và chức năng, chuẩn bị tài liệu, chuẩn bị bản vẽ, xây dựng CSDL. oSprint 3: Xây dựng và phát triển ứng dụng với các chức năng cơ bản Sprint Sprint 1 Thời gian Công việc dự kiến 14/3/2022 – 29/3/2022 - Tìm hiểu công nghệ - Tìm hiểu các yêu cầu nghiệp vụ của đề tài 11 Báo cáo đồ án 1 - Phân tích yêu cầu và chức năng của ứng dụng Sprint 2 29/3/2022 – 12/4/2022 - Viết tài liệu mô tả - Xây dựng bản vẽ - Xây dụng CSDL - Xây dựng giao diện ứng dụng Sprint 3 Xây dựng chatbot với các thoại cơ bản 12/4/2022 – 25/4/2022 - Xây dựng các tính năng cơ bản của ứng dụng - Liên kết chatbot với ứng dụng - Giai đoạn 2: Hoàn thiện các tính năng năng cơ bản và nâng cao của ứng dụng, triển khai và kiểm thử ứng dụng, viết báo cáo.... Gồm 3 sprint với thời gian mỗi sprint kéo dài 2 tuần: Thời gian: 25/4/2022 - báo cáo cuối kỳ oSprint 4: Hoàn thiện tính năng của ứng dụng oSprint 5: Hoàn thiện tính năng của ứng dụng oSprint 6: Triển khai và viết báo cáo Sprint Thời gian Công việc dự kiến - Hoàn thiện giao diện ứng dụng Sprint 4 25/4/2022 – 18/5/2022 - Tiếp tục hoàn thiện các tính năng của ứng dụng Sprint 5 18/5/2022 – 25/5/2022 - Kiểm thử ứng dụng - Hoàn thiện các tính năng của ứng dụng - 12 Kiểm thử ứng dụng Báo cáo đồ án 1 Sprint 6 25/5/2022 – báo cáo cuối kì - Kiểm thử ứng dụng - Viết báo cáo 10. Phân công công việc Công việc Công việc chung Mô tả công việc - Khảo sát, nghiên cứu đề tài - Tìm hiểu công nghệ - Phân tích yêu cầu - Lập trình backend - Lập trình frontend - Kiểm thử - Chuẩn bị tài liệu, viết báo cáo Trương Thành Quang Công việc cá nhân Vũ Phạm Ngọc Tân • Frontend • Thiết kế UI • Backend • Backend • Viết báo cáo • Viết báo cáo 13 Báo cáo đồ án 1 NỘI DUNG CHƯƠNG 1: GIỚI THIỆU CHUNG 1.1. Tổng quan đề tài - Tên ứng dụng: Social - Chủ đề chính: Mạng xã hội kết hợp chatbot cho người nuôi thú cưng - Nền tảng phát triển: ReactJS - Mô hình phát triển: MVC - Tích hợp chatbot: DialogFlow 1.2. Lý do chọn đề tài Hiện nay, nhu cầu về chia sẻ về những kinh nghiệm chăm sóc và tham gia kết nối cộng đồng người yêu thú cưng ngày càng được mở rộng. Để đáp ứng những nhu cầu đó, nhóm em quyết định chọn đề tài này, phát triển một ứng dụng mạng xã hội chia sẻ hình ảnh, video, cung cấp nhanh chóng thông tin về cách thức chăm sóc, những mẹo vặt về thú cưng và 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ẻ về 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 những trung tâm chăm sóc hoặc phòng thú y hoặc cafe thú cưng gần nhất Ứng dụng cung cấp những tính năng tiện ích giúp người dùng có thể tiếp cận đến những thông tin mới về chăm sóc sức khỏe thú cưng 1 cách nhanh nhất và tiện lợi nhất, hoặc ChatBot tự động tư vấn. Bên cạnh đó, người dùng cũng có thể truy cập vào ứng dụng để cập nhật, đăng tin một cách dễ dàng và nhanh chóng. 1.3. Đối tượng sử dụng • Ứng dụng là mạng xã hội cho cộng đồng người yêu thú cưng cho nên phù hợp với mọi lứa tuổi, đặc biệt là hướng đến giới trẻ. • Các trung tâm dịch vụ hỗ trợ liên quan đến thú cưng. 14 Báo cáo đồ án 1 1.4. Phạm vi nghiên cứu Phạm vi môi trường: Ứng dụng Web 1.4.1. Phạm vi chức năng: - Đối với ứng dụng: o Cung cấp chức năng chia sẻ khoảnh khắc về thú cưng. o Cung cấp thông tin chăm sóc sức khỏe thú cưng. o Kết nối cộng đồng. o Cung cấp các chức năng quản lí bài viết bao gồm đăng tải, thay đổi và xóa bỏ. o Cung cấp quảng cáo cho các bên kinh doanh, các dịch vụ chăm sóc. - Đối với chatbot: o Có khả năng trả lời các câu hỏi về một cách chi tiết. o Phân tích được nhu cầu và đưa ra tư vấn hợp lý đối với người dùng. o Cung cấp liên hệ trực tiếp đến với nhân viên tư vấn khi vấn đề đặt ra ngoài phạm vi của bản thân nó và cập nhập được cách xử lý đối với các trường hợp này. o Chatbot hiểu được tương đối ngôn ngữ tự nhiên. o Tìm kiếm những địa điểm như trung tâm chăm sóc thú cưng, các quán cafe thú cưng. o Báo cứu trợ, cưu mang thú cưng. 15 Báo cáo đồ án 1 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1. ReactJS Hình 2.1-1: React JS ReactJS là một thư viện trong đó có chứa nhiều JavaScript mã nguồn mở và cha đẻ của ReactJS đó chính là một ông lớn với cái tên ai cũng biết đó chính là Facebook. Mục đích của việc tạo ra ReactJS là để tạo ra những ứng dụng website hấp dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu. Và mục đích chủ chốt của ReactJS đó chính là mỗi website khi đã sử dụng ReactJS thì phải chạy thật mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện. 16 Báo cáo đồ án 1 2.2. JavaScript Hình 2.2-1: JavaScript JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò như là một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động. 17 Báo cáo đồ án 1 2.3. Firebase Hình 2.3-1: Firebase Firebase là platform do Google cung cấp, nhằm hỗ trợ việc tạo ra các web application, mobile application với chất lượng cao. Với việc sử dụng Firebase, developer có thể tập trung vào việc phát triển application mà không cần lo về việc sản phẩm của mình sẽ hoạt động và được quản lý thể nào ở phía Backend. Khái niệm Backend nhắc tới trong câu trên để chỉ việc xử lý và lưu trữ dữ liệu trong service, ở vùng "phía sau" mà người dùng không nhìn thấy. Firebase là một trong những BaaS (Backend as a service). Serverless architecture được chú ý như một giải pháp đáp ứng yêu cầu release một dịch vụ trong thời gian ngắn, trong bối cảnh đó, BaaS ra mắt người dùng. BaaS hướng đến thiết bị chủ yếu là mobile nên còn được gọi với 18 một tên gọi khác là MBaaS. Báo cáo đồ án 1 2.4. HTML Hình 2.4-1: HTML HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… và HTML không phải là ngôn ngữ 19 lập trình. Báo cáo đồ án 1 2.5. CSS Hình 2.5-1: CSS CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… 20