ChatBot 聊天機器人教學(第一集)

4月 09, 2018

ChatBot 聊天機器人教學(第一集)

有鑑於太多客官(也沒很多 10幾 20個而已~)和阿傑老師反應 fb的聊天機器人怎用?

阿不會自己看官方說明文件喔!!(挖鼻孔)

人家我也是以秒計費耶~ (這裡沒有反白)

好啦~ 誰叫老師是柔情似水鐵漢子體雄勾稿威(不是一樣!?)的雙魚座呢

阿傑老師就來說明說明應該怎樣串接這屌爆的fb 聊天機器人喔~

廢話不多說~來我們開始來玩聊天機器人摟~(以下內容參考官方文件說明)

一基礎配置

Step1: 非常重要!! 你要有 Node (啥毀!? 阿沒有Node 都去吃xxx喔!?)

關我屁事 @@ 官方現在是這樣要求啦 (這裡沒有反白)

工商時間阿傑老師目前也正在開發聊天機器人喔~(APP與Web 都能輕鬆整合~)

Step2:設置 Webhook

Your webhook is the core of your Messenger bot experience. This is where your code lives, and where you will receive, process, and send messages.

In this guide, you will learn how to set up a basic webhook that supports the Messenger Platform's required webhook verification step, and is able to accept webhook events.

阿傑老師神翻譯: webhook是啥? 很重要跟著做就對了別問!! (老外寫一堆我一行就處理掉了~)

Webhook 照著做模式開啟:

開啟您的終端機(Mac) / 命令提示字元(Window)

1.創建一個資料夾

AppledeMacBook:Apple$ mkdir ajchatbot

2. cd 到你要把專案建立在那的資料夾~(cd是啥? 可以吃嗎? ......同學瀏覽器右上方有個xx 點下去~)

AppledeMacBook:Apple$ cd ajchatbot

AppledeMacBook:ajchatbot Apple$

3.創建一個空的index.js 文件

AppledeMacBook:ajchatbot Apple$ touch index.js

touch 是 mac 的指令使用 window 打 touch 會顯示此指令無效
別擔心 windows 輸入 type nul>index.js

4.創建package.json。完成默認設置。

AppledeMacBook:ajchatbot Apple$ npm init

5.繼續安裝 http server 框架的模組 express

AppledeMacBook:ajchatbot Apple$ npm install express body-parser --save

照過來~ 別小看這 --save喔記得每次安裝模組時順手捐發票(喂~!)
順手把 --save 寫上喔這樣在安裝模組同時,
也會把配置儲存到 package.json

6.下一步下一步先選下一步以後再回來補package 的其他內容
創建完成後應該可以看到資料夾下會產生這些檔案資料

index.js
node_modules
package.json

7.創建 HTTP Server

來開啟剛剛創建的空 index.js檔案
用啥開? 記事本就可以~(誤)

來看一下~工商時間阿傑老師來推薦一下超屌的開發工具, 有多屌? 自己看

Visual studio Code

有開發工具了再來開啟 index.js
寫上以下代碼

'use strict';

// 置入依賴關係並設置http服務器
const
  express = require('express'),
  bodyParser = require('body-parser'),
  app = express().use(bodyParser.json());

// 成功時設置服務器端口和日誌消息
app.listen(process.env.PORT || 1337, () => console.log('webhook is listening'));

大概說明一下:
以上代碼創建一個HTTP服務器，用於在默認端口上偵聽請求，
如果沒有默認端口，則創建端口1337。
本指南使用Express，一個流行的輕量級HTTP框架，
但您可以使用任何您喜歡的框架來構建webhook (首推Express)

這些都是很基本的 node 寫法老師以後會開課教學一下~

8.再來繼續添加一個Webhook端口

以下代碼添加到 index.js

// 產生Webhook端口 
app.post('/webhook', (req, res) => {  
 
  let body = req.body;

  // 檢查這是來自頁面訂閱的事件
  if (body.object === 'page') {

    body.entry.forEach(function(entry) {
      let webhook_event = entry.messaging[0];
      console.log(webhook_event);
    });
    res.status(200).send('EVENT_RECEIVED');
  } else {
    res.sendStatus(404);
  }

});

9.添加Webhook驗證

以下代碼添加到 index.js

// 向我們的webhook添加對GET請求的支持
app.get('/webhook', (req, res) => {

  // 您的驗證 Token。 應該是一個隨機字符串。(之後會說明)
  let VERIFY_TOKEN = "<YOUR_VERIFY_TOKEN>"
    
  // 解析查詢的參數
  let mode = req.query['hub.mode'];
  let token = req.query['hub.verify_token'];
  let challenge = req.query['hub.challenge'];
    
  if (mode && token) {
  
    // 檢查發送的模式和 Token 是否正確
    if (mode === 'subscribe' && token === VERIFY_TOKEN) {
      
      console.log('WEBHOOK_VERIFIED');
      res.status(200).send(challenge);
    
    } else {
      res.sendStatus(403);      
    }
  }
});

10.測試一下web hook 是否正確運行
cd 到 ajchatbot 然後執行

AppledeMacBook:ajchatbot Apple$ node index.js

執行成功的話我們可以看到 webhook is listening

11.在開啟一個終端機將我們的驗證 Token 代入此cURL請求來測試webhook驗證：

AppledeMacBook:ajchatbot Apple$ curl -X GET "localhost:1337/webhook?hub.verify_token=<YOUR_VERIFY_TOKEN>&hub.challenge=CHALLENGE_ACCEPTED&hub.mode=subscribe"

還記得我們有設置一個port 嗎？

app.listen(process.env.PORT || 1337

這兩邊的Port 必須一致才有效

若執行正確你會看到:

WEBHOOK_VERIFIED 記錄到您的節點進程正在運行的命令行。
CHALLENGE_ACCEPTED 記錄到您發送cURL請求的命令行。

12.通過發送這個cURL請求來測試你的webhook：

curl -H "Content-Type: application/json" -X POST "localhost:1337/webhook" -d '{"object": "page", "entry": [{"messaging": [{"message": "阿傑好帥"}]}]}'

若執行正確你會看到:

阿傑好帥記錄到您的節點進程正在運行的命令行。
EVENT RECEIVED 記錄到您發送cURL請求的命令行。

基本上到這邊已經完成拋接的基本架構
目前是在 localhost運作

同學們可以試試放在server上面來測試看看

老師記得 AWS EC2 好像有試用免費的優惠?
或者也可以選擇使用 Heroku 或自己架設的主機

請注意
您的webhook必須部署到具有有效SSL證書的服務器，以便它可以通過HTTPS接受請求。

一旦您的webhook部署完成，請嘗試再次運行上面的測試cURL請求，以確保一切正常。
記得要把主機的url或ip 替換掉localhost啊...
不然你測到死都測不出來的＠＠

機器人基礎配置大致上是這樣
下一堂課再來說說怎樣把機器人跟你的APP串起來喔~!

搜尋此網誌

阿傑通通學