---
# System prepended metadata

title: FM611A Lab06 LINE 聊天機器人版
tags: [Bot, FM611A, LINE]

---

###### tags: `FM611A` `LINE` `Bot`

# FM611A Lab06 LINE 聊天機器人版

在〈[MQTT 版 Lab 06 語音聲控電源插座實作教學](/IsNCFSBqQMOlppZIx4r31g)〉一文刊出後, 有讀者提出『那是不是可以用 LINE 訊息來控制繼電器開關呢？』, 其實只要建立起 MQTT 的通道, 任何可以連上 MQTT 伺服器的裝置或程式都可以相互通訊, 作法其實就跟同一產品內的 Lab04、Lab05 介紹的 LINE 聊天機器人類似, 以下我們就帶大家一步步實作囉。

## LINE 聊天機器人簡介

LINE 聊天機器人的介紹可以參考套件手冊上的說明, 主要就是 LINE 伺服器會將使用者透過 LINE App 鍵入的訊息轉送給我們自己要撰寫的後端程式, 在後端程式中依據收到的訊息內容決定對應的執行工作, 並且產生回應訊息：

```graphviz
digraph hierarchy {
  nodesep=1.0 // increases the separation between nodes
  node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
  edge [color=Blue, style=dashed] //All the lines look like this

  b[label="後端程式"]
  l[label="LINE 伺服器"]
  a[label="LINE App"]
  a->l [label="① 使用者發送訊息"]
  l->a [label="④ 轉送回應"]
  l->b [label="② 轉送訊息"]
  b->l [label="③ 後端程式產生的回應"]
  {rank=same;b l a}  // Put them on the same level
}
```

以我們的例子來說, 就是要在後端程式中判斷使用者訊息是否有包含『打開』、『開燈』、『關閉』、『關燈』這樣的內容, 據此發送訊息到 MQTT 伺服器上, 這樣控制板端的程式就可以從 MQTT 接收訊息控制繼電器開關了。

在繼續往下實作前, 請先依照〈[MQTT 版 Lab 06 語音聲控電源插座實作教學](/IsNCFSBqQMOlppZIx4r31g)〉一文的說明, **[註冊 AIO 帳號並建立 voice 資料通道](https://hackmd.io/IsNCFSBqQMOlppZIx4r31g#%E7%94%B3%E8%AB%8B-AIO-%E5%B8%B3%E8%99%9F)**。

## 建立 LINE 聊天機器人

要建立 LINE 聊天機器人, 第一步就是要到 LINE 開發人員專區註冊登入後, 利用網頁介面建立 **Message API** 的資料通道：

1. 請開啟瀏覽器連線至 https://developers.line.biz/ 進入 LINE 開發人員頁面, 按右上角的 **Log in** 登入：

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

    按一下**使用LINE帳號登入**
    
    ![](https://i.imgur.com/mO8VSt3.png)

    填入你在 LINE 註冊的電子郵件與密碼：
    
    ![](https://i.imgur.com/vHip4sY.png)
    
    :::info
    如果忘記密碼, 可以有兩種方式解決：
    1. 在手機的 LINE App 中, 進入『**設定/我的帳號/密碼**』重新設定密碼。
    2. 使用同一頁面下方的**透過行動條碼登入**, 即可以手機的 LINE App 掃描 QR code 登入。
    :::

    請依照畫面指示, 到 LINE App 上填入確認數字後登入：
    
    ![](https://i.imgur.com/kMKbwso.png)

1. 請在 **Providers** 旁按 **Create**：

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

    填入自訂的名稱後按 **Create** 建立：
    
    ![](https://i.imgur.com/tCQv1Ng.png)

1. 往下捲按 **Create Message API Channel** 建立聊天機器人類型的資料通道：

    ![](https://i.imgur.com/ZtkmCwg.png)
    
    往下捲動依照下圖填入各欄位資料, 務必勾選同意授權條款後按 **Create** 建立：

    ![](https://i.imgur.com/yxmea0w.png)
    
    按 **OK** 確認：

    ![](https://i.imgur.com/ydMf2eg.png)
    
    按**同意**完成：

    ![](https://i.imgur.com/g8T9lAd.png)
    
1. 切換到 **Message API** 頁次：

    ![](https://i.imgur.com/WmPjhu6.png)
    
    往下捲找到 **Channel access token** 後按 **Issue**：

    ![](https://i.imgur.com/9OFWisF.png)
    
    這會產生可以和此聊天機器人溝通的**存取權杖**, 後端程式必須使用此存取權杖才能處理聊天機器人的訊息。按右邊的小按鈕可以複製存取權杖：

    ![](https://i.imgur.com/30ar4jS.png)
    
    請保留此網頁不要關閉, 以便稍後複製權杖。

## 後端程式

後端程式就如同產品的 Lab04 與 Lab05, 會使用 Google Apps Script 撰寫的網頁應用程式, 請如下一一完成：

1. 請開啟新的網頁連線至 https://www.google.com/script/start/, 按 **Start Scripting**：

    ![](https://i.imgur.com/RlpGHpq.png)
    
    登入你的 Google 帳號：

    ![](https://i.imgur.com/Yk7zzJB.png)
    
    按**新的空白專案**：

    ![](https://i.imgur.com/td6VqeR.png)
    
    這會開啟新的專案, 請將編輯區內的預設程式刪除, 再按**未命名的專案**：

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

    填入自訂的專案名稱：
    
    ![](https://i.imgur.com/wz0Z3dR.png)

1. 請開啟新的網頁連結至 https://github.com/FlagTech/FM611A_Extra/raw/master/lab06.js, 這是我們事先準備好的後端程式, 請選取完整程式後複製到剪貼簿：

    ![](https://i.imgur.com/3f894gr.png)
    
    回到 Apps Script 網頁, 將剛剛複製的程式貼到編輯器內, 並在第 1、2 行填入你自己的 AIO 使用者名稱與金鑰, 第 3 行填入前面建立 LINE 聊天機器人時產生的存取權杖：

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

    按 <kbd>CTRL</kbd>+<kbd>S</kbd> 存檔。
    
1. 執行『**部署/新增部署作業**』指令將程式部署成網頁應用程式：

    ![](https://i.imgur.com/o6u8pZA.png)
    
    按**選取類型**後選**網頁應用程式**：
    
    ![](https://i.imgur.com/Nwj33an.png)
    
    請依下圖選取各欄位後按**部署**：

    ![](https://i.imgur.com/W2BKRZT.png)
    
    按**授與存取權**：

    ![](https://i.imgur.com/GUE7IBO.png)
    
    選取你的 Google 帳戶：

    ![](https://i.imgur.com/FAzJnpq.png)
    
    按**進階**：

    ![](https://i.imgur.com/V8wmkhT.png)
    
    按**前往『語音開關』(不安全)**：

    ![](https://i.imgur.com/u1Kiing.png)
    
    按**允許**：

    ![](https://i.imgur.com/f7WViFQ.png)
    
    完成部署, 會產生此網頁應用程式的網址, 可按左邊的**複製**鈕複製到剪貼簿：

    ![](https://i.imgur.com/tefQPtr.png)
    
    複製網址後按**完成**。
    
    :::info
    如果修改 Google Apps Script 的程式, 就必須重新執行上述部署程序, 每次重新部署網址都會變化。
    :::

## 修改 LINE 聊天機器人設定

1. 回到 LINE 聊天機器人網頁, 往下捲找到 **Webhook settings** 區間, 按 **Webhook URL** 項目右側的 **Edit**：

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

    在 **Webhook URL** 欄位填入剛剛複製的網頁應用程式網址後按 **Update**：
    
    ![](https://i.imgur.com/BMucuSu.png)
    
    按 **Verify** 確認網址正確：

    ![](https://i.imgur.com/mqaDPxn.png)
    
    按 **OK** 關閉：

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

    打開 **Use webhook** 選項：
    
    ![](https://i.imgur.com/FMzB8aY.png)
    
1. 往下捲找到 **LINE Official Account features** 區間, 按一下 **Auto-reply messages ** 項目右側的 **Edit**：

    ![](https://i.imgur.com/kXuhvED.png)
    
    這會開啟新的網頁, 請在**進階設定**區間找到**自動回應訊息**項目, 設為**停用**：

    ![](https://i.imgur.com/bDLeuSe.png)
    
1. 回到 LINE 開發人員頁面, 往上捲動即可找到此聊天機器人的 QR code：
    
    ![](https://i.imgur.com/gjfLtap.png)
    
    請用手機 LINE App 掃描此 QR code 將此聊天機器人加入聯絡人：
    
    ![](https://i.imgur.com/kFNGf0q.png =360x800)
    
    即可按**聊天**與機器人對話：
    
    ![](https://i.imgur.com/FNI1qVg.png =360x800)
    
    若送出包含『打開』、『開燈』、『關閉』、『關燈』等關鍵字的訊息, 後端程式就會送出對應的數值到 AIO 上, 並回應『已傳送指令』：
    
    ![](https://i.imgur.com/zRgFa6x.jpg =360x800)
    
    在 AIO 上查看, 就會看到後端程式送來的資料：
    
    ![](https://i.imgur.com/TUg0SZC.png)


## D1 mini 控制板程式

本例的 FlagsBlock 程式就和 〈[MQTT 版 Lab 06 語音聲控電源插座實作教學](/IsNCFSBqQMOlppZIx4r31g)〉一文的[程式](https://hackmd.io/IsNCFSBqQMOlppZIx4r31g#FlagsBlock-%E7%A8%8B%E5%BC%8F)一樣。



    

