Node + Heroku 打造 Line 聊天機器人

嗨，大家今天過得好嗎，會抽空寫這篇教學主要是因為好奇想動手玩玩，順便記錄一下筆記，希望對大家能有些幫助，這篇主要是紀錄註冊建置 Line Bot 的流程，目的是讓大家可以 Focus 在聊天機器人邏輯的撰寫，不用去煩惱怎麼註冊怎麽建置，對於聊天機器人常用到的 API 會留在下一篇。

這篇可以學到什麼呢？

• 如何創建 Line Channel 帳號、Heroku 帳號
• 如何創建一個 Node.js Line Bot 專案，並連結 Line Channel 、Heroku
• 如何將寫好的 Node.js Line Bot 專案部署到 Heroku 上

要開發 Line chatbot 有一些需要安裝的套件，版本號只是做個參考

Git (v2.17.2)、Node.js (v10.15.0)、VSCode (v1.32.2)

步驟如下：

1. 創建 Line Channel 帳號
2. 創建 Heroku 應用
3. 創建 Line Chatbot 專案
4. 撰寫 Line Chatbot 程式碼
5. 部署到 Heroku 上
6. 測試

Step1: 創建 Line Channel 帳號

要創建一個 Line 聊天機器人，首先要先到 Line Developers 上註冊一個 Line Channel。

到首頁先點擊 Login，再用 Line 帳號登入

點擊創建一個 Provider

Provider 可以當作團隊或是公司的帳號，等等創建的 Line Bot 會綁在這個帳號底下，一個 Channel 可以有多個 ChatBot，創建好 provider 之後，再來創建 Channel

這邊選擇 Messaging API

進入後我們將這個 channel 一些基本資料填寫完畢

基本資料填寫

這邊要注意的是方案(Plan)的選擇，Developer Trial 是指開發者方案；Free則是免費方案。

這裡本來想講解的，後來覺得太繁瑣了，請大家直接用 Developer Trial (不能換方案，不能傳影音)，等到成熟了想商業化就考慮 Free 方案然後加價開放功能 : )

參考官方推廣方案

創建完成後我們點進去剛剛創建的 Channel Settings 內，這裡我們有三個重要資料要找到

1. Channel ID
2. Channel secret
3. Channel access token

channel ID & secret 一開始就可找到

channel access token 需要先點擊右邊 issue 設定失效時間，可以先設定 24 H

到這邊 Step 1 到這邊先告一段落，最重要的三個資訊 (Channel ID、Channel secret、Channel access token) 拿到了，但是頁面先別關掉等等註冊 Heroku 會用到。

Step2: 創建 Heroku 應用

首先我們到 Heroku 的官網去註冊一個帳號

有帳號就登入，沒有的話註冊一個！

新建一個應用

基本上只要設定 App name

之後到該應用底下切換到 Settings 然後找到 Domains and certificates 這個大項，複製裡面的 URL

複製框起來的 URL

然後我們回到 Step1 的 Channel Settings 內找到 Messaging settings，把底下的 Use webhooks 打開(設為 Enabled)，Webhooks URL 貼上剛剛在 Heroku 複製的 URL

Webhook URL 走 HTTPS 而不是 HTTP，Heroku 剛好支援，如果是自己另外架設的伺服器就要注意了。

然後還記得在 Step1 最後我們記住的那三個 Line Channel 資訊 (Channel ID、Channel secret、Channel access token)，這時候派上用場了，我們現在要將這個三個變數設定到 Heroku 上，這樣我們在程式內要用到時就不用寫死在程式碼內，可以透過 process.env 來取得，這個部分我們晚點再來說。

Heroku settings 內找到 Config Vars，將這三個資訊取名後放進去

key 可以隨便取，JS 內常數習慣都會採全大寫命名

Step3: 創建 Line Chatbot 專案

首先我們要先安裝 Heroku CLI，為了到時候可以透過 git 將專案上傳到 Heroku 上。

Step3 與 Step4 都是如何創建專案，或者你可以直接從 github 下載我所準備好的範例

先打開你的 terminal (終端機)，像我用的是 Mac 的 iTerm

建立並初始化專案資料夾

$ mkdir chatbot // 在當前路徑下建立 chatbot 資料夾
$ cd chatbot    // 切換到 chatbox 資料夾下
$ git init      // 初始化 git
$ npm init      // 初始化 npm，基本上先全部 enter 就行

這時候會產生一個 package.json，把它打開修改 script 這個屬性

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}
改成
"scripts": {
  "start": "node ."
}

為什麼要改這樣呢？因為部署到 Heroku 時它預設會執行 npm start，這時候他會去跑 package.json 內的 scripts，並找到 start 這個 key 所代表的指令，我們剛剛修改後，也就是 node .

然後登入 Heroku 並把當前專案綁定到 Heroku 上，專案名稱可以到 Heroku 專案下的 Settings-Name 找到

$ heroku login  // 登入 heroku
$ heroku git:remote -a Heroku專案名稱 // 綁定遠端 heroku 專案

安裝 Line Node.js SDK 套件，這個套件基本都包好好的了

$ npm install linebot --save

在專案根目錄

新增一個 index.js，這個名稱跟 package.json 內的 main 一致，這個是程式進入點。

新增一個 .gitignore 檔案，用意是不要把 node_modules 或一些不需要上傳的檔案一起被加到 git 內，在伺服器上執行 npm start 它會自己根據 package.json 去下載。

手動新增或是輸入

echo node_modules/ >.gitignore

新增 index.js 和 .gitignore

這時候我們點開 index.js 可以開始來寫 Line Chatbot 的程式碼了！

Step4: 撰寫 Line Chatbot 程式碼

主程式 index.js

上面這段程式碼比較簡單，主要就是

1. 初始化 line bot SDK
2. 監聽使用者傳送訊息
3. 監聽 webhook 的 port

我們先讓它可以跑起來，下一章會再針對一些常用的 API 做說明。

Step5: 部署到 Heroku 上

再來我們就要把程式發佈到 Heroku 上

$ heroku login
$ cd my-project/
$ git init
$ heroku git:remote -a xxx
$ git add . // 把所有新增的檔案都加入到 git 內追蹤
$ git commit -m 'First Commit' // 提交變更過的程式碼並加上備註
$ git push heroku master // 把程式碼同步到遠端 Heroku 上

這時候我們要看有沒有成功要先看兩個地方

第一個是 Line Channel 的 Webhook

Channel Settings 內找到 Webhook URL 並驗證

第二個是我們可以開啟 Heroku 的 log 功能，看到遠端伺服器的 log 訊息來除錯，我們回到專案下的終端機畫面輸入底下兩個指令其中之一

$ heroku logs // 顯示此應用目前的 heroku 訊息
$ heroku logs --tail // ”持續“ 顯示此應用的 heroku 訊息

看到這行訊息就知道機器人上線成功啦！！

Step6: 測試

我們到 Line Channel Settings 底下找到機器人的 QR code 就可以加好友啦！

如果隔一段時間沒使用，Heroku 會強制休眠，所以第一次它可能會已讀不回一下子，之後就正常了

好啦！大家是不是都上線了呢！？

如果有什麼問題或是我沒注意到的歡迎大家留言告訴我 : )