![App Inventor 使用 TinyDB 元件 儲存使用者資料 App Inventor 使用 TinyDB 元件 儲存使用者資料](https://i0.wp.com/i.imgur.com/PwS9rBJ.png?resize=1024%2C538&ssl=1)
App Inventor 使用 TinyDB 元件 儲存使用者資料
在 App Inventor 裡有一個 TinyDB 元件 能夠記錄資料,讓使用者可以在下次開啟 App 時,將資料抓出來用,使用方式是給它一個標籤和值,當我們要抓資料時,只要輸入標籤,就能將它的值給抓出來,這次的範例要來示範如何記錄使用者的姓名、電話…… 等等,並重新整理 App 後,將上次儲存的資料,直接給標籤元件顯示。
那麼請跟著以下教學:
- 新建一個專案「TinyDB」,並新增以下元件:
先從介面配置拉一個垂直配置到工作面板,取名為「設置使用者資料區域」,此區域需要元件如下圖,全部拉完後將此區域的可見性取消打勾。
![](https://i0.wp.com/i.imgur.com/nks8BWg.png?w=960&ssl=1)
再拉一個垂直配置,取名為「基本操作區域」,需要元件如下圖:
此區域的可見性最後也要取消打勾
![](https://i0.wp.com/i.imgur.com/S6G94gO.png?w=960&ssl=1)
記得這兩個也要加入
![](https://i0.wp.com/i.imgur.com/wwlHg0H.png?w=960&ssl=1)
大概講一下這個 App 的運作方式
在 App 剛啟動時,先判斷是否已有儲存使用者資料,如果沒有就顯示「設置使用者資料區域」區域,如果有資料就顯示「基本操作區域」。
切換到程式設計
2. 先拖拉一個副程式方塊「顯示資料」
這三個標籤元件都是在「基本操作區域」區域裡的
透過 TinyDB 的取得數值方塊,只要填入標籤名稱,就會將它的值回傳,如果沒有此標籤就會回傳空值。
![](https://i0.wp.com/i.imgur.com/G5kDlKx.png?w=960&ssl=1)
拖拉初始化方塊
先用取得數值方塊,看資料是否為空值,如果為空就是還沒有儲存資料,將儲存資料的區域開啟,反之關閉。
![](https://i0.wp.com/i.imgur.com/std940T.png?w=960&ssl=1)
「設置使用者資料區域」的清除按鈕被點選方塊
因為元件不多,就不使用任意元件來清空資料了。
![](https://i0.wp.com/i.imgur.com/uWya0U1.png?w=960&ssl=1)
「設置使用者資料區域」的儲存按鈕被點選方塊
先判斷三個欄位是否都有填寫,條件成立就用 TinyDB 的儲存數值方塊,給它標籤和值將資料儲存起來。
![](https://i0.wp.com/i.imgur.com/QuEV5F1.png?w=960&ssl=1)
「基本操作區域」的重設按鈕被點選方塊
可以開啟儲存資料區域,重新設定資料。
重新設定沒有另外的方塊,也是一樣用儲存方塊,如果標籤值一樣,它會取代原有的資料成為最新。
例如:我有一個 name 標籤,值為 JB Note,當我用儲存方塊,標籤也用 name,值為 DoraAmon,這樣我 JB Note 的值就會被取代,最後變成 DoraAmon。
![](https://i0.wp.com/i.imgur.com/nCMFfGW.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/wKlJ5Og.png?w=960&ssl=1)
「基本操作區域」的清除資料庫按鈕被點選方塊
呼叫 TinyDB 清除所有資料,就是將所有儲存的標籤和值都刪除。
P.S. 也可使用清除資料標籤方塊,刪除特定的標籤和值。
![](https://i0.wp.com/i.imgur.com/Q9my4j5.png?w=960&ssl=1)
這次的教學就到這邊
TinyDB 使用起來是非常簡單的,但是這些資料都只能在自己的手機上查看,而且要是手機重整資料就都沒了!
所以可以改用 CloudDB,使用起來和 TinyDB 差不多,而且儲存的資料大家都可以看到,假如要做聊天室或是留言板 App,CloudDB 就很適合。
App 完整程式方塊
![](https://i0.wp.com/i.imgur.com/Lk3wOQx.png?w=960&ssl=1)
aia 專案程式檔下載
App 範例執行畫面
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![[教學文章 分享/改編] 突破 App Inventor 30 MB 限制 Part 3](https://i0.wp.com/i.imgur.com/23qf8Jx.png?resize=75%2C75&ssl=1)
![App Inventor 簡易導覽列製作 App Inventor 簡易導覽列製作](https://i0.wp.com/i.imgur.com/zRTVO9C.png?resize=75%2C75&ssl=1)