LINE Bot聊天機器人程式開發教學(四):佈署與測試Echo Bot

延續上一篇文章,本文的主題:

  • 產生LINE的「頻道存取代碼」並設定Webhook網址
  • 設定Heroku平台的應用程式環境變數
  • 把Node.js程式佈署到Heroku平台
  • 將LINE聊天機器人加入好友開始對話

底下是本程式專案的檔案結構,專案資料夾叫做linebot原始檔可按此連結下載(ZIP壓縮格式),請先將它解壓縮備用。

程式專案的檔案結構

Procfile是Heroku平台環境的應用程式(也就是“dyno”)設定檔,其中只包含一行敘述:“web: node index.js”代表指定網站伺服器以node服務執行index.js。本範例檔包含ejs樣板,但下一篇的程式才會用到。

package.json檔的內容如下,當中的engines屬性告訴Heroku平台安裝執行Node.js 8.9.1版:

產生LINE的「頻道存取代碼」並設定Webhook網址

回到LINE機器人的頻道設定頁面,按下Messaging Settings(傳訊設定)欄當中的Issue(發行)鈕:

Messaging Settings(傳訊設定)

畫面將出現如下的對話方塊,提醒你發行新的頻道存取代碼,將會導致舊代碼失效,你可以設定舊代碼剩餘的有效期限。因為我們之前沒有發行過存取代碼,所以「時數」設定成0即可。

發行新的頻道存取代碼,將會導致舊代碼失效

按下「發行」鈕,將產生一長串代碼,下一節將會用到它。接著按下「使用Webhook」欄位右邊的「鉛筆」鈕,點選Enabled(啟用),再按下Update(更新)

啟用Webhook

最後,輸入Webhook網址,也就是你的Heroku應用程式網址,後面再加上/linewebhook路徑

輸入Webhook網址

設定Heroku平台的應用程式環境變數

本文的LINE聊天機器人程式將讀取3個系統環境變數,請先進入你的Heroku應用程式的Settings(設定)分頁,按下其中的Reveal Coding Vars(顯示程式變數)鈕:

設定Heroku平台的應用程式環境變數

接著分別在KEYVALUE欄位輸入變數名稱和值,然後按下Add(新增)鈕,一共要設定3個環境變數(全部大寫):

  • CHANNEL_ID:頻道識別碼
  • CHANNEL_SECRET:頻道金鑰
  • CHANNEL_ACCESS_TOKEN:頻道存取代碼。

設定Heroku平台的應用程式環境變數

這3個變數值都能在上一節的LINE頻道設定頁面找到。

把Node.js程式佈署到Heroku平台

切換到Heroku的Deploy(佈署)分頁,按照裡面的Heroku CLI操作說明,把之前下載並解壓縮的linebot檔案上傳到Heroku。

Heroku的Deploy(佈署)分頁

假設你的linebot程式放在D磁碟的Heroku資料夾,也就是D:\Heroku\linebot路徑:

程式檔路徑

開啟命令提示字元,先執行heroku login命令並輸入你的e-mail和密碼登入heroku。接著執行cd命令切換到line程式的根路徑

執行cd命令切換路徑

執行底下git命令初始化Git本地和遠端的儲存庫(repository,就是原始碼的存放空間),Heroku會自動幫我們在遠端設置一個儲存庫。

初始化Git本地和遠端的儲存庫

繼續執行以下命令,上傳程式碼到遠端伺服器:

上傳程式碼到遠端伺服器

執行最後的heroku open命令開啟瀏覽器,將能看到“Hello World!”,代表Node.js程式執行無誤。

瀏覽器畫面

將LINE聊天機器人加入好友開始對話

回到LINE頻道設定頁面,你可以按下Webhook網址欄位旁邊的Verify(核實)鈕,應該會得到Success(成功)回覆,代表連接你的網站程式沒問題;如果不是Success,請檢查你的Heroku系統環境變數是否設定正確。

核實Webhook程式

最後,開啟手機上的LINE應用程式,掃描LINE頻道設定頁面底下的QR code二維條碼,將此機器人加入好友。發送文字訊息給機器人,它將回覆相同的訊息:

手機LINE畫面

每次LINE機器人都會先回覆一則罐頭訊息,若要取消它,請將LINE頻道設定頁面Auto-reply messages(自動回覆訊息)欄位設定成Disabled(取消)

Auto-reply messages(自動回覆訊息)

延伸閱讀

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *