Loading...

(本文作者是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/ 登入

登入後,註冊,填寫 Name 、Email,並發送信箱認證信

信箱認證完成 =>

選擇要使用的服務: Messaging API

Create new channel

Select provider:可以勾選已經存在的 provider,若沒有則新增一個 provider。

好了,就按 〈Next Page〉

輸入 provider name

完成相關資料輸入 => App icon、App name、Description、Category、 Subcategory、 Email address、 Privacy Policy URL、 Terms Of Use URL

Confirm:確認輸入資料正確性

channel 建立成功

更改 channel setting

Channel ID 及 Channel Secret 很重要,不要外洩!

這邊不用填 =>

最下面那個選項 Channel access token ,點選 Issue 可以產生 Channel access token

設定 Time until token 有效時間

點選 Issue ,產生 token,這串 token 可用於 專案中。需要用到時再來查詢也可以。

Messaging settings:

  • Use webhooks 切換成 Enabled
  • Webhook URL :先留空白,等建立 Webhook URL 後,再回頭設定

這邊不用設定,最下面有 chatbot 的 QR code ,用於加入好友。

點選 Set message 會連到 LINE official Account Manager,有下面幾個畫面:

主頁 可以設定:群發訊息、貼文串、加入好友的觀迎訊息、自動訊息……

到此,已完成 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

建立 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

如果電腦有安裝 heroku CLI,則可以於專案資料夾路徑執行下面指令:

heroku login

會與連結到 heroku 網站,點選 log in

再回到 CLI,已登入 heroku

建立一個 heroku app

heroku create

成功建立,左邊是 app 網址,右邊是 git push 位址

可用 git remote -v 指令來查詢

將專案 push heroku master

git push heroku master

push 後,會偵測哪一種語言撰寫的 app、建置 runtime environment、Installing binaries、Installing dependencies(相關套件)

Discover process type(因為我們在專案中有建立 Procfile,讀取到 web)、Compressing、Lauching 、發行版次

查看 heroku logs

heroku logs --tail

這裡出現二次同樣的錯誤訊息:使用 npm start 來啟動卻失敗

原因是,我們在 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"
 },

再 git push heroku master

然後查詢 logs

補充:有另一個查看 heroku logs 的方式

至 heroku 該 app,右上角

點選 View logs

View logs 的下方有 View webhooks 的選項,有空再來了解。

官方 Webhooks 的介紹: https://devcenter.heroku.com/articles/app-webhooks

到此我們已佈署至 heroku ,但這樣還不夠。

需要設定 heroku 的環境變數,server 啟動後,需要以下三個參數,server 才能與 LINE 對接。使用 heroku config:set 指令,設定 CHANNEL_ID、CHANNEL_SECRET、CHANNEL_ACCESS_TOKEN 三個參數

heroku config:set CHANNEL_ID=2354872938 CHANNEL_SECRET=981374asf9817398asdf CHANNEL_ACCESS_TOKEN=q3985sdlkfgjdklfgj;aiu34qulqwjrkbsdf/awf/rkqu435ruas;dfklj/dskfb/dal.f/.,mvoq8rukaegp9q8971982354r;lkhj/sdfgkva;sifu;wef

最後可用 heroku config 指令來查詢設定的環境變數

這時候,打開 app 網頁

heroku open

會出現像這樣的畫面

回到 LINE developer ,將 webhook URL 填入

將 Webhook URL 輸入後,點 Update, verify 後若出現 Success 訊息就代表成功了!

在 LINE Official Account Manager 也可以設定 webhook URL

接著,試著加入好友:掃描 QR code 或 用 ID 加入好友

加入好友,試著傳個訊息

chatbot 都在 repeat 我傳的訊息,not ok!

修改一下回傳訊息

app.js:修改中間 bot.on 裡面的判斷式 =>

...bot.on('message', function (event) {
 console.log(event);
 switch (event.message.text) {
   case '你':
     event.reply('我快餓昏了,拜託你!')
     break
   case 'hi':
     event.reply('我等你等好久了,給我東西吃!')
     break
   case 'hello':
     event.reply('我沒心情跟你說 hello,我需要食物!')
     break
   case '天氣':
     event.reply('別管天氣了,我餓到快沒力氣了!')
     break
   case '聽說':
     event.reply('聽說什麼,你沒聽到我說我肚子好餓嗎?')
     break
   case '問':
     event.reply('問什麼不重要,重要是我肚子好餓,給我東西吃!')
     break
   case '說':
     event.reply('說什麼說,不要再說了,等吃飽再說吧!')
     break
   case '名字':
     event.reply('我叫小雞,你是我的主人,你不知道嗎?')
     break
   case '媽媽':
     event.reply('你就是我媽,我受不了!')
     break
   default:
     event.reply('不要再說了,我肚子好餓,趕快餵我!')
 }
});app.post('/', linebotParser);...

然後換一下圖片(基本檔案圖片) =>

預覽一下 =>

試著傳送訊息 =>

實作 success!

結語

因為有架設 Express server 的基礎,所以學起來很快。

LINE Official Account Manager 提供的操作界面其實也很方便,都可以製作客製化訊息。但不確定能有多大彈性。

如果我想要發送狗圖或貓圖網址給使用者,或依使用者提供的關鍵字傳送天氣預報給使用者,可能還是得靠 server 來完成。

掌握Express基礎,習得打造兼具前後端Web App的能力

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

探索「全端 Web App 開發」課程

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

加入 ALPHA Camp 學程式開發

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|JavaScript 完整前端基礎

系統化學習 JavaScript

實作打好前端基礎,成為扎實的網頁開發者

11/19前報名學期一,搶先旁聽「電商專案線上Demo Day」
報名參加