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

Brian Hsieh
Jul 9 · 10 min read

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

Image for post
Image for post

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

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

架構

Image for post
Image for post
原先以為的架構

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

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

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

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

流程

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

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

step 1. Line Messaging API:

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

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

II. 創建一個新的 messaging API Channel

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

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

step 3. Heroku:

I. 註冊,新增專案

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

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

Image for post
Image for post
同步github

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

Image for post
Image for post
透過 heroku cli

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

3. API server

Image for post
Image for post

最主要需要的套件只有 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 裡面,可以在上面提到的官網中找到,或是點選 這裡

Image for post
Image for post

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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

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

appxtech

APPX aims at providing professional Java, Spring MVC development service and training service.

Brian Hsieh

Written by

appxtech

appxtech

APPX aims at providing professional Java, Spring MVC Training in Taipei. We also offer consulting in .net and Java project development as well as continuous Integration and Delivery

Brian Hsieh

Written by

appxtech

appxtech

APPX aims at providing professional Java, Spring MVC Training in Taipei. We also offer consulting in .net and Java project development as well as continuous Integration and Delivery

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store