不必真的架站也能 5 分鐘實機體驗 LINE bot – 教學 ( by node.js & ngrok )

在 2016 年 9 月左右,在 LINE 更新新版 Message API 以來陸續自己有在串一些機器人應用,一部份是為了好玩,一部份也是為了解決實際生活上的困擾 ( 如 早安機器人 )

由於之前已經將路走過一遍,又最近也認識一個可以測試 webhook 的神器 ngrok ( 感謝碼人日誌介紹 ),突然靈機一動,想到 ngrok 因為可以直接在本機測試 webhook ,剛好可以取代掉個人覺得對初學者來說門檻較高的申請 https 憑證和架站、綁網域等繁瑣步驟,所以整理了這篇文章,希望大家都能先透過實際案例,註冊一個帳號快速體驗聊天機器人的主要架構及流程,後續有興趣再來各個部分一一擊破。

  • 已經有過架站經驗的也可以參考這篇文章的在 Line 註冊機器人步驟部分
  • 還沒認識 ngrok 的也可透過這篇了解一下神器在測試 webhook 服務上的威力

先來一張 Overview 圖吧 ( 喜歡用白板 XD )

20170124_235122

  • 要做個聊天機器人,首先需要一個聊天平台,本篇文章就是 LINE 啦 ( 其他有開放接口的還有 Facebook, Slack  等聊天平台)
  • 有了聊天平台後,需要在這個平台註冊一個帳號, justReply 就是今天會用來演示的 Line 機器人帳號
  • 另外,還需要有一個服務是可以讓這個機器人知道,在聽到什麼指令後,就該執行什麼動作。我們姑且稱這個服務為 webhook service
  • 最後,今天幫我們解決大半難題的 ngrok 其實只是扮演一個幫我們在本機產生一個臨時的外部網址,讓你不必另外租機器及申請 ssl 證書 ( 也就是白板上的紅色部分 )
  • 流程 :
    1. 當訊息由你發至 justReply 帳號後,由於已在 LINE 的 justReply 帳號內設定該帳號為機器人帳號,且也設定好 webhook 位址,所以 justReply 機器人收到訊息的時候 LINE 會自動將訊息轉發至你部署的 webhook service。
    2. 在 webhook service 中可以自己定義收到訊息後的行為 ( 在本範例中定義的行為是原句發回) 您可以設計在收到訊息後傳回圖片、傳回影片等等 ( 這邊這些 是目前 LINE 支援的回傳訊息種類,想知道如何傳回圖片也可以參考這篇的傳圖部分)。

以下分四個部分介紹:

第一部份:在 LINE 註冊聊天機器人

第二部分:在本機部署範例 webhook service

第三部分:透過 ngrok,在本機打個洞,讓 LINE 可以在網路上找到你在本機臨時架的 webhook service

第四部分:將透過 ngrok 所得到的 webhook URL 設定進 LINE 機器人帳號內

第一部份

  1. 透過這個網址  https://business.line.me/zh-hant ,申請一個 LINE 商用帳號
    1
  2. 選擇開始使用 Message API 服務
    2
  3. 設定帳號名稱,選擇帳號分類後按確定
    3
  4. 申請成功後,按圖中按鈕或是此網址  https://admin-official.line.me  前往 LINE@ Manager
    4
  5. 進入 帳號設定 -> Bot 設定,點選 “開始使用 API" 並確認55_2
  6. 啟用後,請開啟 “webhook 傳訊" 功能且關閉 “自動回應",其他兩個選項則視使用目的而定,開啟與否皆可
    skitch
  7. 設定完 LINE@ Manager 後,選擇圖中按鈕,前往 LINE Developers
    7
  8. 於 “Basic Information" 內,獲取 Channel Secret 及 Channel Access Token ( 第二部分會用到 )
    8

第二部分

  1. 這個部分會開始介紹在本機將 webhook service 跑起來的步驟,幸運的是,已經有好心人寫好 line bot api library,直接 git clone 下來就對了

    $ git clone https://github.com/tejitak/node-line-bot-api.git

  2. 如 README.md 所說, 在該資料夾下裝好所需要的套件吧
    ( 註: 指令內 save 前面的減號有 2 個,在文章內會被顯示成單個,複製貼上後請小心 )

    $ npm install –save

  3. 安裝完成後,打開資料夾下這個檔案 test_webhook.js ,並將第一部份最後收集的 Channel Secret 及 Channel Access Token 填入
    2_1.png
  4. 修改完後,執行範例程式,看到下圖就表示本機跑起來沒問題啦!接著執行視窗不要關,讓我們繼續進行第三部分
    2

第三部分

  1. 官網依作業系統下載 ngrok 並解壓縮,解壓縮後就是一個執行檔而已,對 ngrok 基本簡介可參考該篇介紹
  2. 開始準備在本機開洞了,由於我們在第二部分執行的 webhook service 是把 port 開在 3000,所以執行 ngrok 的時候記得也要把 port 開在 3000 喔

    $ ngrok http 3000

  3. 執行後會看到以下畫面,可以看到 ngrok 已經幫你把本機的 3000 port 接好一個外部網址且幫你處理好 https 的憑證問題,是不是很方便!將紅線標註的網址記下來,準備在下一個部分使用
    3

第四部分

  1. 重新檢視一下我們的範例 webhook service ,可以看到這個服務是開啟在 /webhook route name 上,所以待會在填入 LINE webhook URL 時需注意要記得帶上這個 route name 哦
    4_1
  2. 回到 LINE Develop 的 Basic Information 頁面,找到 Webhook URL,按下Edit
    4_3
  3. 將第三部分所生成的網址貼上,再加上 /webhook ,如下圖,接著就能按下 Save,一個超簡易的機器人就大功告成了!
    4_4

最後,就是我們驗證機器人會不會通的時刻啦!

先透過 QR 碼與機器人"加好友" 或"聊天"後,基本上在訊息框內,你打什麼他就會跟著回你什麼,如果看到如下畫面就代表我們部署的偷吃步機器人就這樣設定成功啦!
4_5

文章打到這邊,其實知道聊天機器人的原理後,要應用到其他地方或是串其他聊天平台的機器人真的很簡單,這篇文章只希望用最簡潔的步驟及工具帶初學者走過一遍,不要在一開始就被許多專業術語或步驟打敗。

未來有任何想做的事情都可以實作在 webhook service 內,例如查天氣,查霧霾指數或將爬到的資訊做整理畫圖等等,甚至也可結合例如 ifttt 服務等,讓機器人串機器人,讓我們的效率加倍變得更懶,讓生活變得更有樂趣啦!

廣告

對「不必真的架站也能 5 分鐘實機體驗 LINE bot – 教學 ( by node.js & ngrok )」的一則回應

  1. 道歉我是個新手
    想問問如果我想加入
    image傳送圖片
    例如對方打上特定的文字
    我就可以傳某圖片給對方
    這樣的話請問我該怎麼寫?

  2. 你好,我在做第二部分第四小點時發生了下面的錯誤
    linyurongde-MacBook-Pro:node-line-bot-api DennyOcean$ node test_webhook.js
    module.js:471
    throw err;
    ^

    Error: Cannot find module ‘express’
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object. (/Users/DennyOcean/node-line-bot-api/test_webhook.js:3:17)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    我是用MacBookPro 系統版本:mecOS sierra 10.12.3

    1. 您好,
      看起來是沒有安裝到 express 套件
      請參考文章第二部分的 2. 步驟
      git clone 下來後記得需再執行 npm install --save 以安裝所需套件喔
      謝謝 🙂

      1. 你好,看你的文章實作之後,我也遇到同樣的問題
        他說沒有Express,但是我要安裝套件時,會出現以下的錯誤,不確定是不是安裝有問題還哪裡版本不支援,第一次嚐試,再麻煩指教

        C:\node-line-bot-api-develop>npm install node-line-bot-api –save
        npm ERR! Windows_NT 6.1.7601
        npm ERR! argv “C:\\Program Files (x86)\\nodejs\\node.exe" “C:\\Program Files (x8
        6)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" “install" “node-line-bot-api" “-
        -save"
        npm ERR! node v6.11.2
        npm ERR! npm v3.10.10
        npm ERR! code ENOSELF

        npm ERR! Refusing to install node-line-bot-api as a dependency of itself
        npm ERR!
        npm ERR! If you need help, you may report this error at:
        npm ERR!

        npm ERR! Please include the following file with any support request:
        npm ERR! C:\node-line-bot-api-develop\npm-debug.log

      2. 阿~感謝你幫我找到錯誤!
        那部分應該要輸入 npm install –save 才對,缺的套件就會自動安裝完了
        PS. 指令內 save 前面的減號有2個哦, 在文章內會被顯示成單個,複製貼上後請小心 🙂

  3. 你好,剛照著你的步驟實作,雖然在Webhook URL驗證一直沒有過,
    但奇蹟的linebot已經成功重複我打的字,不過當我把第2部分第4點或第3部分第3點terminal中斷掉就又不會回我了
    想請問這跟驗證沒有過是否有關?
    又或是其實第2部分第4點以及第3部分第3點要一直開著呢??

    謝謝

    1. 您好,不論執行 ngrok 的 terminal 或是 webhook service,兩邊都需要一直開著才會回你話喔~
      ( 因為接收訊息/回傳訊息的流程都會經過它們,關掉任何一個視窗都會導致路不通 )
      而本篇文章介紹的方法只是用最快方式讓你體驗回話機器人的原理
      若想做一隻會一直活著的 line bot
      大致可分為兩種方式:
      一種是去買主機或租用主機,且另外也需要租用 ssl 憑證,在主機上面裝好 webhook service 還要確保外面網路可以連接得到,這種作法成本較高且複雜,但較有彈性
      另一種是無服務主機架構 ( serverless ) ,算是比較簡單且省錢的 (我個人目前也在用的),是依需求計價,也不必另外租用 ssl 憑證
      關於這兩種方式的優劣我在這篇文章有分析了一下,而且也介紹了如何用第二種方式部署簡單的回話機器人,歡迎參考:
      https://simonhsu.blog/2017/03/20/%E9%80%8F%E9%81%8E-google-cloud-functions-%E9%83%A8%E7%BD%B2%E4%B8%80%E9%9A%BB%E6%88%90%E6%9C%AC%E6%A5%B5%E4%BD%8E%E4%B8%94-serverless-%E6%9E%B6%E6%A7%8B%E7%9A%84-line-bot/

  4. 您好,目前我看到的安裝完後的應用都是Line發送者(本人)傳遞訊息給line-bot, line-bot才回覆給line 發送者。請問,如要讓line-bot主動發訊息給(本人),是用什麼方法呢? 謝謝.

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s