
App Inventor 快速篩選想讀取的資料
這一篇是「從 Google 試算表 讀取資料至 App Inventor」 和「App Inventor 將讀取的資料使用表格呈現」的進階應用,透過下 SQL 指令,只讀取自己想要的資料。
這次的 App 主要會從上一次的專案去做修改,最底下也會附已完成這次教學的專案的 aia 檔案,如果有同學看不太了解都歡迎提問!
2022/11/15 更新
做了一個新的 App「雲端留言板」,欄位只有暱稱和留言內容,做法和文章教學一樣!

*2021/08/10 更新
因為原本的表單突然不能用了!(可以讀但不能寫)
所以這邊附上最新版的 aia 檔案
更新的部份只有表單網址和試算表網址,其它都保持不動!
1. 請開啟上次的 App Inventor 專案

2. 在網路瀏覽器元件的上方,加入一個 TextBox,讓使用者可以輸入要查詢的資料。

接著將畫面切換到程式設計
直接修改當讀取按鈕被點選的方塊

3. 拉一個「如果…則…否則…」的判斷方塊,放到「當讀取按鈕被點選」裡面,並將設定網路元件網址的方塊,放到「則」裡面。

如果我們的 搜尋欄位(TextBox) 沒有填入資料的話,就搜尋全部的資料。
4. 複製「設定網路元件網址」的方塊,把最後面的文字方塊,用合併文字方塊改成「select B, C, D where B = “TextBox.文字”」,然後放到「否則」裡面。
這句意思是要找 「B 等於我們指定的資料」的資料
B 是指 在試算表的第二個欄位,而第二個欄位是我們這個專案的 帳號 ID。

接著我們來看看實際效果

當我搜尋「Gundam」時,它就只會出現一筆資料。
那如果要搜尋的資料有一筆以上呢?
像是「a12345」有兩筆

那麼搜尋之後,也是會顯示兩筆喔!

那如果想要搜尋有相關性的資料呢?
例如我想搜尋 帳號 ID 裡有 Test 的資料
P.S. 不一定只有 Test,可能是 Test5678,只要有 Test 就把它找出來。
5. 把 SQL 的方塊複製一次,而這次 SQL 要改成「select B, C, D where B like “%TextBox.文字%”」。
TextBox 文字的前後要用「%」包住,這個意思是,不管前面和後面有多少個字元,只要這筆資料有包含,我們要找的字,就把他抓出來。

接著我們來找找看有「Test」的資料

有包含 Test 的資料總共有四筆
App 至此就完成了!
只要會下 SQL 語法,資料就能照我們想要的做篩選,這個應用也可以用在記帳 App,當我們要找客人的資料時,都非常的好用!
App Inventor 專案 aia 檔案下載
App 執行範例:
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊


14 則留言
JustinLiu
您好,假如說我要搜尋2列以上的資料,程式碼是這樣嗎:
select B, C, D where B or C like “%TextBox.文字%”
JamesBang
你 SQL 如果要加 or 得改成:
select B, C, D where B like “%TextBox.文字%” or C like “%TextBox.文字%”
JustinLiu
我想搜尋test那欄的資料
https://imgur.com/a3o8Oz6
我程式碼長這樣
https://imgur.com/iVeMNUd
會沒有東西
JamesBang
程式方塊看起來沒有什麼問題,如果方便的話,可以把 aia 檔案傳給我看看。
信箱:[email protected]
JustinLiu
你好 傳給你了 麻煩了
JamesBang
你只要把你的副程式(傳送資料置網頁檔案),一開始的迴圈範圍改成從 1 開始就好,因為本來從 2 開始的用意是,要把從試算表讀過來的第一列標題給刪掉,但你下了 SQL 語法後,讀過來的資料就不包含標題了!而你的 test 測試資料只有一列,如果範圍從 2 開始就沒有資料可以設定給 webviewString 啦~~
https://i.imgur.com/WVN617K.png
JustinLiu
那如果是要篩選兩列的資料,例如A跟B列的
JamesBang
你是指 “直列” 嗎?
只有 A 跟 B 的話,只要一開始 select A, B 就好了。
JustinLiu
用關鍵字搜尋A跟B直列的資料
JamesBang
那麼以你 A欄(我習慣講直欄橫列) 的 test 為例,你 SQL 只要下
select A, B where A = “test”
就好
如果你 test 有兩筆,它就會顯示兩筆資料。
JustinLiu
我的意思是指,我輸入一關鍵字,但資料可能會在A或B欄
我想把搜尋範圍不只在A欄,而是A B欄都能搜尋到
JamesBang
喔~ 那你可以試試看
select A, B, C, D where A = “關鍵字” or B = “關鍵字”
jack
你好,想請問若csv檔已存在手機裡,是否也可以用SQL語法的方式去做篩選呢?
JamesBang
你好!如果只透過 App Inventor 的檔案管理元件做讀取的話,是沒辦法下 SQL 語法的,只能用一個變數先儲存全部資料,要篩選時再下條件判斷去搜尋。