🍄 神秘創作 / 🕷 網頁學習

最近不知道為什麼一股勁地想繼續玩 node，於是想起了 ChatBot 這個稍稍有點過時的東西（…我潛意識總是要延遲個幾年才開心啊哈哈哈）終於有點時間可以打這篇文章～

本篇文章共有三頁，分為　1. 開發動機　2. 步驟紀錄　3. 成果紀錄

前幾年程式圈就非常流行，但身為一個不太專注於後端開發的人就會自動忽略、不甘我的事一樣，但其實我內心非常想玩聊天機器人，除了對背後邏輯和腳本安排感興趣之外，也很好奇在各種通訊平台上會怎麼使用，所以呢，開啟了我一小段 ChatBot 開發之旅，首先先介紹什麼是聊天機器人，懶惰地貼上了維基百科的簡介…😂

聊天機器人（ChatBot）是經由對話或文字進行交談的電腦程式。能夠模擬人類對話，通過圖靈測試。

AI（Artificial Intelligence，人工智慧）不僅是近年來的議題，更因此創造了很多新的開發職位和商品，不過對於小老百姓來說，我們頂多看看電視新聞、演講才能見到一些實體裝置，或是購買一些像 Siri 一樣的語音智能裝置，只有 ChatBot 是一般民眾最輕易接觸到的管道，這也就是為什麼網路無弗屆，也是為什麼我很喜歡網站開發的原因吧！哈哈哈…

其實我跟 ChatBot 也算是有些緣分… 先不說早些年對於科技藝術的想法（不然想到「圖靈測試」就覺得可以說的事情好多好多喔……）在工作上，最早是先遇到我的後端同事在玩 Facebook 粉專的機器人，他是透過 Messenger API 串接，當時的我真的是滿好奇的，不過就是沒有動力去碰，大概是對幾年前 Facebook 亂七八糟的 API 深感恐懼所落下的陰霾～😂

然後，剛好在去年一個特殊專案上，寫了一個假的通訊畫面並與文案搭配做了一系列有趣的聊天對話，當時編寫腳本才開始正式思考腳本走向的邏輯判斷（我想前陣子猛玩遊戲絕對是有些幫助der😂），讓我進一步對腳本的判斷有了更多的想像……

之後另一個專案與實驗室和多位文案合作詩句的機器學習後，加深了我對於中文複雜語句的判別概念，同時也體會到自然語言是什麼樣的東西，雖然我還是不會寫自然語言啦！（我的天啊！我根本麻瓜一個😂）不過經過以上這些事情倒是給了我不少衝擊～或者可以說是緣份吧！

所以呢，閒暇之餘我就想來親自看看聊天機器人到底是什麼？到底能玩出什麼？！
因為一開始我就決定使用 nodeJS 來開發，所以都是找 nodeJS 的相關教學！（因為我好像也只會Ｊ個…）我也因為常常忘記自己怎麼寫的，稍微紀錄一下步驟，搞不好之後自己還可以抄自己的(?!)

我先隨性地 Google 前人們的教學，很慶幸也很感謝有好幾篇我看得懂的文章！😂依據他們專業且詳細的步驟，也能做出你自己的 ChatBot，我主要參考以下兩篇文章，先貼上來以表尊敬和感激：

開發 Line 機器人只能用官方帳號才能使用，所以要花一點時間設定好相關的東西～

簡單來說整個流程就是：建立官方帳號 → 撰寫程式串接 Webhook → 架到雲端上

是說第一次記錄這種程式步驟😳 有點興奮耶哈哈哈

STEP 1. 先把環境和該裝的東西先裝好

node 環境依據個人需求安裝，網路上有很多相關文章可以參考喔！（因為我還沒有空寫 node 入門教學…我很抱歉啦 orz）
假設環境設定完成，我們的第一步，毫無疑問地，先用 node 初始化一個專案吧！

$ npm init

接下來安裝 linebot 套件！
我自己是使用上面這個套件，覺得他的寫法還滿方便易懂的，另一個是官方提供的 SDK line-bot-sdk-nodejs，因為我就是覺得看官方文件太累…ˊ_>ˋ 所以才用這個外掛啦哈哈哈，也許你可以自己試試看官方的外掛喔！

$ npm install linebot --save


STEP 2. 依據套件規範的寫法先複製貼上

先建立一個 index.js 檔案在資料夾下，如同官網上面所寫的，把這整段複製貼到 index.js，我用我的外星語說明以下程式碼喔～

// 載入外掛
var linebot = require('linebot');
 
// 設定bot的憑證資料
var bot = linebot({
  channelId: CHANNEL_ID,
  channelSecret: CHANNEL_SECRET,
  channelAccessToken: CHANNEL_ACCESS_TOKEN
});
 
// 新增訊息傳遞事件，'message'表示當偵測接收到訊息時
bot.on('message', function (event) {
  // 執行機器人回應
  event.reply(event.message.text).then(function (data) {
    // 當回應成功時回傳...
  }).catch(function (error) {
    // 當回應失敗時回傳...
  });
});
 
// 開啟一個 Port 為 3000 的伺服器，並將路徑設定在 linewebhook
// 基本上就是在本機開啟 http://localhost:3000/linewebhook
bot.listen('/linewebhook', 3000);

至於中間的憑證需要申請一組 line 官方帳號才能使用，以下繼續介紹…


STEP 3. 申請 Line 官方帳號以及建立 Channel

到 Line Developers 上申請開發者帳號，我記得申請有一點麻煩，要手機帳號做認證，總之進去之後在 Poviders 新增一個 Channel，點選「Messaging API」，然後再自己填一填這個 Channel 的基本資料喔！


STEP 4. 調整設定

建立好 Channel 後，點擊「Channel settings」，就能看到下面的畫面：

有沒有覺得我的 Channel 大頭照很帥呢 😂😂😂


因為要用程式判斷做回應就不需要自動回應功能，自動回應功能就是在後台 Line@ Manager 上設定，請先把這個調成「Disabled」


我們即將要串的程式就是 Webhook，請先把這個調成「Enabled」


Webhook 是什麼？先貼一下維基百科上的答案😂

網頁開發中的webhook是一種通過自訂回呼函式來增加或更改網頁表現的方法。這些回呼可被可能與原始網站或應用相關的第三方用戶及開發者儲存、修改與管理。術語「webhook」由傑夫·林德塞（Jeff Lindsay）於2007年通過給電腦編程術語「掛鉤」（Hook）加上字首得來。

Webhook 通常用在第三方 API 的串接，所以需要有憑證確認要回應的網站，才不會被不知名人士假冒身份回應！

然後我個人覺得讓機器人群聊是件非常有趣的事情，我就把這個選項開起來！！！


STEP 5. 取得憑證

設定裡面還可以找到「Channel ID」、「Channel secret」、「Channel access token (long-lived)」，分別對應第二步程式碼：
「Channel ID」- CHANNEL_ID
「Channel secret」- CHANNEL_SECRET
「Channel access token (long-lived)」- CHANNEL_ACCESS_TOKEN
請直接複製貼上字串，記得加上引號喔！

馬賽克的地方請填上自己的憑證碼


STEP 6. 連上 Webhook，用 ngrok 在本地端測試

因為 Webhook 的測試需要 https 的環境，因此要在本地測試不容易，參考網路上大大們的做法，都是採用 ngrok 做本地測試，它會提供一組浮動網址，這樣就不用在測試期間一直把檔案上傳到網路上～我最早是拿 ngrok 做外網測試，之前都沒注意過它有提供 https 的服務耶哈哈哈😆


ngrok 的使用很簡單，你只要申請帳號，它就會給你這個帳號特定的憑證，依據它給的四個指令步驟，執行就會產生以下這個畫面了！

馬賽克的地方請貼上網址

然後一樣回到 LINE Developers 的 Channel settings 設定裡，找到「Webhook URL」，貼上 ngrok 產生的 https 網址，並點擊「Verify」驗證該網址的憑證是否正確，正確它就會回傳「Success」，若是失敗可以看看憑證碼有沒有貼錯喔！

這個時候你就可以去官方帳號找到你自己的 Channel，加為好友後，在本地測試看看是否有收到訊息！


STEP 7. 連上正式的 Webhook，用 Heroku 發佈到雲端

Heroku 是知名的雲端服務平台，因為提供了 https 服務，所以很多人都用 git 直接上傳到這裡，如果沒有自己的空間，可以先用 Heroku 感覺一下！免費的帳號可以創建五個 app，詳細的步驟我就不說明了，網路上可以找到很多教學，其實申請好一個 app，它上面都會教你打指令，依據指令就可以順利上傳檔案了！

不過需要注意一點的是，我們需要讓主機自動讓 nodeJS 跑起來，我之前在研究上傳到 Heroku 也是找好久喔！！所以記在這邊提醒，希望你我都不要再找不到路了～
兩個地方需要修改成 Heroku 能使用的程式碼：

1. 在 package.json 上加上自動啟動 index.js 程式：

  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  }


2. 在 index.js 裡找到這行：

bot.listen('/linewebhook', 3000);


把原本的 3000 port 拉出來改成

const PORT = process.env.PORT || 5000;
bot.listen('/linewebhook', PORT);


一樣用 git 上傳上去，接著一樣找到 LINE Developers 的 Channel settings，把原本在本機測試的網址改成線上的正式網址，一樣點擊「Verify」後驗證，回傳「Success」就表示成功嘍！


如果發生沒有回應，或是想要看看 Heroku 伺服器上面回傳的東西和錯誤，可以打開右上角的「More」>「View logs」


這邊就可以看到伺服器背後的狀況，並解決 bug 嘍！


先附上一張可愛的 ChatBot 回應測試！

有沒有很可愛？！！還能放貼圖呢！😍😍😍

以上基本上就是在 Line 上面執行 ChatBot 的方法了！


其他補充

接下來，簡單提供一些 Line 回應的語法說明：

一般回應的地方大概長這樣，可以直接打上要回應的文字：

event.reply('Hello, world').then(function (data) {
  // success
}).catch(function (error) {
  // error
});


這種 Webhook 都是採用 json 檔案傳遞資料，所以也提供物件的方式回應，而每個回應也有分類型，文字、貼圖、圖片、影片、語音…等等：

//回傳文字
event.reply({ type: 'text', text: 'Hello, world' });
//回傳圖片
event.reply({
  type: 'image',
  originalContentUrl: 'https://example.com/original.jpg',
  previewImageUrl: 'https://example.com/preview.jpg'
});
//回傳貼圖
event.reply({
  type: 'sticker',
  packageId: '1',
  stickerId: '1'
});

也可以多個連續回應，這時就要使用陣列包起來！

event.reply([
  { type: 'text', text: 'Hello, world 1' },
  { type: 'text', text: 'Hello, world 2' }
]);

同理你也可以放不同類型的物件，例如我上方的截圖，就是在陣列裡先放了文字、再放貼圖，這樣就可以連續傳一堆垃圾話惹！（誤

event.reply([
  { type: 'text', text: 'Hello, world 1' },
  { type: 'sticker', packageId: '1', stickerId: '1' }
]);


除了這些基本的對話方式，Line 還有提供一些選擇題和清單之類的範本：

event.reply({
  type: 'template',
  altText: 'this is a confirm template',
  template: {
    type: 'confirm',
    text: 'Are you sure?',
    actions: [{
      type: 'message',
      label: 'Yes',
      text: 'yes'
    }, {
      type: 'message',
      label: 'No',
      text: 'no'
    }]
  }
});


因為這些範本涉及樣式排版，不可能每次都盲改，所以 Line 官方也提供了一個軟體叫做「Line Bot Designer」，主要是給腳本設計人員設計好，再把這些 json 檔給程式人員貼上，但為了可以快速找到自己喜歡的樣式，也可以從這裡面調整好再丟上去喔！

另一個是 Line 貼圖的 Id，官方有提供貼圖 id 使用喔！
在 Line 的 Messaging API 中的 sticker-message 有提供，請點擊「Sticker list」，就可以看到機器人可以使用的貼圖嘍！
有朋友問我說：「我可以買貼圖給他嗎？」😆
請不要買貼圖給機器人，他應該不能這麼做啦哈哈哈，大家真的好可愛唷！

至於判斷寫法，我並沒有用特別的功能，像是串自然語言之類的東西，只是回應腳本，都用呆呆的 else if 和 switch 條件式判斷就夠用了，可能有更好的辦法，如果有好心人可以再提供給我～哈哈哈

詳細的語法其實都在 linebot 套件上面都有寫，也有提供其他事件的監聽，請再自己去參觀看看喔～

最後，我實作了一隻 LineBot 叫做 Chat-DOMO！

我為這隻 Bot 寫了一點腳本～
DOMO 是一位來自 8+9 星球的機器人～跟我一樣有點人格分裂～😌
以下我來貼貼我們相愛相殺的範例吧！！！

一被加入群組就會自動發一段開場白～
然後不管你說什麼他就是會亂回你～
還會吹口哨喔 XDD
如果說他「沒禮貌」或「吃大便」他會玻璃心喔 XD
平常回話還是兇巴巴的～傳貼圖他也會回你貼圖喔！
重頭戲來了！輸入「DOMO」就會有神奇事情發生喔！
每次的開場白也都不太一樣～
點擊「呼叫神奇DOMO」，出現惹！DOMO MAGIC！

點選「跟我玩」就會出現我做的無聊 APP，這感覺就可以放作品集耶～～😍
還可以點擊「聽我說」，就會有我準備的五個語音笑話喔！😂
點選「看美照」會給你 DOMO 的美照，還有其他隨機的彩蛋啦～～
若 DOMO 打成其他的 Domo 會有別的回應喔！
當然你覺得太吵可以請他閉嘴，他就不會隨便回應你了！
如果要還原閉嘴功能就可以點「我想聽你練肖話」，他就會你講一句就回兩句 XD
如果在群組或群聊裡面覺得他太吵，要請他出去，請輸入「滾」
退群之前他還是會撂下一句話的哈哈哈

這就是敢愛敢恨的 DOMO，白目但很可愛呢～～就是一個小屁孩～😌
寫這些腳本，然後再跟自己的機器人對話，這真的會人格分裂耶～😂

第一次嘗試加入朋友群組玩，有得到一些回饋，才修正了 DOMO 2.0！朋友都說加了貼圖回應就變得非常人性化了呢！還想買貼圖送給他！～😳他真的是隻機器人，大家不要對他太認真惹～希望之後若是能加入自然語言可以讓他更進（ㄎㄠˋ）化（ㄅㄟˇ）😂😂😂

如果想跟 Chat-DOMO 玩可以到官方帳號那邊搜尋 DOMO 的 id：@ytl7154k 或是掃下方的 Qrcode，不過目前帳號為免費的，所以呢…有訊息上限限制，如果懶得加好友，也可以直接丟群組唷～

這次嘗試開發 ChatBot，覺得很新鮮之外，也開始構思一隻機器人到底可以做到什麼地步，讓使用者感受不同呢～市面上大多的 ChatBot 功能幾乎都是用在商用價值，讓他成為某種客服人員、協助你購買某些東西或頂多是算命抽籤等等諸如此類的功能，其實這個模式就跟選擇題的選項是一樣，可是我常在想這些對答其實就是用文字描述，通常語句很中性，客觀到像客服人員一樣的官方說法，不過這樣好像失去了開發 ChatBot 最驚人的潛力，我們讓他有其生命背景、甚至是人物形象呢？

我腦中第一個浮現的就是早期在噗浪用的掰噗，現在 Line 上面也有很知名的卡米狗，當然還有其他比較非直接商業用途的機器人，現在也越來越多這種類型的機器人，自然語言、機器學習也是越來越多討論，就算讓 ChatBot 如客服人員般工作，但相比之下大多數的人類還是喜歡跟真正的人詢問，若能讓 ChatBot 用文字的呈現做到像人一樣的樣貌，AI 就已經成功進展一大步了～雖然我不懂啦，我就麻瓜，但是會持續觀察這樣的動向的！☺️