Category Archives: IBM Bluemix

使用 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

[IBM Bluemix] 對話機器人 – LinkIt Smart 7688 結合 IBM Watson 語音轉文字服務,再搭配Google小姐

7/22 在T客邦創客 night 分享的  IBM Bluemix 對話機器人做法來囉,一起來玩玩看吧,記得在家玩就好,不然對著板子講話…  這個畫面有點詭異

技術協力:CAVEDU 講師   袁佑緣

功能簡述如下:

  • 聽:Watson Speech to Text service
  • 說:Google Translate Text to speech (Google 小姐~)
  • 對話與整合:7688 + node.js

所需硬體:

  1. LinkIt Smart 7688 / LinkIt Smart 7688 Duo
  2. USB 接頭之雙孔音效卡,一個接麥克風一個接喇叭 (例如這種很容易買到,$150~$200很便宜)
  3. 麥克風 / 耳機 – 如果是個人測試用的話,選用耳麥就好
  4. micro SD卡 (8G即可),插在 7688 之SD卡插槽

軟體建置:

  1. 讓您的 LinkIt Smart 7688 連上外網,當然啦,要連到 IBM 的大腦
  2. 按照此 Github 頁面,在 LinkIt Smart 7688 的 terminal 中安裝所需的套件

示範影片,請記得開喇叭喔,這是 LinkIt Smart 7688 在執行程式時的 terminal 畫面,可以看到畫面中不斷顯示 Watson 丟回來的辨識結果,你好也會被辨識成“離 好”、”黎 好”等等,搭配相關的 confidence 參數就可以知道您的口音是否標準… haha

男聲(CAVEDU講師) 與 Google 小姐( 7688 的語音輸出功能)

 

 

[IBM Bluemix教學系列] 第一章 Node.js與Node-RED介紹

Node.js與Node-RED介紹

請先閱讀:[IBM Bluemix教學系列] 第零章 IBM Bluemix 介紹

Node.js

因為接下來的Bluemix系列教學將會使用到Node.js作為主要語言, 所以我們就來談談Node.js這個程式語言吧!

首先是一些入門教學網站: http://www.nodebeginner.org/index-zh-tw.html http://www.tutorialspoint.com/nodejs/

相比起其他語言,Node.js算是年紀相對輕的, 最早於2009年首次釋出在Linux作業系統上, 一直到發展到現在在各大平台皆適用, 並與瀏覽器的引擎發展息息相關。

Node.js基於javascript可以用來做伺服器端或者網路相關的應用, 並且還可以搭配許多模組快速開發及進行各種實做, 與Python類似的,Node.js有一個專屬的套件管理,叫做NPM(Node Package Manager), 讓使用者可以輕鬆的通過一行指令就下載並安裝相對應的套件, 同時也能將自己的套件打包好上傳到雲端, 將來我們要使用IBM Bluemix的套件時將會用到同樣的原理。

整體來說,在接下來的IBM Bluemix開發都會在雲端上進行, 所以您的電腦上並不需要安裝Node.js, 但是為了進行本章範例的操作, 請您從官方網站下載Node.js並安裝。

https://nodejs.org/en/download/

安裝完成後,請打開Terminal(終端機)輸入”node”, 您將會看到一個跟python shell十分相似的互動式命令列, (正式名稱叫做REPL, Read-Eval-Print-Loop) 您可以直接在上面輸入一些指令並得到回應。

http://www.tutorialspoint.com/nodejs/nodejs_repl_terminal.htm

有了Node.js之後,我們先不急著開始寫我們的程式, 關於Node.js語法的特性不是本章著重的目標, 因為我們將介紹一種圖像化的開發界面—Node-RED。

Node-RED

Node-RED 是由IBM Emerging Technology所製作, 一款基於Node.js並門用在物連網的視覺化套件, 裡面整合了許多的服務,甚至能擴充IBM Bluemix的雲端服務API。

Node-RED GitHub https://github.com/node-red/node-red

如果要安裝Node-RED的話其實只要在Terminal(終端機)上輸入”npm install -g node-red”, 就可以從npm上下載套件並自動安裝了,另外請注意這像指令可能需要賦予超級使用者的權限, 如果是OS X/linux的使用者請在指令前面加上sudo, Windows的使用者則是用管理者權限去執行命令提示字元(Windows下的命令列)。

安裝完成後,請在Terminal上輸入”node-red”, 您應該可以看程式會自動在http://127.0.0.1:1880/ 下生成一個server, 請您用瀏覽器打開此網址,成功進入Node-RED的樣子如下:

Node-RED 一下

最後我們就來試試一些簡單的範例,並藉此了解Node-RED的操作模式與特性吧! 請先在左邊Input的欄位拉出一個inject元件, 您會發現在拖曳完成後它會變成了timestamp, 這是代表了一個時間戳記(對應到每一次的輸入),

您可以用滑鼠雙擊timestamp的元件看到裡面的inject設定,

點擊payload您可以看到裡面有許多種資料類型可以去設定, 在個範例中我們先試著輸出文字,所以請點選string那一欄, 並輸入”Hello”,並把下方的Repeat設定成interval, 預設會每1秒送出一次訊息。

接下來再從output那一欄拉出debug這個元件, 您一樣會發現在完成拖曳後它會變成msg.payload, 意思是它會輸出msg的payload性質到右邊那欄的debug並顯示出來。

將兩個元件用線連起來之後,就完成了我們程式的佈置了, 接下來請您按下右上角的Deploy, 就能看到程式正常的運作了!

最後我們來介紹一個Node-RED相當不錯的功能, 就是可以直接將Node-RED的圖形化程式打包成json的形式, 再以複製貼上的方式將程式碼轉回圖像化的Node。

讓我們來試試官方提供的範例程式碼, 請將以下的json碼複製起來,

[{"id":"11b032a3.ee4fcd","type":"inject","name":"Tick","topic":"","payload":"","repeat":"","crontab":"*/5 * * * *","once":false,"x":161,"y":828,"z":"6480e14.f9b7f2","wires":[["a2b3542e.5d4ca8"]]},{"id":"a2b3542e.5d4ca8","type":"http request","name":"UK Power","method":"GET","url":"http://realtimeweb-prod.nationalgrid.com/SystemData.aspx","x":301,"y":828,"z":"6480e14.f9b7f2","wires":[["2631e2da.d9ce1e"]]},{"id":"2631e2da.d9ce1e","type":"function","name":"UK Power Demand","func":"// does a simple text extract parse of the http output to provide an\n// object containing the uk power demand, frequency and time\n\nif (~msg.payload.indexOf('<span')) {\n    var dem = msg.payload.split('Demand:')[1].split(\"MW\")[0];\n    var fre = msg.payload.split('Frequency:')[1].split(\"Hz\")[0];\n\n    msg.payload = {};\n    msg.payload.demand = parseInt(dem.split(\">\")[1].split(\"<\")[0]);\n    msg.payload.frequency = parseFloat(fre.split(\">\")[1].split(\"<\")[0]);\n    \n    msg2 = {};\n    msg2.payload = (msg.payload.frequency >= 50) ? true : false;\n\n    return [msg,msg2];\n}\n\nreturn null;","outputs":"2","valid":true,"x":478,"y":828,"z":"6480e14.f9b7f2","wires":[["8e56f4d3.71a908"],["cd84371b.327bc8"]]},{"id":"8e56f4d3.71a908","type":"debug","name":"","active":true,"complete":false,"x":678,"y":798,"z":"6480e14.f9b7f2","wires":[]},{"id":"cd84371b.327bc8","type":"debug","name":"","active":true,"complete":false,"x":679,"y":869,"z":"6480e14.f9b7f2","wires":[]}]

並在Node-RED的操作界面中按下ctrl + i, 便會跳出一個視窗,請將剛剛複製的json碼貼在上面, 這時候您就會看已經完成的程式碼已經變成圖像化的node了!

這隻程式會每隔五分鐘自動上網爬資料, 將過去時段英國的電力消耗資料下來, 並輸出demand(需求)與frequency(頻率)。

經過本章的介紹希望各位都能對Node.js與Node-RED有個認識,最後預告下週我們將會延續本章的Node-RED,在時下熱門的控制平台:Arduino以及Raspberry Pi上使用Node-RED來部屬各種應用程式,敬請期待!

[IBM Bluemix教學系列] 第零章 IBM Bluemix 介紹

IBM Bluemix 介紹

Bluemix 網站  https://console.ng.bluemix.net/

bluemix website

 

 

IBM Bluemix是一由IBM所開發的開放雲端平台, 目的是希望提供開發者一個方便、快速設計的平台, 同時也讓企業可以更好的整合各種不同的平台服務, Bluemix有提供各式各樣的雲服務與API, 也包含各種虛擬機器以及資料庫。

 

 

Bluemix 服務型錄

bluemix_service

Bluemix上有許多方便又好用的API可以取用, 例如:物連網、Watson認知運算、行動式開發、Web開發、資料分析…等,

 

watson

mobile

web

DevOps

data

 

有些是IBM自己研發的, 也有一些是跟其他協力廠商合作, 另外Bluemix也允許使用者自己製作自己的API, 也就是說使用者可以在同一個平台上一次整合不同API的功能, 真的是相當方便。
同時Bluemix對於語言的支援度也是相當用心, 基本上大部分主流的語言都有支援, 其背後也有相當的社群及文件。

 

lang

開始使用

使用者必須註冊Bluemix帳號才能取用Bluemix上的服務, 每一個帳號都能免費試用30天, 並能存取2GB的記憶體及儲存器,

 

registration

對於每一個不同的服務Bluemix也有不同的收費規定, 好比說取用前幾萬比資料免費這樣。 倘若使用時間過了試用30天則需要填信用卡, 但是不用擔心,只要沒有到達收費的標準, 仍舊是可以免費使用。
以下我們就來簡單試一下IBM Bluemix的IoT應用吧! 請進到以下的網址:http://discover-iot.eu-gb.mybluemix.net/#/play 並選擇Smartphone,

 

iot_demo

 

 

接下來請填上裝置的名稱, 也就是您希望智慧型手機的ID, 並在下方填上一個信箱。

 

iot_demo_2

 

 

這時候Bluemix就會自動生成一個能夠紀錄智慧型手機上資料的網站, 請用手機掃描QR code並登入這個網址。

 

iot_demo_3

 

 

來看看是否從網站上即時知道手機上的三軸加速度呢? 左邊畫面是手機的模擬圖, 右邊則是三軸加速度資料的紀錄, 另外也可以試著快速搖晃您的手機, 您可以發現在下方有個條件可以設定, 當加速度超過10m/s*s時就會跳出提醒, 快來玩玩看!

 

iot_demo_4

 

 

以上就是本篇關於IBM Bluemix的簡短介紹, 也透過一個簡單的官方範例讓您了解到, 原本需要相當多不同技術才能實現的IoT資料整合及互動, 能夠在同一個平台上以及簡單的幾個步驟下就能有不錯的效果, 接下來本團隊將會有一系列的IBM Bluemix的教學文章, 帶領您一窺Bluemix雲端平台的厲害之處, 以及使用圖形化的界面完成各種應用程式的開發, 敬請期待!