ĐỒ ÁN CHUYÊN NGÀNH - ĐỀ TÀI: XÂY DỰNG HỆ THỐNG CHAT VÀ VIDEO CALL ĐA NỀN TẢNG BẰNG FLUTTER

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI: XÂY DỰNG HỆ THỐNG CHAT VÀ VIDEO CALL ĐA NỀN TẢNG BẰNG FLUTTER Sinh viên thực : Võ Đăng Lâm Giảng viên hướng dẫn: ThS Nguyễn Văn Bình Lớp : 17IT2 Đà Nẵng, tháng 12 năm 2020 MỞ ĐẦU Thế kỷ 21 kỷ nguyên toàn cầu, với phát minh internet trái đất khơng cịn hình trịn mà đường thẳng kết nối ý nghĩ người Cùng với q trình tồn cầu hố, nhu cầu chia thông tin, kết nối bạn bè ngày phát triển thúc đẩy đời mạng xã hội Ứng dụng nhắn tin hình thức dịch vụ truyền thông, bạn dễ dàng giữ liên lạc với bạn bè, người thân cách nhắn tin cho nhau, bạn thể chia cho hình ảnh hay file dạng tin nhắn, hay gọi video cho Bạn cịn kết nối với người xa lạ dùng ứng dụng khắp nước cách nhanh chóng, đơn giản hết miễn phí Trong vài năm trở lại đây, thiết bị di động ngày phát triển rộng rãi đa dạng với tảng lớn Android IOS Vì nên ứng dụng phải phát triển để đáp ứng xu Để phát triển ứng dụng người ta thường xây dựng chúng framework đa tảng khác react native, flutter… Trong flutter framework phát triển google có phát triển tốc hành Ngày nay, với phát triển nhanh chóng xã hội , nhu cầu trao đổi thơng tin cần thiết, em chọn đề tài “Xây dựng hệ thống chat video call đa tảng flutter” với mục đích nghiên cứu, tìm hiểu cách hoạt động framework đa tảng xây dựng dựng dụng nhắn tin để đáp ứng nhu cầu giao lưu, trao đổi thông tin người với LỜI CẢM ƠN Trong thời gian làm đồ án, em nhận nhiều giúp đỡ, đóng góp ý kiến bảo nhiệt tình thầy bạn bè Em xin gửi lời cảm ơn chân thành đến ThS Nguyễn Văn Bình, người tận tình hướng dẫn, trực tiếp bảo tạo điều kiện giúp đỡ em suốt trình làm đồ án Em xin chân thành cảm ơn thầy cô trường đại học Công Nghệ Thông Tin Và Truyền Thông Việt Hàn, người dạy dỗ trang bị cho em kiến thức để hoàn thành đề tài đồ án Mặc dù trình nghiên cứu đề tài, thân em có cố gắng định song trình độ thời gian có hạn nên đề tài khơng tránh khỏi thiếu sót Vậy kính mong thầy bạn đóng góp ý kiến để em hoàn thiện NHẬN XÉT (Của giảng viên hướng dẫn) …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… MỤC LỤC Trang Chương Giới thiệu .1 1.1 Tổng quan 1.2 Khảo sát ứng dụng tương tự 1.2.1 Ứng dụng Messenger 1.2.2 Ứng dụng WeChat 1.2.3 Kết luận 1.3 Phương pháp, kết 1.4 Cấu trúc đồ án .3 Chương 2.1 Nghiên cứu tổng quan Các công nghệ hỗ trợ cho phát triển hệ thống .5 2.1.1 Google Firebase 2.1.2 Flutter gì? 2.2 Nguyên lý hoạt động hệ thống 2.2.1 2.3 Nguyên lý hoạt động chức nhắn tin Nguyên lý hoạt động chức gọi video 2.3.1 Nguyên lý hoạt động gọi video Agora 2.3.2 Nguyên lý hoạt động gọi video agora hệ thống 10 Chương Triển Khai Xây Dựng Hệ Thống 12 3.1 Xây dựng sở liệu firebase 12 3.2 Giao diện ứng dụng 12 Chương Kết luận Hướng phát triển .15 4.1 Kết luận 15 4.2 Hướng phát triển .15 DANH MỤC HÌNH Hình 1.1- Ứng dụng messenger .2 Hình 1.2- Chức we chat Hình 2.1-Dashboard firebase web .5 Hình 2.2-Framework Flutter .6 Hình 2.3- Cỡ sở liệu NoSQL cloud firebase Hình 2.4- Tin nhắn dạng emoji lưu trữ cloud firebase Hình 2.5- Tin nhắn dạng hình ảnh lưu trữ firebase Hình 2.6- Biểu đồ hoạt động chức nhắn tin .8 Hình 2.7- Biểu đồ hoạt động chức đọc tin nhắn Hình 2.8- Cơ sở hạ tầng Agora 10 Hình 2.9- Dữ liệu gọi Firebase .11 Hình 3.1- Dữ liệu lưu trữ cloud firebase 12 Hình 3.2- Giao diện ứng dụng 12 Hình 3.3- Phần tìm kiếm ứng dụng 13 Hình 3.4- Khi hai thiết bị nhắn tin với 13 Hình 3.5- Gọi video call hai người dùng 14 DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Viết tắt Message Queuing Telemetry Transport MQTT app Software Defined Real-Time Network Application identification Authentication Software Development Kit Software-defined networking SD-RTN id Auth SDK SDN Chương Giới thiệu 1.1 Tổng quan Sự phát triển cách mạng công nghiệp 4.0 với phổ biến rộng rải điện thoại di động internet Nhu cầu trao đổi thông tin người ngày lớn Hiện nay, nhiều ứng dụng hỗ trợ trao đổi thông tin qua mạng internet như: zalo, messenger, wechat… Các ứng dụng đáp ứng yêu cầu người dùng Với ứng dụng người dùng trao đổi thông tin liên lạc, nhắn tin cho bắt người đâu giới cần với điện thoại thông minh internet Áp dụng kiến thức học để phát triển ứng dụng cần thiết Bởi điều cho phép học thêm công nghệ mới, rèn luyện kỹ lập trình, đồng thời nâng cao kinh nghiệm học thêm kỹ quan trọng khác Chính thế, em chọn đề tài xây dựng hệ thống chat video call đa tảng flutter Xây dựng ứng dụng chat video call giúp liên lạc với nơi giới Khơng vậy, ứng dụng cịn phải giúp người dùng tìm kiếm kết nối với để trao đổi liên lạc chia file với 1.2 Khảo sát ứng dụng tương tự 1.2.1 Ứng dụng Messenger Messenger ứng dụng cho phép người dùng Facebook trò chuyện với nhau, kết nối tương tác thông qua nhóm chat nhắn tin riêng với Bằng cách sử dụng danh sách bạn bè Facebook bạn sổ địa chỉ, Facebook Messenger cho phép bạn gửi nhận tin nhắn, gọi điện thoại, gửi hình ảnh, tài liệu, ảnh GIF, nhiều với mà bạn nói chuyện- chí bạn chơi trị chơi với họ! Khi bạn trị chuyện với đó, bạn chọn gửi video clip, kế hoạch tới, ảnh GIF, vị trí bạn, hình ảnh, ghi nhớ Người dùng chí truy cập vào tiện ích (Extension) khác ứng dụng chương trình khác Spotify, mạng thực phẩm KAYAK, Trivia Blast,TheScore, Swelly NBA để gửi trực tiếp thứ công thức nấu ăn, số liệu thống kê, báo từ Wall Street Journal nhiều Bạn cịn tùy biến giao diện nhắn tin ứng dụng messenger dựa sở thích cá nhân Hình Giới thiệu.1- Ứng dụng messenger 1.2.2 Ứng dụng WeChat Là ứng dụng nhắn tin miễn phí phát triển trung tâm nghiên cứu phát triển Tencent Quảng Châu WeChat hỗ trợ gửi nhận tin nhắn đa phương tiện thông qua internet thiết bị chạy nhiều tảng khác Wechat cung cấp tính nhắn tin, mạng xã hội bạn bè, gửi tiền, tặng Hồng bao lì xì, dịch vụ công cộng, lưu trữ kết nối liên lạc Người dùng kết bạn với cách sử dụng tính “lắc kết bạn”, “qt mã QR”, “tìm người xung quanh” Những tính gửi tin nhắn, gửi đoạn voice âm thanh, gửi ảnh Wechat tối ưu để sử dụng mượt mà nhiều tảng thiết bị khác Ngoài ra, công cụ Wechat Pay ứng dụng mắt xích quan trọng giúp giữ chân người dùng làm nên thành cơng ứng dụng Ngồi Wechat cịn phát triển để sữ dụng nhiều tảng khác desktop, mobile hay web Hình Giới thiệu.2- Chức we chat 1.2.3 Kết luận Qua app chat trên, ta thấy muốn ứng dụng nhắn tin có nhiều người quan tâm sử dụng nhắn tin khơng khơng đủ mà chúng em cịn phải tích hợp, thêm vào tính mà người dùng cần vào ứng dụng Tạo tiện lợi cho người dùng Tuy nhiên tính phải đơn giản, dễ sử dụng Và hướng cho ứng dụng nhắn tin thời gian thực em 1.3 Phương pháp, kết Phương pháp xây dựng ứng dụng bao gồm bước sau: - Ôn lại kiến thức học phần học sở liệu, lập trình di động … - Xây dựng sỡ liệu firebase - Tìm hiểu framework flutter API phục vụ cho sản phẩm - Phác thảo sơ giao diện cho sản phẩm tiến hành xây lập trình giao diện cho sản phẩm - Tiến hành xây dựng backend cho sản phẩm - Chạy sản phẩm tiến hành kiểm thử độ ổn định sản phẩm thực tế - Tiến hành viết báo cáo word chuẩn bị slide powerpoint phục vụ cho việc bảo vệ thi kết thúc học phần 1.4 Cấu trúc đồ án Phần báo cáo bao gồm: Chương 2: Nghiên cứu tổng quan Trong chương này, chúng em giới thiệu ứng dụng có sẵn tương tự với hệ thống chúng em Tiếp theo em giới thiệu tổng quát công nghệ phần mềm em sử dụng để xây dựng ứng dụng chat thời gian thực Chương 3: Triển khai xây dựng Trong chương này, em trình bày vê mơ hình tổng quan ứng dụng giới thiệu cách triển khai xây dựng ứng dụng chat thời gian thực Chương 4: Kết luận hướng phát triển Trong chương này, em chia thành phần Phần kết luận giới thiệu mà ứng dụng hạn chế Phần hướng phát triển đưa hướng sau ứng dụng Chương Nghiên cứu tổng quan 2.1 Các công nghệ hỗ trợ cho phát triển hệ thống 2.1.1 Google Firebase Hỗ trợ lập trình phát triển nhanh ứng dụng di động cách đơn giản hóa thao tác với sở liệu Với Firebase bạn rút ngắn thời gian phát triển, triển khai thời gian mở rộng quy mơ ứng dụng mobile phát triển Hỗ trợ tảng Android, IOS, web Firebase mạnh mẽ, đa năng, bảo mật dịch vụ cần thiết để xây dựng ứng dụng với hàng triệu người sử dụng Các lợi ích mà firebase đem đến cho người sử dụng:  Realtime Database: Lưu trữ đồng liệu người dùng thời gian thực  Authentication: Quản lý người dùng cách đơn giản an toàn  Cloud Storage: Lưu trữ chia sẻ nội dung người dùng tạo hình ảnh, âm video với nhớ đối tượng mạnh mẽ  Google Analytics: Phân tích thuộc tính hành vi người dùng bảng điều khiển đơn để đưa định sáng suốt lộ trình sản phẩm bạn Hình Nghiên cứu tổng quan.3-Dashboard firebase web 2.1.2 Flutter gì? Flutter tảng phát triển ứng dụng đa tảng cho iOS Android, web Google phát triển Flutter sử dụng ngôn ngữ Dart Google phát triển flutter sử dụng để tạo ứng dụng native cho Google Hình Nghiên cứu tổng quan.4-Framework Flutter Ưu điểm flutter:  Mạnh hiệu ứng, hiệu suất ứng dụng cao  Giao tiếp gần trực tiếp với hệ thống  Ngôn ngữ kiểu tĩnh với cú pháp đại (tương tự JS, Python, Java), compiler linh động dùng AOT (cho sản phẩm cuối) JIT (cho trình phát triển với hot reload)  Có thể chạy giả lập mobile web, tiện cho việc phát triển Các đo lường số hiệu suất hỗ trợ sẵn giúp lập trình viên kiểm sốt tốt hiệu suất ứng dụng Có thể dùng để xây dựng tảng gắn vào ứng dụng native để tăng hiệu suất 2.2 Nguyên lý hoạt động hệ thống 2.2.1 Nguyên lý hoạt động chức nhắn tin a Khi gửi tin nhắn Để bắt đầu gửi tin nhắn, ta chuyển đến giao diện nhắn tin Khi vào giao diện, ta có số lựa chọn nhắn tin gửi tin nhắn dạng văn bản, emoji, hình ảnh Sau ta chọn dạng tin nhắn nhấn button để gửi hệ thống lấy thông tin liên quan đến tin nhắn như: id người gửi, id người nhận, kiểu tin nhắn, tin nhắn, thời gian gửi Riêng phần ta gửi tin nhắn ảnh hệ thống tự động tải ảnh đưa lên sỡ lưu trữ ảnh firebase lấy đường link ảnh Sau hệ thống lấy thông tin đưa tất thơng tin vào mảng với tin nhắn đối tượng Sau có mảng hệ thống lại tạo sỡ liệu dạng NoSQL firebase Hình Nghiên cứu tổng quan.5- Cỡ sở liệu NoSQL cloud firebase Trong message tên liệu Tiếp theo danh sách id người gửi tin nhắn Nối liền id người nhận Sau có sỡ liệu hệ thống gửi mảng thơng tin có lên firebase kèm theo id tin nhắn Hình Nghiên cứu tổng quan.6- Tin nhắn dạng emoji lưu trữ cloud firebase Hình Nghiên cứu tổng quan.7- Tin nhắn dạng hình ảnh lưu trữ firebase Hình Nghiên cứu tổng quan.8- Biểu đồ hoạt động chức nhắn tin b Đọc tin nhắn Khi vào giao diện nhắn tin ta bạn để xem lại tin nhắn cũ Thì hệ thống tự động lấy id người dùng id người ta nhắn tin Sau hệ thống gửi yêu cầu lên firebase lấy liệu hệ thống theo đường dẫn “message / id người dùng / id người nhận tin nhắn” Sau lấy liệu từ firebase, hệ thống đưa liệu vào mảng đối tượng thực kiểm tra tin nhắn Nếu tin nhắn có id người gửi giống với id người dùng đưa tin nhắn hiển thị phía bên phải, ngược lại hiển thị bên trái Tiếp theo kiểm tra tin nhắn dạng Nếu tin nhắn có dạng văn tin nhắn hiển thị tin nhắn dạng văn Cịn tin nhắn dạng image hiển thị hình ảnh Hình Nghiên cứu tổng quan.9- Biểu đồ hoạt động chức đọc tin nhắn 2.3 Nguyên lý hoạt động chức gọi video 2.3.1 Nguyên lý hoạt động gọi video Agora Phần gọi video, hệ thống sử dụng tính video call Agora Đây sdk phát triển Agora chạy sở hạ tầng tự xây dựng Agora mạng thời gian thực phần mềm xác định (SD-NTR)     SD-NTR sở hạ tầng mạng thiết kế đặc biệt cho truyền thông thời gian thực giới Dựa công nghệ tảng “Mạng phần mềm xác định” (SDN) SDN kiến trúc mạng sử dụng điều khiển dựa phần mềm giao diện lập trình ứng dụng (API) để giao tiếp với sở hạ tầng phần cứng bên lưu lượng truy cập trực tiếp mạng SDN tạo điều khiển mạng ảo - điều khiển phần cứng truyền thống - thông qua phần mềm Mặc dù ảo hóa mạng cho phép tổ chức phân đoạn mạng ảo khác mạng vật lý kết nối thiết bị mạng vật lý khác để tạo mạng ảo nhất, mạng phần mềm xác định cho phép cách để kiểm sốt việc định tuyến gói liệu thơng qua máy chủ tập trung Hình Nghiên cứu tổng quan.10- Cơ sở hạ tầng Agora 2.3.2 Nguyên lý hoạt động gọi video agora hệ thống Khi bất đầu gọi video Thì hệ thống tiến hành lấy số thông tin người gọi người nhận gọi bao gồm id, tên, hình ảnh đại diện tạo channelId tự động Sau thơng tin đưa vào mảng đối tượng Sau có thơng tin mảng Hệ thống tạo sở liệu tạm thời Firebase Dữ liệu bao gồm thông tin người gửi người nhận gọi Sau hệ thống tiếp tục tạo gọi video sdk video call agora Trong lấy giá trị channelId vừa tạo phía để làm id cho gọi video Sau tạo xong gọi chuyển tới giao diện chờ nhận gọi Còn bên người nhận, hệ thống lấy liệu gọi từ Firebase theo thời gian thực Nếu có gọi hệ thống chuyển tới giao diện nhận gọi Người nhận chấp nhập gọi chuyển tới giao diện gọi video Còn bên người gọi hệ thống tự động kiểm tra Nếu thấy bên người nhận chấp nhận bên người gọi 10 tự động chuyển tới giao diện gọi Khi nhấn kết thúc gọi hệ thống tự động xóa liệu gọi tạo firebase trước trở giao diện nhắn tin Hình Nghiên cứu tổng quan.11- Dữ liệu gọi Firebase 11 Chương Triển Khai Xây Dựng Hệ Thống 3.1 Xây dựng sở liệu firebase Ta tiến hành xây dựng sỡ liệu Firebase Firestore Dữ liệu lưu trữ dạng NoSQL Khi lấy liệu, ta đọc hàm để ánh xạ vào trường chứa liệu Hình Triển Khai Xây Dựng Hệ Thống.12- Dữ liệu lưu trữ cloud firebase 3.2 Giao diện ứng dụng Khi bắt đầu, giao diện ứng dụng hiển thị dạng tabItem Với tab chứa danh sách người dùng Ở toolbar hiển thị phần bao gồm: icon chuông hiển thị thông báo, textView hiển thị tên viết tắt, icon chuyển hướng đến phần tìm kiếm menu Hình Triển Khai Xây Dựng Hệ Thống.13- Giao diện ứng dụng 12 Khi nhấn chọn icon tìm kiếm chuyển ta sang giao diện phần tìm kiếm Ở ta nhập tên người dùng Và tự động lọc danh sách người dùng có tên giống với tên ta chọn Ở hiển thị dạng listview với item bao gồm ảnh, username name Hình Triển Khai Xây Dựng Hệ Thống.14- Phần tìm kiếm ứng dụng Trên giao diện nhắn tin phần toolbar thể tên người ta nhắn tin, icon gọi thường video call Phần hiển thị tin nhắn hai người dùng, người gửi tin nhắn nằm bên phải người nhận hiển thị bên trái Phần cuối giao diện chứa lựa chọn dạng tin nhắn mà ta nhắn Hình Triển Khai Xây Dựng Hệ Thống.15- Khi hai thiết bị nhắn tin với 13 Khi nhấn nút video call sẻ chuyển đến phần giao diện đợi gọi Cịn bên người nhận hiển thị có tiếp nhận gọi hay khơng Khi nhận gọi chuyển đên giao diện hình Hình Triển Khai Xây Dựng Hệ Thống.16- Gọi video call hai người dùng 14 Chương Kết luận Hướng phát triển 4.1 Kết luận Nhìn chung, sau kết thúc đề tài chúng em đạt điều sau đây: - Nắm bắt công nghệ lập trình mobile, cụ thể lập trình android - Sử dụng công nghệ Firebase cho ứng dụng mobile - Bước đầu thành công ứng dụng “chat video call đa tảng flutter” đáp ứng số yêu cầu sau:  Tạo tài khoản, đăng nhập đăng xuất  Tìm kiếm bạn bè  Nhắn tin với dựa thời gian thực  Trao đổi file hình ảnh với  Gọi video vơi Bên cạnh đó, cịn số hạn chế sau: - Giao diện app chưa đẹp - Trong q trình sử dụng gặp số lỗi hiển thị - Chưa phân biệt file ảnh với loại file khác - Thời gian load liệu từ server lâu 4.2 Hướng phát triển Các hướng phát triển mà em hướng đến là: - Liên kết với mạng xã hội khác - Tích hợp thêm tính để nâng cao trải nghiệm người dùng - Phát triển thêm nhiều tính bổ ích cho người dùng 15