使用 IBM Bluemix 打造的 Facebook 天氣播報機器人

使用 IBM Bluemix 打造的 Facebook 對話機器人,歡迎和我聊天喔~

Facebook Messager API <—--> Broker <—--> Weather Bot

我們要建立一個與Facebook API綁定的代理人(broker) app,當有人在Facebook粉絲頁發送訊息時,它就能收到,broker會接續處理這個訊息並對 weather bot 發送要求。weather bot 會透過 IBM Bluemix Natural Language Classifier來判斷使用者需要怎樣的資訊。

最後,weather bot會對 IBM Bluemix Weather Insights 發送一個需求來取得指定地區的天氣資料,最後回送到 Facebook messeger。

(Github請點我)


1. 事前準備

您需要安裝以下工具。

Linux使用者,請用套件管理器來安裝所需的套件 (大部分都已經裝好了)

Windows使用者,請分別從以下連結來安裝

  1. git https://git-scm.com/download/win
  2. python https://www.python.org/ftp/python/3.6.0/python-3.6.0a3-amd64.exe
  3. cloudfoundry-cli https://github.com/cloudfoundry/cli/releases

另外,您當然也需要一個 IBM Bluemix 帳號。

2. Broker設定

請在 Windows 命令提示字元輸入以下指令來取得本專案所需程式碼:

git clone https://github.com/YuanYouYuan/Bluemix-tutorial.git

切換到 Bluemix-tutorial/facebook-weather-bot/broker 資料夾,編輯 manifest.yml,將 name 與 host  改成您喜歡的名稱。但這名稱不可重複,否則 server 在 push 上去時會失敗。

applications:
- path: .
  memory: 256M
  instances: 1
  domain: mybluemix.net
  name: yourname-broker
  host: yourname-broker
  disk_quota: 1024M

3. 建立 Facebook 粉絲頁與應用程式

建立一個新的 Facebook 粉絲頁,我使用的名稱為 Circle Chatbot(已可使用,歡迎聊天)

接著請到 Facebook 開發者頁面來建立一個應用程式,名稱任意即可,在此我使用的名稱為 myTemboo。

fb_developer

在您所建立的 app 頁面左側選 ‘Add Product‘ -> ‘Messenger‘ ,代表這個 app 要加入 messenger 功能。

add_product

001

4. 產生粉絲頁Token

請點選[Select a Page]來選擇您的粉絲頁,並複製該粉絲頁的 access token,這時會跳出相關視窗要求您確認這個app可執行的權限,確認完畢之後就會看到 token

002 003

004

回到方才 git 下來的資料夾中, 請編輯app.js並更換 var token 內容。

var token = "pasteYourAccessTokenHere";
var host = (process.env.VCAP_APP_HOST || 'localhost');
var port = (process.env.VCAP_APP_PORT || 3000);
app.listen(port, host);

請用下 python 檔來設定 access token,完成如下

python set_fb_access_token.py  "pasteYourAccessTokenHere" (對,就是一大串直接貼了)

如果出現找不到 request 這個python 相關模組的錯誤訊息,請執行以下指令來安裝:

pip install requests

003

使用 cloudfoundry-cli 來發布這個 app

cf login -a https://api.ng.bluemix.net
cf push

如果無法透過 cf 來登入,請確認您的 organization 與 space 都設定正確,請注意地區(locale) 要設為美國南部(US South). API point 要設為 https://api.ng.bluemix.net

如果 Bluemix UI 在您首次登入沒有自動導引您去設定以上步驟的話,請在 Bluemix 網站下建立一個新的 CloudFoundry,並選擇任一種 SDK (沒有用到也可以),這樣做會自動呼叫設定精靈。

5. 設定Webhooks

broker app成功在雲端執行之後,請回到Facebook 開發者頁面來設定 webhook。

webhook

  • Callback URL:填入 broker url (e.g. https://yourname-broker.mybluemix.net/webhook )
  • Verification Token:fb_weather_bot_verify_token   (就是這串字,不是您的粉絲頁 token)
  • Subscription Field:
    • message_deliveries
    • message_reads
    • messaging_optins
    • messaging_postbacks
    • message_reads 都要勾選

005

請回到您的粉絲頁,將 webhook 與粉絲頁事件( page events ) 掛起來。

6. 設定Weather Bot

建立所需的 Bluemix 服務:.

cf create-service natural_language_classifier standard yourname-weather-bot-NLC 
cf create-service weatherinsights Free-v2 yourname-weather-bot-WI

編輯 Bluemix/facebook-weather-bot/weather-bot/manifest.yml,填入您的名稱:

applications:
- path: .
  memory: 256M
  instances: 1
  domain: mybluemix.net
  name: yourname-weather-bot
  host: yourname-weather-bot
  disk_quota: 1024M
  services:
  - yourname-weather-bot-NLC
  - yourname-weather-bot-WI

使用 cf 來發布,它會在您的 Bluemix 下建立一個 weather-bot app,並綁定方才您所建立的服務。

cf push

現在您可以觀察 app 的狀態,請看看是否正確運作。

cf apps
cf logs yourname-weather-bot --recent
cf logs yourname-borker --recent

7. 訓練Natural Language Classifier

首先要取得本服務的 credential key。請輸入以下指令來檢視weather-bot app 的環境變數(environment variable):

cf env yourname-weather-bot

請將 natural language service 的 credential 複製起來,並另存新檔於 Bluemix-tutorial/facebook-weather-bot/weather-bot/NLC 路徑下,檔名為 credential.json。其內容看起來如下:

{
 "password": "PLX7Ua3YeZaK",
 "url": "https://gateway.watsonplatform.net/natural-language-classifier/api",
 "username": "c918a7f7-6f5e-4f7a-8426-4c2080645cca"
}

請將訓練檔 weather_data_train.csv 上傳到 Bluemix 並建立一個分類器(classifier)。訓練過程可能需要一點時間 (我有碰過 10分鐘的…)

python NLC_create.py

請執行 NLC_status.py 來檢查狀態

python NLC_status.py

訓練完成之後,可用 NLC_test.py 來檢查 NLC 是否正常運作:

python NLC_test.py

將新的 app 推上 Bluemix 吧

cf push

8. 操作

登入 Facebook 來與您的 weather-bot 聊天吧!輸入 weather 可以回報台北的天氣,hot/ cold 則會回報溫度喔!

fb_chatbot

9. 問題排除

如果您碰到 404 error,可能是 weather-bot app 故障或意外中止,重開一次就好:

cf restart yourtname-weather-bot

10. 設為公開

到目前為止,這個 weather bot 都是非公開的,應該說粉絲頁本身是公開的,但不是所有人都可以操作。請回到該 Facebook app 頁面完成 Messenger 相關的設定之後提交,約2~5天之後就可以開放給所有人使用了。

14037464_1117281198351639_567371543_o

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *