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版:

{
  "name": "node-js-line-bot",
  "version": "0.1.0",
  "description": "A sample Node.js linebot app",
  "engines": {
    "node": "8.9.1"
  },
  "dependencies": {
    "linebot": "^1.3.0",
    "express": "^4.15.2",
    "ejs": "^2.5.7",
    "request": "^2.83.0",
    "request-promise": "^4.2.2"
  },
  "keywords": [
    "linebot",
    "node",
    "heroku",
    "express"
  ],
  "license": "MIT"
}

產生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(自動回覆訊息)

延伸閱讀

Posts created 467

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

  1. 我想請問一下,我是讀超圖解arduino的讀者,再進行聯網智慧家電的實驗中,網路卡直接接上後,pwr的燈一直會亮紅燈,上傳程式時,會出現arduino編譯錯誤的訊息,還有#include “WebServer.h”: no such file or directory的訊息,請執導如何解決(謝謝)

  2. 可以請問一下 上傳上去後 heroku open 會失敗 app error然後看log訊息是以下

    2017-12-30T08:23:43.446384+00:00 app[web.1]: at Object.Module._extensions..js (module.js:646:10)
    2017-12-30T08:23:43.446385+00:00 app[web.1]: at Module.load (module.js:554:32)
    2017-12-30T08:23:43.446385+00:00 app[web.1]: at tryModuleLoad (module.js:497:12)
    2017-12-30T08:23:43.446386+00:00 app[web.1]: at Function.Module._load (module.js:489:3)
    2017-12-30T08:23:43.446386+00:00 app[web.1]: at Function.Module.runMain (module.js:676:10)
    2017-12-30T08:23:43.446387+00:00 app[web.1]: at startup (bootstrap_node.js:187:16)
    2017-12-30T08:23:43.446388+00:00 app[web.1]: at bootstrap_node.js:608:3
    2017-12-30T08:23:43.553195+00:00 heroku[web.1]: Process exited with status 1
    2017-12-30T08:23:43.604435+00:00 heroku[web.1]: State changed from starting to crashed
    2017-12-30T08:23:45.085884+00:00 heroku[router]: at=error code=H10 desc=”App crashed” method=GET path=”/” host=linebot1022.herokuapp.com request_id=002ebac3-ab17-4cfc-81e8-443d4c938e97 fwd=”27.105.240.166″ dyno= connect= service= status=503 bytes= protocol=https
    2017-12-30T08:23:45.978913+00:00 heroku[router]: at=error code=H10 desc=”App crashed” method=GET path=”/favicon.ico” host=linebot1022.herokuapp.com request_id=513ddc55-bbbb-44f9-8924-8e415ca0107b fwd=”27.105.240.166″ dyno= connect= service= status=503 bytes= protocol=https

    實在不知道我哪個環結錯了呢,能麻煩提點一下嗎?感恩

    1. 不是,只要在Node.js專案根目錄放置package.json,它就會在佈署時安裝指定的程式庫模組。

      thanks,
      jeffrey

  3. 趙老師您好:
    在LINE Bot聊天機器人程式中,如果不想把Node.js的程式部屬在Heroku平台,只想部屬在自己的樹莓派上,請問專案資料夾linebot裡面的程式應該如何修改呢? 謝謝

    1. node.js是跨平台程式,所以不管佈署在哪個平台,主程式都一樣。主要的問題是在本機搭建HTTPS協定的伺服器,我改天再整理文章說明。

      thanks,
      jeffrey

  4. 老師你好
    請問輸入git init時
    git 不是內部或外部命令 可執行的程式或批次檔
    這是為什麼

    1. 老師你好
      我git以下載好
      還是一樣
      我對這部分比較不熟悉
      有沒有什麼貼文能夠幫助我??

  5. 老師您好 :
    初次使用參閱您的步驟遇到以下困境
    輸入指令: git commit -am “make it better”
    總是出現下列訊息, 請問是哪個步驟沒設定好嗎?

    Please tell me who you are .
    Run
    git config — global user.email “you@example.com”
    git config — global user.name “Your name”
    to set your account’s default identity
    Omit — global to see the identity only in this repository .

    Mars

    1. 老師有些步驟跳過呢,我找了很久才找到……

      請在Git CMD裡面打出下面兩行:

      git config — global user.email “you@example.com”
      git config — global user.name “Your name”

      “”裡面請填入heroku.com的使用者名稱與email,範例如下:
      git config — global user.email “MARS@hotmail.com”
      git config — global user.name “MARS”

  6. 老師你好:
    在進行到git push heroku master時 無法PUSH 出現以下錯誤
    ! [rejected] master -> master (non-fast-forward)
    error: failed to push some refs to ‘https://git.heroku.com/line-auto.git’
    hint: Updates were rejected because the tip of your current branch is behind
    hint: its remote counterpart. Integrate the remote changes (e.g.
    hint: ‘git pull …’) before pushing again.
    hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.

    我該如何處理

    1. 從”its remote counterpart. Integrate the remote changes”訊息看來,是因為遠端空間有新增或更動的內容,和本機的內容不一致,輸入:

      git pull origin master

      代表pull(拉下)遠端的內容和本機內容合併,應該能解決你的問題。

      thanks,
      jeffrey

  7. 您好:
    我想問機器人不會回複相同的訊息是在哪個環節出了問題?
    heroku open有看到Hello World!
    Webhook URL Verify也有成功

    1. 我剛剛測試發送四則訊息,後兩則訊息是相同的,沒有發現異常。

      thanks,
      jeffrey

    2. 今天也有遇到這問題,後來在LINE官方帳號的網頁裡面設定 “WEBHOOK 啟用” 就可以了喔!!

  8. 老師您好~
    linebot教學第四章的範例連結消失了,老師可以補一下新的連結嗎?
    想照著做看看!
    謝謝~

  9. 老師您好,感謝您的分享
    我照著您的教學有完成一個bot
    但是我要建立第二個bot時卻出現問題
    在Webhook URL Requires SSL 的Verify
    一直是錯誤的
    The webhook returned an invalid HTTP status code. (The expected status code is 200.)
    請問是為什麼?
    謝謝

    1. 如同本系列第一篇文章提到的,LINE bot要使用HTTPS協定,如果你的web伺服器未採用SSL加密,是無法運作的。

      thanks,
      jeffrey

  10. 老師您好,我跟 草 大大的情況相同
    我要建立第二個bot時出現問題
    在Webhook URL Requires SSL 的Verify
    一直出現
    The webhook returned an invalid HTTP status code. (The expected status code is 200.)
    老師您說未採用SSL加密是無法運作的,那要怎麼讓其伺服器SSL加密呢?
    我對這部分一點概念都沒有QQ
    謝謝老師

    1. HTTP是使用純文字進行通訊的協定,它主要有兩個缺點:
      1.訊息可能在傳輸過程中遭到監聽或者竄改
      2.無法判定用戶端和伺服器的身份

      舉例來說,假設你打算登入微軟的Office365網站並購買Office軟體。購買軟體時,你輸入的個人資料和信用卡號碼若是用純文字傳送,就可能在傳送過程中被攔截取得。或者,你所登入的網站並非真的是微軟Office365官網,下載的檔案可能內藏病毒。

      HTTPS就是把原本的純文字訊息加密之後再傳送出去,如此,即便在傳送過程被監聽,監聽者也只能看到一堆亂碼。缺點是,訊息加密和解密運算都會耗用處理器和記憶體資源,訊息量也會增加。

      此外,採用HTTPS協定的網站伺服器,必須向第三方認證機構申請憑證。這有點類似超市販售食品的「履歷認證」,由第三機構(也就是生產者和販售者以外的機構)證明該食品是由某某公司或農民生產,各項檢驗安全無虞之類。

      網站寄存服務(web hosting,提供網站架設空間的公司),都有提供申請憑證的服務。通常只要在業者提供的伺服器設定畫面,勾選你要使用SSL加密服務,這樣就完成了。

      提供SSL憑證的業者,稱為CA (Certificate Authority,憑證授權中心) ,VeriSign(威瑞信)就是知名的CA機構。使用SSL憑證是要額外收費的,不同CA的收費會有所差異,年費大約是美金$50元,而且網站也要使用專屬的IP位址(一般是採用共享IP),這部份通常也要額外付費。

      如果你只打算在自己電腦上架設HTTPS測試網站,可參考這位大大的Line Bot教學文件,安裝ngrok

      Thanks,
      jeffrey

  11. 老師您好:

    我想問我每次都一直重新push 結果之後打git commit -am “meke it better”
    都會出現
    nothing to commit , working tree clean
    我查過這個可是我看不太懂 對不起可以麻煩老師解答嗎

  12. 您好:
    請問在 heroku,下載 heroku-cli-x86.exe後,並安裝。
    可以 login heroku ,卻不能執行 git。
    git是包含在cli 裡?還是要另外安裝? 

    {
    E:\Heroku\linebot>heroku login
    Enter your Heroku credentials:
    Email: lacoste@xxx.url.com.tw
    Password: ******************
    Logged in as lacoste@xxx.url.com.tw

    E:\Heroku\linebot>git
    ‘git’ 不是內部或外部命令、可執行的程式或批次檔。

    E:\Heroku\linebot>
    }

  13. 老師您好,
    我使用heroku當我的後端建立了LINE BOT
    但在Webhook URL Requires SSL 的Verify時
    剛創好時都Success
    BOT也都會回應我
    但後來不知道怎麼了 BOT不回應我了 我又嘗試Verify
    且也沒變動程式碼卻一直出現
    The webhook returned an invalid HTTP status code. (The expected status code is 200.)的訊息
    請問這是什麼問題??
    heroku 不是也是使用https嗎??

    1. 你可以在Heroku App設置頁面右上角的More選單,選擇View Logs(觀看紀錄),裡面會列舉錯誤訊息。

      Heroku Log

      在Node.js裡的console.log()訊息,也會出現在log訊息。

      thanks,
      jeffrey

  14. 不好意思!想請教一下
    以下這個部分的意思是?
    我該如何解決它呢?
    謝謝!

    2018-08-03T03:46:05.174612+00:00 app[web.1]: SyntaxError: Unexpected number
    2018-08-03T03:46:05.174615+00:00 app[web.1]: at createScript (vm.js:80:10)
    2018-08-03T03:46:05.174617+00:00 app[web.1]: at Object.runInThisContext (vm.js:139:10)
    2018-08-03T03:46:05.174619+00:00 app[web.1]: at Module._compile (module.js:599:28)
    2018-08-03T03:46:05.174621+00:00 app[web.1]: at Object.Module._extensions..js (module.js:646:10)
    2018-08-03T03:46:05.174623+00:00 app[web.1]: at Module.load (module.js:554:32)
    2018-08-03T03:46:05.174625+00:00 app[web.1]: at tryModuleLoad (module.js:497:12)
    2018-08-03T03:46:05.174627+00:00 app[web.1]: at Function.Module._load (module.js:489:3)
    2018-08-03T03:46:05.174629+00:00 app[web.1]: at Function.Module.runMain (module.js:676:10)
    2018-08-03T03:46:05.174632+00:00 app[web.1]: at startup (bootstrap_node.js:187:16)
    2018-08-03T03:46:05.174633+00:00 app[web.1]: at bootstrap_node.js:608:3

  15. 老師您好:
    當我按下Webhook網址欄位旁邊的Verify鈕他就會跳出以下錯誤
    The webhook returned an invalid HTTP status code. (The expected status code is 200.)
    以確認過heroku的設定變數了
    謝謝

  16. 您好, 我執行git push geroku master後
    出現以下錯誤訊息
    fatal: ‘geroku’ does not appear to be a git repository
    fatal: Could not read from remote repository.

    Please make sure you have the correct access rights
    and the repository exists.

    請問要怎麼解決呢?

  17. 您好, 我執行git push geroku master後
    出現以下錯誤訊息
    C:\Program Files\heroku\linebot\hometest-line>git push heroku master
    Enumerating objects: 6, done.
    Counting objects: 100% (6/6), done.
    Delta compression using up to 8 threads
    Compressing objects: 100% (5/5), done.
    Writing objects: 100% (6/6), 1.28 KiB | 1.28 MiB/s, done.
    Total 6 (delta 0), reused 0 (delta 0), pack-reused 0
    remote: Compressing source files… done.
    remote: Building source:
    remote:
    remote: —–> Building on the Heroku-20 stack
    remote: —–> Using buildpacks:
    remote: 1. https://github.com/kr/heroku-buildpack-go.git
    remote: 2. heroku/go
    remote: —–> App not compatible with buildpack: https://github.com/kr/heroku-buildpack-go.git
    remote: More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
    remote:
    remote: ! Push failed
    remote: !
    remote: ! ## Warning – The same version of this code has already been built: 39e22ff1fee3ecca31e51bb9d831024ef00af230
    remote: !
    remote: ! We have detected that you have triggered a build from source code with version 39e22ff1fee3ecca31e51bb9d831024ef00af230
    remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
    remote: !
    remote: ! If you are developing on a branch and deploying via git you must run:
    remote: !
    remote: ! git push heroku :main
    remote: !
    remote: ! This article goes into details on the behavior:
    remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
    remote:
    remote: Verifying deploy…
    remote:
    remote: ! Push rejected to hometest-line.
    remote:
    To https://git.heroku.com/hometest-line.git
    ! [remote rejected] master -> master (pre-receive hook declined)
    error: failed to push some refs to ‘https://git.heroku.com/hometest-line.git’

    1. 這個錯誤訊息:

      App not compatible with buildpack

      代表你的程式和伺服器端的執行環境不相容。例如,你可能用JavaScript語言開發,但是執行環境是Python。

  18. 不好意思 我執行heroku open
    網頁跑出
    Application error
    An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
    heroku logs –tail
    如何解決

  19. 昨天問的已成功,謝謝。
    但今天我的linebot webhook 一直出現
    The webhook returned an HTTP status code other than 200.(400 Bad Request)

    Confirm that your bot server returns status code 200 in response to the HTTP POST request sent from the LINE Platform. For more information, see Response in the Messaging API Reference.
    確定變數有用,該如何解決

    1. 額…我之前寫的PM2.5空氣品質linebot仍可運作,package.json檔案和網域名稱無關。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top