ĐỒ Á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

Ngày nay, với sự phát triển nhanh chóng của xã hội , nhu cầu trao đổithông tin với nhau lại càng cần thiết, vì vậy em chọn đề tài “Xây dựng hệthống chat và video call đa nền tảng bằng fl

Sinh viên thực hiện : 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 là một kỷ nguyên toàn cầu, với sự phát minh ra internet trái đất

đã không còn là hình tròn mà đã là một đường thẳng kết nối những ý nghĩ củacon người Cùng với quá trình toàn cầu hoá, nhu cầu chia sẽ thông tin, kết nốibạn bè ngày càng phát triển thúc đẩy sự ra đời của mạng xã hội

Ứng dụng nhắn tin là một hình thức của dịch vụ truyền thông, bạn sẽ dễdàng giữ liên lạc với bạn bè, người thân bằng cách nhắn tin cho nhau, bạn cònthể chia sẽ cho nhau các hình ảnh hay các file dưới dạng tin nhắn, hay gọivideo cho nhau Bạn còn có thể kết nối với những người xa lạ đang dùng ứngdụng này trên khắp cả nước một cách nhanh chóng, đơn giản và hơn hết là nómiễn phí

Trong vài năm trở lại đây, các thiết bị di động ngày càng phát triển rộngrãi và đa dạng với các nền tảng lớn như Android và IOS Vì vậy nên các ứngdụng cũng phải phát triển để đáp ứng xu thế đó Để phát triển các ứng dụng

đó người ta thường xây dựng chúng bằng các framework đa nền tảng khácnhau như react native, flutter… Trong đó flutter là một framework được pháttriển bởi google và có sự phát triển tốc hành

Ngày nay, với sự phát triển nhanh chóng của xã hội , nhu cầu trao đổithông tin với nhau lại càng cần thiết, vì vậy em chọn đề tài “Xây dựng hệthống chat và video call đa nền tảng bằng flutter” với mục đích nghiên cứu,tìm hiểu về cách hoạt động của các framework đa nền tảng và xây dựng dựngdụng nhắn tin để đáp ứng nhu cầu giao lưu, trao đổi thông tin giữa mọi ngườivới nhau

Mặc dù trong quá trình nghiên cứu đề tài, bản thân em có những cố gắng nhất địnhsong do trình độ và thời gian có hạn nên đề tài không tránh khỏi những thiếu sót Vậykính mong các thầy cô và các bạn đóng góp ý kiến để em được hoàn thiện hơn.

NHẬN XÉT

(Của giảng viên hướng dẫn)

………

………

………

………

………

………

………

………

………

………

MỤC LỤC

Trang

Chương 1 Giới thiệu 1

1.1 Tổng quan 1

1.2 Khảo sát các ứng dụng tương tự 1

1.2.1 Ứng dụng Messenger 1

1.2.2 Ứng dụng WeChat 2

1.2.3 Kết luận 3

1.3 Phương pháp, kết quả 3

1.4 Cấu trúc đồ án 3

Chương 2 Nghiên cứu tổng quan 5

2.1 Các công nghệ hỗ trợ cho phát triển hệ thống 5

2.1.1 Google Firebase 5

2.1.2 Flutter là gì? 6

2.2 Nguyên lý hoạt động của hệ thống 6

2.2.1 Nguyên lý hoạt động của chức năng nhắn tin 6

2.3 Nguyên lý hoạt động chức năng gọi video 9

2.3.1 Nguyên lý hoạt động gọi video bằng Agora 9

2.3.2 Nguyên lý hoạt động gọi video bằng agora trên hệ thống 10

Chương 3 Triển Khai Xây Dựng Hệ Thống 12

3.1 Xây dựng cơ sở dữ liệu trên firebase 12

3.2 Giao diện ứng dụng 12

Chương 4 Kết luận và 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 năng của we chat 3

Hình 2.1-Dashboard firebase trên web 5

Hình 2.2-Framework Flutter 6

Hình 2.3- Cỡ sở dữ liệu NoSQL trên cloud của firebase 7

Hình 2.4- Tin nhắn dạng emoji được lưu trữ trên cloud firebase 7

Hình 2.5- Tin nhắn dạng hình ảnh được lưu trữ trên firebase 7

Hình 2.6- Biểu đồ hoạt động chức năng nhắn tin 8

Hình 2.7- Biểu đồ hoạt động chức năng đọc tin nhắn 9

Hình 2.8- Cơ sở hạ tầng của Agora 10

Hình 2.9- Dữ liệu cuộc gọi trên Firebase 11

Hình 3.1- Dữ liệu lưu trữ trên cloud firebase 12

Hình 3.2- Giao diện chính của ứng dụng 12

Hình 3.3- Phần tìm kiếm của ứng dụng 13

Hình 3.4- Khi hai thiết bị nhắn tin với nhau 13

Hình 3.5- Gọi video call giữa hai người dùng 14

Chương 1 Giới thiệu

1.1 Tổng quan

Sự phát triển của cuộc cách mạng công nghiệp 4.0 cùng với sự phổ biến rộng rải củađiện thoại di động và internet Nhu cầu trao đổi thông tin giữa mọi người ngày càng 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 này đáp ứng được yêu cầu của người dùng hiện nay.Với các ứng dụng như trên người dùng có thể trao đổi thông tin liên lạc, nhắn tin cho bắt

cứ người nào ở đâu trên thế giới chỉ cần với một chiếc điện thoại thông minh và internet

Áp dụng kiến thức đã học để phát triển ứng dụng như trên là cần thiết Bởi vì điềunày cho phép học thêm các công nghệ mới, rèn luyện kỹ năng lập trình, đồng thời nângcao kinh nghiệm và học thêm các kỹ năng quan trọng khác Chính vì thế, em chọn đề tàixây dựng hệ thống chat và video call đa nền tảng bằng flutter

Xây dựng một ứng dụng chat và video call có thể giúp mọi liên lạc với nhau ở bất cứmọi nơi trên thế giới Không chỉ vậy, ứng dụng còn phải giúp người dùng tìm kiếm và kếtnối với nhau để có thể trao đổi liên lạc và chia sẽ file với nhau

Khi bạn đang trò chuyện với một ai đó, bạn có thể chọn gửi video clip, kế hoạch sắptới, ảnh GIF, vị trí của bạn, hình ảnh, bản ghi nhớ

Người dùng thậm chí có thể truy cập vào các tiện ích (Extension) khác nhau của các

ứng dụng và chương trình khác như Spotify, mạng thực phẩm KAYAK, TriviaBlast,TheScore, Swelly và NBA để gửi trực tiếp những thứ như công thức nấu ăn, số liệuthống kê, bài báo từ Wall Street Journal và nhiều hơn nữa

1

Bạn còn có thể tùy biến giao diện nhắn tin trên ứng dụng messenger dựa trên sở thích

Wechat cung cấp các tính năng như nhắn tin, mạng xã hội bạn bè, gửi tiền, tặng Hồngbao lì xì, dịch vụ công cộng, lưu trữ và kết nối liên lạc Người dùng có thể kết bạn vớinhau bằng cách sử dụng tính năng “lắc kết bạn”, “quét mã QR”, “tìm người xung quanh” Những tính năng cơ bản như gửi tin nhắn, gửi đoạn voice âm thanh, gửi ảnh đều đượcWechat tối ưu để sử dụng mượt mà trên nhiều nền tảng và thiết bị khác nhau

Ngoài ra, công cụ Wechat Pay của ứng dụng này là một mắt xích quan trọng giúp giữchân người dùng và làm nên thành công của ứng dụng

Ngoài ra Wechat còn được phát triển để có thể sữ dụng trên nhiều nền tảng khác nhaunhư desktop, mobile hay web

2

Hình 1.2- Chức năng của we chat.

1.2.3 Kết luận

Qua 2 app chat ở trên, ta có thể thấy nếu muốn ứng dụng nhắn tin có được nhiềungười quan tâm sử dụng thì chỉ nhắn tin không là không đủ mà chúng em còn phải tíchhợp, thêm vào các tính năng mà người dùng cần vào chính ứng dụng của chúng ta Tạo

sự tiện lợi cho người dùng Tuy nhiên các tính năng phải đơn giản, dễ sử dụng Và đâycũng chính là hướng đi cho ứng dụng nhắn tin thời gian thực của em

1.3 Phương pháp, kết quả

Phương pháp xây dựng ứng dụng sẽ bao gồm các bước sau:

- Ôn lại các kiến thức cơ bản về các học phần đã học như cơ sở dữ liệu, lập trình

di động …

- Xây dựng cơ sỡ dữ liệu trên firebase.

- Tìm hiểu framework flutter và các API phục vụ cho các sản phẩm.

- Phác thảo sơ bộ giao diện cho sản phẩm và tiến hành xây lập trình giao diện chosản phẩm

- Tiến hành xây dựng backend cho sản phẩm

- Chạy sản phẩm và tiến hành kiểm thử độ ổn định của sản phẩm trong thực tế

- Tiến hành viết báo cáo word và chuẩn bị slide powerpoint phục vụ cho việc bảo

vệ khi thi kết thúc học phần

1.4 Cấu trúc đồ án

Phần tiếp theo của báo cáo bao gồm:

3

Chương 2: Nghiên cứu tổng quan

Trong chương này, chúng em sẽ giới thiệu về các ứng dụng đã có sẵn tương tự với

hệ thống của chúng em Tiếp theo em sẽ giới thiệu tổng quát về các công nghệ và phầnmề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 sẽ trình bày vê mô hình tổng quan của ứng dụng và giớithiệu về 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 và hướng phát triển

Trong chương này, em sẽ chia thành 2 phần Phần 1 kết luận sẽ giới thiệu về những gì

mà ứng dụng đã được và hạn chế của nó Phần 2 hướng phát triển sẽ đưa ra những hướng

đi sau này của ứng dụng

4

Chương 2 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ợ các lập trình phát triển nhanh các ứng dụng di động bằng cách đơn giản hóa

các thao tác với cơ sở dữ liệu

Với Firebase bạn có thể rút ngắn thời gian phát triển, triển khai và thời gian mở rộngquy mô của ứng dụng mobile mình đang phát triển

Hỗ trợ cả 2 nền tảng Android, IOS, web Firebase mạnh mẽ, đa năng, bảo mật và làdịch vụ cần thiết đầu tiên để 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ữ và đồng bộ dữ liệu người dùng thời gian thực

 Authentication: Quản lý người dùng một cách đơn giản và an toàn

 Cloud Storage: Lưu trữ và chia sẻ nội dung do người dùng tạo ra như hìnhảnh, âm thanh và video với bộ nhớ đối tượng mạnh mẽ

 Google Analytics: Phân tích thuộc tính và hành vi của người dùng trongmột bảng điều khiển đơn để đưa ra các quyết định sáng suốt về lộ trình sảnphẩm của bạn

Hình 2.3-Dashboard firebase trên web.

5

2.1.2 Flutter là gì?

Flutter là nền tảng phát triển ứng dụng đa nền tảng cho iOS và Android, web doGoogle phát triển Flutter sử dụng ngôn ngữ Dart cũng do Google phát triển và fluttercũng đã được sử dụng để tạo ra các ứng dụng native cho Google

Hình 2.4-Framework Flutter.

Ưu điểm của flutter:

 Mạnh về hiệu ứng, hiệu suất ứng dụng rất cao

 Giao tiếp gần như trực tiếp với hệ thống

 Ngôn ngữ kiểu tĩnh nhưng với cú pháp hiện đại (tương tự JS, Python, Java),compiler linh động khi dùng AOT (cho sản phẩm cuối) và JIT (cho quá trình pháttriển với hot reload)

 Có thể chạy được giả lập mobile ngay trên web, tiện cho việc phát triển Các bộ đolường chỉ số hiệu suất được hỗ trợ sẵn giúp lập trình viên kiểm soát tốt hiệu suấtcủa ứng dụng Có thể dùng để xây dựng các nền tảng gắn vào ứng dụng native đểtăng hiệu suất

2.2 Nguyên lý hoạt động của hệ thống

2.2.1 Nguyên lý hoạt động của chức năng 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ómột số sự lựa chọn khi nhắn tin là gửi tin nhắn dưới dạng văn bản, emoji, hình ảnh Sau

6

khi ta chọn một dạng tin nhắn và nhấn button để gửi thì hệ thống sẽ lấy thông tin liênquan đến tin nhắn đó như: id của người gửi, id của người nhận, kiểu tin nhắn, tin nhắn,thời gian gửi Riêng phần khi ta gửi tin nhắn là ảnh thì hệ thống sẽ tự động tải ảnh đưalên cơ sỡ lưu trữ ảnh trên firebase và lấy về đường link của ảnh Sau khi hệ thống lấyđược thông tin thì sẽ đưa tất cả các thông tin vào một mảng với mỗi một tin nhắn là mộtđối tượng Sau khi có được mảng thì hệ thống lại tạo ra một cơ sỡ dữ liệu dưới dạngNoSQL trên firebase

Hình 2.5- Cỡ sở dữ liệu NoSQL trên cloud của firebase.

Trong đó message là tên của bộ cơ dữ liệu Tiếp theo là danh sách id của người gửi tinnhắn Nối liền là id của người nhận Sau khi có được cơ sỡ dữ liệu thì hệ thống sẽ gửimảng thông tin đã có lên firebase kèm theo id của tin nhắn

Hình 2.6- Tin nhắn dạng emoji được lưu trữ trên cloud firebase.

Hình 2.7- Tin nhắn dạng hình ảnh được lưu trữ trên firebase.

7

Hình 2.8- Biểu đồ hoạt động chức năng nhắn tin.

b Đọc tin nhắn

Khi vào giao diện nhắn tin giữa ta và bạn để xem lại các tin nhắn cũ Thì hệ thống sẽ

tự động lấy id của người dùng và id của người ta đã nhắn tin Sau đó hệ thống sẽ gửi yêucầu lên firebase và lấy dữ liệu về hệ thống theo đường dẫn là “message / id của ngườidùng / id của người nhận tin nhắn” Sau khi lấy được dữ liệu từ firebase, hệ thống sẽ đưa

dữ liệu vào mảng đối tượng và thực hiện kiểm tra tin nhắn Nếu tin nhắn có id của ngườigửi giống với id của người dùng hiện tại thì nó sẽ đưa tin nhắn hiển thị ở phía bên phải,ngược lại thì nó sẽ hiển thị bên trái Tiếp theo nó sẽ kiểm tra tin nhắn đang ở dạng nào.Nếu tin nhắn có dạng là văn bản thì tin nhắn hiển thị tin nhắn ở dạng văn bản Còn tinnhắn là dạng image thì nó sẽ hiển thị hình ảnh

8

Hình 2.9- Biểu đồ hoạt động chức năng đọc tin nhắn.

2.3 Nguyên lý hoạt động chức năng gọi video

2.3.1 Nguyên lý hoạt động gọi video bằng Agora

Phần gọi video, hệ thống sử dụng tính năng video call của Agora Đây là một sdkđược phát triển bởi Agora và chạy trên cơ sở hạ tầng tự xây dựng của Agora là mạng thờigian thực do phần mềm xác định (SD-NTR)

gian thực trên thế giới Dựa trên công nghệ nền tảng “Mạng do phần mềm xác định” (SDN).SDN là kiến trúc mạng sử dụng bộ điều khiển dựa trên phần mềm hoặc giao diện lập trìnhứng dụng (API) để giao tiếp với cơ sở hạ tầng phần cứng bên dưới và lưu lượng truy cậptrực tiếp trên mạng SDN có thể tạo và điều khiển mạng ảo - hoặc điều khiển phần cứngtruyền thống - thông qua phần mềm

9

Mặc dù ảo hóa mạng cho phép các tổ chức phân đoạn các mạng ảo khác nhau trongmột mạng vật lý duy nhất hoặc kết nối các thiết bị trên các mạng vật lý khác nhau để tạo

ra một mạng ảo duy nhất, mạng do phần mềm xác định cho phép một cách mới để kiểmsoát việc định tuyến các gói dữ liệu thông qua một máy chủ tập trung

Hình 2.10- Cơ sở hạ tầng của Agora.

2.3.2 Nguyên lý hoạt động gọi video bằng agora trên hệ thống

Khi bất đầu một cuộc gọi video Thì hệ thống sẽ tiến hành lấy một số thông tin củangười gọi và người nhận cuộc gọi bao gồm id, tên, hình ảnh đại diện và tạo ra mộtchannelId tự động Sau đó các thông tin sẽ được đưa vào một mảng đối tượng

Sau khi có được thông tin trong mảng Hệ thống sẽ tạo một cơ sở dữ liệu tạm thờitrên Firebase Dữ liệu này bao gồm thông tin cơ bản của người gửi và người nhận cuộcgọi Sau đó hệ thống sẽ tiếp tục tạo một cuộc gọi video bằng sdk video call của agora.Trong đó lấy giá trị channelId vừa được tạo ở phía trên để làm id cho cuộc gọi video này.Sau khi tạo xong cuộc gọi thì chuyển tới giao diện chờ nhận cuộc gọi

Còn bên người nhận, hệ thống sẽ lấy dữ liệu cuộc gọi từ Firebase theo thời gian thực.Nếu có cuộc gọi thì hệ thống sẽ chuyển tới giao diện nhận cuộc gọi Người nhận ở đâynếu chấp nhập cuộc gọi thì sẽ được chuyển tới giao diện gọi video Còn bên người gọi thì

hệ thống sẽ tự động kiểm tra Nếu thấy bên người nhận đã chấp nhận thì bên người gọi sẽ

10

tự động chuyển tới giao diện gọi Khi nhấn kết thúc cuộc gọi thì hệ thống sẽ tự động xóa

dữ liệu cuộc gọi được tạo trên firebase trước đó và trở về giao diện nhắn tin

Hình 2.11- Dữ liệu cuộc gọi trên Firebase.

11

Chương 3 Triển Khai Xây Dựng Hệ Thống

3.1 Xây dựng cơ sở dữ liệu trên firebase

Ta sẽ tiến hành xây dựng cơ sỡ dữ liệu trên Firebase Firestore Dữ liệu ở trên này sẽđược lưu trữ dưới dạng NoSQL Khi lấy dữ liệu, ta sẽ đọc hàm để ánh xạ vào các trườngchứa dữ liệu

Hình 3.12- Dữ liệu lưu trữ trên cloud firebase

3.2 Giao diện ứng dụng

Khi bắt đầu, giao diện ứng dụng sẽ hiển thị dưới dạng tabItem Với tab đầu tiên chứadanh sách người dùng Ở trên toolbar thì hiển thị 4 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, một icon chuyển hướng đến phần tìm kiếm vàmột menu

Hình 3.13- Giao diện chính của ứng dụng.

12

Khi nhấn chọn icon tìm kiếm thì nó sẽ chuyển ta sang giao diện của phần tìm kiếm Ởđây ta sẽ nhập tên của người dùng Và nó sẽ tự động lọc ra danh sách những người dùng

có tên giống với tên ta đã chọn Ở đây nó sẽ hiển thị dưới dạng listview với mỗi item baogồm ảnh, username và name

Hình 3.14- Phần tìm kiếm của ứng dụng.

Trên một giao diện nhắn tin thì phần toolbar sẽ thể hiện tên người ta sẽ nhắn tin, vàicon gọi thường và video call Phần giữa hiển thị tin nhắn giữa hai người dùng, người gửithì tin nhắn nằm bên phải và người nhận hiển thị bên trái Phần cuối giao diện chứa các

sự lựa chọn dạng tin nhắn mà ta nhắn

Hình 3.15- Khi hai thiết bị nhắn tin với nhau

13