App Inventor 上傳資料到 Google試算表 – 作法1結合Google表單

作者/攝影 曾吉弘

 

本範例要說明如何讓 App Inventor 寫入資料到 Google 試算表中。先破題,做法是透過 Google 表單來寫入接受這個表單回覆的試算表。.aia 原始檔請由此下載:http://www.appinventor.tw/googlespreadsheet

如果要更完整的功能像是 SQL 語法的話,需要使用 script,之後有機會再寫一篇吧!

 

Google 表單與接受回覆的試算表

請從您的 Google 頁面(例如 Gmail),建立一個 Google 表單

新增五個欄位:班級 / 座號 / 姓名 / 體溫 / 休息時間,每個欄位的內容都選擇簡答。請先不要選必填,否則忘了填的話,會因為必填欄位無內容而使得表單無法送出。我們可以在App Inventor 中去檢查 TextBox 是否有內容即可。

表單建好應該長這樣子,有五個欄位

點一下回覆,按一下試算表的符號。接受回應也要打開喔!

這時會開啟另一個標籤來檢視這個試算表,可以看到剛剛新增的欄位(班級 / 座號 / 姓名 / 體溫 / 休息時間),請注意時間戳記會自動產生所以不需要建立。這裡已經有一些我測試用的數值,首次開啟的話,這個試算表會是空白的。

 

回到表單,按一下右上角的三個小點,選擇[取得預先填入的連結],會再開啟新的標籤,網址會長這樣:https://docs.google.com/forms/d/XXX/prefill,結尾與之前不一樣。

隨便填一些數字,因為我們要拆解它所產生的連結,之後 App Inventor 就可以把 TextBox 內容組合成正確的網址送出就好。

 

填好之後,按下表單最下面的取得連結,再按複製連結就會直接複製到您的剪貼簿,用 Ctrl + V 貼上來看看,會長這樣(XXX代表該表單的網址,在此省略,):

https://docs.google.com/forms/d/e/XXX/viewform?usp=pp_url&entry.2109761637=OOO&entry.183944744=@@&entry.17455618=***&entry.1288165757=$$$&entry.1936689391=###

之後只要點擊一次這個連結,就會送出一次預填資料的表單,可以直接檢查是否收到回覆。後續在 App Inventor 中就會透過 Web 元件去讀取這個網址 (Web.Get),但 viewform 要改為 formResponse

拆解如下:

  • 表單連結:https://docs.google.com/forms/d/e/XXX/viewform (XXX代表該表單的網址,在此省略)
  • 準備下參數:?usp=pp_url
  • 欄位與值,從上面的大連結可以看到一個欄位與值是由 entry***=值,這樣的格式組合起來的,中間再用 & 隔開即可。以班級欄位來說,就是這樣:
    • &entry.2109761637=ABC (在班級欄位中填入ABC,中文也可以但會轉成 %A6%BA 的編碼。
    • 接著有幾個欄位就有幾組

Designer

    新增一個 App Inventor 專案,版面大概長這樣,會用 Web 元件來取得 Google 表單連結以及 Notifier 元件來顯示是否有欄位未輸入。

Blocks

   主要的功能就是在按鈕的 click 事件中,透過 web.get 去取得表單網頁。其他都是一些檢查用的附加功能。請注意表單網址中的 viewform 要改為 formResponse

   如果有任何一個欄位為空的話,就會用 notifier 跳出錯誤畫面。為避免程式太瑣碎,這裡檢查五個 TextBox 改用自定義的副程序(checkEmptyInput)來處理。

   如果沒錯,更新 web 元件網址並執行一次 web.get。

 web.get 之後,如果 reponseCode = 200 代表成功寫入,就呼叫另一個自定義的副程序 (clearInput) 來清除 TextBox 內容。

checkEmptyInput 是屬於有回傳值的副程序,在此要檢查五個條件的聯集 (邏輯的 or ),只要任何一個欄位沒有內容,這個副程序就會回傳 true,讓 notifier 顯示錯誤畫面。

執行畫面

    經過一番設定,終於可以開始玩啦!請看一下操作畫面:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *