講者：王婕瑜

日期：2021/5/20

開發 Line 回聲機器人

OUTLINE

  • 前言
  • 申請 Line Devoloper 帳號
  • 架設伺服器
  • 結合 Line Bot API
  • Reference

前言

由於疫情關係，對外課程停課。

對於自己建造 Line 聊天機器人有興趣的同學可以按照這份教材，在家做做看呦ヽ(✿ﾟ▽ﾟ)ノ

這週的課程會帶著各位做最簡單的回聲機器人，意思是對它說話，機器人就會回覆你同樣的話。

流程說明

首先我們要申請 Line Devoloper 帳號來完成基本的設定，設定好後架設回應的伺服器，這邊使用 Flask，最後結合 Flask Server 與 Line Bot API 即可。

開始囉！

申請 Line Devoloper 帳號

LINE Developers

首先到 Line Developers 網站上，可以點擊標題的超連結，登入自己的Line帳號

在 Provider 的位置點擊 Create，輸入開發者的名字

申請開發者

點擊 Message API

申請聊天機器人頻道

設定頻道的基本資訊

  • App name
  • App icon
  • Category
  • Subcategory
  • Email address

如果不滿意，之後隨時可以改

填好之後，點擊 Create

不要忘記勾選喔

申請完成

點擊 Messaging API，可以透過裡面的QR code加入好友

傳送訊息後發現你的聊天機器人只會自動回覆訊息。

接下來會講解傳送訊息的機制，並且一步一步完成回聲機器人的設定。

架設伺服器

在架設伺服器之前，我們要先認識 Webhook，了解 Line Messaging API Webhook 的運作原理後，就會開始架設回覆訊息的伺服器。

開始囉！

認識 Webhook

當某些事情發生的時候，通知者會告訴訂閱者這件事發生了，收到事件後訂閱者應該會採取某些行動。

Webhook 是讓一個網站能訂閱另一個網站的方法。

什麼叫做訂閱呢？

訂閱者

通知者

事件：早上 8 點叫我

起床起床！

訂閱是有效率的雙向溝通方法，
在事件發生的瞬間就立即採取行動。

網站跟網站之間的溝通方法有很多種，Webhook 使用的是 HTTP 協定

認識 Line Messaging API Webhook

開發者

這是機器人的地址

好喔

訂閱階段

這是我們在 Line developer 後台填入機器人的通訊地址，然後按下送出後的階段

Line 知道機器人的地址後，就知道如果有人對機器人傳送訊息時，應該要向哪裡發送通知

機器人

回覆xxx

好喔

機器人

用戶xx在群組xx說了xx

好喔

當有人對機器人傳送訊息，Line 會把這樣的訊息傳到我們設定好的通訊地址

機器人會把回覆訊息傳給 Line ，然後 Line 再幫我們傳到群組

通知階段

行動階段

{
  "replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
  "type": "message",
  "timestamp": 1462629479859,
  "source": {
    "type": "user",
    "userId": "U4af4980629..."
  },
  "message": {
    "id": "325708",
    "type": "text",
    "text": "Hello, world"
  }
}

有人傳訊息給機器人時，Line 傳來的通知其實是長這樣：

而機器人的「好喔」其實長這樣：

http_status_code:200

這是表示簽收，不是回覆私訊。

以上就是 Line Messaging API Webhook 的運作原理

最一開始有提到訂閱階段，你必須要給 Line 你家地址，它才有辦法寄通知來。

但是你家是一個網站。這表示你需要蓋一個自己的家，所以接下來要開始架設一個伺服器！

所以 Line 扮演的就只是個傳話的工具人。

設定環境

會使用到的技術：

  1. 套件管理工具：Pipenv
  2. 前端框架：Flask

首先開啟終端機，安裝 pipenv

pip install pipenv

創立一個專案資料夾

pipenv --three # 產生 Python 3 虛擬環境

開啟終端機，在該資料夾中建立虛擬環境

進入虛擬環境，在終端機中輸入：

若要離開虛擬環境，在終端機中輸入：

pipenv shell
exit # 或是按 "CTRL + D"

架設 Flask

pipenv install flask

安裝Flask的套件

在專案資料夾裡建立一個 app.py 的檔案，內容為：

# 程式碼解說以註解方式寫在裡面

# 宣告一個Flask的app實例
from flask import Flask

app = Flask(__name__)

# 使用app.route的裝飾器(decorator)來為路徑設定服務的function
@app.route("/")
def index():
    return "Hello World~"
# 設定 Flask 啟動的方法，在本機端的5000這個port運行
if __name__ == "__main__":
    app.run("0.0.0.0", 5000, debug = True)
python app.py

在終端機中運行 app.py

開啟瀏覽器，在網址輸入127.0.0.1:5000
查看是否運行成功

運行成功則會出現一行：Hello World~

結合 Line Bot API

a.k.a. 傳話的工具人

安裝 Line Bot 相關套件

pipenv install line-bot-sdk

在終端機中輸入：

設定環境變數

在專案資料夾中新增一個檔案，命名為 .env

（沒有副檔名）

內容為：

在 Line Developer 裡，

點擊 Basic Setting，可以找到 Channel Secret，
點擊 Message API，可以找到 Channel access token

CHANNEL_SECRET='YOUR CHANNEL SECRET' #記得加上引號
CHANNEL_ACCESS_TOKEN='YOUR CHANNEL ACCESS TOKEN'

app.py 內容修正

# 程式碼解說以註解方式寫在裡面

# 引入Flask等等需要的東西，line_bot_api 負責與Line的API溝通，handler 負責處理送過來的資料
from flask import Flask, request, abort
from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)
from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage,
)

app = Flask(__name__)
# 記得更改CHANNEL_ACCESS_TOKEN跟CHANNEL_SECRET，在 Line Developer 裡的 Messenging API 跟 Basic Settings裡可以找到
line_bot_api = LineBotApi('CHANNEL_ACCESS_TOKEN')
handler = WebhookHandler('CHANNEL_SECRET')

# handler.handle 判斷要用剛剛設定的哪個 event 來回應
# InvalidSignatureError 會檢查資料是否正確(用CHANNEL_ACCESS_TOKEN)
@app.route("/callback", methods=['POST'])
def calback():
    # get X-Line-Signature header value
    signature = request.headers['X-Line-Signature']
    
    # get request body as text
    body = request.get_data(as_text = True)
    app.logger.info("Request body: " + body)
    
    # handle webhook body
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(400)
    
    return "OK"

#利用 handler.add 包裝自己處理 line 回傳的 json 資料，收到事件時啟動 MessageEvent
@handler.add(MessageEvent, message = TextMessage)
def handle_message(event):
    line_bot_api.reply_message(
        event.reply_token, 
        TextSendMessage(text = event.message.text)
    )
    
if __name__ == "__main__":
    app.run()

記得設定 Channel access token 跟 Channel Secret

本機端測試

在本機開發時，需要線上測試 API 或畫面是否能正常連動，或是你的客戶以及開發夥伴需要觀看測試，可能需要自己申請一個主機，然後將所有資料上傳雲端。

python app.py

運行 Flask

為了測試方便且不用額外負擔主機費用，接下來要使用 ngrok 這項工具來產生網址

下載 ngrok

ngrok http 5000

如果你是 Windows 用戶，

開啟官方網站，下載對應的位元版本，解壓縮後直接啟動 ngrok.exe

即可在終端機上打指令執行

macOS 用戶可以在官網查詢如何下載 ngrok，這邊暫不細講。

應該會產生一串浮動的網址​，將 https 的網址複製下來

開啟 Line Developers 的 Messaging API

將得到的網址加上 /callback，複製到 Webhook URL 的位置，並打開下面的 Use Webhook

設定 Webhook URL

得到一隻回聲機器人！

點擊 Line Developer 裡的 Messaging API，透過二維碼加入好友，傳訊息試試看吧~

偷偷幫自己工商：

如果想學習怎麼結合爬蟲跟聊天機器人，可以觀看這裡的教學

REFERENCE

  • NIghT cAt（2020）。親手建造Line Bot吧 | Espace Noir。檢索自：https://bit.ly/3v0HBGP。

  • 郭佳甯（2018）。Heroku | 搭配 Git 在 Heroku 上部署網站的手把手教學。檢索自：https://bit.ly/3ymR4tZ。
  • 黑楓（2017）。LineBot+Python，輕鬆建立聊天機器人。檢索自：https://yaoandy107.github.io/line-bot-tutorial/。

THANKS FOR LISTENING

Made with Slides.com