如何用LineBot取代Google表單

許多人收集訂單資訊或是收集問卷資料，都會使用google表單來做，google表單很方便讓我們能透過網路取得大家所填的資料，並且即時將資料儲存進google試算表。但是google表單的畫面長得千篇一律，而且比較沒有人味，如果透過Line的對話，讓填資料者覺得好像有個人在網路的那一端回應自己填報的資料，在填報時就會覺得較有趣且人性。今天練習寫了一個用Line收集這些表單資料的介面，它就像google表單一樣的功能，但是讓你感覺是用Line對話的方式，就可以把資料存進google的試算表了。

1、在雲端硬碟建立一個google表單如下：

2、將表單建立與試算表的連結

3、將表單建立與試算表的連結

4、取得表單的連結網址，以便給他人輸入內容

5、透過表單輸入的資料，會儲存進試算表裡

6、在原來的試算表上新增一個工作表，取名叫｢問題」，這個工作表是要給Line問使用者問題，並且回應一些文字回饋用的。

7、將試算表網址列如下圖的這個部份的ID複製下來，接下來的程式需要用到它

8、舊有的index.js可考慮備份成另一個檔，然後將下面的程式碼整個放進index.js裡面

請注意，底下的程式碼請依據程式內的註釋，有六行要將之前取得的各種憑證放入修改：

//以下的四列require裡的內容，請確認是否已經用npm裝進node.js
var linebot = require('linebot');
var express = require('express');
var google = require('googleapis');
var googleAuth = require('google-auth-library');

//以下的引號內請輸入申請LineBot取得的各項資料，逗號及引號都不能刪掉
var bot = linebot({
  channelId: '請輸入LineBot的channelId',
  channelSecret: '請輸入LineBot的channelSecret',
  channelAccessToken: '請輸入LineBot的channelAccessToken'
});

//底下輸入client_secret.json檔案的內容
var myClientSecret=請將client_secret.json檔案的內容放在這裡，前後不能加引號

var auth = new googleAuth();
var oauth2Client = new auth.OAuth2(myClientSecret.installed.client_id,myClientSecret.installed.client_secret, myClientSecret.installed.redirect_uris[0]);

//底下輸入sheetsapi.json檔案的內容
oauth2Client.credentials =請將sheetsapi.json檔案的內容放在這裡，前後不能加引號

//試算表的ID，引號不能刪掉
var mySheetId='請輸入試算表的ID編號';

var myQuestions=[];
var users=[];
var totalSteps=0;
var myReplies=[];

//程式啟動後會去讀取試算表內的問題
getQuestions();


//這是讀取問題的函式
function getQuestions() {
  var sheets = google.sheets('v4');
  sheets.spreadsheets.values.get({
     auth: oauth2Client,
     spreadsheetId: mySheetId,
     range:encodeURI('問題'),
  }, function(err, response) {
     if (err) {
        console.log('讀取問題檔的API產生問題：' + err);
        return;
     }
     var rows = response.values;
     if (rows.length == 0) {
        console.log('No data found.');
     } else {
       myQuestions=rows;
       totalSteps=myQuestions[0].length;
       console.log('要問的問題已下載完畢！');
     }
  });
}

//這是將取得的資料儲存進試算表的函式
function appendMyRow(userId) {
   var request = {
      auth: oauth2Client,
      spreadsheetId: mySheetId,
      range:encodeURI('表單回應 1'),
      insertDataOption: 'INSERT_ROWS',
      valueInputOption: 'RAW',
      resource: {
        "values": [
          users[userId].replies
        ]
      }
   };
   var sheets = google.sheets('v4');
   sheets.spreadsheets.values.append(request, function(err, response) {
      if (err) {
         console.log('The API returned an error: ' + err);
         return;
      }
   });
}

//LineBot收到user的文字訊息時的處理函式
bot.on('message', function(event) {
   if (event.message.type === 'text') {
      var myId=event.source.userId;
      if (users[myId]==undefined){
         users[myId]=[];
         users[myId].userId=myId;
         users[myId].step=-1;
         users[myId].replies=[];
      }
      var myStep=users[myId].step;
      if (myStep===-1)
         sendMessage(event,myQuestions[0][0]);
      else{
         if (myStep==(totalSteps-1))
            sendMessage(event,myQuestions[1][myStep]);
         else
            sendMessage(event,myQuestions[1][myStep]+'\n'+myQuestions[0][myStep+1]);
         users[myId].replies[myStep+1]=event.message.text;
      }
      myStep++;
      users[myId].step=myStep;
      if (myStep>=totalSteps){
         myStep=-1;
         users[myId].step=myStep;
         users[myId].replies[0]=new Date();
         appendMyRow(myId);
      }
   }
});


//這是發送訊息給user的函式
function sendMessage(eve,msg){
   eve.reply(msg).then(function(data) {
      // success 
      return true;
   }).catch(function(error) {
      // error 
      return false;
   });
}


const app = express();
const linebotParser = bot.parser();
app.post('/', linebotParser);

//因為 express 預設走 port 3000，而 heroku 上預設卻不是，要透過下列程式轉換
var server = app.listen(process.env.PORT || 8080, function() {
  var port = server.address().port;
  console.log("App now running on port", port);
});


9、接下來要將修改過的index.js傳上heroku。因為之前已經上傳過了，所以會和第一次上傳時指令稍微不同。

  • d:
  • cd bottest (以上指令請依據你的資料夾位置做更改)
  • heroku login (這邊請依據提示輸入申請heroku時，所填的帳號及設定的密碼)
  • git add .
  • git commit -am 'ok'
  • git push heroku master

10、上傳完之後，請回到heroku的網頁，依下圖操作，如果能看到｢要問的問題已下載完畢！」，表示程式已沒有問題。如果沒看到，表示程式無法啟動，請重新修改程式。

PS.為什麼會有這一句｢要問的問題已下載完畢！」？因為程式裡放了這一段碼

console.log('要問的問題已下載完畢！');

所以出現這一句文字表示程式執行得沒問題。

11、接下來就可以使用LineBot幫你收集訂單資料了