(本文作者是ALPHA Camp全端Web App開發課程的學生 Gary Wu,文章轉載自他的部落格)
Line是台灣滲透率最高的通訊軟體,月活躍用戶超過2000萬。很多商家也開發Line聊天機器人,做自動化客服和資訊查詢的功能。ALPHA Camp全端開發的學生 Gary Wu 透過在AC學會的後端開發能力,自己著手研究如何開發出簡單的Line chatbot。這篇文章有詳細實作步驟指南,帶你做出自己的第一個Line聊天機器人。
為什麼要做 chatbot?
上個月去聽 LINE chatbot 的講座,聽完後,想試試看 chatbot 到底可以做到什麼程度,雖然是機械式的聊天,但應該可以達到某種效果!也許可以幫助我解決我現在遇到的一些問題。
開始吧
因為是 LINE 提供的服務,所以需要先到 LINE Develpers 登入及註冊。
先到 https://developers.line.biz/en/ 登入
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0997d55596605bade19f_ia_400000004.png?w=800&ssl=1)
登入後,註冊,填寫 Name 、Email,並發送信箱認證信
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb09b2a28539b73c60411f_ia_400000005.png?w=800&ssl=1)
信箱認證完成 =>
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb09c61418dda42f5ab80e_ia_400000006.png?w=800&ssl=1)
選擇要使用的服務: Messaging API
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb09dbfc25178cc8046be1_ia_400000007.png?w=800&ssl=1)
Create new channel
Select provider:可以勾選已經存在的 provider,若沒有則新增一個 provider。
好了,就按 〈Next Page〉
輸入 provider name
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb09fa430a51ad4b63e1bd_ia_400000008.png?w=800&ssl=1)
完成相關資料輸入 => App icon、App name、Description、Category、 Subcategory、 Email address、 Privacy Policy URL、 Terms Of Use URL
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0a25082b8d075d873cbe_ia_400000010.png?w=800&ssl=1)
Confirm:確認輸入資料正確性
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0a141418dd88965ab94f_ia_400000011.png?w=800&ssl=1)
channel 建立成功
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0a50430a517b5b63e2c6_ia_400000012.png?w=800&ssl=1)
更改 channel setting
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0a604fa3d3aef83ef5a0_ia_400000013.png?w=800&ssl=1)
Channel ID 及 Channel Secret 很重要,不要外洩!
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0ab71418ddd4815abc51_60d29cc33f302e94b81d00ae_1_EL0wxXh9DLIdyKwLyXNTSA.png?w=800&ssl=1)
這邊不用填 =>
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e066c1d00b0_1xW_rgU4TmQZWSQ9hVgD-Cg.png?w=800&ssl=1)
最下面那個選項 Channel access token ,點選 Issue 可以產生 Channel access token
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e979b1d00b4_1aN71O_TWZDUnkDbZ1Y_OWg.png?w=800&ssl=1)
設定 Time until token 有效時間
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0ade3392ec19d913ef90_ia_400000017.png?w=800&ssl=1)
點選 Issue ,產生 token,這串 token 可用於 專案中。需要用到時再來查詢也可以。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0b19b0df124b4317dee4_60d29cc33f302e29b71d00b5_1_sWNccslBgYSZZ0oPUGIWbQ.png?w=800&ssl=1)
Messaging settings:
- Use webhooks 切換成 Enabled
- Webhook URL :先留空白,等建立 Webhook URL 後,再回頭設定
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302ef45f1d00aa_1QyRaLar4m4Nror6e2Rt-_w.png?w=800&ssl=1)
這邊不用設定,最下面有 chatbot 的 QR code ,用於加入好友。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302ebe081d00ad_1_CCJGNT28O27cGNjsyYYyg.png?w=800&ssl=1)
點選 Set message 會連到 LINE official Account Manager,有下面幾個畫面:
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0b3c67b99f5fd0072e27_ia_400000021.png?w=800&ssl=1)
主頁 可以設定:群發訊息、貼文串、加入好友的觀迎訊息、自動訊息……
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0b52fc2517cc4b04717a_ia_400000022.png?w=800&ssl=1)
到此,已完成 Channel 的基本設定。接下來,要建立 Webhook URL
建立 Webhook URL
建立專案資料夾
mkdir XXXXXX
建立 package.json
npm init -y
安裝套件 express、linebot
npm install express linebot dotenv
linebot 套件說明: https://www.npmjs.com/package/linebot
安裝後,package.json dependencies 多了二個套件 express、 linebot、dotenv
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e174f1d00b3_1I_hrOu0GnL0vl0s8nrVnog.png?w=800&ssl=1)
建立 app.js
const express = require(‘express’)
const app = express()const linebot = require(‘linebot’);// 判別開發環境
if (process.env.NODE_ENV !== ‘production’) { // 如果不是 production 模式
require(‘dotenv’).config() // 使用 dotenv 讀取 .env 檔案
}const bot = linebot({
channelId: process.env.CHANNEL_ID,
channelSecret: process.env.CHANNEL_SECRET,
channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
});
const linebotParser = bot.parser();bot.on(‘message’, function (event) {
console.log(event);event.reply(event.message.text).then(function (data) {
// success
}).catch(function (error) {
// error
});
});app.post(‘/’, linebotParser);app.listen(process.env.PORT || 3000, () => {
console.log(‘Express server start’)
});
佈署到 heroku
在專案資料夾新增名稱為 Procfile 的檔案
web: node app.js
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e4ab81d00a5_1hDmIfJ0_a_tfrla7u4JWuQ.png?w=800&ssl=1)
如果電腦有安裝 heroku CLI,則可以於專案資料夾路徑執行下面指令:
heroku login
會與連結到 heroku 網站,點選 log in
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e00d81d00b1_1xuRi7Zo6b8CPzWEL7iBGgg.png?w=800&ssl=1)
再回到 CLI,已登入 heroku
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302eda4c1d00c1_12e0MwSqgildJLa6SnNwb1g.png?w=800&ssl=1)
建立一個 heroku app
heroku create
成功建立,左邊是 app 網址,右邊是 git push 位址
可用 git remote -v 指令來查詢
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0b7895f7bd842cd0f47d_ia_400000027.png?w=800&ssl=1)
將專案 push heroku master
git push heroku master
push 後,會偵測哪一種語言撰寫的 app、建置 runtime environment、Installing binaries、Installing dependencies(相關套件)
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0b92082b8d1155874296_ia_400000028.png?w=800&ssl=1)
Discover process type(因為我們在專案中有建立 Procfile,讀取到 web)、Compressing、Lauching 、發行版次
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0ba397901c5a4678e8b4_ia_400000029.png?w=800&ssl=1)
查看 heroku logs
heroku logs –tail
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0bb2d55596cf6aadedd4_ia_400000030.png?w=800&ssl=1)
這裡出現二次同樣的錯誤訊息:使用 npm start 來啟動卻失敗
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/61bb0bd51d636511a8df6df8_ia_400000031.png?w=800&ssl=1)
原因是,我們在 package.json 沒有在 scripts 中定義 start。
所以我們來更改 package.json 設定:在 scripts 中增加二個屬性 dev 及 start。開發時可以 npm run dev 來啟動 server ,佈署時至 heroku 後,heroku 會以 npm run start 來啟動 server。
“scripts”: {
“dev”: “nodemon app.js”,
“start”: “node app.js”,
“test”: “echo “Error: no test specified”” && exit 1″”
}