App Inventor學習記錄115-用Firebase做帳號註冊及登入,以及密碼欄旁邊的眼睛

這陣子忙完了手上的事情,就把欠的這一篇給補上。大致上的內容跟帳號密碼的簡單登入判斷這一篇是相同的,只是這次的元件從 tinydb改成 firebase

記錄一下:
App Inventor學習記錄115-用Firebase做帳號註冊及登入,以及密碼欄旁邊的眼睛


這次的範例 gif檔如下。

這部份跟帳號密碼的簡單登入判斷是一樣的,都是在按下註冊的時候,可以判斷帳號有沒有被註冊過。按下登入按鈕的時候,可以判斷是帳號錯,還是密碼錯。只是用的元件從 tinydb改成 firebase而己。

只是為了區分這兩個範例,在這個範例中,多加入了一個很常見的小功能。
就是按一下閉眼的圖片,就可以顯示密碼欄的密碼。
這部份的程式我們之前就有介紹過類似的,倒是找圖片跟調整圖片,花了比較多的時間。


畫面編排的部份如下。

說明一下,從這一篇開始,範例就會全部改用英文的。
在我們的社群有討論到這一點,我原本用中文的原因,是要方便教小胖,而且看中文字也比較舒服。但是這次 app inventor改版之後,有些方塊在繁體中文裡頭找不到,但是在英文版中還存在,加上小胖遲早要碰英文,乾脆就從這次開始改。

Label 1,用來取得資料的情況。
Label 2,用來放取得 firebase上的標籤。這是為了寫程式方便,實際用的時候可以刪除。
HorizontalArrangment 1,裡頭放一個標籤和一個文字輸入盒。以及標籤和密碼輸入盒、圖片。
HorizontalArrangment 2,裡頭放一個標籤和一個文字輸入盒和一個圖片。
Button 1,註冊按鈕。
Button 2,登入按鈕。
FirebaseDB,線上資料庫元件。
Notifier,對話框元件,這次用對話框元件來顯示不同的註冊及登入訊息。


在進行程式說明之前,再補充一下 firebaseDB的使用說明。

用這個元件的時候,我們只要把取得的網址貼到紅框處就可以了。
怎麼申請及取得 firebase的連結,請參考:
App Inventor學習記錄47,用 FirebaseDB元件,做一個簡單的註冊登入頁面


另外,記得在 firebase上的 realtime databse這裡,把規格都修改成下面這樣。
這樣才能讀取及修改資料。


firebasedb的網址。在資料這一頁中,上面的紅框處可以取得。
下方的紅框處,就是我們的註冊的帳號資料。


全部的程式碼如下。


第 1部份的程式碼說明:

建立變數_密碼顯示,初始值是 0,這是用來控制圖片的切換用的。
建立變數_全部的標籤,初始值是空清單,這是用來取 firebasedb上所有的標籤用的。


第 2部份的程式碼說明 :

Screen1.Initialize,程式初始化的時候。
呼叫 Firebase DB1.GetTagList,讓程式去 firebaseDB中,取得資料庫中所有的標籤


第 3部份的程式碼說明:

when FirebaseDB1.TagList當 firebase取得標籤清單的時候
變數_全部的標籤,設定為 get value,也就是 firebase資料庫上,全部的標籤的資料。
set.Label2.Text,把標籤 2的文字設定成變數_全部的標籤,這樣我們就可以看到全部標籤的資料。
set.Label1.Text,把標籤 1的文字,設定成已取得資料。


第 4部份的程式碼說明。

when Image 1.Click,當圖片 1被點擊的時候。(記得在勾選圖片的 Clickable屬性)
如果變數_密碼顯示的值是 0的話。
就把變數_密碼顯示的值,設定為 1。
PasswordTextBox 1.PasswordVisible,密碼輸入盒的密碼可見性,設定為真。
把圖片 1的圖片,設定為 1.png這個檔案。

如果變數_密碼顯示的值是 1的話。
就把變數_密碼顯示的值,設定為 0。
PasswordTextBox 1.PasswordVisible,密碼輸入盒的密碼可見性,設定為假。
把圖片 1的圖片,設定為 2.png這個檔案。


第 5部份的程式碼說明。

當 Button 1.click,註冊按鈕被按下的時候。
如果文字輸入盒或者是密碼輸入盒這兩個元件,其中有一個元件的值是空白的話,那就跳出對話框,說明帳號密碼未輸入完成。
然後再判斷文字輸入盒的文字,有沒有在變數_全部的標籤中。
如果文字輸入盒的文字在變數_全部的標籤中,就跳出帳號有人使用了的訊息。

如果文字輸入盒的文字不在變數_全部的標籤中,而且密碼輸入盒的值不是空白的話,那麼就跳出註冊成功的訊息。
再把資料存回 firebase中。呼叫 call firebasedb.get.list更新一下變數_全部的標籤

由於我們在程式一開始的時候,就已經call firebasedb.get.list去取得資料庫中全部的標籤的資料,而且把變數_全部的標籤,設定成我們取到的值,所以在這裡我們只要找一下文字輸入盒的文字,有沒有在變數_全部的標籤這個清單中,就可以判斷這個帳號有沒有人用過了。


第 6部份的程式碼說明。

when Button 2.Click,當登入按鈕被按下的時候。
同樣先判斷一下,文字輸入盒和密碼輸入盒是不是有把資料填完整了。

然後判斷文字輸入盒的文字有沒有在變數_全部的標籤這個清單中。
沒有在這個清單中的話,就出現帳號錯誤的訊息。

文字輸入盒的文字有在變數_全部的標籤這個清單中的話。
call FirebaseDB1.GetValue,呼叫 firebase元件,去取標籤名稱是 TextBox.Text的值。


第 7部份的程式碼說明。

when FirebaseDB 1 GetValue,當 firebase元件取到標籤為 TextBox.text的值的時候。
接著就判斷 PasswordTextBox.text的值,是不是跟 firebase資料庫中的值相同。
相同的話,就出現登入成功的訊息。不相同的話,就出現密碼錯誤的訊息。


其實這個範例跟帳號密碼的簡單登入判斷,適用tinydb是非常類似的,只是用的資料庫元件不同。
tinydb的作用,就只有在自己的手機上。
firebasedb,則是有連上網路的資料庫

也由於有連上 firebasedb的網路資料庫,所以在取資料的時候,就會多一個步驟,就是去取網路的資料。其它的部份都是差不多的寫法。

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

我在 line上有建立一個「APP INVENTOR 交流」的社群,如果有問題的話,大家也可以在這裡討論。人多力量大,大家可以互相的交流學習。
而且 line也很方便,有什麼問題截個圖看一下,會比文字說明來的清楚些,這也是比在網頁下方或是 youtube影片下方留言討論更方便的地方。

有興趣的朋友可以點擊連結加入,也可以掃描 QR code加入。
您已被邀請加入「APP INVENTOR 交流」!請點選以下連結加入社群!
https://line.me/ti/g2/Loxwrcc2iNRS5-Qd4SFXxQ?utm_source=invitation&utm_medium=link_copy&utm_campaign=default

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

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

發表迴響