NodeJs+Heroku(+ngrok) 搭建line機器人(上)

Brian Hsieh |謝杰修
appxtech
Published in
10 min readJul 9, 2020

--

紀錄「Appx-Linebot」搭建過程及搭建時遇到的問題

這篇文主要會分享如何在 line developer 建立一個新的機器人,以 Node.js 撰寫 api server,再將專案(nodejs)推到免費的雲端 server — Heroku。

ngrok 是一個輔助工具,能讓你將運行在 localhost 上的 service,網址從localhost://blablabla 變成 www.blablabla,對 line bot的開發非常方便。

架構

在開始之前,先釐清line bot是怎麼一回事。
在第一次接觸時,一直以為所謂的「line 機器人」就是很單純的寫好一隻符合Line官方規範的「機器人」,腦中大概的架構如下:

原先以為的架構

但其實真正的結構是這樣:

https://developers.line.biz/assets/img/messaging-api-architecture.f40bffbb.png

根據官方文件,Line其實是提供給我們Line platform上的一個channel讓我們跟自己寫好的API server 作溝通,換句話說,line提供的服務就是作為用戶跟server間中介層,因此我們需要自行建立server( 這裡以heroku為例 ),並提供webhook 功能給line。

架構理解了,那就開始吧!

流程

  1. line developer 官網的 messaging api 初始與設定
  2. API server(Node.js),
    基本套件引入和一些測試用程式碼(通常是重複使用者說的話)
  3. heroku 帳號創建,專案部署,取得 webhook url
  4. 將步驟三取得的 webhook url 填入步驟一設定中還未填的webhook欄位
  5. 掃 QR code 加機器人為好友,傳送訊息給機器人 → BANG 成功!
  6. 繼續更新 API server 裡的程式碼,為我們專屬的機器人新增功能
  7. heroku 部署(push)新的程式碼
  8. 步驟六步驟七重複執行

由於這篇文章是寫完後才作分享,所以步驟二不會作示範,而是直接以完整版的程式碼分區解釋,有興趣的讀者可以去網路上搜尋很多其他教學示範中的這個部分,再回來><

step 1. Line Messaging API:

I. 建立line 開發者帳號、provider

使用QRcode掃碼登入註冊可以很快的成為開發者
在Dashboard創建一個新的provider

II. 創建一個新的 messaging API Channel

Line 有很多開發者工具,我們這次先選擇我們要的messaging API
依照上面的文字敘述填上需要的資訊,之後都可以再做修改

III. 取得 ACCESS_TOKEN & SECRET 和一些設定

這裡提到的資訊位置會因為網站的更新而異動,如果跟圖片上不同找一找一定有

在創建完成之後我們會看到前面所填寫的資訊和一些line給的原生設定,其中,我們需要兩個最重要的資訊:
1. basic setting 裡的 channel secret

2. Messaging API 裡的 channel access token
3. Messaging API 裡的 official feature 都先關掉(allow bot to join group, auto-reply message, greeting message),這項操作會將我們導入另一個頁面,但就是關掉就好。
4. enable webhook 功能,但我們還沒取得,所以這邊先留空

到這裡為止,我們已經成功1/3,接下來終於輪到heroku。

step 3. Heroku:

Heroku 是一個平台即服務(PaaS),可自行在Heroku平台開發和佈署各種網站,好處是減少維護管理系統底層的成本,也透過簡單的介面來調整需要的硬體設備等級及資源,選擇適合自己的等級做升級。類似的服務例如:Aws, Azure …,而 Heroku十分適合line bot這種低網路流量的服務,免費版的功能就足以應付初學者的簡易需求。 — https://www.wpgdadatong.com/cn/blog/detail?BID=B0236

I. 註冊,新增專案

註冊完後,在 dashboard 新增專案

heroku 官方支援多種後端語言,java, NodeJs, python…等,詳情可見官網
輸入機器人名稱,地區有美國(較好)與歐洲可選擇

II. 將步驟二寫好的 API server 程式碼部署上 heroku

heroku支援多種部署方式,筆者只用過 heroku-cli & github同步。
個人認為github同步十分方便,只要正常的 git push 到 github 上去後就會自動部署到heroku,還支援diff功能。

同步github

但這次為了方便demo就先選擇 heroku cli,步驟如圖上教學所示,幾本上跟git 指令很像但是要加上heroku

透過 heroku cli

使用 heroku cli 部署的 log 可以在網頁跟終端機上看到,但程式裡運行的console就只能在網頁版裡看到

點選右上角more -> view log
可以看到部署時的log,也可以看程式裡的console.log
終端機裡部署的樣子

III. 點進專案,在setting頁取得 domain,新增config variable

取得domain,回到 line channel 在 webhook url 欄位中填入(Messaging API tab裡),加入機器人好友就能看到你的程式正常運作。

config var 這項其實是optional,但填入後heroku會幫我們存成環境變數,讓我們的 code 安全性提高

恭喜大功告成! 接下來就是程式的部分了

3. API server

Line 有提供需多語言的sdk,而我們用的語言是Node.js,並用express為框架

最主要需要的套件只有 express 和 @line/bot-sdk

npm init linebot-nodejs
cd linebot-nodejs
npm i express
npm i @line/bot-sdk

將步驟一存下來的 access token 和 secret ,傳進新呼叫的 Client,若我們已經有在heroku中設定config var則可以直接使用環境變數。
( line bot API 中最主要的功能都在 Client 裡面,可以在上面提到的官網中找到,或是點選 這裡

我們每對 line 機器人傳送一次訊息,都是一次 message event,下圖中我們可以看到 req.body里長什麼樣子,大部分的功能最需要的只有 replyToken, source, 和 message。
通常我們傳送的訊息只會是一次 message event,對 req.body.event[0] 作動作即可,但我們為了以防萬一 (event 不只有message一種) 在這裡使用 map ,並宣告一個 handleEvent 函式讓每一個event都能被照顧到。

我們可以看到 event 有各式各樣,但我們在這裡先專注於訊息 event 。

而訊息也有很多種,貼圖、文字、位置訊息⋯⋯等,我們在50行先只專注於使用者的「文字」訊息,再宣告一個 textHandler 來針對不同的文字訊息做處理。

本文中跳過的步驟二(測試程式碼),通常就是以52~55行的方式呈現,這會讓我們的機器人學我們講話

回傳文字的方式是以這樣的格式:

client.replyMessage( replyToken, {
type: 'text',
text: '你想傳給使用者的文字'
});

--

--