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服務...拉∼讚!

2 意見

Write 意見
2013年5月28日 上午6:55 delete

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

Reply
avatar
Simon Su
AUTHOR
2013年5月28日 上午8:44 delete

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

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

Reply
avatar