跳到主要內容

Advance Google Form - 使用Google Form搭配Web Server做即時資料處理

Google Form提供了一個強大的線上編輯功能
並且結合Google Sheet可以做到分析與後製圖表等動作
而不斷"長大"的Google推出Apps Script之後
許多的應用不斷的在衍生...

這邊介紹如何透過Apps Script結合Form的服務,並直接後送後端的HTTP伺服器做即時的後續處理動作(這邊不規範後續處理,範圍太大了@@)...

1. 建置屬於你的Form表單


2. 完成Form建置後,可以發現從Drive點選Form會以Sheet的方式打開,此時點選插入,選擇"指令碼"


3. 選擇指令碼後,Google會開立一個Apps Script的編輯畫面,此時可以幫你的Script命名...


4. 這邊我們直接採用readRows(),可以直接把下面這段code加到for loop下面

  Logger.log('Call url...');
  var response = UrlFetchApp.fetch("http://hello.my.micloud.tw:1337/test", {
    method:"POST",
    payload:{
      row_a:row[0],row_b:row[1],row_c:row[2]
    }
  });
  Browser.msgBox(response.getContentText());

上面程式中,主要是針對http://hello.my.micloud.tw:1337/test做POST的動作
因此在UrlFetchApp.fetch的第二個參數中加入option參數,告知要用POST method以及表單的內容(payload欄位)
最後透過getContentText()來trigger整個http request的動作

5. 然後,接下來要把function attach到form的event裡面,點選工具列的啟動程序(小時中按鈕)


6. 啟動程序視窗中增加readRows()的執行,活動選擇"來自試算表",最後的動作選擇"提交表單時" (通知的部份,如果有需要寄mail通知有人提交表單的話,可以在這邊增加)


7. Server Side: 這邊用Node.js實作接取的route部分
7.1 Create server using express
express test
7.2 Install dependency
cd test && npm install
7.3 Add new route... (新增加下面route到app.js中)
app.all('/test', function(req, res){
  console.log(req.body);
  //TODO: 處理之實作
  res.end(JSON.stringify(req.body));
});
7.4 啟動Server
node app.js

測試:提交測試表單


檢視Web Server Log: 
因為Web Server上有接收相對應的傳入,並寫Log(這邊只做到Log的處理啦,進階可以搭配發信或是其他動作處理傳入的資料...),因此可以在Log Console中看到Form填完沒多久就會有資料傳入了...



細心的各位看倌,如果有發現啟動程序的活動下拉還有其他項目的話...沒錯,他可以當做時間排程器來用,意思是說... 將來可以透過Apps Script做http監控拉、排程trigger服務...拉∼讚!

留言

  1. 能教一下Web Server
    如何架設媽?
    感謝!

    回覆刪除
  2. 如果可以接受Google表單的制定格式
    其實可以搭配Google Site + Google Doc + Apps Script來做到一個漂亮的網站
    以Site作為靜態資料發佈的介面,Doc作為資料儲存的媒體,Script作為動態的腳本程式
    要建立一個基本的服務網站,相信已經足夠

    但如果要建立更專業的網站,有兩個方向給您參考:
    1. 使用github page做靜態網站,結合web2.0的各項服務外掛或開發Action Script作為Server端,以REST為資料傳輸協定
    2. 使用雲端主機服務,例如MiCloud, AWS等等,透過像WordPress等的架站程式建構網站

    回覆刪除

張貼留言

這個網誌中的熱門文章

Google指令碼基本操作介紹 - Web Server篇

Google的指令碼是什麼東西呢?!原則上他就是Google的一份靜態檔案,但是透過Google的雲端服務平台的一些能力,將靜態檔案內的scriptlet片段拉到Google的後端作運算,寫起來就像在寫JavaScript(這邊說Node.js可能比較貼切,因為同為server side language)或JSP,而在scriptlet片段中,則可以操作許多Google的API服務,甚至他提供你連接JDBC的能力、URL呼叫的能力...等,宛如就是一套完整的雲端程式語言(這樣說應該不為過拉,這真是個創新!),有並駕於App Engine的氣勢喔!
Google指令碼的範圍很廣,筆者也仍在摸索中,之前介紹過透過Sheet+指令碼做一個簡單的URL監控(這裡),而本篇簡單介紹一下指令碼如何製作一個Web Server(嚴格說起來是Web Page拉,但是具備Server端運作功能喔!)。您將可以體驗到No-Hosting Web Server的威力!
指令碼是Google Drive的一個服務,Google將指令碼(Code)以檔案方式寄存在Drive中,類似的靜態檔案服務的應用,最近滿火紅的!

首先開啟指令碼時候,選擇"作為網路應用程式的指令碼",檔案開啟後,會有愈設定程式碼片段供編輯


程式碼片段大致上如下,是一個doGet function,Web base的指令碼需要認得doGet()作為server的進入點 如果選擇到空白專案的話,只要把doGet function建上即可

作為一個Cloud IDE,Google當然也有把Code Hint擺上來,透過簡單的提示,寫啟程是來就更容易拉!

而Web部分物件的建立主要是透過HtmlService這個模組來進行操作,我們利用他來output html, load static html page, load template html page..等,範例如下:
Output HTML: // Script-as-app template.
function doGet(e) {
  return HtmlService.createHtmlOutput("<h1>HELLO!</h1>");
}
透過上HtmlService的createHtmlOutput的功能,…

透過Google指令碼,存取Google Cloud SQL

既然Cloud SQL提供了MySQL的Feature 那麼透過指令碼(Apps Script)來存取Cloud SQL應該也是OK的拉! 這邊介紹一下在指令碼中操作的方式
首先要確認一下您在Cloud SQL中申請的DB Instance名稱 而名稱可以在API Console中找到

此範例是屬於手動執行的部份,因此這邊建一個test function來收容db query的code...
function test(){
  var conn = Jdbc.getCloudSqlConnection("jdbc:google:rdbms://[db instance name]/[db name]");
  var stmt = conn.createStatement();
  stmt.setMaxRows(100);
  var start = new Date();
  var sql = "select * from member_info";
  var rs = stmt.executeQuery(sql);
  Logger.log('SQL:' + sql);
  while(rs.next()){
    Logger.log('['+new Date().toString() + ']' + rs.getString(1) + '::' + rs.getString(2) );
  }
}
Project看起來像這樣:

此時,在工具列選擇要執行的Function後,點選執行按鈕,就可以執行撈取Cloud SQL的動作了...

執行時候會發現Google會跟您要求受權,請user同意讓Script Editor來執行這部份程式,同意後才可以執行... 這部份是說,如果將來把這段程式碼放到Web Service中時候,該Web Service App也需要經過授權才能使用...

New Google Form Feature...

Google這次在Google Form上面做了一些改變...原本的Google Form背後都會連結到一個特定的表單(一個Form一個表單) 這次的修改就是針對這部份的限制做改善 目前可以透過Form編輯的頁面上"選擇回憶目的地"來選擇...



這邊是選擇的畫面,可以選擇新的試算表或是選擇現有的試算表中的新工作表...


如此一來,表單的運作將更具彈性拉!
詳細的Google說明,可以在這邊找到:https://support.google.com/drive/bin/answer.py?hl=en&answer=2917686&p=forms_response