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串起來喔~!





這個網誌中的熱門文章

Jquery on scroll 事件

快速安裝Django(Mac)

開始寫Django模組