App Inventor學習記錄47,用 FirebaseDB元件,做一個簡單的註冊登入頁面

這次主要要介紹的其實是 FirebaseDB這個元件,我把它想成是一個線上的 tinydb的元件。註冊登入頁面就是一個簡單的應用。

記錄一下:
App Inventor學習記錄47,用 FirebaseDB元件,做一個簡單的註冊登入頁面


程式執行的畫面如下:

在兩個文字輸入盒中,填入相關的訊息,如果跟 firebaseDB的資料做比對,資料都正確的話,就會顯示另一個畫面。如果資料錯誤的話,就會顯示帳號密碼錯誤。


整個畫面的編排是這樣子。


這裡的重點是我們怎麼使用及取得 firebaseDB這個元件,以及怎麼取得 filebaseDB的網址


全部的程式碼如下:

我們先把程式碼的部份介紹完,再來講怎麼取得及設定 firebasedbDB


第 1部份的程式碼說明:

當註冊按鈕被按下之後:
我們呼叫 firebaseDB儲存檔案,標籤的值,就帶入帳號輸入框的文字,儲存值就代入密碼輸入框的文字。


第 2部份的程式碼說明:

當登入按鈕被按下的時候:
呼叫 FirebaseDB取得數值,標籤就設定為帳號輸入框的文字,如果沒有這個標籤存在的話,就傳回 NA,這裡設定成空白也是可以的。


第 3部份的程式碼說明:

當 firebaseDB取得數值的時候:
加入一個流程判斷式。
如果取得的標籤值等於帳號輸入框的文字的話:
而且如果這個標籤裡頭的值等於密碼輸入框的值的話:
那麼,就把垂置配置 2的可見性設定為真。
把垂直配置 1的可見性設定為假。

如果不符可上面的條件的話:
就把無法登入顯示訊息的這個標籤的文字,設定為帳號或密碼錯誤\n請重新輸入。


沒有錯,這一次 APP很簡單,就是把標籤當成帳號,儲存值當成密碼,然後用這兩個值下去做判斷,如果兩個值的符合的話,那面就顯示正確的訊息,如果不對的話,就顯示另一個訊息。

先把這一次的 AIA檔的連結給大家提供一下。然後我們再來介紹,怎麼去取得 firebaseDB的連結來使用。

這次的 aia檔的下載連結如下:
點我下載 NO_47_Sign_and_login.aia

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

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


首先,我們登入 GOOGLE帳號之後,開啟 firebaseDB的頁面
點擊建立專案。


輸入專案名稱之後,按下繼續


因為這裡我沒有要用分析的功能,所以把啟用這項專案的 Google Analytics給關閉掉,這樣會少一個步驟。要保持開啟的話也是可以的。接著按下建立專案。


等待一下子之後,專案就建立好了。我們點擊繼續


接著,我們會來到這一個頁面。我們要先建立一個資料庫。
我們依資點擊建構、Realtime Database、建立資料庫


在這裡選擇即時資料庫的位置,維持預設值就可以。
點擊繼續


然後選擇以鎖定模式啟動
按下啟用


這樣我們的資料庫就建立好了。但是新建立好的資料庫是沒有資料的,而且是不能讀取也不能寫入,這並不符合我們要使用的需求。我們需要一個能寫入資料及讀取資料的資料庫。
所以我們點擊規則,來調整一下資料庫的權限


我們點擊規則之後,我們會看到紅框處這裡。這裡的規格就是不能讀也不能寫入。
我們來改一下。


把原本的 false改成 true之後,按下發布


我們會看到這樣一個畫面,這個是正常的。


接著,我們點擊資料
用紅框框起來的地方,就是我們要取得的 firebaseDB資料庫的網址
我們把它複製一下。


貼到 app inventor中,firebaseDB屬性中的 Firebase URL這裡。
這樣我們就可以使用這個線上即時的資料庫了。


關於 firebaseDB這個元件,我也正在摸索,之後會有更多的使用方法,來跟大家分享。

當然這次的 app還是有很多需要補充的地方,比如說不能判斷帳號是不是已經註冊的功能,密碼有沒有包裝特殊字元,或是密碼要多長以上才能註冊等等的,這些常見的功能,都是可以在往上加的。

這次的 aia檔的下載連結如下:
點我下載 NO_47_Sign_and_login.aia

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

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

發表迴響