TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG
TIN & TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG ỨNG DỤNG
CHAT VỚI VUEJS VÀ
FIREBASE

Sinh viên thực hiện: PHAN THANH NGUYÊN
Lớp:

19I1

Giảng viên hướng dẫn: DƯƠNG THỊ MAI NGA

Đà Nẵng, tháng 05 năm 2021


TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG
TIN & TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 3

XÂY DỰNG ỨNG DỤNG
CHAT VỚI VUEJS VÀ
FIREBASE

Sinh viên:

Phan Thanh Nguyên

Mã: 191C900029
Giảng viên hướng dẫn: Dương Thị Mai Nga


NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
....................................................................................................................................

....................................................................................................................................

....................................................................................................................................

....................................................................................................................................

....................................................................................................................................


LỜI CẢM ƠN
Em xin gửi lời cảm ơn chân thành nhất đến quý thầy cô Trường Đại học Công
nghệ Thông tin và Truyền thông Việt - Hàn , những người đã dìu dắt em tận tình, đã
truyền đạt cho em những kiến thức và bài học quý giá trong suốt thời gian em theo học
tại trường.
Em xin trân trọng gửi lời cám ơn đến tất cả các thầy cô trong khoa Khoa học Máy
tính , đặc biệt là cơ Dương Thị Mai Nga, cơ đã tận tình hướng dẫn và giúp đỡ em trong
suốt quá trình làm tốt nghiệp. Với sự chỉ bảo của thầy, em đã có định hướng tốt trong
việc triển khai và thực hiện các yêu cầu trong quá trình làm đồ án tốt nghiệp.

Em xin cảm ơn những người thân và gia đình đã quan tâm, động viên và luôn tạo
cho em những điều kiện tốt nhất trong suốt quá trình học tập và làm tốt nghiệp.
Ngoài ra em cũng xin gửi lời cảm ơn đến tất cả bạn bè, đặc biệt là các bạn trong
lớp 19i1 đã ln gắn bó, cùng học tập và giúp đỡ em trong những năm qua và trong
suốt quá trình thực hiện đồ án này.
Em xin chân thành cảm ơn!


MỤC LỤC
CHƯƠNG 1:

GIỚI THIỆU VỀ VUEJS .................................................... 7

1. Giới thiệu về vuejs ................................................................................. 7
2. Lịch sử ra đời và phát triển ................................................................. 7

CHƯƠNG 2:PHẦN MỀM VISUAL STUDIO CODE................................. 8
2.1 Sơ lược về Visual Studio Code ..................................................................... 18
2.1.1

Một số tính năng của Visual Studio Code ..................................... 8

2.1.2

Tại sao nên dùng Visual Studio Code ........................................... 9

CHƯƠNG 3:

Lậptrình Chat với Firebase ................................................ 11


3.1 Tổng quan về Firebase .......................................................................... 11
3.1.1

Khái niệm .................................................................................... 11

3.1.2

Lịch sử phát triểncủa Firebase ...................................................... 11

3.1.3

Ưu nhược điểm của Firebase ......................................................... 12

3.2 Tổng quan dịch vụ Firebase ............................................................... 12
3.2.1

Dịch vụ Firebase Analytics ........................................................... 13

3.2.2

Cácdịch vụ pháttriển và kiểm thử ứng dụng .................................... 13

3.2.3

Các dịch vụ tăng trưởng và thu hút người dùng ................................ 15

3.3 Một số kỹ thuật cơ bản ............................................................................ 17
3.3.1

Tạo dự án trên Firebase ............................................................. 18


3.3.2

Quản lý người dùng ...................................................................... 19

3.3.3

Chat trên kênh riêng tư .................................................................. 20

3.4 Bài toán ............................................................................................... 21
3.5 Sơ đồ chức năng .................................................................................. 21
3.6 Thiết kế dữ liệu ..................................................................................... 21
3.6.1

Bảng dữ liệu người dùng ............................................................ 21

3.6.2

Bảngthông tin nội dungtin nhắn ...................................................... 22

3.7 Giao diện chương trình ......................................................................... 22
3.7.1

Giao diện chính ............................................................................ 22

3.7.2

Giao diện đăng ký ........................................................................ 23

3.7.3


Giao diện chat .............................................................................. 24

KẾT LUẬN..................................................................................................... 25


TÀI LIỆU THAM KHẢO ............................................................................. 26


CHƯƠNG 1: GIỚI THIỆU VỀ VUEJS
1.1 Giới thiệu về Vuejs
Vue (phiên âm /vjuː/, đọc giống như từ view) là một framework Javascript tiên tiến
trong xây dựng giao diện người dùng, không giống như các framework khác, Vue
được xây dựng từ những dòng code cơ bản nhất nhằm tối ưu tốc độ. Thư viện của
Vue chỉ tập trung vào lớp hiển thị, rất đơn giản để tiếp cận và dễ dàng tích hợp vào
các hệ thống khác. Vue cũng có khả năng cung cấp các ứng dụng web đơn trang
Single Page Application (SPA) cho phép kết hợp với nhiều các công cụ hiện đại,
như Laravel chẳng hạn.
1.2 Sự ra đời và lịch sử phát triển
Vue được thai nghén và phát triển bởi Evan You khi tác giả đang làm kỹ sư
cho ông lớn Google. Khi đang sử dụng Angular cho một số dự án khác thì Evan có ý
tưởng trích một phần mà mình thích của Angular rồi từ đó xây dựng thêm một cái gì
đó nhẹ nhàng hơn Angular mà không cần phải chú ý đến những khái niệm bổ sung
rườm rà. Đây được xem là tiền đề giúp cho Vuejs đã, đang có mặt và phát triển
mạnh mẽ tại thời điểm hiện tại.
Vue đã được phát hành đầu năm 2014 và dự án này đã được tăng tải lên
HackerNew, Echo Js ngay trong ngày đầu tiên ra mắt.
Vue 2.0 được release vào đầu năm 2016 để ganh đua với ReactJS. Thực tế Vuejs
được chứng minh là nhanh hơn và gọn hơn so với ReactJs và Angular 2.0. Ngoài ra,
thời gian tiếp cận và làm chủ của Vue tương đối ngắn vì vậy khơng q khó hiểu

khi đọc xong tài liệu này bạn sẽ thích và sẽ sử dụng Vue làm framework js mặc
định.


CHƯƠNG 2: PHẦN MỀM LẬP TRÌNH
2.1 Sơ lược về Visual Studio
Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và
macOS, Visual Studio Code được phát triển bởi Microsoft. Nó được xem là một sự
kết hợp hoàn hảo giữa IDE và Code Editor.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting,
tự hồn thành mã thơng minh, snippets, và cải tiến mã nguồn. Nhờ tính năng tùy
chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme,
phím tắt, và các tùy chọn khác.

2.1.1 Một số tính năng của Visual Studio
• Hỗ trợ nhiều ngơn ngữ lập trình
Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình như C/C++, C#, F#, Visual
Basic, HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra thơng
báo nếu chương chương trình có lỗi.
• Hỗ trợ đa nền tảng
Các trình viết code thông thường chỉ được sử dụng hoặc cho Windows hoặc Linux
hoặc Mac Systems. Nhưng Visual Studio Code có thể hoạt động tốt trên cả ba nền
tảng trên.
• Cung cấp kho tiện ích mở rộng
Trong trường hợp lập trình viên muốn sử dụng một ngơn ngữ lập trình khơng nằm
trong số các ngơn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng.
Điều này vẫn sẽ khơng làm giảm hiệu năng của phần
mềm, bởi vì phần mở rộng này hoạt động như một chương trình độc lập.



• Kho lưu trữ an toàn
Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an tồn. Với Visual
Studio Code, người dùng có thể hồn tồn n tâm vì nó dễ dàng kết nối với Git
hoặc bất kỳ kho lưu trữ hiện có nào.
• Hỗ trợ web
Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngồi ra, nó cũng có một trình soạn
thảo và thiết kế website.
• Lưu trữ dữ liệu dạng phân cấp
Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự nhau. Ngồi
ra, Visual Studio Code cịn cung cấp các thư mục cho một số tệp đặc biệt quan
trọng.
• Hỗ trợ viết Code
Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng. Visual
Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.
• Hỗ trợ thiết bị đầu cuối
Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển
đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác.
• Màn hình đa nhiệm
Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục
– mặc dù chúng không hề liên quan với nhau.
2.1.2 Tại sao nên sử dụng Visual Studio Code
Lý do bạn nên sử dụng Visual Studio Code là vì nó có rất nhiều ưu điểm vượt
trội so với bất kỳ IDE nào khác:
• Hỗ trợ đa nền tảng: Windows, Linux, Mac


• Hỗ trợ đa ngôn ngữ: C/C++, C#, F#,
Visual Basic, HTML, CSS, JavaScript,
JSON
• Ít dung lượng

• Tính năng mạnh mẽ
• Intellisense chuyên nghiệp
• Giao diện thân thiện
Và trên hết, Visual Studio Code là phần mềm miễn phí, được đơng đảo lập trình
viên trên thế giới sử dụng.


CHƯƠNG 3:Lập trình Chat với Firebase
3.1 Tổng quan về Firebase
3.1.1 Khái niệm
Có nhiều cách hiểu về Firebase khi đứng trên các quan điểm khác nhau, sau đây
là 2 khái niệm cơ bản.
Firebase là một nền tảng di động giúp người dùng nhanh chóng phát triển các
ứng dụng chất lượng cao, phát triển ứng dụng cho người dùng quy mô lớn và kiếm
được nhiều tiền hơn.
Firebase là một dịch vụ hế thống backend được Google cung cấp sẵn cho ứng
dụng Mobile, với Firebase người dùng có thể rút ngắn thời gian phát triển, triển
khai và thời gian mở rộng quy mô của ứng dụng mobile mình đang phát triển. Hỗ
trợ cả 2 nền tảng Android và IOS, 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.
3.1.2 Lịch sử phát triển của Firebase
Firebase có tiền thân là Envolve. Đây là dịch vụ cung cấp những API để người
dùng dễ dàng tích hợp tính năng chat vào trang web. Điều thú vị là người dùng
Envolve sử dụng dịch vụ để truyền dữ liệu chứ không đơn thuần cho ứng dụng chat.
Họ sử dụng Envolve để đồng bộ dữ liệu của những ứng dụng như game online, danh
bạ, lịch… Nhận biết được điều này, CEO của Envolve đã tách biệt hệ thống chat và
đồng bộ dữ liệu thời gian thực thành 2 mảng riêng biệt. Đến năm 2012, Firebase
được thành lập như một công ty cung cấp dịch vụ Backend-as-a-Service theo thời
gian thực. Ngửi thấy mùi tiềm năng, năm 2014, Google lập tức mua lại Firebase với
giá không được tiết lộ. Và giờ Google phát triển Firebase thành một dịch vụ đồ

sộ.


3.1.3 Ưu nhược điểm của Firebase
3.1.3.1 Ưu điểm
Xây dựng nhanh chóng mà khơng tốn thời gian, nhân lực để quản lý hệ thống và
cơ sở hạ tầng phía sau: Firebase cung cấp cho người dùng chức năng như phân tích,
cơ sở dữ liệu, báo cáo hoạt động và báo cáo các sự cỗ lỗi để dễ dàng phát triển, định
hướng ứng dụng của mình vào người sử dụng nhằm đem lại các trải nghiệm tốt nhất
cho họ. Uy tín chất lượng đảm bảo từ Google: Firebase được google hỗ trợ và cung
cấp trên nền tảng phần cứng với quy mô rộng khắp thế giới, được các tập đoàn lớn và
các ứng dụng với triệu lượt sử dụng từ người dùng. Quản lý cấu hình và trải nghiệm
các ứng dụng của Firebase tập trung trong một giao diện website đơn giản, các ứng
dụng này hoạt động độc lập nhưng liên kết dữ liệu phân tích chặt chẽ.
3.1.3.2 Nhược điểm
Điểm duy nhất của Firebase chính là phần Realtime Database, mà đúng hơn chỉ
là phần Database. Cơ sở dữ liệu của Realtime Database được tổ chức theo kiểu cây
không phải là kiểu bảng nên những ai đang quen với SQL có thể gặp khó khăn đơi
chút bước đầu .
3.2 Dịch vụ Firebase
Firebase cung cấp cho người dùng công cụ Firebase Analytics và 2 nhóm sản
phẩm chính tập trung vào 2 đối tượng là:
− Develop & test your app: phát triển và kiểm thử các ứng dụng được thiết kế.
− Grow & engage your audience: Phân tích dữ liệu và tối ưu hóa trải
nghiệm đối với người dùng.


Hình 3.1.1: Các dịch vụ của Firebase
3.2.1 Dịch vụ Firebase Analytics
Là một giải pháp miễn phí và phân tích khơng giới hạn. Quản lý hành vi

người dùng và cá biện pháp từ một bảng điều khiển duy nhất. Phân thích
thuộc tính và hành vi của người dùng trong bảng điều khiển đơn để đưa ra các
quyết định sáng suốt về lộ trình sản phẩm. Nhận thơng tin chi tiết về thời gian
thực từ báo cáo hoặc xuất dữ liệu thô sự kiện của người dùng tới Google
BigQuery để phân tích tùy chỉnh.
3.2.2 Các dịch vụ phát triển và kiểm thử ứng dụng
Realtime Database: Lưu trữ và đồng bộ dữ liệu người dùng thời gian
thực, các ứng dụng hỗ trợ tính năng này có thể lưu trữ dữ dữ liệu máy chủ
trong tích tắc. Các dữ liệu được lưu trữ trong hệ thống cơ sở dữ liệu hỗ trợ
NoSQL và được đặt trên nền tảng máy chủ Cloud, dữ liệu được ghi và đọc
với thời gian thấp nhất tình bằng mili giây. Nền tảng này hỗ trợ đồng bộ hóa
dữ liệu của người dùng kể cả khi khơng có kết nối mạng, tạo lên trải nghiệm
xuyên suốt bất chấp tình trạng kết nối internet của người sử dụng. Reatime
Database của Firebase hỗ trợ: Android, ios, web, c++, unity, và cả xamarin.


Crashlytics: Hệ thống theo dõi và lưu trữ thông tin lỗi của ứng dụng
đang chạy trên máy người dùng. Các thơng tin lỗi này được thu thập tồn diện
và ngay tức thời. Cách trình bày hợp lý với từng chu trình hoạt động đến xảy
ra lỗi, Các báo cáo trực quan giúp người phát triển có thể nắm bắt và xử lý kịp
thời các lỗi chính của ứng dụng.
Cloud Firestore: Lưu trữ và đồng bộ dữ liệu giữa người dùng và thiết bị
ở quy bơ tồn cầu sử dụng cơ sở dữ liệu noSQL được lưu trữ trên hạ tầng
cloud. Cloud Firestore cung cấp tính năng đồng bộ hóa trực tuyến và ngoại
tuyến cùng với các truy vấn dữ liệu hiệu quả. Tích hợp với các sản phẩm
Firebase khác cho phép xây dựng các ứng dụng thực sự ngay cả khi kết nối
internet bị gián đoạn.
Authentication: Quản lý người dùng một cách đơn giản và an toàn.
Firebase Auth cung cấp nhiều phương pháp xác thực, bao gồm email và mật
khẩu, các nhà cung cấp bên thứ ba như Google hay Facebook, và sử dụng trực

tiếp hệ thống tài khoản hiện tại của người dùng. Xây dựng giao diện riêng
hoặc tận dụng lợi thế của mã nguồn mở, giao diện người dùng tùy biến hoàn
toàn.
Cloud Functions: Mở rộng ứng dụng bằng mx phụ trợ tùy chỉnh mà
không cần quản lý và quy mô các máy chủ của riêng bạn. Các chức năng có
thể được kích hoạt bơi các sự kiện, được phát sinh ra bởi các sản phẩm
Firebase, dịch vụ Google Cloud hoặc các bên thứ ba có sử dụng webhooks.
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ẽ, đơn giản và tiết
kiệm chi phí được xây dựng cho quy mơ của Google. Các Firebase SDK cho
Cloud Storage thêm tính nắng bảo mật của Google để tải lên và tải tệp cho
các ứng dụng Firebase của người dùng, bất kể chất lượng mạng.
Hosting: Đơn giản hóa lưu trữ web của người dùng với các công cụ được
thực hiện cụ thể cho các ứng dụng web hiện đại. Khi tải lên nội dung web, hệ


thống sẽ tự động đẩy chúng đến CDN toàn cầu của hệ thống và cung cấp cho họ
chứng chỉ SSL miễn phí để người dùng có được trải nghiệm an toàn, đáng tin cậy,
độ trễ thấp dù họ ở đâu.
Test Lab: chạy thử nghiệm tự động và tùy chỉnh cho ứng dụng trên các thiết bị
ảo và vật lý do Google cung cấp. Sử dụng Firebase Test Lab trong suốt vòng đời
phát triển để khám phá lỗi và sử dụng khơng nhất qn để có thể cung cấp một trải
nghiệm tuyệt vời trên nhiều thiết bị.
Performance Monitoring: Chẩn đoán các vấn đề về hiệu suất ứng dụng xảy ra
trên các thiết bị của người dùng. Sử dụng dấu vết để theo dõi hiệu suất của các phần
cụ thể trong ứng dụng và xem chế độ xem tổng hợp trong bảng điều khiển Firebase.
Luôn cập nhật thời gian khời động của ứng dụng và theo dõi các yêu cầu HTTP mà
không cần viết bất kỳ mã nào.
3.2.3 Các dịch vụ tăng trưởng và thu hút người dùng
Google Analytics: Phân tích thuộc tính và hành vi của người sử dụng trong một

bảng điều khiển đơn để đưa ra các quyết định sáng suốt về lộ trình sản phẩm. Nhận
thơng tin chi tiết về thời gian thực từ báo cáo hoặc xuất dữ liệu sự kiện thơ tới
Google BigQuery để phân tích tùy chỉnh.
Cloud Messaging: Gửi tin nhắn vả thông báo cho người dùng qua các nền tảng
Android, IOS và web một cách miễn phí. Người dùng có thể gửi tin nhắn đến các
thiết bị, nhóm thiết bị hoặc các chủ để hoặc phân đoạn người dụng cụ thể. Nhắn tin
đám mây Firebase (FCM) thậm chí là các ứng dụng lớn nhất, cung cấp hàng trăm tỷ
thư mỗi ngày.
Predictions: Firebase Predictions áp dụng deep learning máy học với dữ liệu
phân tích của người dùng để tạo các nhóm người dùng năng động dựa trên hành vi
dự đốn. Các nhóm người dùng này có thể được sử dụng để nhằm mục tiêu trong
các sản phẩm như thơng báo, cấu hình từ xa và nhiều hơn

nữa.


Dynamic Links: Sử dụng liên kết động để cung cấp trải nghiệm người dùng tùy
chỉnh cho iOS, Android và web. Người dùng có thể sử dụng chúng để hỗ trợ web di
động kể thúc đẩy chuyển đổi ứng dụng gốc, người dùng chia sẻ người dùng, các
chiến dịch xã hộ và tiếp thị và hơn thế nữa. Dynamic Links cung cấp cho người
dùng các thuộc tính người dùng cần để hiểu rõ hơn về tăng trưởng di động của người
dùng. Đây là dịch vụ thay thế của Google.
Remote Config: Tùy chỉnh cách ứng dụng của người dùng hiển thị cho mỗi
người dùng. Thay đổi giao diện, triển khai các tính năng dần dần, chạy thử nghiệm
A/B, cung cấp nội dung tùy chỉnh cho người dùng nhất định hoặc thức hiện các cập
nhật khác giám sát tác động của những thay đổi của người dùng và thực hiện điều
chỉnh chỉ trong vài phút.
Invites: Cho phép người dùng chia sẻ tất cả các khía cạnh của ứng dụng của
nhà sản xuất ứng dụng, từ mã giới thiệu đến nội dung yêu thích, qua email hoặc
SMS. Giải pháp out-of-the-box này hoạt động của Google Analytics for Firebase, để

nhà sản xuất ứng dụng biết khi người dùng mở hoặc cài đặt một ứng dụng qua lời
mời.
App Indexing: Thu hút lại người dùng bằng các ứng dụng đẵ cài đặt của họ với
tích hợp Google tìm kiếm này. Nếu người dùng có ứng dụng của nhà sản xuất ứng
dụng và họ tìm kiếm nội dung có liên quan, họ có thể khởi chạy nó trực tiếp từ kết
quả. Nếu người dùng chưa có ứng dụng của nhà sản xuất, một thẻ cài đặt sẽ xuất
hiện khi họ tìm kiếm các ứng dụng tương tự.
AdMob: Kiếm tiền bằng cách hiển thị quảng cáo hấp dẫn cho khán giả tồn
cầu. AdMob có tất cả những ứng gi người dùng cần để thực hiện chiến lược kiếm
tiền trên lớp bậc nhất và để tối đa hóa doanh thu nhỏ mỗi người dùng tạo ra. Nó có
thể được điều chỉnh cho ứng dụng của chúng ta, và API của nó được xây dựng để
tích hợp các định dạng quảng cáo phong phú một cách dễ

dàng.


AdWords: Có được thơng tin và níu kéo lại người dùng với khả năng của
Google. Chúng ta có thể chạy quảng cáo trên Tìm Kiếm, hiển thị và video cũng như
nhắm mục tiêu phân khúc người dùng cụ thể mà chúng ta xác định trong Google
Analytics for Firebase. Cải thiện nhằm mục tiêu quảng cáo và tối ưu hóa hiệu suất
chiến dịch. Tóm lại: hiện project của mình chỉ tích hợp tính năng Cloud Messaging
gửi tin nhắn và thơng báo cho người dùng qua các nền tảng Android, iOS. Nên
chúng ta sẽ tìm hiểu cách tích hợp Firebase vào project của mình.
3.3 Một số kỹ thuật cơ bản
3.3.1 Tạo dự án trên Firebase
Điều đầu tiên cần làm là đi đến và tạo một tài
khoản hoặc dung tài khoản Gmail của google để truy cập vào giao diện điều khiển.
Sau khi truy cập vào giao diện điều khiển, người dùng có thể bắt đầu bằng cách tạo
ra


các

dự

án

đầu

tiên.


Sau đó nhấn vào “Continue to consol” ra kết quả như hình bên dưới.

Tới đây coi như là xong bước chuẩn bị Firebase


3.3.2 Quản lý người dùng
Sẽ rất nguy hiểm nếu để cho một người nặc danh tham gia vào trong hệ
thống chat. Để ngăn chặn điều này hệ thống yêu cầu người muốn tham gia hệ
thống chat phải đăng ký tài khoản và dùng tài khoản này để đăng nhập vào hệ
thống chat.

3.3.2.1 Đăng ký và đăng nhập

Hình 3.3.2.1: Hình đăng kí và đăng nhập
Trước khi sử dụng các chức năng của hệ thống thì người dùng cần đăng kí nếu
chưa có tài khoản hoặc đăng nhập nếu đã có tài khoản


3.3.2.2 Tải danh sách thành viên về ứng dụng

Để hỗ trợ người dùng dễ dàng tìm được bạn chat, ứng dụng sẽ tải tất cả
các thành viên của hệ thống về thiết bị. Để có thể hiển thị được danh sách
thành viên trước tiên cần tạo ra một class User để lưu trữ các dữ liệu gồm có
các thuộc tính như sau:
Các thuộc tính trong class User gồm có:

Hình 3.3.2.2: Thuộc tính User


3.3.3 Chat trên kênh riêng tư
Để có thế chat giữa hai tài khoản với nhau, hiển thị được nội dung tin nhắn,
hiển thị được thời gian thực và ảnh đại diện của gửi đầu tiên cần tạo ra một nơi gọi
là “rooms” để lưu trữ các dữ liệu gồm có các thuộc tính như sau:

Các thuộc tính trong “rooms” gồm có:
− text: nội dung tin nhắn
− image: ảnh người dùng
− sent: kiểm tra người gửi
Sau khi dữ liệu đã được đẩy lên Database ta sẽ hiển thị nội dung tin nhắn, ảnh
người gửi và thời gian thực nhận gửi tin nhắn bằng hàm dưới đây:

Hình 3.3.3: Hàm hiển thị tin nhắn


3.4 Bài tốn
Trao đổi thơng tin với nhau hàng ngày là một nhu cầu tất yếu của mọi người.
Cuộc cách mạng công nghiệp 4.0 ngày càng thu hẹp khoảng cách giữa mọi người với
nhau bằng các ứng dụng mạng xã hội, chat trực tuyến. Tuynhiên việc sử dụng các
dịch vụ này để chat với nhau trên thiết bị di động vẫn cịn có nhiều điểm bất tiện như
dung lượng cài ứng dụng đặt lớn, tiêu tốn nhiều bộ nhớ ram và nhất là xử lý gửi và

nhận tin nhắn chưa thực thi theo thời gian thực. Firestore Database của Google
Firebase là cơ sở dữ liệu thời gian thực có khả năng xử lý dữ liệu đủ nhanh và cho
kết quả phản hồi gần như tức thời. Ứng dụng chat thời gian thực dựa trên Fire
Database giúp mọi người nhận được các thông tin quan trọng và ngay lập tức từ phía
đối tác.
3.5 Sơ đồ chức năng
Phân tích thiết kế hướng đối tượng

Hình 3.5.1: Phân tích thiết kế hướng đối tượng
3.6 Thiết kế dữ liệu
3.6.1 Bảng dữ liệu người dùng


STT

Tên trường

Kiểu dữ
liệu

Độ rộng

Mơ tả

1

name

String


Tên người dùng

2

email

String

Địa chỉ email

3

search

String

Tìm kiếm

4

image

String

đường dẫn hình ảnh

Hình 3.6.1: Dữ liệu người dùng
3.6.2 Bảng thơng tin nội dung tin nhắn
STT


Tên trường

Kiểu dữ
liệu

Độ rộng

Mô tả

1

message

String

nội dung tin nhắn

2

receiver

String

Id người nhận

3

sender

String


id người gửi

4

timestamp

String

thời gian tin nhắn

Hình 3.6.2: Thơng tin nội dung tin nhắn
3.7 Giao diện chương trình
3.7.1 Giao diện chính
Khi ứng dụng được khỏi động. Giao diện sẽ hiển thị như hình bên dưới.


Hình 3.7.1: Giao diện chính của chương trình

3.7.2 Giao diện danh sách người dùng
Muốn hiển thị danh sách người dùng chạm vào biểu tượng bên dưới để
hiển thị ra được tất cả danh sách người dùng, giúp hiển thị ra được tất cả các
tài khoản để tìm kiếm và lựa chọn người mà mình muốn chat.

Hình.3.7.2: Danh sách bạn bè


3.7.3 Giao diện chat
Khi chạm vào một người dùng nào đó ở trên danh sách
người dùng mà muốn gửi tin nhắn chương trình sẽ chuyển đến

giao diện chat.

Hình.3.7.6: Giao diện Chat
Ở giao diện chat người dùng nhập nội dung vào ô tin nhắn sau đó chạm
vào biểu tượng gửi tin nhắn thì lập tức nội dung tin nhắn sẽ được gửi thành
công

.