Đồ án ứng dụng nhắn tin gọi điện trực tuyến

ĐẠ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: ỨNG DỤNG NHẮN TIN - GỌI ĐIỆN TRỰC TUYẾN Giảng viên hướng dẫn: HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: VŨ NGỌC THẠCH – MSSV: 19520266 HUỲNH THỊ MINH NHỰC – MSSV: 19521973 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: ỨNG DỤNG NHẮN TIN - GỌI ĐIỆN TRỰC TUYẾN Giảng viên hướng dẫn: HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: VŨ NGỌC THẠCH – MSSV: 19520266 HUỲNH THỊ MINH NHỰC – MSSV: 19521973 Thành phố Hồ Chí Minh, tháng năm 2022 Lời cảm ơn Đồ án nối tiếp đồ án Trong đồ án nhóm dành nhiều nỗ lực tâm huyết để xây dựng nên ứng dụng chat với mức độ khó cao Đây khó khăn thử thách mà nhóm đối mặt phải Đi đơi với việc tiếp tục tích lũy thêm kinh nghiệm, thực hành kiến thức học, học hỏi Việc hoàn thành đồ án coi lại bước tiến lớn nhóm đường tự học, bên cạnh hỗ trợ tận tình từ giảng viên hướng dẫn cô Huỳnh Hồ Thị Mộng Trinh Nhóm xin chân thành cảm ơn Huỳnh Hồ Thị Mộng Trinh tận tình giúp đỡ nhóm em hồn thành đồ án nhóm Chính nhờ góp ý, động viên 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ị q 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 Flutter 1.1 Giới thiệu 1.2 Lý sử dụng Nodejs 2.1 Giới thiệu 2.2 Lý sử dụng NodeJs 10 Socket IO 11 3.1 Giới thiệu 11 3.2 Lý sử dụng SocketIO 11 Agora 12 4.1 Giới thiệu 12 4.2 Lý sử dụng Agora 13 MySQL 13 5.1 Giới thiệu 13 CHƯƠNG III: MƠ HÌNH USE-CASE 16 Sơ đồ Use-case mức tổng quát 16 Danh sách Use-case 16 Đặc tả Use-case 17 3.1 Đặc tả Use-case “Login” 17 3.2 Đặc tả Usecase “Logout” 18 3.3 Đặc tả Usecase “AutoLogin” 19 3.4 Đặc tả Usecase “Link to Meer App” 19 3.5 Đặc tả Usecase “Send Text” 20 3.6 Đặc tả Usecase “Send Image” 21 3.7 Đặc tả Usecase “Send File” 22 3.8 Đặc tả Usecase “Change Name Alias” 23 3.9 Đặc tả Usecase “Call video” 24 3.10 Đặc tả Usecase “Call audio” 25 3.11 Đặc tả Usecase “Search Text” 26 3.12 Đặc tả Usecase “Search Image” 27 3.13 Đặc tả Usecase “Search File” 28 3.14 Đặc tả Usecase “Create Group” 28 3.15 Đặc tả Usecase “Change Avatar” 29 3.16 Đặc tả Usecase “Rename Group” 30 3.17 Đặc tả Usecase “Change Joiners” 31 3.18 Đặc tả Usecase “Check Friend Online” 32 CHƯƠNG IV: PHÂN TÍCH HỆ THỐNG 34 Sơ đồ lớp 34 1.1 Sơ đồ lớp mức phân tích 34 1.2 Danh sách lớp đối tượng 34 1.3 Mô tả lớp đối tượng 35 Sơ đồ liệu 39 2.1 Danh sách bảng sơ đồ liệu 39 2.2 Bảng ROOM 40 2.3 Bảng User 41 2.4 Bảng Message 42 2.5 Bảng UserRoom 42 2.6 Bảng Friend 43 Sơ đồ hoạt động 44 3.1 Sơ đồ hoạt động tính chat: 44 3.2 Sơ đồ hoạt động tính gọi video: 45 CHƯƠNG V: THIẾT KẾ GIAO DIỆN 46 Màn hình Đăng nhập 46 Màn hình Home 46 Màn hình Tin nhắn 48 Màn hình Thêm thành viên 49 Màn hình Nhóm 50 Màn hình Tìm kiếm 51 Màn hình Chat 51 Màn hình Cài đặt đoạn chat 52 Màn hình Hiển thị hình ảnh đoạn chat 53 10 Màn hình gọi video: 54 CHƯƠNG VI: TỔNG KẾT 56 Công nghệ sử dụng 56 Độ hoàn thiện chức 56 Kết đạt hướng phát triển 56 3.1 Kết đạt 56 3.2 Hướng phát triển 57 CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC 58 CHƯƠNG VIII: TÀI LIỆU THAM KHẢO 60 CHƯƠNG I: GIỚI THIỆU CHUNG Đề tài - Tên đề tài: Xây dựng ứng dụng nhắn tin - gọi điện trực tuyến - Công nghệ sử dụng: Flutter (frontend) + NodeJs (backend) - Cơ sở liệu sử dụng: MySQL Lý chọn đề tài Ở đồ án 1, nhóm làm đề tài hướng tới cộng đồng Thiện nguyện, góp phần giúp đỡ người có nhu cầu tình nguyện, đồng thời san sẻ tình yêu thương, đồng cảm với nhiều người khác Tiếp nối việc đó, đồ án nhóm mở rộng thêm tính có đồ án 1, góp phần xây dựng cộng đồng thiện nguyện ngày lớn mạnh, tăng tính tương tác người có cộng đồng Ứng dụng chat - gọi điện góp phần thúc đẩy trao đổi, tương tác người có tinh thần thiện nguyện, mang lại hiệu cao trao đổi thông tin, chia sẻ thuận tiện Tóm tắt đề tài Trong thời buổi đại dịch nay, việc gọi điện thoại nhắn tin qua kênh mạng xã hội điều phổ biển tất người Việc giúp người vừa tiết kiệm tiền vừa nhanh chóng, tiện lợi cho dù nơi Cộng đồng thiện nguyện có riêng cho mạng xã hội dùng để chia sẻ thông tin rồi, nhiên việc chat thành viên có kiện điều cần thiết Chính thế, ứng dụng nhắn tin, gọi điện thoại trực tuyến đời dành riêng cho cộng đồng thiện nguyện, nhằm nâng cao tính tương tác cho người môi trường Mục tiêu đề tài - Xây dựng ứng dụng Chat & Gọi điện trực tuyến dành riêng cho cộng đồng thiện nguyện đồ án có khả tương tác với độ trễ thấp - Tìm hiểu cơng nghệ thích hợp xây dựng ứng dụng - Hoàn thành báo cáo môn học Phương pháp nghiên cứu - Nghiên cứu ứng dụng có sẵn thị trường, nhận xét ưu khuyết điểm ứng dụng (Messenger, Zalo, ) - Tìm hiểu cơng nghệ thị trường, nhận xét chọn phần mềm thích hợp - Đánh giá khả nhóm mức độ nào, từ tìm tính thích hợp để phát triển Ý nghĩa hướng đề tài 6.1 Về mặt tài liệu - Sử dụng nguồn tài liệu tham khảo Flutter, NodeJs, MySQL - Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mơ hình thiết kế giao diện 6.2 Về mặt sản phẩm - Tạo ứng dụng Chat & Gọi điện dành cho Thiện nguyện có khả kết nối trực tuyến - 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ễ sử dụng CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN Flutter 1.1 Giới thiệu Flutter tảng phát triển ứng dụng đa tảng cho iOS Android Google phát triển sử dụng để tạo ứng dụng gốc (native app) cho Google Flutter gồm thành phần quan trọng: - Một SDK (Software Development Kit): Một sưu tập công cụ giúp bạn phát triển ứng dụng Điều bao gồm công cụ để biên dịch mã bạn thành mã máy gốc (mã cho iOS Android) - Một Framework (UI Library based on widgets): Một tập hợp thành phần giao diện người dùng (UI) tái sử dụng (button, text inputs, slider, v.v.) giúp bạn cá nhân hóa tùy theo nhu cầu riêng Tính bật Flutter: - Flutter react framework - Sử dụng ngơn ngữ lập trình Dart đơn giản dễ học - Phát triển ứng dụng nhanh - Giao diện người dùng đẹp linh hoạt - Hỗ trợ nhiều widget khác - Thể UI nhiều tảng - Ứng dụng có hiệu cao 1.2 Lý sử dụng Phát triển ứng dụng nhanh chóng: Tính hot reload giúp bạn nhanh chóng CHƯƠNG V: THIẾT KẾ GIAO DIỆN Màn hình Đăng nhập * Mơ tả chung xử lý kiện hình: Khi mở app lên, giao diện app Các Component: - Textfield Username: cho phép nhập tên đăng nhập vào hệ thống - Textfield Password: cho phép nhận mật vào hệ thống - Button “Đăng nhập”: đăng nhập vào hệ thống Màn hình Home 46 * Mô tả chung xử lý kiện hình: Sau đăng nhập ứng dụng mặc định tab Chat Số lượng hình: Các component: - Search bar: cho phép người dùng nhập key word để tìm kiếm tài khoản người dùng khác để bắt đầu trò chuyện - Active user: hiển thị avatar, tên người dùng đăng nhập hoạt động hệ thống - Tab điều hướng: hỗ trợ người dùng điều hướng đến danh sách đoạn chat riêng tư (2 người) nhóm chat ( > người) - ChatOverview: hiển thị số thông tin đoạn chat tên, avatar, tin nhắn cuối, thời 47 gian gửi tin nhắn cuối Màn hình Tin nhắn * Mô tả chung xử lý kiện hình: Khi click vào tab Mới ứng dụng điều hướng sang hình tin nhắn Các component: - Searchbar: hỗ trợ người dùng nhập key word tìm kiếm người tài khoản người dùng khác để bắt đầu hội thoại - ButtonNew: click vào button để điều hướng sang hình Tạo nhóm chat - UserOverView: hiển thị thông tin tổng quan người dùng avatar, tên 48 Màn hình Thêm thành viên * Mô tả chung xử lý kiện hình: Màn hình hiển thị sau người dùng click button “Tạo nhóm mới” hình Tin nhắn Các component: - SearchBar: hỗ trợ người dùng nhập key word tìm kiếm tài khoản người dùng khác để thêm vào nhóm muốn tạo - MemberItem: hiển thị thông tin người dùng bạn thêm vào nhóm - NonMemberItem: hiển thị thơng tin người dùng chưa thêm vào nhóm bạn 49 Màn hình Nhóm * Mơ tả chung xử lý kiện hình: - Avatar : hiển thị ảnh nhóm mà người dùng chọn - NameTextfied: hiển thị tên nhóm - MemberItem: hiển thị thơng tin tài khoản thêm vào nhóm người dùng 50 Màn hình Tìm kiếm * Mơ tả chung xử lý kiện hình: Màn hình hiển thị sau người dùng click vào SearchBar Các component: - SearchBar: hỗ trợ người dùng nhập key word tìm kiếm tài khoản người - UserItem: hiển thị thơng tin người dùng Màn hình Chat 51 * Mô tả chung xử lý kiện hình: Khi bấm vào phịng chat bất kỳ, hình tin nhắn phịng chat lên, bao gồm tin nhắn nhắn trước (có chữ, hình file) Các component: - Textfield Message: cho phép nhập văn muốn chat - Button Media: cho phép chọn lựa hình ảnh tệp tin để gửi đoạn chat - Button Video Call: cho phép thực gọi video với tất thành viên đoạn chat - Button Setting: mở hình Cài đặt đoạn chat lên - Button Back: thoát khỏi hình đoạn chat, quay trở lại hình trước Màn hình Cài đặt đoạn chat 52 * Mơ tả chung xử lý kiện hình: Khi bấm vào Button Setting hình Chat, hình lên, bao gồm thơng tin có đoạn chat Component bao gồm: Image Avatar: Ảnh đại diện đoạn chat, mặc định ảnh bạn bè phòng chat private Button Video Call: cho phép thực gọi video đoạn chat Button “File Hình ảnh”: Cho phép tìm kiếm hình ảnh file gửi đoạn chat Button “Đặt biệt danh”: Cho phép đổi biệt danh thành viên đoạn chat Button “Đổi tên trò chuyện”: Cho phép đổi tên trò chuyện thành tên khác Màn hình Hiển thị hình ảnh đoạn chat 53 * Mô tả chung xử lý kiện hình: Khi bấm vào Button “File Hình ảnh” hình Cài đặt đoạn chat, hình lên, hiển thị thơng tin hình ảnh file gửi Component bao gồm: Button Download File: cho phép tải file máy Image: bấm vào để phóng to hình lên 10 Màn hình gọi video: 54 * Mô tả chung xử lý kiện hình: Khi bấm vào Button Video Call hình Chat Cài đặt Chat, hình lên Component bao gồm: - Button Turn off: khỏi trị chuyện video call - Button Micro: Dùng để bật tắt Micro - Button Transfer Camera: Chuyển đổi camera trước sau - Button Camera: Dùng để bật tắt camera 55 CHƯƠNG VI: TỔNG KẾT Công nghệ sử dụng - Flutter thiết kế UI cross platform cho Android IOS - Nodejs thiết kế server - Agora sử dụng cho việc gọi Video call - Socket Io dành cho việc chat real time Độ hoàn thiện chức STT Tên chức Mức độ hoàn thành Ghi Đăng nhập, Đăng ký 100% Quản lý Phòng chat 70% Quản lý Tin nhắn 80% Liên kết với Đồ án 50% Kết đạt hướng phát triển 3.1 Kết đạt Về lý thuyết: - Tìm hiểu nắm quy trình xây dựng ứng dụng chat realtime - Tìm hiểu nắm nguyên tắc tạo nên gọi trực tuyến 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, Google Drive, 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ó app nhắn tin thời gian quy định - Giao diện thân thiện, dễ sử dụng 56 3.2 Hướng phát triển Tiếp tục phát triển, hoàn thiện số chức chưa hoàn thiện Nâng cao hiệu suất ứng dụng (tăng tốc độ tải hình tin nhắn, hạn chế lỗi phát sinh tình trạng kết nối mạng, ) Nâng cao liên kết đồ án đồ án 2: - Tạo lịch nhắc ngày tổ chức kiện ứng dụng chat - Tự độ mở profile người dùng click chat vào đồ án - Tự động tạo phòng người dùng tham gia vào kiện 57 CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC STT Nội dung công việc Ngày bắt Ngày kết Người đảm đầu thúc nhận Ngọc Thạch Trạng thái Chọn đề tài 01/09/2021 03/09/2021 Phân tích yêu cầu 03/09/2021 08/09/2021 Minh Nhực Hoàn thành 08/09/2021 13/09/2021 Minh Nhực Hoàn thành 25/4/2022 30/4/2022 Ngọc Thạch Hoàn thành 1/5/2022 22/5/2022 Minh Nhực Hoàn thành Minh Nhực Hoàn thành Thiết lập actor, chức Vẽ diagram Thiết kế giao diện Figma Thiết kế CSDL 1/5/2022 22/5/2022 Ngọc Thạch Hoàn thành 11 Thiết kế Server 23/5/2022 5/6/2022 Ngọc Thạch Hoàn thành 23/5/2022 5/6/2022 Minh Nhực Hồn thành 12 Xây dựng hình Flutter 13 Xử lý kiện UI 6/6/2022 11/6/2022 15 Kiểm thử ứng dụng 12/6/2022 14/6/2022 58 Ngọc Thạch Minh Nhực Ngọc Thạch Minh Nhực Hoàn thành Hoàn thành 16 Viết báo cáo 14/6/2022 17/6/2022 59 Ngọc Thạch Minh Nhực Hoàn thành CHƯƠNG VIII: TÀI LIỆU THAM KHẢO Flutter UI Design Series: Tutorial Design with Flutter | Youtube Flutter documentation: Flutter documentation | Flutter Bloc library: Bloc State Management Library (bloclibrary.dev) Example Flutter App: Ebook App | Youtube Book App | Youtube Chat App | Youtube Chat App | Youtube Socket IO: Socket IO Introduction | Socket.IO Node Js: Nodejs Documentation | NodeJs Web RTC: WebRTC API - Web APIs | Web RTC Agora: Agora Documentation | Agora MySQL: MySQL Documentation | MySQL 60 ... dựng ứng dụng nhắn tin - gọi điện trực tuyến - Công nghệ sử dụng: Flutter (frontend) + NodeJs (backend) - Cơ sở liệu sử dụng: MySQL Lý chọn đề tài Ở đồ án 1, nhóm làm đề tài hướng tới cộng đồng... 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: ỨNG DỤNG NHẮN TIN - GỌI ĐIỆN TRỰC TUYẾN Giảng viên hướng dẫn: HUỲNH HỒ THỊ MỘNG TRINH Sinh viên... đề tài - Xây dựng ứng dụng Chat & Gọi điện trực tuyến dành riêng cho cộng đồng thiện nguyện đồ án có khả tương tác với độ trễ thấp - Tìm hiểu cơng nghệ thích hợp xây dựng ứng dụng - Hồn thành