Báo cáo đồ án 1 xây dựng phần mềm chat

ĐẠ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 BÁO CÁO ĐỒ ÁN XÂY DỰNG PHẦN MỀM CHAT NGÀNH KỸ THUẬT PHẦN MỀM SINH VIÊN THỰC HIỆN NGUYỄN ĐÌNH NHẬT QUANG - 20520719 TRẦN ĐÌNH LỘC – 20520236 GIẢNG VIÊN HƯỚNG DẪN THS TRẦN THỊ HỒNG YẾN TP HỒ CHÍ MINH, 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 BÁO CÁO ĐỒ ÁN XÂY DỰNG PHẦN MỀM CHAT NGÀNH KỸ THUẬT PHẦN MỀM SINH VIÊN THỰC HIỆN NGUYỄN ĐÌNH NHẬT QUANG - 20520719 TRẦN ĐÌNH LỘC – 20520236 GIẢNG VIÊN HƯỚNG DẪN THS TRẦN THỊ HỒNG YẾN TP HỒ CHÍ MINH, 2022 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Người nhận xét (Ký ghi rõ họ tên) Trần Thị Hồng Yến LỜI CẢM ƠN Đồ án “Xây dựng phần mềm Chat” đồ án đầu tay tảng Mobile mà nhóm em thực Để hồn thành đồ án lần này, chúng em xin dành lời cảm ơn sâu sắc đến: Ths.Trần Thị Hồng Yến tận tình hướng dẫn, cho lời khuyên đưa định hướng thiết thực cho bọn em Những góp ý, học mà chúng em học suốt trình thực đồ án hành trang quý báu không mà cịn tương lai Các q thầy trường Đại học Công nghệ Thông tin truyền đạt học hữu ích, khơng kiến thức chun ngành mà cịn kĩ sống, cơng việc sau Trong trình thực đồ án, nhóm khơng tránh khỏi sai sót, chúng em kính mong nhận góp ý, hướng dẫn để hồn thiện đồ án nữa, không dừng lại đồ án mà phát triển lên thành đồ án Chúng em xin gửi lời cảm ơn chân thành đến TP.HCM, ngày 23 tháng 12 năm 2022 Nhóm sinh viên thực Nguyễn Đình Nhật Quang - Trần Đình Lộc ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG PHẦN MỀM CHAT 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: Nguyễn Đình Nhật Quang - 20520719 Trần Đình Lộc - 20520236 Nội dung đề tài: Giới thiệu Trong năm trở lại đây, Internet trở thành thứ thiếu xã hội, giai đoạn sau năm 2010, đánh dấu bùng nổ Smartphone không Việt Nam mà giới Bên cạnh đó, năm trở lại đây, giới trải qua đại dịch lớn, làm thay đổi nhận thức người hình thức trao đổi thông tin công việc sống, mở hội cho Internet tiếp tục phát triển, đóng vai trị quan trọng sống thường nhật Từ đó, nhu cầu trao đổi thơng tin thông qua Internet trở nên cần thiết hết xã hội Điều tiền đề để nhóm chọn đề tài “Xây dựng phần mềm Chat” nhằm giúp việc trao đổi tin nhắn trở nên đơn giản, hiệu Mô tả chi tiết mục tiêu - Hiểu Flutter, NodeJS cách áp dụng công nghệ vào đồ án - Hiểu State Management, Architecture: Bloc - Xây dựng phần mềm Chat với tính Real-time Chat, quản lý hồ sơ người dùng, Phạm vi ● Phạm vi mơi trường - Ứng dụng hoạt động hệ điều hành Android ● Phạm vi chức - Xây dựng chức đăng nhập, đăng ký, quên mật - Quản lý thông tin người dùng - Thực Chat thời gian thực - Quản lý bạn bè - Quản lý nhóm Chat - Thơng báo - Thực Video call người Đối tượng - Người sử dụng có nhu cầu trao đổi thông tin thông qua Internet Phương pháp thực - Tìm hiểu cơng nghệ Mobile Flutter - Tìm hiểu cơng nghệ Back-end NodeJS, MongoDB, Firebase - Tìm hiểu State Management BloC - Khảo sát thực trạng ứng dụng Chat thị trường Facebook messenger, Telegram, Zalo từ tiến hành phân tích, xác định u cầu cụ thể cho đề tài - Phân tích thiết kế hệ thống ứng dụng - Tiến hành nghiên cứu thiết kế giao diện cho ứng dụng tảng Mobile - Tiến hành xây dựng ứng dụng Android - Tiến hành triển khai kiểm thử ứng dụng Công nghệ - Mobile: Flutter, Material Design - State Management: Bloc - Back-end: NodeJS, Firebase - Database: MongoDB - API Documentation: Swagger - Source Control: Github Kết mong đợi - Tìm hiểu áp dụng cơng nghệ Flutter - Tìm hiểu áp dụng công nghệ việc triển khai, sử dụng liệu thời gian thực - Hiểu rõ nghiệp vụ, chức phần mềm Chat - Xây dựng phần mềm Chat đáp ứng yêu cầu giao diện chức đề - Có thể thay đổi linh hoạt giao diện, mở rộng thêm tính việc phát triển phần mềm tương lai Kế hoạch thực hiện: STT Tên công việc Thời gian dự Thành viên thực định Nghiên cứu thử nghiệm 05/09/2022 - công nghệ 11/09/2022 Nghiên cứu thiết kế giao 12/09/2022 - diện cho Mobile 18/09/2022 Triển khai, khởi tạo Source 19/09/2022 - Cả nhóm Trần Đình Lộc Nguyễn Đình Nhật Quang Code cài đặt cấu hình 25/09/2022 Firebase Xây dựng API cho chức 19/09/2022 - xác thực người dùng 25/09/2022 Triển khai chức xác 26/09/2022 - thực người dùng 02/10/2022 Xây dựng API cho chức 26/09/2022 - bạn bè 02/10/2022 Triển khai chức bạn bè 03/10/2022 Mobile 09/10/2022 Xây dựng API cho chức 03/10/2022 - quản lý thơng tin 09/10/2022 Trần Đình Lộc Nguyễn Đình Nhật Quang Trần Đình Lộc Nguyễn Đình Nhật Quang Trần Đình Lộc người dùng 10 11 12 13 14 15 16 17 18 Triển khai chức quản 10/10/2022 - lý thông tin người dùng 16/10/2022 Xây dựng API Chat cá nhân 10/10/2022 cho phần mềm 23/10/2022 Triển khai chức Chat 17/10/2022 - cá nhân Mobile 30/10/2022 Xây dựng API Chat nhóm 24/10/2022 - cho phần mềm 30/10/2022 Triển khai chức Chat 31/10/2022 - nhóm Mobile 06/11/2022 Xây dựng API thông báo 31/10/2022 - cho phần mềm 06/11/2022 Triển khai chức thông 07/11/2022 - báo cho phần mềm 13/11/2022 Xây dựng API Video call 07/11/2022 - cho phần mềm 20/11/2022 Triển khai chức Video 14/11/2022 - call cho Mobile 27/11/2022 Kiểm thử phần mềm sửa 21/11/2022 - lỗi 04/12/2022 Nguyễn Đình Nhật Quang Trần Đình Lộc Nguyễn Đình Nhật Quang Trần Đình Lộc Nguyễn Đình Nhật Quang Trần Đình Lộc Nguyễn Đình Nhật Quang Trần Đình Lộc Nguyễn Đình Nhật Quang Cả nhóm 19 Hồn thiện báo cáo 05/12/2022 - Cả nhóm 11/12/2022 20 Thời gian dự phòng 12/12/2022 31/12/2022 Xác nhận CBHD TP HCM, ngày tháng năm 2022 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Ths Trần Thị Hồng Yến Nguyễn Đình Nhật Quang Trần Đình Lộc 4.2.16 Màn hình “Lời mời kết bạn nhận” Hình 4.19 Màn hình "Lời mời kết bạn nhận" - Người dùng xem danh sách lời mời kết bạn mà nhận, người dùng chấp nhận từ chối lời mời cách nhấn nút tương ứng lời mời kết bạn muốn thực hành động 110 4.2.17 Màn hình “Danh sách nhóm” Hình 4.20 Màn hình "Danh sách nhóm" - Người dùng xem danh sách nhóm Chat mà tham gia, người dùng chủ sở hữu nhóm có dịng chữ Admin bên cạnh - Ngồi ra, người dùng xem danh sách lời mời vào nhóm gửi nhận cách nhấn vào nút “Groups Request” - Người dùng tiến hành tạo nhóm cách nhấn nút “Create new group” 111 4.2.18 Màn hình “Tạo nhóm mới” Hình 4.21 Màn hình "Tạo nhóm mới" - Người dùng sau nhấn vào nút “Create new group” hình “Danh sách nhóm” chuyển đến hình “Tạo nhóm mới” - Ở hình này, người dùng chọn Avatar cho group mới, tìm kiếm thêm thành viên từ danh sách bạn bè, nhập tên nhóm (tên nhóm bắt buộc không để trống) nhấn nút “Done” để tạo nhóm 112 4.2.19 Màn hình “Lời mời vào nhóm gửi” Hình 4.22 Màn hình "Lời mời vào nhóm gửi" - Ở hình này, người dùng xem danh sách lời mời vào nhóm mà gửi, đồng thời hiển thị người dùng mời vào nhóm - Người dùng thu hồi lời mời vào nhóm cách nhấn vào nút thu hồi bên phải lời mời muốn thu hồi 113 4.2.20 Màn hình “Lời mời vào nhóm nhận” Hình 4.23 Màn hình "Lời mời vào nhóm nhận" - Người dùng xem danh sách lời mời vào nhóm mà nhận, người dùng chấp nhận từ chối lời mời cách nhấn nút tương ứng lời mời vào nhóm muốn thực hành động 114 4.2.21 Màn hình “Cài đặt” Hình 4.24 Màn hình "Cài đặt" - Ở hình “Cài đặt”, người dùng xem nhanh thơng tin thân Avatar, Email, số điện thoại - Người dùng thay đổi thông tin cá nhân cách nhấn vào nút “Edit Profile” - Người dùng xem danh sách thiết bị sử dụng để đăng nhập vào App cách nhấn nút “Devices” - Người dùng thay đổi mật cách nhấn nút “Change Password”” - Người dùng xem thơng tin App cách nhấn nút “About us” - Người dùng chọn đăng xuất App cách nhấn nút “Log out” 115 4.2.22 Màn hình “Chỉnh sửa thơng tin cá nhân” Hình 4.25 Màn hình "Chỉnh sửa thơng tin cá nhân" - Ở hình “Chỉnh sửa thơng tin cá nhân”, người dùng cập nhập Avatar cách nhấn nút “Camera” bên góc phải Avatar - Ngồi người dùng cập nhật họ tên, số điện thoại, Bio thân - Phần mềm không cho phép người dùng thay đổi Email - Khi thay đổi hoàn tất, người dùng nhập nút “Done” để cập nhập thông tin 116 4.2.23 Màn hình “Quản lý thiết bị” Hình 4.26 Màn hình "Quản lý thiết bị" - Ở hình này, người dùng xem thiết bị mà đăng nhập mục “Current session”, xem thiết bị khác mà dùng để đăng nhập vào App mục “Active sessions” 117 4.2.24 Màn hình “Giới thiệu Thơng tin App” Hình 4.27 Màn hình "Giới thiệu Thơng tin App" - Màn hình cho phép người dùng xem Logo App, Version App tên đội phát triển phần mềm 118 4.2.25 Màn hình “Danh sách thơng báo” Hình 4.28 Màn hình "Danh sách thơng báo" - Khi người dùng nhấn vào nút “Thơng báo” hình “Trang chủ”, “Danh sách bạn bè”, “Danh sách nhóm”, chuyển đến hình “Danh sách thơng báo” - Người dùng xem danh sách thơng báo lời mời kết bạn, lời mời vào nhóm nhận chấp nhận từ chối lời mời thơng báo 119 4.2.26 Màn hình “Danh sách tìm kiếm” Hình 4.29 Màn hình "Danh sách tìm kiếm" - Ở hình này, danh mục “Your friends”, “Your groups”, “Messages” thay đổi theo từ khoá mà người dùng nhập vào - Hình thể người dùng nhập từ khoá “Gia” tồn mục “Your friends”, “Your groups” mà không tồn mục “Messages”, mục “Messages” khơng hiển thị kết trả - Hình bên phải thể nhập từ khố mà có kết mục, mục hiển thị 120 4.2.27 Màn hình “Video call” Hình 4.30 Màn hình "Video call" - Ở hình này, người dùng bắt đầu gọi chuyển tới hình chờ hình bên trái Nếu người bên chấp nhận gọi, người dùng chuyển qua hình thực gọi hình bên phải 121 TỔNG KẾT Thuận lợi • Nhóm nhận hỗ trợ, giúp đỡ từ giảng viên, từ nhóm có định hướng rõ ràng cho đề tài • Có nhiều mẫu phần mềm mà nhóm tham khảo Khó khăn • Đây lần đầu nhóm tiếp cận cơng nghệ Flutter, WebRTC, nên trình tìm hiểu tốn nhiều thời gian gặp nhiều khó khăn • Các công nghệ WebRTC, SocketIO số thư viện tảng Flutter cịn tài liệu để nhóm tham khảo triển khai, nhiều ảnh hưởng đến tiến độ nhóm Kết đạt • Kết thúc đồ án 1, nhóm nghiên cứu xây dựng phần mềm Chat tương đối hồn chỉnh, có nhiều chức hoạt động ổn định • Phần mềm đáp ứng nhu cầu người dùng đăng nhập, đăng ký, khơi phục mật khẩu, Chat nhóm, Chat với bạn bè, tìm kiếm tin nhắn, nhóm bạn bè, kết bạn, mời bạn bè vào nhóm, thực Video call Ưu điểm • Hồn thành u cầu, đáp ứng đầy đủ chức nhóm đặt từ trước • Phần mềm viết dựa Flutter, cho hiệu tiệm cận với native app • Các tính Realtime Chat, Video call nhóm tự phát triển cơng nghệ mã nguồn mở tự do, khơng phát sinh chi phí q trình triển khai sử dụng 122 • Giao diện phần mềm đơn giản, dễ sử dụng, đồng phiên hệ điều hành, người sử dụng phần mềm khơng q nhiều thời gian để làm quen • Ứng dụng sử dụng Firebase để thực xác thực phân quyền nên đảm bảo độ bảo mật thông tin cho người dùng Nhược điểm • Gọi điện Video call gọi người, nguyên nhân thực Video call với nhiều người, để đảm bảo ổn định, cần phải cung cấp Server chuyên trách, từ dẫn đến tăng cao chi phí • Server nặng, chưa tối ưu nên có khả tải lượng người dùng lớn • Ứng dụng hoạt động mạng yếu • Chưa có tính “Đã xem” Hướng phát triển • Nâng cấp giao diện phần mềm dựa việc sử dụng Material 3, bổ sung Animation để tăng độ sinh động, bắt mắt cho phần mềm • Nghiên cứu triển khai Video call nhóm tránh tăng chi phí q cao • Tối ưu hố lại Server phần mềm • Nghiên cứu, triển khai chức “Đã xem” 123 TÀI LIỆU THAM KHẢO [1] B Semah, "What Exactly is Node.js? Explained for Beginners," [Online] Available: https://www.freecodecamp.org/news/what-is-node-js/ [Accessed 19 December 2022] [2] M contributors, "WebRTC API," [Online] Available: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API [Accessed 20 December 2022] [3] F Angelov, "Bloc State Management Library," [Online] Available: https://bloclibrary.dev/ [Accessed 20 December 2022] [4] "What Is Elasticsearch," Amazon Web Services, [Online] Available: https://aws.amazon.com/what-is/elasticsearch/ [Accessed 18 December 2022] [5] Faisal Abid, Iiro Krankka, Ryuji Iwata, Novoda Ltd, Gianluca Cesari, Hidenori Matsubayashi, Pradumna Saraf, Alex Li, "Flutter Documentation," Flutter organization, [Online] Available: https://docs.flutter.dev/ [Accessed 20 December 2022] [6] Max, "Realtime Communication with WebRTC in Flutter & Dart," [Online] Available: https://www.youtube.com/watch?v=hAKQzNQmNe0&t=267s [Accessed December 2022] [7] H Habibullah, "Flutter: Integrating Socket IO Client," [Online] Available: https://medium.com/flutter-community/flutter-integrating-socket-io-client2a8f6e208810 [Accessed 25 October 2022] [8] H Pathak, "A beginner’s guide to go_router in Flutter," [Online] Available: https://blog.codemagic.io/flutter-go-router-guide/ [Accessed 15 October 2022] [9] Node.js contributors, "Node.js," OpenJS Foundation, [Online] Available: https://nodejs.org/en/ [Accessed 21 December 2022] [10] The WebRTC Project Authors, "WebRTC," Google WebRTC, [Online] Available: https://webrtc.org/ [Accessed 20 December 2022] [11] G Rauch, "Socket.IO Documentation," Socket.IO, [Online] Available: https://socket.io/ [Accessed 19 December 2022] 124 ... 07 /11 /2022 - báo cho phần mềm 13 /11 /2022 Xây dựng API Video call 07 /11 /2022 - cho phần mềm 20 /11 /2022 Triển khai chức Video 14 /11 /2022 - call cho Mobile 27 /11 /2022 Kiểm thử phần mềm sửa 21/ 11/ 2022... dùng 10 11 12 13 14 15 16 17 18 Triển khai chức quản 10 /10 /2022 - lý thông tin người dùng 16 /10 /2022 Xây dựng API Chat cá nhân 10 /10 /2022 cho phần mềm 23 /10 /2022 Triển khai chức Chat 17 /10 /2022... Mobile 30 /10 /2022 Xây dựng API Chat nhóm 24 /10 /2022 - cho phần mềm 30 /10 /2022 Triển khai chức Chat 31/ 10/2022 - nhóm Mobile 06 /11 /2022 Xây dựng API thơng báo 31/ 10/2022 - cho phần mềm 06 /11 /2022