聊天室 android firebase app

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

Luca Lin 2020/11/23 17:13:49
1162

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

 

前言

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

        同時它也是一個同時支援iosandroid與網頁的雲端開發平台,協助開發人員能在雲端快速建置後端服務,並提供像是即時性的資料庫、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,可將對話記錄存下來或是匯入需要告知聊天室所有人的訊息

 

 

規則頁籤這裡可以設定各種平台的權限,我們只要設定一下讀寫的權限,將rulesread 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樣式」「資料來源的viewholderfirebase實體的參照」。有個特別的地方是reference後面接的limitToLast(),這個方法可以設定接收過來的資料數,以及取的方向。此專案抓取最新消息的10筆資料顯示,超過的會捨棄,讓畫面永遠保持顯示最新的10筆訊息。當然還有其它的方法,像是抓取最舊x筆、從第x筆開始顯示等等,在實作的時候可以依照需求修改看看效果如何。

 

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

 

 

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

 

七、實際操作畫面

 

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

 

 

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

 

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

 

而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

 

 

 

 

 

 

 

 

Luca Lin