利用Firebase做一個簡單的Android聊天室小app

做一個簡單的Android聊天室小app

 

前言

　　Firebase是一個協助程式開發的一個相當好用的工具，從2014年加入google之後即不斷成長，現今已成為app開發人員最喜歡的後端服務平台之一。而在2016年google的I/O大會上，更是大規模的推出了許多新功能，使其更進一步與google其它產品做更深度的整合。

        同時它也是一個同時支援ios、android與網頁的雲端開發平台，協助開發人員能在雲端快速建置後端服務，並提供像是即時性的資料庫、crash日誌記錄等等，大大縮短開發與統整的時間。有關於firebase的功能相當的多，有興趣的人可以查閱下方連結或是網路上的官方說明。這次要使用firebase提供的管理平台，並搭配android手機試做一個簡單的聊天室app。

 

我將建立過程分成以下步驟，照著這步驟就可以一步一步的完成聊天室了喔，步驟如下：

．註冊firebase平台

．建立android專案

．進行登入動作

．進行登出動作

．傳送訊息到平台上

．顯示聊天室訊息

．實際操作畫面

 

一、註冊firebase平台

 

 

　　首先要做的是註冊一個自己的firebase服務器，進入firebase平台首頁https://firebase.google.com/，如要使用相關服務，需要先進行登入動作，點選右上的sign in進入點進行登入，這裡需要一個google帳戶，如果沒有的話可以先申請一組。

 

登入後的頁面可以點選右下角的Get started準備建立專案，進入後可以看到目前擁有的專案，或是選擇建立專案來建置一個新的平台

如果尚未建立專案的話，點選「新增專案」，這時會跳出一個對話框提示您需要輸入哪些資料

 

這次是要做一個聊天的小工具，所以我們就把專案名稱命名為ChatTool易於辨認吧。其它的資訊可以照預設值就好，不用特別修改。建立好專案之後進去首頁可以看到如下的畫面

 

首頁為Project OverView總覽， 可以看到在平台活動的各類數據，對於需要分析使用數據的用戶來說很方便。我們主要用的地方是左邊選單的Database功能。

 

進入之後，這裡就是主要查看聊天室訊息及各項設定的地方：

在資料頁籤中可以看到訊息的結構，未來從app上送出的訊息也會依序地出現在這上面，關於訊息的結構這是自己做的，它是可以自定義的喔！就像資料夾的分層一樣，能夠自行命名欄位，並無太多限制或上限，下面在建立android專案步驟時會詳細說明。

 

 

右邊的選單展開可以選擇匯入或匯出資料，格式為JSON，可將對話記錄存下來或是匯入需要告知聊天室所有人的訊息

 

 

規則頁籤這裡可以設定各種平台的權限，我們只要設定一下讀寫的權限，將rules的read 與write設為true。寫法格式如下

到了這邊，簡易聊天室在firebase端的平台架構算是大致上完成了。接下來就可以開啟android專案來實際撰寫了！

 

二、 建立android專案

 

接著到android studio建立新專案，我們選擇一個空白的專案並命名為ChatTool就可以了

 

 

再來我們要先把聊天室的佈局做好，將使用者跟對方的訊息區分開來，並以簡單、一目瞭然為主。在message.xml的版面設置上可以參考以下畫面：

另外這次的輸入框多用了android design提供的元件：TextInputLayout包覆起來，能讓輸入框多了一些動態的效果，當然也可以直接使用EditText就好。Floating Action Button就用來做送出訊息的動作，並且最後用RecyclerView將訊息顯示在畫面上：

 

效果像這樣：

 

n   授權firebase的登入

 

 

App上使用Firebase功能時需要一些前置作業，也就是在console主控台上要做一點設定，首先是在Authentication頁加入登入的授權方式，這裡提供諸多可驗證身分登入的管道，可以選擇最簡單的信箱登入方式，未來開啟app時使用gmail帳戶登入完成就可以使用聊天室了

 

點擊電子郵件/密碼欄位後開啟開關並儲存後就可以了，非常的簡單

 

接著回到android 專案上，在tools選單內有個firebase設定選項，這裡可以設定該專案要與firebase做怎麼樣的連接，先前在主控台上開啟了信箱驗證，所以android這邊也要同步開啟，開啟方式一樣很簡單，在Authentication這區塊打開，有個按鈕可以按，點進去之後會看到設定的教學步驟：

 

如果該專案已經連接帳戶，在第一步即會顯示connected字樣，尚未登入的話點擊會導頁至firebase頁面要求登入。再來點取第二步的「Add Firebase Authentication to your app」，它會提示您需要安裝哪些套件，點取接受後就會自動幫您安裝了喔

 

 

Ps：這裡建議的套件會自動搜尋最新的版本，所以實際上操作時的提示語可能會不同。

 

三、 進行登入動作

 

我們希望開啟此app時就能馬上使用聊天室功能，所以在首頁，也就是MainActivity中的onCreate()就寫入這行協助檢查

 

這裡即是使用Firebase提供的實體方法來驗證是否已取得使用者身分，若尚未取得的話會使用FirebaseUI的驗證畫面來引導使用者登入，不需要另外撰寫，我們要做的只要用startActivityForResult來接回登入的結果即可

 

登入成功的地方有看到呼叫一個自定的displayChatMsg方法，這方法就是之後要用來處理顯示聊天訊息的，可以先開一個空白的在這邊，後面再來詳細的設定。

 

 

FirebaseAuth實際操作的UI登入畫面會長這樣：

 

u  若想要更換登入的信箱也可以改以手動輸入

u  接著輸入密碼

u  登入成功時使用Toast訊息

 

 

四、 進行登出動作

 

 

先前在toolbar的右上角我們開了一個menu選單，用來做登出的動作，如圖所示

 

 

與登入的程式碼類似，差別在於建立實體後是改呼叫SignOut方法：

 

 

 

相關的登入登出動作其實FirebaseUI工具都已經幫我們做好了，我們只要呼叫對應的方法就可以做出想要的操作就好，使用上非常的簡便又貼心！

 

五、傳送訊息到平台上

 

　　現在已經完成app的帳戶登入動作了，再來就試著如何傳送一筆消息到平台上吧！先釐清一下傳送的步驟，它的動線預計是：登入→ app編輯內容 → 送出到firebase平台 → app偵測到平台上有新增資料 → 接收新的資料並顯示在畫面上。

 

u  送出資料到firebase平台

 

我們寫出一個送出訊息的動作給FAB按鈕，並統一在sendMsg()這個方法中處理送出訊息的動作

簡單來說就是建立一個Firebase的參照後，將設定好的資訊藉由實體推送到平台上，這裡的ChatMessage為自定的物件結構，可以決定要推送出怎樣的內容，然後包裝起來送至平台上。

DatabaseReference使用push()傳送訊息時，會產生一組隨機的key，我們可將這key記錄下來，方便之後可以更新指定位置資料，例如更換大頭貼、更新訊息等等。並且將keyList用sharedPreference儲存起來，保證在離開頁面與回到頁面時，能將舊有訊息正確顯示。

 

 

 

u  ChatMessage.java中

 

 

範例中設定最基本的顯示資料，包含了使用者名稱、訊息內容、時間、裝置的uuid，以及有上傳圖片需求時的檔案路徑。實際在傳送的時候可以視情況傳入所需欄位即可，沒有資料的欄位可留空，但要小心不要是null，可能會導致訊息顯示有問題。

 

接著來觀察一下Firebase平台的database有沒有成功傳送，一樣在Database頁面的資料頁籤上察看是否接收到了來自app端送出的消息。試著打入一些訊息來玩看看吧！

 

 

u  輸入一串訊息後點擊送出

 

u  平台收到消息後

終於完成了第一則訊息的發送，有沒有覺得很像參透了聊天室運作的秘密了呢？，接著下面來探討背後的形成原因吧！

 

六、顯示聊天室訊息

 

　　上述有提到在登入成功後有一個displayChatMsg()的方法，這邊就是要處理接收firebase平台獲得的訊息，現在就要來詳述裡面的設定了！

 

由於是用RecyclerView呈現，顯然它需要一個adapter來裝載資料，如果只使用ListView也是可以的，只是未來能做出的效果有限，在Firebase中有預設做好的一種adapter來承接，很神奇吧，google大神都幫你想好了呢！這次要使用的就是FirebaseRecyclerAdapter，它是在firebase-ui-database-1.1.1-sources.jar這個檔案內的工具，使用方式也很簡單，接著就來看怎麼一步一步實現它吧！

 

u  訊息版面的設置

 

首先來決定一下訊息要以怎樣的畫面呈現，因為訊息結構是自定的，所以我們在layout資料夾中也自定一個新的layout來顯示出我們要的內容。於是在message.xml是這樣呈現的：

 

 

將這樣的設置分別寫在右邊與左邊顯示，屆時即可呈現對話的樣式，最後看起來就像是這樣，後面接收到的訊息就會依序往下列示：

u  建立自定義的ViewHolder綁定物件內容

 

撰寫一個自定的ChatMessageHolder class繼承自RecyclerView.ViewHolder，並將自己做的ChatMessage內有的元素都在這裡綁定ID，並自定一個setValues()方法將未來接收到訊息時一次設定完成：

 

u  建立FirebaseRecyclerAdapter

 

跟建立一般的adapter一樣，在displayChatMsg方法中建立實體，並覆寫必要的方法，即可讓訊息送出或收到的同時提醒adapter同步內容。

這裡要提供四個參數給adapter做參考，依序要是「參考的模組」、「layout樣式」、「資料來源的viewholder」、「firebase實體的參照」。有個特別的地方是reference後面接的limitToLast()，這個方法可以設定接收過來的資料數，以及取的方向。此專案抓取最新消息的10筆資料顯示，超過的會捨棄，讓畫面永遠保持顯示最新的10筆訊息。當然還有其它的方法，像是抓取最舊x筆、從第x筆開始顯示等等，在實作的時候可以依照需求修改看看效果如何。

 

這個FirebaseRecyclerAdapter最關鍵的方法就是populateViewHolder(), 這個方法就是用來偵測firebase平台訊息的地方，會將接收到的內容從頭開始，一個一個代入此方法，position就是各個訊息在firebase平台的index,在實體化FirebaseRecyclerAdapter時可以以泛型指定自定的物件與ViewHolder，確保傳回來的資料可以按照自己想要的格式呈現。

 

 

還記得當時推送訊息時，其實就已經有指定物件格式了嗎？就是在下面的這段：

 

七、實際操作畫面

 

我們己經完成了Firebase平台的建立、app端登入的路徑、推送訊息的動作與顯示的方式，現在只要任何安裝了此app的用戶，就可以經由email的登入，開始使用聊天功能了！現在我們試著用兩位用戶來聊天看看吧！

 

 

u  使用者A登入並發送一則訊息

 

u  換使用者B登入，顯示A送過的訊息，並發送自己的訊息

 

而Ａ裝置會即時收到來自B的訊息：

 

 

u  使用者A收到B的訊息並顯示在畫面後，再發一則訊息出去

 

 

 

經由上述的截圖，就可以得知完成了聊天室的運作了，這樣有沒有像以前即時通的感覺了呢？由於平台的服務相當的不錯，可支援多人同時使用此app在上面發表留言，若是再加強平台的設定及介面、功能的優化，就是一個趨於完整的app囉！之後我有再把這個sample加入了一些新功能，例如可傳送圖片訊息、可查看別人的大頭貼以及更換自己的大頭貼等等，簡單來說已經是一個可以獨立運作的小型app了！我將github連結貼在這裡，有興趣的人可以載下來試玩看看：https://github.com/LucaLin/chatTool

 

參考來源：

1.         Firebase官方文件：https://firebase.google.com/docs/guides

2.         App Inventor2 連接Firebase資料庫與聊天室製作：http://120.108.221.55/profchwu/dctai/%E6%95%99%E6%9D%90/App%20Inventor/Firebase%E8%B3%87%E6%96%99%E5%BA%AB/firebase.pdf

3.         Firebase是什麼：https://tw.alphacamp.co/blog/2016-07-22-firebase

4.         Android建立Firebase聊天室：https://code.tutsplus.com/zh-hant/tutorials/how-to-create-an-android-chat-app-using-firebase--cms-27397