Cách tạo một Ứng dụng Chat trong Android bằng Firebase

Với Firebase, việc tạo ra các ứng dụng mạng xã hội theo thời gian thực giống như một cuộc dạo chơi trong công viên. Và điều tốt nhất về nó là: bạn không cần phải viết một dòng code nào ở phía máy chủ.

Trong bài này, tôi sẽ hướng dẫn cho bạn cách sử dụng Firebase UI để tạo một ứng dụng chat nhóm mà bạn có thể chia sẻ với bạn bè của mình. Nó sẽ là một ứng dụng rất đơn giản chỉ với một phòng chat, mở cửa cho tất cả người dùng.

Có thể bạn đoán được, ứng dụng sẽ dựa vào Firebase Auth để quản lý đăng ký người dùng và đăng nhập. Nó cũng sẽ sử dụng cơ sở dữ liệu thời gian thực của Firebase để lưu trữ các tin nhắn.

Yêu cầu

Để có thể làm theo hướng dẫn từng bước này, bạn sẽ cần những thứ sau:

• Phiên bản Android Studio mới nhất
• Một tài khoản Firebase

Để có được những hướng dẫn về cách thiết lập thông tin tài khoản Firebase và chuẩn bị sẵn sàng cho quy trình tăng trưởng Firebase trong Android Studio, hãy xem qua hướng dẫn của tôi Làm quen với Firebase dành cho Android ở đây trên Envato Tuts + .

1. Tạo một Dự án Android Studio

Mở Android Studio và tạo một dự án mới với một Activity rỗng đặt tên là MainActivity.

Để cấu hình dự án nhằm sử dụng nền tảng Firebase, hãy mở cửa sổ Firebase Assistant bằng cách nhấp vào Tools > Firebase.

Khi sử dụng nền tảng Firebase, thường thì bạn nên thêm Firebase Analytics vào dự án. Do đó, trong cửa sổ Firebase Assistant, hãy chuyển đến phần Analytics và nhấn vào Log an Analytics event.

Tiếp theo, nhấn vào nút Connect to Firebase và đảm bảo rằng tùy chọn Create new Firebase project đã được chọn. Khi kết nối được thiết lập, hãy nhấn nút Add Analytics to your app.

Tại thời điểm này, dự án Android Studio không chỉ được tích hợp với Firebase Analytics, mà nó còn sẵn sàng để sử dụng tất cả các dịch vụ Firebase khác.

2. Thêm Phụ thuộc

Chúng ta sẽ sử dụng hai thư viện trong dự án này: Firebase UI và Android support library. Do đó hãy mở tập tin build.gradle của mô-đun app và thêm các phụ thuộc compile sau đây vào nó:

Nhấn vào nút Sync Now để cập nhật dự án.

3. Định nghĩa Bố cục

Tập tin activity_main.xml, đã được ràng buộc với MainActivity, xác định nội dung của màn hình chính (mà chúng ta quen gọi là home) của ứng dụng. Mặt khác, nó sẽ đại diện cho phòng chat.

Cũng giống như hầu hết các ứng dụng chat nhóm khác hiện có ngày nay, ứng dụng của chúng ta sẽ có các thành phần UI sau đây:

• Một danh sách hiển thị tất cả các tin nhắn chat nhóm theo thứ tự thời gian
• Một trường input nơi người dùng có thể nhập tin nhắn mới
• Một nút mà người dùng có thể nhấn vào để gửi tin nhắn

Vì vậy, activity_main.xml phải có một ListView, một EditText, và một FloatingActionButton. Sau khi đặt tất cả chúng trong một thành phần RelativeLayout, thì bố cục XML của bạn sẽ như sau:

Lưu ý rằng tôi đã đặt thành phần EditText bên trong một thành phần TextInputLayout. Làm như vậy nhằm thêm một nhãn nổi vào EditText, điều này rất quan trọng nếu bạn muốn tuân theo các nguyên tắc của Material Design.

Bây giờ thì bố cục của màn hình chính đã sẵn sàng, chúng ta có thể chuyển đến phần tạo bố cục cho các tin nhắn chat, đó sẽ là các phần tử bên trong ListView. Bắt đầu bằng cách tạo một tập tin bố cục XML mới có tên là message.xml, có thành phần gốc là RelativeLayout.

Bố cục phải có các thành phần TextView để hiển thị văn bản của tin nhắn chat, thời gian gửi và người gửi. Bạn có thể tự do đặt chúng theo bất kỳ thứ tự nào. Đây là bố cục mà tôi sẽ sử dụng:

4. Xử lý Xác thực Người dùng

Việc cho phép người dùng nặc danh gửi tin nhắn đến phòng chat sẽ là một ý tưởng ​​rất tệ. Nó có thể dẫn đến tin rác, các vấn đề bảo mật, và một trải nghiệm kém lý tưởng cho người dùng. Do đó, hãy cấu hình ứng dụng của chúng ta sao cho chỉ những người dùng đã đăng ký mới có thể đọc và gửi tin nhắn.

Bắt đầu bằng cách đi đến phần Auth của Firebase Console và kích hoạt Email/Password như là một nhà cung cấp dịch vụ đăng nhập.

Đồng thời có thể kích hoạt nhà cung cấp dịch vụ đăng nhập OAuth 2.0. Tuy nhiên, FirebaseUI v0.6.0 chỉ hỗ trợ đăng nhập Google và Facebook một cách liền mạch.

Bước 1: Xử lý Đăng nhập Người dùng

Ngay khi ứng dụng khởi động, nó phải kiểm tra người dùng đã đăng nhập hay chưa. Nếu đã đăng nhập, thì ứng dụng sẽ tiếp tục và hiển thị nội dung của phòng chat. Nếu không, nó phải chuyển hướng người dùng đến màn hình đăng nhập hoặc màn hình đăng ký. Với FirebaseUI, việc tạo ra các màn hình này cần rất ít code hơn so với những gì bạn tưởng.

Bên trong phương thức onCreate() của MainActivity, hãy kiểm tra xem người dùng đã đăng nhập hay chưa bằng cách kiểm tra đối tượng FirebaseUser hiện tại không phải là null. Nếu nó null, bạn phải tạo và cấu hình một đối tượng Intent để mở một activity đăng nhập. Để làm như vậy, hãy sử dụng lớp SignInIntentBuilder. Khi intent đã sẵn sàng, bạn phải khởi động activity đăng nhập bằng phương thức startActivityForResult().

Lưu ý rằng activity đăng nhập cũng cho phép người dùng mới đăng ký. Vì vậy, bạn không cần phải viết thêm bất kỳ code nào để xử lý việc đăng ký người dùng.

Thêm code sau đây vào phương thức onCreate():

Như bạn có thể thấy trong code ở trên, nếu người dùng đã đăng nhập, thì trước tiên chúng ta sẽ hiển thị một thông báo Toast chào đón người dùng, và sau đó gọi phương thức có tên là displayChatMessages. Bây giờ, chỉ cần tạo một phương thức rỗng cho nó thôi. Chúng ta sẽ thêm code vào nó sau.

Một khi người dùng đã đăng nhập, MainActivity sẽ nhận được một kết quả dưới dạng một Intent. Để xử lý nó, bạn phải override phương thức onActivityResult().

Nếu resultCode là RESULT_OK, thì nó có nghĩa là người dùng đã đăng nhập thành công. Nếu vậy, bạn phải gọi phương thức displayChatMessages() một lần nữa. Ngược lại, gọi finish() để đóng ứng dụng.

Tại thời gian này, bạn hoàn toàn có thể chạy ứng dụng và xem màn hình hiển thị đăng nhập và ĐK .

Bước 2: Xử lý Người dùng Đăng xuất

Mặc định, FirebaseUI sử dụng Smart Lock cho Mật khẩu. Do đó, khi người dùng đã đăng nhập, họ sẽ vẫn đăng nhập ngay cả khi ứng dụng được khởi động lại. Để cho phép người dùng đăng xuất, bây giờ chúng ta sẽ thêm một tùy chọn đăng xuất vào menu của MainActivity.

Tạo một tập tin tài nguyên cho menu mới đặt tên là main_menu.xml và thêm một item vào nó, có thuộc tính title được thiết lập thành Sign out. Nội dung của tập tin sẽ như sau:

Để khởi tạo tài nguyên menu bên trong MainActivity, hãy override phương thức onCreateOptionsMenu() và gọi phương thức inflate() của đối tượng MenuInflater.

Tiếp theo, hãy override  phương thức onOptionsItemSelected() để xử lý các sự kiện nhấp vào phần tử menu. Bên trong phương thức đó, bạn có thể gọi phương thức signOut() của lớp AuthUI để đăng xuất người dùng. Vì thao tác đăng xuất được thực hiện không đồng bộ, nên chúng ta cũng sẽ thêm một OnCompleteListener vào nó.

Một khi người dùng đã đăng xuất, ứng dụng sẽ tự động đóng lại. Đó là lý do tại sao bạn nhìn thấy cuộc gọi đến phương thức finish() trong code ở trên.

5. Tạo một Model

Để lưu trữ các tin nhắn chat vào cơ sở dữ liệu theo thời gian thực Firebase, bạn phải tạo ra một model cho chúng. Bố cục của tin nhắn chat mà chúng ta đã tạo ra trước đó trong hướng dẫn này, có ba view. Để có thể phân phối dữ liệu vào các view đó, thì model cũng phải có ít nhất ba trường.

Tạo một lớp Java mới đặt tên là ChatMessage.java và thêm ba biến thành viên vào nó: messageText, messageUser, và messageTime. Đồng thời thêm một hàm xây dựng để khởi tạo các biến đó.

Để làm cho model tương thích với FirebaseUI, bạn cũng phải thêm một hàm xây dựng mặc định vào nó, cùng với các hàm getter và setter cho tất cả các biến thành viên.

Tại thời điểm này, lớp ChatMessage sẽ như sau:

6. Gửi một Tin nhắn Chat

Bây giờ model đã sẵn sàng, chúng ta có thể dễ dàng thêm các tin nhắn chat mới vào cơ sở dữ liệu theo thời gian thực Firebase.

Để gửi một tin nhắn mới, người dùng sẽ nhấn vào FloatingActionButton. Vì vậy, bạn phải thêm một OnClickListener vào nó.

Bên trong listener, trước tiên bạn phải lấy một đối tượng DatabaseReference bằng phương thức getReference() của lớp FirebaseDatabase. Sau đó, bạn có thể gọi phương thức push() và setValue() để thêm các đối tượng mới của lớp ChatMessage vào cơ sở dữ liệu thời gian thực.

Tất nhiên, các đối tượng ChatMessage phải được khởi tạo bằng cách dùng nội dung của EditText và hiển thị tên của người dùng hiện đang đăng nhập.

Theo đó, hãy thêm code sau đây vào phương thức onCreate():

Dữ liệu trong cơ sở dữ liệu theo thời gian thực Firebase luôn luôn được lưu trữ dưới dạng cặp khóa-giá trị. Tuy nhiên, nếu bạn quan sát code ở trên, bạn sẽ thấy rằng chúng ta đang gọi setValue() mà không chỉ định rõ bất kỳ khóa nào. Điều đó được phép vì trước khi gọi đến phương thức setValue(), phương thức push() đã được gọi trước đó, nó sẽ tự động sinh ra một khoá mới.

7. Hiển thị Tin nhắn Chat

FirebaseUI có một lớp rất tiện dụng được gọi là FirebaseListAdapter, nó giúp làm giảm đáng kể công sức bỏ ra để điền vào một ListView bằng dữ liệu có trong cơ sở dữ liệu thời gian thực Firebase. Bây giờ chúng ta sẽ sử dụng nó để lấy và hiển thị tất cả các đối tượng ChatMessage có trong cơ sở dữ liệu.

Thêm một đối tượng FirebaseListAdapter dưới dạng một biến thành viên mới của lớp MainActivity.

Bên trong phương thức displayChatMessages(), hãy khởi tạo adapter bằng hàm xây dựng của nó, hàm này nhận ​​các đối số sau đây:

• Một tham chiếu đến Activity
• Lớp của đối tượng mà bạn quan tâm
• Bố cục của các phần tử trong danh sách
• Một đối tượng DatabaseReference

FirebaseListAdapter là một lớp trừu tượng và có một phương thức trừu tượng là populateView(), phương thức này phải được override.

Tên gọi của nó cho thấy rằng, populateView() được sử dụng để điền vào các view của mỗi phần tử trong danh sách. Nếu bạn quen với lớp ArrayAdapter, thì bạn có thể hình dung populateView() như là một phương thức thay thế cho phương thức getView().

Bên trong phương thức này, trước tiên bạn phải sử dụng findViewById() để lấy tham chiếu đến mỗi TextView có trong tập tin bố cục message.xml. Sau đó bạn có thể gọi các phương thức setText() của chúng và điền vào chúng bằng các phương thức getter của lớp ChatMessage.

Tại thời điểm này, nội dung của phương thức displayChatMessages() sẽ như sau:

Ứng dụng chat nhóm đã sẵn sàng. Hãy chạy nó và gửi một tin nhắn mới để xem chúng bật lên ngay lập tức trong ListView. Nếu bạn chia sẻ ứng dụng với bạn bè của mình, bạn cũng có thể thấy tin nhắn của họ ngay khi họ gửi lên.

Tóm tắt

Trong hướng dẫn này, bạn đã học được cách sử dụng Firebase và FirebaseUI để tạo ra một ứng dụng chat nhóm cực kỳ đơn giản. Bạn cũng đã thấy làm việc với các lớp có sẵn trong FirebaseUI dễ dàng như thế nào để nhanh chóng tạo ra các màn hình mới và cài đặt các chức năng phức tạp.

Để tìm hiểu và khám phá thêm về Firebase và FirebaseUI, hãy tìm hiểu thêm tài liệu hướng dẫn chính thức. Hoặc kiểm tra 1 số ít hướng dẫn Firebase khác của chúng tôi ở đây trên Envato Tuts + !

Source: https://mindovermetal.org
Category: Ứng dụng hay