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