Xây dựng ứng dụng ChatApp sử dụng Firebase

Xin chào các bạn, mình đã có một bài viết xây dựng ứng dụng ChatApp sử dụng NodeJS và SocketIO, nhưng hiện nay, Firebase đang nổi lên như 1 dịch vụ lưu trữ database, quản lí server và hoàn toàn free. Vậy nên hôm nay, mình sẽ hướng dẫn các bạn xây dựng một ứng dụng ChatApp sử dụng Firebase đơn giản nhất.

Đăng kí với Firebase

Đầu tiên bạn phải tạo một firebase application để cho ứng dụng Android tương tác. Bạn vào trang chủ của firebase tại đây. Đăng nhập hoặc đăng kí 1 tài khoản.

Phần quản lí ứng dụng sẽ được tạo cho bạn

Tất cả dữ liệu từ Android gửi lên, sẽ được xem ở phần Data Tab

Vậy là xong phần Firebase rồi, rất đơn giản phải không nào, bây giờ chúng ta sẽ đến phần tạo Client nhé

Tạo ứng dụng trên Android Studio

1. Tạo 1 project mới tên là AndroidChatFirebase, chọn minSDK là 16.

2. Mở file build.gradle và thêm thư viện vào phần dependencies

compile 'com.firebase:firebase-client-android:2.5.0' compile 'com.firebaseui:firebase-ui:0.3.1' compile 'com.google.android.gms:play-services-auth:8.3.0'

Thêm phần này vào trong đối tượng android

1 2 3 4 5

packagingOptions {         exclude 'META-INF/LICENSE'         exclude 'META-INF/LICENSE-FIREBASE.txt'         exclude 'META-INF/NOTICE'     }

Ta được như sau

Bạn build ứng dụng để các thư viện được tải về nhé

3. Thêm quyền truy cập Internet vào AndroidManifest.xml

1	<uses-permission android:name="android.permission.INTERNET" />

4. Sửa file activity_main.xml như sau

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"     android:layout_height="match_parent" >          <LinearLayout         android:id="@+id/footer"         android:layout_alignParentBottom="true"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal">         <EditText             android:id="@+id/text_edit"             android:layout_width="0dp"             android:layout_weight="1"             android:layout_height="wrap_content"             android:singleLine="true"             android:inputType="textShortMessage" />         <Button             android:id="@+id/send_button"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="Send" />     </LinearLayout> </RelativeLayout>

5. Sửa file MainActivity.java như sau

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

// MainActivity.java package tuhocandroid.com.androidchatfirebase; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import com.firebase.client.Firebase; import java.util.HashMap; import java.util.Map; public class MainActivity extends Activity {     private Firebase mFirebaseRef;     EditText textEdit;     Button sendButton;          @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         Firebase.setAndroidContext(this);         mFirebaseRef = new Firebase("https://popping-heat-8239.firebaseio.com/");         textEdit = (EditText) this.findViewById(R.id.text_edit);         sendButton = (Button) this.findViewById(R.id.send_button);         sendButton.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 String text = textEdit.getText().toString();                 Map<String,Object> values = new HashMap<>();                 values.put("name", "Android User");                 values.put("text", text);                 mFirebaseRef.push().setValue(values);                 textEdit.setText("");             }         });     } }

Ở đây, bạn tạo một kết nối với Firebase server bằng lệnh

1	mFirebaseRef = new Firebase("https://popping-heat-8239.firebaseio.com/");

Bạn phải thay thế đường link bằng đường link của firebase của bạn

Để gửi tin nhắn lên firebase ta dùng

1	mFirebaseRef.push().setValue(values);

Ok rồi, bạn build ứng dụng, gõ tin nhắn và gửi lên server, vào tab Data để xem tin nhắn nhé.

6. Bây giờ mình muốn hiển thị list các tin nhắn từ server thì làm như sau. Chỉnh sửa lại file activity_main.xml 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

// activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"     android:layout_height="match_parent" >     <ListView         android:id="@android:id/list"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_above="@+id/footer"/>     <Button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Login"         android:id="@+id/login"         android:layout_alignTop="@android:id/list"         android:layout_alignRight="@android:id/list"         android:layout_alignEnd="@android:id/list" />     <LinearLayout         android:id="@+id/footer"         android:layout_alignParentBottom="true"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal">         <EditText             android:id="@+id/text_edit"             android:layout_width="0dp"             android:layout_weight="1"             android:layout_height="wrap_content"             android:singleLine="true"             android:inputType="textShortMessage" />         <Button             android:id="@+id/send_button"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="Send" />     </LinearLayout> </RelativeLayout>

Layout này mình tạo thêm 1 button Login để hướng dẫn các bạn cách tạo 1 ứng dụng đăng nhập đăng kí luôn.

7. Bạn tạo file ChatMessage.java như sau

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

package tuhocandroid.com.androidchatfirebase; /** * Created by luongnguyen on 3/18/16. */ public class ChatMessage {     private String name;     private String text;     public ChatMessage() {         // necessary for Firebase's deserializer     }     public ChatMessage(String name, String text) {         this.name = name;         this.text = text;     }     public String getName() {         return name;     }     public String getText() {         return text;     } }

Một tin nhắn sẽ có 2 trường là người gửi và tin nhắn

8. Bạn vào server firebase tab Login & Auth tạo một user mới, và tích chọn Enable Email & Password Authentication

 Sau này, để phát triển các app cần đăng nhập đăng kí, bạn chỉ cần vào firebase và tạo rất đơn giản, không phải tự tạo server rồi tạo database để quản lí nữa, rất nhanh và tiện dụng phải không nào

9. Bạn sửa file MainActivity.java như sau

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102

// MainActivity.java package tuhocandroid.com.androidchatfirebase; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; import android.widget.TextView; import com.firebase.client.Firebase; import com.firebase.ui.FirebaseListAdapter; import com.firebase.ui.auth.core.AuthProviderType; import com.firebase.ui.auth.core.FirebaseLoginBaseActivity; import com.firebase.ui.auth.core.FirebaseLoginError; public class MainActivity extends FirebaseLoginBaseActivity {     private Firebase mFirebaseRef;     EditText textEdit;     Button sendButton;     FirebaseListAdapter<ChatMessage> mListAdapter;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         Firebase.setAndroidContext(this);         mFirebaseRef = new Firebase("https://popping-heat-8239.firebaseio.com/");         textEdit = (EditText) this.findViewById(R.id.text_edit);         sendButton = (Button) this.findViewById(R.id.send_button);         sendButton.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 String text = textEdit.getText().toString();                 ChatMessage message = new ChatMessage("IOS User", text);                 mFirebaseRef.push().setValue(message);                 textEdit.setText("");             }         });         Button loginButton = (Button) this.findViewById(R.id.login);         loginButton.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 showFirebaseLoginPrompt();             }         });         final ListView listView = (ListView) this.findViewById(android.R.id.list);         mListAdapter = new FirebaseListAdapter<ChatMessage>(this, ChatMessage.class,                 android.R.layout.two_line_list_item, mFirebaseRef) {             @Override             protected void populateView(View v, ChatMessage model, int position) {                 ((TextView)v.findViewById(android.R.id.text1)).setText(model.getName());                 ((TextView)v.findViewById(android.R.id.text2)).setText(model.getText());             }         };         listView.setAdapter(mListAdapter);     }     @Override     protected void onStart() {         super.onStart();         setEnabledAuthProvider(AuthProviderType.PASSWORD);     }     @Override     protected Firebase getFirebaseRef() {         return mFirebaseRef;     }     @Override     protected void onFirebaseLoginProviderError(FirebaseLoginError firebaseLoginError) {     }     @Override     protected void onFirebaseLoginUserError(FirebaseLoginError firebaseLoginError) {     }     @Override     protected void onDestroy() {         super.onDestroy();         mListAdapter.cleanup();     } }

Ở đây ta thấy khi click Login nó sẽ gọi hàm showFirebaseLoginPrompt() để các bạn đăng nhập vào ứng dụng sau này, ở ứng dụng này, mình chỉ hướng dẫn cách sử dụng login cho các bạn thôi, nên ứng dụng chưa đăng nhập vẫn sử dụng được.

Điền thông tin user bạn tạo ở bước trước vào đây là được.

Hiện tại mình đang sử dụng tên user định sẵn là IOS User , sau bạn làm đăng nhập, thì nên thay đổi tên user theo tên đăng nhâp

1 2 3 4 5 6 7 8 9

sendButton.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 String text = textEdit.getText().toString();                 ChatMessage message = new ChatMessage("IOS User", text);                 mFirebaseRef.push().setValue(message);                 textEdit.setText("");             }         });

Update dữ liệu vào listview tại đây

1 2 3 4 5 6 7 8 9 10 11

final ListView listView = (ListView) this.findViewById(android.R.id.list);         mListAdapter = new FirebaseListAdapter<ChatMessage>(this, ChatMessage.class,                 android.R.layout.two_line_list_item, mFirebaseRef) {             @Override             protected void populateView(View v, ChatMessage model, int position) {                 ((TextView)v.findViewById(android.R.id.text1)).setText(model.getName());                 ((TextView)v.findViewById(android.R.id.text2)).setText(model.getText());             }         };         listView.setAdapter(mListAdapter);

Clean adapter khi thoát ra

1 2 3 4 5

@Override     protected void onDestroy() {         super.onDestroy();         mListAdapter.cleanup();     }

Vậy là xong rồi, bạn build rồi chạy thôi. Rất đơn giản phải không nào 

Bạn có thể download source code tại đây nhé .

Các hướng tiếp theo của ứng dụng ChatApp này mình nghĩ bạn nên tìm hiểu và làm, sẽ lên trình rất nhanh đó

• Thêm Logout vào ứng dụng
• Sử dụng RecycleView làm listview
• Làm một màn hình đăng kí đăng nhập, phải đăng nhập mới vào nhắn tin được