App Inventor學習記錄119-用firebase元件,做線上多人聊天室

由於要做的是線上多人的聊天室,所以這裡就用 firebase的元件來做。這樣只要 firebase的資料一更新,馬上就更新其它人手機上的內容。

記錄一下:
App Inventor學習記錄119-用firebase元件,做線上多人聊天室


這次範例完成的演示如下。

登入系統之後,會自動的記錄登入者的名稱,在按下 send按下發訊息的時候,也會自動的把登入者的名稱加在訊息的最前面,儲存在 firebase的資料中。

這裡用清單顯示器來顯示。顯示的時候有加上一個倒轉清單的方塊,所以最上方的訊息會是最新的一則訊息。如果不用清單顯示器來顯示聊天記錄的話,也可以改成用標籤的方式來顯示。


由於在登入聊天室頁面的時候,跟用Firebase做帳號註冊及登入,以及密碼欄旁邊的眼睛這一篇是相同的。只是登入後會記錄使用者的名稱,所以有調整了一下程式碼的部份如下。

主要就是按下登入按鈕之後,會去呼叫 firebase.getvalue,去資料庫中比對帳號碼是不是正確。如果帳號密碼正確的話,依照不同的登入帳號,開啟不同的頁面,這是為了做使用權限的區分。

開啟不同頁面的時候,就會把 textbox1.text也是輸入帳號的文字,當成初始值,傳到下一個畫面中。這部份的使用說明,也可以參考一下之前介紹的文章:
App Inventor學習記錄52,用清單元件,把多個數值,在多個 Screen中傳遞


聊天室的畫面配置如下:

上方的三個按鈕的功能,在還進行中,這次就不介紹。
登入畫面的配置說明,請參考之前的文章:
App Inventor學習記錄115-用Firebase做帳號註冊及登入,以及密碼欄旁邊的眼睛


聊天室所有的程式碼如下。

最下面有三個方塊還沒有編號,因為功能還在寫,所以這次就不介紹了。


聊天室第 1部份的程式碼說明。

變數_名稱,這是用來取登入畫面傳過來的初始值用的。
變數_列表,這個暫時沒有用到。


聊天室第 2部份的程式碼說明。

when student. backpressed,當在這個畫面按下手機的倒退鍵的時候。
就回到 screen1畫面。


聊天室第 3部份的程式碼說明。

when student.initialize,當 student這個螢幕被打開的時候。
變數_名稱的值,設定成 get start value,取得 screen1傳過來的值,也就是登入的帳號名稱。
label 3.text,標籤 3的文字,設定成變數_名稱,這是用來確認有沒有收到傳來的值用的。等程式都完成了,這一條就可以把它給刪了。
call firebasedb1.getvalue,呼叫 firebase的元件,去取得 chatroom這個標籤下的資料。valueiftagnotthere,如果這個標籤下沒有資料的話,就傳回 empty當它的值。


聊天室第 4部份的程式碼說明。

when firebasedb1.getvalue,當 firebase取得資料之後。
如果 tag的值是 chatroom,而且 value的值是 empty的話。
call firebasedb1.storevalue,呼叫 firebasedb1儲存資料。把資料存在 chatroom這個標籤下。value to store要儲存的資料,則是用清單元件方塊來做
這裡是因為等一下用要 listview清單顯示器去顯示相關的聊天記錄,所以儲存值要用清單方塊來做。

set listview1.elements,把清單顯示器的元素,設定成 reverse list反轉清單項次,要反轉的清單則是 get value


聊天室第 5部份的程式碼說明。

當按下 send這個按鈕。
先判斷 textbox1.text的文字是不是空白,不是空白的話再做下面的動作。
call firebase.appendvalue呼叫 firebase增加訊息功能。把變數_名稱的值和 textbox1.text輸入的訊息,用文字方塊合併一下,儲存在 chatroom這個標籤下。

這裡要注意的是,call firebase.appendvalue,呼叫 firebase增加訊息功能只能把新增資料,加入到清單的格式中。所以第 4部份的時候,才會用一個清單方塊,去儲存資料。不然就會發生錯誤。

第一次寫這個的時候,光是這裡就花了我快一天的時候才搞定……


聊天室第 6部份的程式碼說明。

在第 5部份的時候,由於我們用 call firebase.appendvalue,呼叫 firebase增加訊息功能,把新的資料加入到 firebase資料庫的 chatroom標籤下。這代表了資料庫產生了變化。接下來就是設定資料庫產生變化的時候,要發生什麼事。

when firebbasedb1.datachanged,當資料庫資料變化的時候
如果是 chatroom這個標籤下的資料產生變化的時候。
set label 3.text把標籤 3的文字,設定成 get value,也就是這個標籤下最新的資料。
set listview1.elements,把清單顯示器的元素,設定成 reverse list反轉清單,把 get value這個清單中的清單項目反轉顯示。


聊天室第 7部份的程式碼說明。

當 clear按下按下的時候,call firebasedb1.cleartag,呼叫 firebase元件,清除 chatroom這個標籤的資料。


這次要做登入系統,依照帳號的不同,是要能分不同權限。所以在登入的時候,就會依登入帳號的不同,打開不同的頁面。在不同的頁面中,也會設定個別可以用的功能。

還有一些其它的部份,之後會在慢慢的完成。

這次的 aia檔的下載連結如下:
NO_119_firebase_chat_room.aia

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響