Xây Dựng Ứng Dụng Chat Nhóm Đơn Giản Với React Native và Firebase
Nếu bạn đã từng tìm hiểu và xây dựng các “ứng dụng thời gian thực” thì có lẽ bạn đã hiểu được khái niệm về “Cơ sở dữ liệu thời gian thực” là gì. Cơ sở dữ liệu thời gian thực đơn giản chỉ là một cơ sở dữ liệu có lưu trữ dữ liệu mà nó “có giá trị thay đổi liên tục theo thời gian ” và quan trọng nhất là nó phải đáp ứng được điều kiện đó là “xử lý đủ nhanh và cho kết quả phản hồi và có tác động ngay lập tức”. Biểu đồ chứng khoán là một ví dụ thực tế về dữ liệu thời gian thực, nó biến động liên tục và để biểu diễn nó thì cần có một cơ sở dữ liệu thời gian thực để xử lí. Hoặc chúng ta có thể nghĩ đến một ví dụ thực tế hơn mà mỗi người đều sẽ sử dụng hàng ngày, đó chính là các ứng dụng chat, nó sẽ gửi và nhận tin nhắn của các người dùng với nhau, các tin nhắn này đương nhiên là dữ liệu thời gian thực rồi, và vì thế các ứng dụng chat được gọi là “Ứng dụng thời gian thực"
Vậy có cách nào để xây dựng nhanh chóng một ứng dụng thời gian thực hay không? Câu trả lời đó chính là sử dụng firebase trong ứng dụng React Native của bạn, ngày hôm nay tôi sẽ cùng bạn xây dựng một ứng dụng chat nhóm đơn giản bằng Firebase và React Native
Tìm hiểu về Firebase
Firebase là một nền tảng di động của Google trên nền tảng google cloud. Firebase cung cấp các sản phẩm, dịch vụ có sẵn với tiêu chí lập trình viên chỉ cần quan tâm để phần Client của một ứng dụng, tập trung vào trải nghiệm người dùng của ứng dụng còn phần Backend đã có Firebase đảm nhiệm.Các dịch vụ của Firebase bao gồm : Authentication, Cloud Messaging , Hosting , Cloud Function, vv.. nhưng nổi bật nhất có lẽ chính là Firebase Realtime Database, thứ giúp người sử dụng dễ dàng có một Realtime Database có sẵn, qua đó dễ dàng xây dựng các ứng dụng thời gian thực một cách nhanh chóng.
Xây dựng ứng dụng chat nhóm với Firebase và React Native
Việc đầu tiên mà chúng ta phải làm đó là tạo một dự án React Native và tích hợp Firebase
react-native init groupChatAppWithFirebaseĐể tương tác với firebase từ một ứng dụng React Native, chúng ta có 2 cách đó là sử dụng Web Sdk của Firebase và sử dụng một thư viện gọi là React Native Firebase. Nên hiểu là thư viện Web Sdk của Firebase là để tương tác với Web mà thôi, không hề có một thư viện chính thức nào để dùng React Native với Firebase và nếu sử dụng Web Sdk thì sẽ không thể sử dụng được các chức năng hướng mobile của Firebase như Cloud Messaging hay là Notification, vì vậy mới có thư viện bên thứ 3 kia. Nhưng Web Sdk của Firebase dễ dàng hơn trong việc tích hợp vào ứng dụng React Native nên hôm nay tôi sẽ dùng nó.
Cài đặt thư viện Web Sdk của Firebase cho ứng dụng React Native
cd groupChatAppWithFirebase
npm install --save firebaseTrong app này tôi sẽ sử dụng ReactNavigation, một thư viện khá phổ biến và dễ sử dụng để Navigation cho app, gần đây mới được cập nhật lên bản 2.0 nên bạn nhớ cài thêm react-native-gesture-handler thì mới hoạt động được
yarn add react-navigation
# hoặc # npm install --save react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handlerTiếp theo là tạo một Project trên Firebase, các bạn vào https://console.firebase.google.com/
Khi đã tạo xong, chúng ta vào Project mới tạo, chọn mục Database và kéo xuống chọn Create Realtime Database, đơn giản gần đây Google đã thêm một sản phẩm nữa là Cloud Firestore, thứ được quảng cáo là ưu việt hơn và sẽ thay thế Realtime Database ( chưa học xong cái này đã ra cái kia, mệt ghê )
Một màn hình chọn thứ gọi là “Security Rule" hiện lên, tạm thời chúng ta chưa cần quan tâm lắm đến nó
Vậy là đã xong bước cấu hình cho ứng dụng!
Dưới đây là mô tả app
Screen đầu tiên sẽ dùng để người dùng nhập tên và Join vào phòng chat, screen thứ 2 sẽ là phòng chat nơi người dùng có thể trò truyện thời gian thực với nhau, đơn giản vậy thôi, đến lúc bắt tay vào code rồi :D
Việc đầu tiên là tạo khung Navigation cho ứng dụng, chỉ gồm 2 screen, nếu bạn đã làm việc với React Navigation thì không thành vấn đề gì ở đây rồi
Đến lúc tạo giao diện để người dùng Join vào App của bạn rồi
Chỉ với vài SheetStyle in line là xong, nó sẽ ra như này
Tiếp theo là bạn cần phải cho app của bạn biết là nó đang tương tác đến firebase project nào, để làm được điều này bạn cần lấy được đoạn config của Firebase Project mà bạn đã tạo trong mục Project Setting và chọn Web App sau đó thêm nó vào dự án của bạn, hãy dữ bí mật đoạn config này, vì app demo này open source nên tôi mới thoải mái share đoạn config đó lên
Thêm config vào dự án của bạn bằng 1 hàm sẽ chạy khi bắt đầu mở app, thường là trong Component Will Mount ở Screen đầu tiên
Việc tiếp theo cần làm là xử lí được việc Join của người dùng vào Chat Room, hãy hiểu rằng chúng ta sẽ giúp người dùng Authentication ở bước này để họ có thể đăng nhập vào Firebase. Firebase hỗ trợ rất nhiều cách để một User có thể đăng nhập như Email Password hay là thông qua Facebook, Twiter, vv… nhưng với mục đích là để demo, tôi sẽ sử dụng Anonymous Login của firebase, 1 kiểu đăng nhập ẩn danh nhanh chóng, khá phù hợp với ứng dụng chúng ta đang xây dựng. Đầu tiên hãy enable nó lên trong mục Authentication/SignIn Method
Quay lại code của chúng ta để xử lí việc đăng nhập ẩn danh cho người dùng, chỉ với một function được gọi từ firebase.auth() chúng ta đã làm được điều đó, hãy lưu ý rằng chúng ta khi vào phòng chat thì cần có tên riêng vì vậy tôi dùng AsyncStorage của React Native để lưu tên người dùng mới nhập.
Vậy là đã xong phần Join cho ứng dụng, chúng ta bắt đầu dựng giao diện phần chat room.
Ở đây cần có thêm 1 component để hiển thị các dòng chat kèm người gửi, ý tưởng là làm riêng 1 component sau đó ở chatRoom.js chúng ta sẽ import nó rồi render các dòng chat qua FlatList.
Test thử giao diện với vài dữ liệu giả
App chúng ta trông có vẻ thành hình rồi đó, việc cuối cùng mà ta cần làm đó là tương tác với Realtime Database của Firebase và tiến hành đẩy, đọc dữ liệu với nó(ở đây là các tin nhắn), dữ liệu Realtime sẽ được truyền trực tiếp xuống các Client và chúng ta sẽ hoàn thành app chat nhóm này .
Đầu tiên chúng ta phải hiểu được dữ liệu của Firebase sẽ được lưu ở dạng nào. Firebase lưu dữ liệu trong Realtime Database của mình dưới định dạng Tree/Json :
Khác với db thông thường, dữ liệu của Realtime database được lưu ở định dạng Json, coi dữ liệu là cả 1 cái cây (Tree) lớn với nhiều nút (node) và dữ liệu được lưu trên các node đó.
Từ ảnh trên ta đã hình dung được cách để gửi tin nhắn hay là đẩy dữ liệu tin nhắn từ 1 client của người dùng lên Firebase, đó là mỗi khi người dùng nhập tin nhắn và ấn gửi, ta sẽ tiến hành đẩy (push) một nút mới lên chatRoom, trong nút đó lại có 2 nút nhỏ chứ nội dung tin nhắn (chat content) và người gửi (userName) .Tiến hành code thôi :
Hàm trên sẽ được gọi sau khi người dùng nhập nội dung tin nhắn và ấn gửi, nó sẽ push 1 nút mới lên “/chatRoom” bao gồm nội dung tin nhắn và người gửi, dữ liệu người gửi từ State này được tôi lấy ra từ AsyncStorage.
Việc cuối cùng cần làm đó là lấy dữ liệu thời gian thực về ( ở đây là các tin nhắn ) và dùng FlatList để Render nó ra màn hình cho người dùng,để lấy dữ liệu thời gian thực, ta chỉ cần dùng hàm ref() để tham chiếu đến vùng DB cần lấy dữ liệu và dùng một Callback trong hàm On để lấy ra dữ liệu mới mỗi lần có sự thay đổi
Cần lưu ý ở đây, dữ liệu trả về là dạng Object, vì vậy nếu đưa nó vào Flatlist sẽ không thể hoạt động, vì vậy t cần dùng
Object.values(snapshot.val())để convert dữ liệu về dạng Array.
Sử dụng Flatlist và Component lineChatHolder để render ra nội dung chat
Thành quả cuối cùng :
Source Code : https://github.com/vakiller/simpleFirebaseChat
Kết Luận
Chúng ta đã cùng nhau tìm hiểu những điều cơ bản nhất về Firebase và cùng nhau làm một ứng dụng chat nhóm, mọi người hoàn toàn có thể tìm hiểu sâu về Firebase, đây là một nền tảng lớn và còn nhiều điều thú vị mà ta chưa tìm hiểu hết, từ đây các bạn cũng có thể phát triển thêm các tính năng để biến app chat nhóm này thành một app hoàn chỉnh hơn nữa, nếu mọi người ủng hộ, hay có bất kì phản biện, nhận xét gì, mình sẽ dành thời gian nghiên cứu và cho ra đời các phần sau để chúng ta có thể cùng nhau đàm đạo kĩ hơn nữa về Firebase và React Native, cảm ơn mọi người đã đọc !
Tài Liệu tham khảo :
