育將電腦工作室 - 線上書籍

2. GAS產生器安裝&設定

2-2 分析Line Bot 送來的資料 next

GAS 開發 LineBot 自動接單系統
=====================

### 一、Webhook

Webhook 指的是一個「*網址*」，透過伺服器建立 Webhook 網址後，有串接 Webhook 的位置就能使用 HTTP 的 POST 方法，向伺服器傳送或接收特定的資料。

![](https://i.imgur.com/Zn2bKvf.png)

### 二、LINE BOT 與 WebHook 的關係

當使用者在 LINE 聊天室裡跟 LINE BOT 聊天，會發生下列的步驟：

> - Step 1：向使用 Message API 所建立的 LINE BOT 發送訊息。
> - Step 2：訊息透過 Webhook 傳遞到使用者部署 GAS 程式的伺服器。
> - Step 3：根據 GAS 程式的邏輯，處理訊息。
> - Step 4：透過 Webhook 回傳結果到 LINE BOT。
> - Step 5：LINE BOT 發送訊息到 LINE 聊天室裡。
> 
> ![](https://i.imgur.com/aDZac2G.png)
> 
> ### 三、路由
> 
> 1. GAS可以接受「POST」、「GET」請求
> 2. POST => doPost()
> 3. GET => doGet()
> 4. 由於在GAS部署出來的網址，只有一個，但要做的事情有許多，所以必須建立「路由」來分類
> 5. Line Bot WebHook 是使用「POST」，所以需在 doPost()增加路由
> 6. ```javascript
> Route.path("Webhook", Webhook);//post
> ```
> 7. 第一個參數： "Webhook"是指關鍵字：https://網址?op=Webhook，請將此網址設定至 Line Bot 的 Webhook 網址
> 8. 第二個參數：Webhook 是指 函數：必須 找一個地方 建立 函數 function Webhook(e){.....}
> 9. 新增 指令碼 prog\_line\_bot 
> 因 指令碼與HTML(樣版)，不能同名，故我通常在指令碼會加上前綴「prog\_」
> 10. prog\_line\_bot.gs 
> ```javascript
> function Webhook(e) {
> //---------------------------------- 記錄Line Bot 訊息
> // e.postData.contents
> let formData = {
> sn: '',
> timestamp: '',
> type: 'prog_line_bot / Webhook(e)',
> code: e
> } 
> insert_sheet_record(formData);
> //---------------------------------- 記錄Line Bot 訊息 end
> 
> return; 
> }
> ```
> 
> Webhook：是函數名稱 
> Webhook(e)：e 是外部傳進來的參數 
> insert\_sheet\_record(formData)：是將 formData 記錄寫到「記錄工作表」，方便我們查看 LineBot傳什麼值進來
> 11. Line Developers 設定 Webhook URL： 
> 將部署的正式網址 https://網址+?op=Webhook 填上 
> Use webhook 啟用 
> 回到 程式碼.gs，設定「CHANNEL\_ACCESS\_TOKEN」 
> ```javascript
> 
> var CHANNEL_ACCESS_TOKEN = 'Line Bot 的 CHANNEL_ACCESS_TOKEN';
> ```
> 
> 只要程式碼有異動，正式網址一定要「重新部署」 
> 執行「Verify」驗證(請至記錄工作表檢查是否有記錄寫入)，只要有記錄則代表設定無誤 
> ```javascript
> {
> "sn":14,
> "timestamp":"2023/04/28 14:34:33",
> "type":"prog_line_bot / Webhook()",
> "code":{
> "parameter":{"op":"Webhook"},
> "postData":{
> "contents":"{\"destination\":\"Ub0e2772a46889b075d8ccb039135e9b1\",\"events\":[]}","length":63,
> "name":"postData",
> "type":"application/json"},
> "contentLength":63,
> "contextPath":"",
> "queryString":"op=Webhook",
> "parameters":{"op":["Webhook"]}
> }
> }
> ```
> 
> 
> 12. Javascript 物件、陣列說明
> 13. 請將 Line Bot加好友，然後去 line 官方 找到 Line Bot 隨便聊天，送出一個訊息，再去記錄工作表，觀看記錄
> 14. 此時，e.postData.contents.events 不再是一個空陣列
> 15. 既然我們要看是「e.postData.contents」，所以再把函數修改為 
> 而且傳進的是 JSON 的字串，所以用 JSON.parse(e.postData.contents)來還原 JSON 
> ```javascript
> 
> function Webhook(e) {
> //---------------------------------- 記錄Line Bot 訊息
> // e.postData.contents
> let formData = {
> sn: '',
> timestamp: '',
> type: 'prog_line_bot / Webhook()',
> code: JSON.parse(e.postData.contents)
> } 
> insert_sheet_record(formData);
> //---------------------------------- 記錄Line Bot 訊息 end
> 
> return; 
> }
> ```
> 16. 變更程式碼後，必須再重新部署，部署完成後，再去 Line官方，送出一個聊天訊息，再去觀看記錄

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown