View
1
Download
0
Category
Preview:
Citation preview
IBM Cloud
1 © 2015 IBM Corporation
Bluemix勉強会@Co-EdoはじめてのNode-RED ハンズオンテキスト
日本アイ・ビー・エム株式会社クラウド・ソフトウェア事業部 エコシステム・デベロップメント
2015/11/10 updated
© 2015 IBM Corporation
IBM Cloud
2
1. Bluemixの基本操作2. Node-REDでHello World3. Node-REDでWatson連携アプリを作成4. Node-REDでDBアクセス5. Node-REDでIoTアプリを作成
ハンズオン アジェンダ
© 2015 IBM Corporation
IBM Cloud
3
Bluemixの基本操作
© 2015 IBM Corporation
IBM Cloud
4
■Webブラウザを起動し、下記URLより Bluemix にログインします。使用するブラウザは「Firefox」推奨です。
http://bluemix.net
■右上部の「ログイン」をクリック。
■IBM ID(メールアドレス)とパスワードを⼊⼒し、「サインイン」ボタンをクリック。
IBM Bluemixへのログイン
© 2015 IBM Corporation
IBM Cloud
5
■Bluemixの ダッシュボード の画⾯が表⽰されればログイン完了です。IBM Bluemixへのログイン
© 2015 IBM Corporation6
作業する地域を確認するBluemixは「米国南部」と「英国」の2つのデータセンターで稼動しています。
� 上部右端の人の形をしたアイコンをクリックするとメニューが表示され、作業する地域を選択できます� 本資料では「⽶国南部」を使うことを
想定しています
© 2015 IBM Corporation7
[補足] 「米国南部」選択時のポップアップへの対応方法米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表⽰された場合は、任意の名前を⼊⼒し、作成をクリックしてください。
本資料ではスペース名として
「dev」を使用します
© 2015 IBM Corporation8
Web-DBシステムの構築Bluemix上に下の図のようなWeb-DBシステムを構築してみましょう。コードを実⾏するAppサーバーとしてNode.js、DBサーバーとしてSQL Databaseを使用します。
Webアプリサーバー
データベースサーバー
ルーター
IBM Bluemix
© 2015 IBM Corporation9
アプリケーション実⾏環境の構築 (1/3)1.上部メニューの”カタログ”にて、作成するアプリケーションの実⾏環境を選択します。
ランタイム カテゴリから、Node.js による JavaScriptの実⾏環境を選択します。
2.アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。任意の名前を指定します。
重複しているとエラーになるのでユニークな名称を
指定してください
© 2015 IBM Corporation10
アプリケーション実⾏環境の構築 (2/3)3.アプリケーションのステージングが開始され、30秒ほどで完了します。
これだけの手順で Node.js の実⾏環境が構築できました。
© 2015 IBM Corporation11
アプリケーション実⾏環境の構築 (3/3)4.それでは作成したインスタンスにWebブラウザでアクセスし、サンプルとして
⽤意されたスターター・コードを実⾏してみましょう。URLリンクをクリックすると、作成された Node.js 上でJavaScript のスターター・アプリケーションが動いていることが確認できます。
この例では、http://Node012.mybluemix.net/にアクセスしています
このようにBluemixを使用するとクイックに、簡単に、アプリケーションの実⾏環境をセットアップすることができます。
© 2015 IBM Corporation12
サービスの追加 (1/4)
2. アプリケーションの概要ページが表示されます。“サービスまたはAPIの追加”をクリックします。
1. 上部メニューの”ダッシュボード”をクリックし、作成したアプリケーション(資料ではNode012)をクリックします。
© 2015 IBM Corporation13
サービスの追加 (2/4)3. Bluemixのカタログページが表示されます。
このカタログでアプリケーションと連携させたいサービスを選択します。
先ほど作成した Node.js の実⾏環境に SQL Databaseのサービスを追加してみましょう。 SQL Databaseのアイコンをクリックします。
© 2015 IBM Corporation14
サービスの追加 (3/4)4. アプリ欄に先ほど作成したNode.jsのアプリ名が設定されていること、
プランとして「Free Beta」が選択されていることを確認して「作成」ボタンをクリックします。 サービス名はデフォルトのままでOKです。
アプリケーションの再ステージを確認するダイアログボックスが表示されますので、「再ステージ」ボタンをクリックします。
© 2015 IBM Corporation15
サービスの追加 (4/4)5. 左側のメニューから”概要”をクリックします。
SQL Databaseサービスが追加されたことを確認してください。たったこれだけの手順で、クラウド上にWeb-DBシステムを構築することができました。
© 2015 IBM Corporation16
アプリケーション実⾏環境のクラスタ化 (1/4)
1. 左側のメニューから「SDK for Node.js」をクリックします。最後に仕上げとして、Node.jsを3台に増やしてみましょう。
© 2015 IBM Corporation17
アプリケーション実⾏環境のクラスタ化 (2/4)2. ここで実⾏環境のリソース変更が可能です。
インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。再ステージ後、リソースが拡張されていることを確認してください。
© 2015 IBM Corporation18
Webアプリサーバー
データベースサーバー
ルーター
IBM Bluemix
ここまでの手順で、クラウド上に下の図のようなWeb-DBシステムができました。Node.jsのサーバーを3台並べて負荷分散を⾏っています。ユーザーからのリクエストは、自動的に3台のNode.jsのいずれかにルーティングされます。
アプリケーション実⾏環境のクラスタ化 (3/4)
© 2015 IBM Corporation19
アプリケーション実⾏環境のクラスタ化 (4/4)3. リソースは拡張することはもちろん、縮退させることも可能です。
元の状態に戻してみましょう。インスタンス : 1、メモリー : 256MB と指定して「保存」をクリックします。再ステージ後、リソースが縮退されていることを確認してください。
© 2015 IBM Corporation
IBM Cloud
20
Node-REDでHello World
© 2015 IBM Corporation
IBM Cloud
21
ハードウェアデバイス、API、オンラインサービスを連携させて、ロジックを作成できるフローエディター
What is Node-RED?
� WebブラウザベースのUI� node.js で稼動
• 軽量� 機能をノードという単位で
カプセル化して利⽤� 独自ノードの作成・追加可能� Bluemixの様々なサービスを簡
単に利⽤可能
Bluemixでなくても使用可能です
© 2015 IBM Corporation
IBM Cloud
22
Node-RED インターフェース
Node情報ウィンドウ または デバッグコンソール
デプロイ実⾏シート
ノード
ノードパレット
表示情報の切り替えキャンバス
処理フロー
© 2015 IBM Corporation
IBM Cloud
23
Node-RED 操作方法
②ノード間を接続
④Deployを選択Node-RED画面
③ノードプロパティ設定
①ノードを選択しドラッグ&ドロップ
© 2015 IBM Corporation
IBM Cloud
24
Node-RED ノードの操作方法
コネクタが左
•イベントの終了左からデータを受信。外部アプリの起動/DB保存などの処理を⾏い、フローを終了する。
コネクタが左右
•データの処理左からデータを受信。変換/分岐などの処理を⾏い、結果を右のノードに送信する。
コネクタが右
•イベントの起動イベント起動条件を満たしたとき、情報を右のノードに送信する。
フローの左から右⽅向に処理が流れる
© 2015 IBM Corporation
IBM Cloud
25
■本資料ではBluemixの米国のデータセンターを使用することを想定しています。右上部の「地域」をクリックし、「米国南部」を選択。
■上部メニューから「カタログ」をクリック。
■最上段の「ボイラープレート」カテゴリから「Node-RED Starter」を選択。
Node-RED環境の作成
もし「スペースの作成」というウィンドウが表示された場合は、任意の名前(dev等)を指定してスペースを作成してください。
© 2015 IBM Corporation
IBM Cloud
26
■アプリ名とホスト名を⼊⼒します。実際にはアプリ名を⼊⼒フィールドに⼊れると、ホスト名も同じ名前が指定されます。既に同じ名前のホストが存在する場合エラーとなりますので、他の人と重複しなそうな名前を指定してください。
Node-RED環境の作成
■「作成」ボタンをクリックすると、Node-REDの環境作成が始まります。完了までしばらくお待ちください。
© 2015 IBM Corporation
IBM Cloud
27
■ステージングが完了したら作成した環境にアクセスしてみましょう。Node-REDのリンクをクリックします。
■Node-REDが起動すればOKです。
赤いボタンをクリックする
Node-RED環境の作成
© 2015 IBM Corporation
IBM Cloud
28
■まずは処理を開始するノードを作ってみましょう。左側のパレットから「inject」ノードを中央のキャンバスにドラッグ&ドロップします。
■キャンバスにドロップした「inject」ノードをダブルクリックして設定画面を開きます。一番上のPayloadを「blank」を選択します。イベントの起動を⾏うだけで、次のノードにデータは送信されません。
「OK」をクリックします。
Node-REDでHello World – Step1
ドラッグ&ドロップ
この数字を転記する
© 2015 IBM Corporation
IBM Cloud
29
■次にメッセージの表示内容を定義するノードを作ってみましょう。パレットから「template」ノードをキャンバスにドラッグ&ドロップします。
■「template」ノードをダブルクリックして設定画面を開きます。もともと⼊⼒されている⽂字列を削除し、「Hello World!!」など、任意の⽂字列を⼊⼒してください。
「OK」をクリックします。
ドラッグ&ドロップ
Node-REDでHello World – Step1
© 2015 IBM Corporation
IBM Cloud
30
■受け取ったデータを表示するノードを用意します。左側のパレットから「debug」ノードをキャンバスにドラッグ&ドロップします。
■ノードの横にあるコネクタをクリック&ホールドし、3つのノードを線で繋ぎます。
ドラッグ&ドロップ
この部分を掴んで引っ張る
Node-REDでHello World – Step1
© 2015 IBM Corporation
IBM Cloud
31
■これでHello Worldを表示するフローが完成しました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。(この文字はすぐに消えます)
■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはこのコンソールに表⽰されます。injectノードの左側にあるボタンをクリックすると処理が起動します。Hello World!! の⽂字列がdebugコンソールに表示されれば成功です。
取得できる情報はスマホの機種によって異なる場合があります。
Node-REDでHello World – Step1
この部分をクリックすると処理がスタート
© 2015 IBM Corporation
IBM Cloud
32
■作成したフローを拡張してみましょう。Hello Worldの⽂字列をWebページに出⼒してみます。左側のパレットから「http」ノードをキャンバスにドラッグ&ドロップします。
■「http」ノードをダブルクリックして設定画面を開きます。URLとして「/hello」と⼊⼒します。このパスにWebブラウザでアクセスするとHello Worldの⽂字列が表⽰されます。
Node-REDでHello World – Step2
ドラッグ&ドロップ
© 2015 IBM Corporation
IBM Cloud
33
■「template」ノードは先ほど作成したノードをコピーします。ノードをクリックして選択し、Ctrl + C でコピーできます。
■パレットから「http response」ノードをキャンバスにドラッグ&ドロップします。
Node-REDでHello World – Step2
ドラッグ&ドロップ
templateノードをコピーします
© 2015 IBM Corporation
IBM Cloud
34
■3つのノードを線で繋ぎます。
■これでHello WorldをWebに表示するフローが完成しました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
Node-REDでHello World – Step2
■Webブラウザの新しいタブを開きます。Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「hello」と⼊⼒してWebページにアクセスします。
(例)https://node-red.xxx/red/#の場合は、https://node-red.xxx/hello を開きます。
Hello WorldがWebブラウザに表示されました!
© 2015 IBM Corporation
IBM Cloud
35
■あらかじめtemplateノードに書かれた⽂字列だけでなく、任意の⽂字列を表⽰できるようにしてみましょう。 そのためには変数を使用します。まずはURLリクエストパラメータで、⽂字列を変数として渡す⽅法を試してみます。
■Step2で作成したフローをコピーします。Shiftキーを押しながらノードをクリックするとフロー全体が選択されます。
■右端のhttpノードの設定画面を開き、URLとして「/hello2」と⼊⼒します。
■中央のtemplateノードの設定画面を開き、表示内容を修正します。{{name}}さん、はろーわーるど!!
と変更しました。
Node-REDでHello World – Step3
フローごとコピーします
© 2015 IBM Corporation
IBM Cloud
36
■左側のパレットから「function」ノードをキャンバスにドラッグ&ドロップします。
functionノードには JavaSctiptでコードを書くことができます。
■「function」ノードをダブルクリックして設定画面を開きます。⼀⾏目にmsg.name = msg.payload.name;と⼊⼒します。⼆⾏目はそのままでOKをクリックします。
Node-REDでHello World – Step3
フローごとコピーしますドラッグ&ドロップ
© 2015 IBM Corporation
IBM Cloud
37
■ノードを下の図のようにつなぎ直します。線を削除するには、クリックで線を選択してDELETEキーです。
■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。
それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
Node-REDでHello World – Step3
© 2015 IBM Corporation
IBM Cloud
38
■Webブラウザの新しいタブを開いて、以下のURLにアクセスしてみましょう。https://node-red.xxx/hello2?name=佐藤
■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。
Node-REDでHello World – Step3
name変数の値として「佐藤」という⽂字列を渡しています
パラメータで渡した名前がWebブラウザに表示されました!
Node-REDエディタのURLです
© 2015 IBM Corporation
IBM Cloud
39
Node-REDでWatson連携アプリを作成
© 2015 IBM Corporation40
1.上部メニューの”ダッシュボード”から、先ほど作成したNode-REDのアプリケーションを選択します。
2.「サービスまたはAPIの追加」をクリックします。
Watson Q&Aサービスの追加
© 2015 IBM Corporation41
3. カタログページに遷移します。Watsonカテゴリの「Question and Answer」をクリックします。
4. 「使用」をクリックします。
Watson Q&Aサービスの追加
© 2015 IBM Corporation42
5. アプリケーションの再ステージの確認がありますので「再ステージ」をクリックします。
6. ステージングが完了すれば準備OKです。リンクをクリックして、Node-REDにアクセスします。
これで Node-RED から WatsonのQ&A サービスが利⽤できるようになります。
Watson Q&Aサービスの追加
© 2015 IBM Corporation43
■Node-REDが起動します。Sheet 1に先ほど作成したフローが残っている方は別シートを追加します。上部の「+」(プラス)ボタンをクリックします。
新しいシートが開きますので、ここで処理フローを作成してみましょう。
Node-REDでWatsonアプリを作成
© 2015 IBM Corporation44
■Watsonに質問を投げて、その回答を受け取るフローを作ってみましょう。左側のパレットから、以下の4つのノードをキャンバスにドラッグ&ドロップして配置します。
Node-REDでWatsonアプリを作成
inputカテゴリinjectノード
outputカテゴリdebugノード
functionカテゴリtemplateノード
IBM_WatsonカテゴリQ and Aノード
© 2015 IBM Corporation45
■順に各ノードの設定を⾏っていきましょう。Node-REDでWatsonアプリを作成
■injectノード をダブルクリックして設定画面を開き、Payloadで「blank」を選択します。
OKをクリックします
© 2015 IBM Corporation46
Node-REDでWatsonアプリを作成■functionノード にはWatsonに投げる質問⽂を⼊⼒します。ここでは例として「Which is the best hotel to stay in Okayama?」とします。
OKをクリックします
© 2015 IBM Corporation47
Node-REDでWatsonアプリを作成■Q and Aノード ではWatsonのコーパスを指定します。Corpusで「Travel」を選択します。
OKをクリックします
© 2015 IBM Corporation48
Node-REDでWatsonアプリを作成■debugノード は変更なしでOKです。
■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
© 2015 IBM Corporation49
■injectノードの左端部分をクリックすると、処理が開始されます。templateノードに書かれた質問文がWatson Q&Aサービスに投げられ、その結果が右端のdebug画面に表示されます。
Node-REDでWatsonアプリを作成
ここをクリック
debugタブを選択
Watsonからの回答が表示されれば成功です!Node-REDを使⽤すると、⼀⾏もコードを書かずにWatson Q&Aサービスを利⽤できます。
© 2015 IBM Corporation50
■次にWatsonからの回答をWebページに表示するようにフローを編集してみましょう。■左側のパレットからfunctionノードをドラッグ&ドロップで追加します。
Node-REDでWatsonアプリを作成 Web編
functionカテゴリfunctionノード
■設定画面を開き 1⾏目に「context.global.answer = msg.payload;」と追記します。2⾏目は変更なしでOKです。
© 2015 IBM Corporation51
Node-REDでWatsonアプリを作成 Web編■追加したfunctionノードが、Q and Aノードとdebugノードの間に入るように線を繋ぎます。
これでWatsonからの回答が”context.global.answer”という変数に代入されました。続いて、その回答をWebページに表示するフローを作ってみましょう。
© 2015 IBM Corporation52
■Watsonからの回答をWebページに表示するフローを作ってみましょう。左側のパレットから、以下の4つのノードをキャンバスにドラッグ&ドロップして配置します。
Node-REDでWatsonアプリを作成 Web編
inputカテゴリhttpノード
functionカテゴリfunctionノード
functionカテゴリtemplateノード
outputカテゴリhttp responseノード
© 2015 IBM Corporation53
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/wat1」と⼊⼒します。
OKをクリックします
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation54
■functionノードをダブルクリックして設定画面を開き、1⾏目に「msg.payload = context.global.answer;」と追記します。2⾏目は変更なしでOKです。
OKをクリックします
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation55
■templateノードをダブルクリックして設定画面を開き、1⾏目に「<h1>Watsonさんの回答</h1>{{payload}}」と⼊⼒します。
OKをクリックします
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation56
■http responseノード は変更なしでOKです。■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation57
■先程と同様、injectノードの左端部分をクリックすると、処理が開始されます。Watsonからの回答がdebug画面に表示されていることを確認します。
■Webブラウザの新しいタブを開きます。Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「wat1」と⼊⼒してWebページにアクセスします。
(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/wat1 を開きます。
Watsonからの回答がWebブラウザに表示されました!
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation58
■Webブラウザから質問⽂を⼊⼒できるようにしましょう。これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。
■Shiftキーを押しながら先程作成した2つ目のフローをクリックします。このフローのすべてのノードが選択されます。
■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。
Node-REDでWatsonアプリを作成 Web編
フローをコピーします
© 2015 IBM Corporation59
■左端のhttpノードをダブルクリックし、URLを「/wat2」と変更します。■2番目のfunctionノードをクリックして選択し、「Delete」キーを押して削除します。■3番目のtemplateノードは次ページを参照。■4番目のhttp responseノードはそのままでOKです。
Node-REDでWatsonアプリを作成 Web編
削除 変更なし次ページ
© 2015 IBM Corporation60
■3番目のtemplateノードに、質問文を受け取るHTMLフォームを定義します。ダブルクリックして以下の内容を⼊⼒してください。元の記載内容は削除します。
Node-REDでWatsonアプリを作成 Web編
<form action=“/wat3” method=“post”><input type=“text” name=“question” value=“Which is the best hotel to stay in Okayama?”><br><button type=“submit”>質問する</button></form> 質問例⽂
■以下のように3つのノードを線で繋ぎます。これでWebブラウザから質問⽂を⼊⼒するフローができました。
© 2015 IBM Corporation61
■Watsonに質問し、回答を表示するフローを作成しましょう。これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。
■Shiftキーを押しながら先程作成した2つ目のフローをクリックして選択します。■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。
キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。
Node-REDでWatsonアプリを作成 Web編
もう⼀度フローをコピーします
© 2015 IBM Corporation62
■左端のhttpノードをダブルクリックし、Methodを「POST」、URLを「/wat3」と変更します。■2番目のfunctionノードをダブルクリックし、「context.global.answer」の部分を「msg.payload.question」と書き換えます。■3番目のtemplateノードはそのままでOKです。■4番目のhttp responseノードもそのままでOKです。
Node-REDでWatsonアプリを作成 Web編
変更なし変更なし
© 2015 IBM Corporation63
■Watsonに質問する処理を追加します。最初に作成したフローから、Q and Aノードをコピーします。
Node-REDでWatsonアプリを作成 Web編
Q and Aノードをコピーします
パレットからQ and Aノードを追加してもOKです。その場合は忘れずCorpusを「Travel」に変更してください。
© 2015 IBM Corporation64
■ノードを下記のように線で繋ぎ直します。これでWatsonに質問をして回答をWebブラウザに表示するフローが完成しました。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation65
■Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「wat2」と⼊⼒してWebページにアクセスします。
(例)http://node-red/red/#の場合は、http://node-red/wat2 を開きます。■質問⽂を⼊⼒して「質問する」をクリックすると回答画面に遷移します。Watsonからの回答がWebブラウザに表示されればOKです!
お疲れ様でした!このようにWebアプリケーションを作成する場合もNode-REDは非常に便利です。
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation
IBM Cloud
66
Node-REDでDBアクセス
© 2015 IBM Corporation
IBM Cloud
67
1.⾦沢区が公開しているAEDの設置場所のデータをWebから取得します。Webブラウザを起動し、「⾦沢区データポータル」にアクセスします。https://ibm.biz/kanazawa
2.「AED設置場所」をクリックしてCSVファイルを保存します。ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
68
3.ダッシュボードにて、最初のハンズオンで作成したSQL Databaseサービスをクリックします。
4. Launch をクリックしてSQL Database のコンソールを起動します。
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
69
5.Load Dataをクリックします。SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
70
6.”Brows files” をクリックし、ダウンロードした”3-kz-somu.csv” を指定します。ダウンロードしたcsvファイルのコードページはShift_JISですので、Code pageを”1208”から”943”に上書き変更します。Does the file have columns that contain dates or times? を“Yes”にし、右下の”Load File” をクリックします。
コードページを1208→943
に変更
Yesに変更
ダウンロードしたcsvファイルを指定
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
71
7.サンプルデータのCSVファイルの内容が表示されていることを確認し、”Next” をクリックします。
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
72
8.”Create a new table and load” にチェックを入れ、”Next” をクリックします。SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
73
9.”Table name” を 「AEDKANAZAWA」に変更します。10.Columnを以下のとおり変更し、”Finish” をクリックします。
名称 ⇒ NAME 住所 ⇒ ADDRESS緯度 ⇒ LATITUDE 経度 ⇒ LONGITUDEAEDの数 ⇒ AED 更新⽇ ⇒ UPDATE
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
74
11.ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選択します。
12.左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報が表示されます
SQL Databaseへのデータ取り込み
表の作成とデータの取り込みが完了しました
© 2015 IBM Corporation
IBM Cloud
75
SQL Databaseサービスのバインド
1.上部メニューの”ダッシュボード”から、先ほど作成したNode-REDのアプリケーションを選択します。
2.「サービスまたはAPIのバインド」をクリックします。
© 2015 IBM Corporation
IBM Cloud
76
3. バインド可能なサービスが表示されます。「SQL Database」を選択し、「追加」をクリックします。
4. アプリケーションの再ステージの確認があるので「再ステージ」をクリックします。
ステージングが完了すると、Node-RED から SQL Databaseサービスが利⽤できるようになります。
SQL Databaseサービスのバインド
© 2015 IBM Corporation77
■SQL DatabaseからAEDの情報を取得するWeb APIを作成します■左側のパレットから、以下の3つのノードをキャンバスにドラッグ&ドロップして配置します。
Node-REDでDBアクセス
inputカテゴリhttpノード
outputカテゴリhttp responseノード
storageカテゴリsqldbノード
左右にコネクタが付いたノードです
© 2015 IBM Corporation78
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/api/aed」と⼊⼒します。
OKをクリックします
Node-REDでDBアクセス
© 2015 IBM Corporation79
■sqldbノード をダブルクリックして設定画面を開きます。
-Server :バインドしたSQL Databaseサービスを選択-Query : SELECT * FROM AEDKANAZAWA
OKをクリックします
Node-REDでDBアクセス
© 2015 IBM Corporation80
■http responseノード は変更なしでOKです。
■3つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
Node-REDでDBアクセス
© 2015 IBM Corporation81
Node-REDでDBアクセス■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの末尾の「red/#」を削除し、替わりに「api/aed」と⼊⼒してWebページにアクセスします。
(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/api/aed を開きます。
DBに格納されたAEDの情報がWebブラウザに表示されました!
© 2015 IBM Corporation82
Node-REDでDBアクセス■作成したAPIを呼び出すアプリケーションを作成します。■左側のパレットから、以下の3つのノードをキャンバスにドラッグ&ドロップして配置します。inputカテゴリ
httpノードoutputカテゴリ
http responseノード
functionカテゴリtemplateノード
© 2015 IBM Corporation83
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/aedmap」と⼊⼒します。
OKをクリックします
Node-REDでDBアクセス
© 2015 IBM Corporation84
■templateノード をダブルクリックして設定画面を開き、Template の内容として、https://ibm.biz/BdXueL のHTMLをコピーします
OKをクリックします
Node-REDでDBアクセス
© 2015 IBM Corporation85
■http responseノード は変更なしでOKです。
■3つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
Node-REDでDBアクセス
© 2015 IBM Corporation86
Node-REDでDBアクセス■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの末尾の「red/#」を削除し、替わりに「aedmap」と⼊⼒してWebページにアクセスします。
(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/aedmap を開きます。
アプリケーションが起動すれば成功です!
© 2015 IBM Corporation
IBM Cloud
87
Node-REDでIoTアプリを作成
© 2015 IBM Corporation
IBM Cloud
88
Node-REDでIoTアプリを作成
IBM IoTFoundation
デバイス IBM Bluemix
■全体像 アプリケーション
スマホのセンサーで計測したデータをクラウドサービスに送信
サービス
アプリはサービスからセンサーデータを取得して処理する
IoT Foundationサービスはセンサーデータを仲介する
© 2015 IBM Corporation
IBM Cloud
89
■スマートフォンをお持ちの方は、スマホのブラウザで以下のURLにアクセスしてください。
http://phonesensor.mybluemix.net
PhoneSensorが起動します。スマホに内蔵された各種センサーの情報を取得し、BluemixのIoT Foundationサービスに送信しています。
■このセンサー情報を受け取って処理するアプリをBluemix上の Node-REDで作ってみましょう。
Node-REDでIoTアプリを作成
© 2015 IBM Corporation
IBM Cloud
90
■スマホのセンサー情報を、クラウド上のIoT Foundationサービスから受け取ってみましょう。左側のパレットから「ibmiot」ノードを中央のキャンバスにドラッグ&ドロップします。
■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。Authentication は「Quickstart」を選択。Device Id に先程のPhoneSensorに表示されている⽂字列の末尾12桁の数字を⼊⼒。
Node-REDでIoTアプリを作成
ドラッグ&ドロップ
この数字を転記する
© 2015 IBM Corporation
IBM Cloud
91
■受け取ったデータを表示するノードを用意します。左側のパレットから「debug」ノードを中央のキャンバスにドラッグ&ドロップします。
■ノードの横にあるコネクタをクリック&ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。
Node-REDでIoTアプリを作成
ドラッグ&ドロップ
この部分を掴んで引っ張る
© 2015 IBM Corporation
IBM Cloud
92
■これでデータの⼊⼒と出⼒の定義ができました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。(この文字はすぐに消えます)
■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはここに表示されます。
先程のPhoneSensorを動かします。スマホのセンサー情報がdebug画面に表示されれば成功です。
Node-REDでIoTアプリを作成
取得できる情報はスマホの機種によって異なる場合があります。
© 2015 IBM Corporation
IBM Cloud
93
■debug画面にセンサーデータがうまく表示されない場合のチェックポイント-PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが停止していないでしょうか。
-PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。例えば、誤ってPhoneSensor画面下部の「Register」をタップしてしまうと、ステータスが「Disconnected」になります。
-「ibmiot」ノードのDevice Idが正しく設定されているかどうかをご確認ください。スマホのWebブラウザでPhoneSensorを再読み込みするとDevice Idが変わってしまいます。その場合は再度「ibmiot」ノードの定義情報をPhoneSensor側と同じになるよう変更してください。
Node-REDでIoTアプリを作成
© 2015 IBM Corporation
IBM Cloud
94
■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作ってみましょう。「tiltLR」というデータ項目に着目します。これはスマホ端末の左右の傾きを測定しているようです。実際に端末を動かして、値の変化を確認してください。この傾き度合いによって表⽰メッセージを変えてみましょう。
■センサー情報から「tiltLR」の値だけを抽出します。左側のパレットから「function」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、Functionの内容を以下のように書き換えて「OK」をクリックします。
return {payload:msg.payload.d.tiltLR};
Node-REDでIoTアプリを作成
© 2015 IBM Corporation
IBM Cloud
95
■正しく動くかどうか確認してみましょう。「ibmiot」と「debug」との間に、今作成した「function」ノードを挟むように線を繋ぎ変えます。
■右上の「Deploy」ボタンをクリックします。
■不要な情報が削除されて、「tiltLR」の値だけが表示されればOKです。
Node-REDでIoTアプリを作成
線はクリックで選択した状態でDeleteキーで削除できます。
© 2015 IBM Corporation
IBM Cloud
96
■「tiltLR」の値によって処理を分岐させます。左側のパレットから「switch」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、分岐条件を指定します。左に5度以上傾いた場合=「左に傾いてます」右に5度以上傾いた場合=「右に傾いてます」傾きが5度未満の場合=「ほぼフラットです」
上記のような条件設定をするには右図のように指定して「OK」をクリックします。
Node-REDでIoTアプリを作成
条件を追加するには、「+rule」ボタンをクリックします。
傾きが-5度以上(左)なら1番へ傾きが5度以上(右)なら2番へ
どちらでもない(フラット)なら3番へ
© 2015 IBM Corporation
IBM Cloud
97
■条件分岐された後の処理を作成します。左側のパレットから「template」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、表示するメッセージを定義します。ご⾃由にメッセージの内容を⼊⼒してください。
同様に2番、3番のノードも作成し、それぞれメッセージを定義します。最後にswitchノードのコネクタと1番、2番、3番のノードを線で繋げます。
Node-REDでIoTアプリを作成
{{payload}} と指定すると、先程debug画面で確認した傾きデータの値が表示されます。
1番(左)
2番(右)
3番(フラット)
© 2015 IBM Corporation
IBM Cloud
98
■キャンバスの中を整理して、各ノードを以下の図のように接続してください。
■処理フローが完成しました!それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
Node-REDでIoTアプリを作成
正しく線が繋がっていれば、ノード自体はキャンバス内のどこに置かれていても動作に影響はありません。
© 2015 IBM Corporation
IBM Cloud
99
■「Successfully Deployed」のメッセージが表示されれば成功です。
PhoneSensorを稼動させたスマホを左右に傾けてメッセージが正しく表示されることを確認してください。
Node-REDでIoTアプリを作成
お疲れ様でした!IBM Bluemix と Node-RED によって、ほぼノンプログラミングでIoTデバイスから収集したデータを処理するアプリが作れました。
© 2015 IBM Corporation100
Node-RED応用編
© 2015 IBM Corporation
IBM Cloud
101
■Node-REDは作成したフローをJSON形式のテキストとして、export/importすることができます。
Node-REDでフローのエクスポート/インポート
[{“id”:“13257eec.669069”,“type”:“websocket-listener”,“path”:“/ws/stations”,“wholemsg”:“false”},{“id”:“28a6990b.d75966”,“type”:“websocket out”,“name”:“”,“server”:“13257eec.669069”,“x”:677,“y”:274,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“f5ecfe3e.0a13”,“type”:“xml”,“name”:“”,“attr”:“$”,“chr”:“_”,“x”:498.5,“y”:275,“z”:“60aa0f7b.9f55f”,“wires”:[[“28a6990b.d75966”,“3e967dc2.c16982”]]},{“id”:“3e967dc2.c16982”,“type”:“debug”,“name”:“”,“active”:true,“console”:“false”,“complete”:“false”,“x”:626.5,“y”:340,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“2c1c43fd.d3e3bc”,“type”:“http request”,“name”:“リクナビAPI呼び出し”,“method”:“GET”,“url”:“http://webservice.recruit.co.jp/shingaku/school/v2/?code=SC000059&key=43ba47966ce3abea”,“x”:326,“y”:275,“z”:“60aa0f7b.9f55f”,“wires”:[[“f5ecfe3e.0a13”]]},{“id”:“ad4079b6.52bf88”,“type”:“websocket in”,“name”:“”,“server”:“13257eec.669069”,“x”:126,“y”:275,“z”:“60aa0f7b.9f55f”,“wires”:[[“2c1c43fd.d3e3bc”]]},{“id”:“fda27200.025d9”,“type”:“http response”,“name”:“”,“x”:492,“y”:181,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“774506a8.88baf8”,“type”:“template”,“name”:“表示内容の定義”,“field”:“payload”,“template”:“<!DOCTYPE html>¥n<html>¥n <head>¥n <meta name=¥”viewport¥“ content=¥”initial-scale=1.0, user-scalable=no¥“>¥n <meta charset=¥”utf-8¥“>¥n <title>大学キャンパスマップ</title>¥n <style>¥n html, body, #map-canvas {¥n height: 94%;¥n margin: 5px;¥n padding: 0px¥n }¥n </style>¥n <script src=¥"https://maps.googleapis.com/maps/api/js?v=3.exp¥"></script>¥n <script>¥n¥t¥tfunction initialize() {¥n¥t¥t var myLatlng= new google.maps.LatLng(36.095, 140.084);¥n¥t¥t var mapOptions = {¥n¥t¥t zoom: 11,¥n¥t¥t center: myLatlng,¥n¥t¥t };¥n¥t¥t var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);¥n¥t¥t ¥n¥t¥t var loc = window.location;¥n if (loc.protocol === ¥"https:¥") {¥n newUri = ¥"wss:¥";¥n } else {¥n newUri = ¥"ws:¥";¥n }¥n newUri += ¥"//¥" + loc.host + ¥"/ws/stations¥";¥n¥t¥t ¥n¥t¥t ¥n¥t¥t var sock = new WebSocket(newUri);¥n¥t¥t sock.onopen = function(){ ¥n¥t¥t console.log(¥"Connected websocket¥");¥n¥t¥t console.log(¥"Sending ping..¥");¥n¥t¥t¥tsock.send(¥"Ping!¥");¥n¥t¥t console.log(¥"Ping sent..¥");¥n¥t¥t };¥n¥t¥t sock.onerror = function(){ console.log(¥"Websocket error¥"); };¥n¥t¥t sock.onmessage = function(evt){¥n¥t¥t var schoolData = JSON.parse(evt.data);¥n¥t¥t var stations = schoolData.results.school[0].campus;¥n¥t¥t¥tfor(var i = 0; i< stations.length; i++) {¥n¥t¥t¥t var camp = stations[i];¥n var marker = new google.maps.Marker({¥n¥t¥t¥t position: new google.maps.LatLng(camp.latitude[0],camp.longitude[0]),¥n¥t¥t¥t map: map,¥n¥t¥t¥t animation: google.maps.Animation.BOUNCE,¥n¥t¥t¥t title: camp.address[0]¥n¥t¥t¥t });¥n¥t¥t¥t ¥n¥t¥t¥t}¥n¥t¥t };¥n¥t¥t};¥n¥t¥t¥n¥t¥tgoogle.maps.event.addDomListener(window, 'load', initialize);¥n¥n </script>¥n </head>¥n <body>¥n <div id=¥"map-canvas¥"></div>¥n <font size=¥"6¥">大学キャンパスマップ</font>¥n <br>powered by IBM Bluemix and Node-RED¥n <div align=¥"right¥"> ¥n <a href=¥"http://webservice.recruit.co.jp/¥"><img src=¥"http://webservice.recruit.co.jp/banner/shingaku-m.gif¥" alt=¥"リクナビ進学 Webサービス¥" width=¥"88¥" height=¥"35¥" border=¥"0¥" title=¥"リクナビ進学 Webサービス¥"></a>¥n </div> ¥n </body>¥n</html>","x":330,"y":181,"z":"60aa0f7b.9f55f","wires":[["fda27200.025d9"]]},{"id":"636d7b37.9c9284","type":"http in","name":"","url":"/schoolmap","method":"get","x":143,"y":181,"z":"60aa0f7b.9f55f","wires":[["774506a8.88baf8"]]}]
ここから先は応用編です。余裕のある方はぜひ試してみてください。
JSON形式のテキストの例
© 2015 IBM Corporation
IBM Cloud
102
□http://ibm.biz/noderedwebWatsonに質問をするWebアプリを機能拡張したフローを公開しています。
この記事の「4. サンプルフロー」の手順でフローを取り込んでみましょう。今回のハンズオンで作成したアプリだけでなく、さらに拡張したフローもありますのでWebアプリ作成の参考にしてください。
Node-REDでWatsonアプリを作成 Web編 - option
© 2015 IBM Corporation
IBM Cloud
103
□http://ibm.biz/noderedflow地図を表示するGoogle Maps APIと大学の情報を提供するリクナビ進学APIを連携させたキャンパスの場所を地図上に示すサンプルアプリのフローを公開しています。これらのフローをNode-REDに取り込んでみましょう。■JSON形式のテキストを「選択」→「コピー」します。
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
104
■Node-REDでシートを追加します。上部の「+」(プラス)ボタンをクリックして、新しいシートを開きます。
■新しいシートに先程コピーした処理フローを取り込みます。上部右端の三本線のアイコンをクリックし、表示されたメニューから「import」→「Clipboard」を選択します。
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
105
■「Import nodes」ウィンドウが表示されるので、先程クリップボードにコピーしたテキストをペーストして、OKボタンをクリックします。
■処理フローが取り込まれますので、キャンバスの適当な場所をクリックして配置します。
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
106
■このアプリを動かしてみましょう。右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。
■実⾏結果を確認してみましょう。Webブラウザの新しいタブを開いて、Node-REDのホスト名の末尾に「/schoolmap」というパスを付加したURLにアクセスします。
Node-REDでWeb APIを活用したアプリを動かす
http://iotserver2015xx.mybluemix.net/red/# でNode-REDを開いている場合、
http://iotserver2015xx.mybluemix.net/schoolmap にアクセスします。
(例)
Node-REDを開いているWebブラウザのURLの末尾の「/red/#」を削除し、「/schoolmap」を追加します。
© 2015 IBM Corporation
IBM Cloud
107
■Node-REDで作ったサンプルアプリ「筑波大学はココ!」が表示されればOKです。
地図上の筑波大学のキャンパスにマーカーが表示され、マウスポインタを合わせると大学の住所が表示されます。
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
108
■debug画面に、リクナビ進学APIを呼び出した結果が表示されていることを確認してください。緯度経度や住所以外にも様々な情報が取得できています。
このようにクラウドで公開されている外部のAPIを呼び出すことで、アプリの機能を拡張できます
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
109
□試してみましょう□リクナビ進学APIに対してリクエストする内容を変えてみましょう。
■「リクナビAPI呼び出し」ノードをダブルクリックして構成画面を開きます。
■URL欄の「code=SC000059」の部分を「code=SC000006」と変更して「OK」をクリック。
■デプロイして結果を⾒てみましょう。右上の「Deploy」ボタンをクリックします。「筑波大学はココ!」をWebブラウザで再読み込みすると、実⾏結果はどう変わるでしょうか?
Node-REDでWeb APIを活用したアプリを動かす - option
SC000006は茨城大学の学校コードです。時間のある方は、
SC000192 : 関⻄⼤学SC000491 : 日本大学
なども試して結果を確認してみましょう。
© 2015 IBM Corporation
IBM Cloud
110
■大学キャンパスマップアプリはBluemix環境のNode-RED上で稼動しています。地図はGoogle Maps APIを、⼤学の住所および緯度経度の情報はリクナビ進学APIを呼び出して統合し、Webブラウザ上に表示しています。
API活用によるアプリ開発とIBM Bluemix
Google Maps API
リクナビ進学API
大学キャンパスマップアプリ
クラウドの世界ではAPIの公開が拡がっている
IBM Bluemix
APIを活用することで効率的なアプリ開発が可能
IBM Cloud
1 © 2015 IBM Corporation
Bluemix勉強会@Co-EdoはじめてのNode-RED ハンズオンテキスト
日本アイ・ビー・エム株式会社クラウド・ソフトウェア事業部 エコシステム・デベロップメント
2015/11/10 updated
© 2015 IBM Corporation
IBM Cloud
2
1. Bluemixの基本操作2. Node-REDでHello World3. Node-REDでWatson連携アプリを作成4. Node-REDでDBアクセス5. Node-REDでIoTアプリを作成
ハンズオン アジェンダ
© 2015 IBM Corporation
IBM Cloud
3
Bluemixの基本操作
© 2015 IBM Corporation
IBM Cloud
4
■Webブラウザを起動し、下記URLより Bluemix にログインします。使用するブラウザは「Firefox」推奨です。
http://bluemix.net
■右上部の「ログイン」をクリック。
■IBM ID(メールアドレス)とパスワードを⼊⼒し、「サインイン」ボタンをクリック。
IBM Bluemixへのログイン
© 2015 IBM Corporation
IBM Cloud
5
■Bluemixの ダッシュボード の画⾯が表⽰されればログイン完了です。IBM Bluemixへのログイン
© 2015 IBM Corporation6
作業する地域を確認するBluemixは「米国南部」と「英国」の2つのデータセンターで稼動しています。
� 上部右端の人の形をしたアイコンをクリックするとメニューが表示され、作業する地域を選択できます� 本資料では「⽶国南部」を使うことを
想定しています
© 2015 IBM Corporation7
[補足] 「米国南部」選択時のポップアップへの対応方法米国南部を選択した際に、スペースを作成するように指示するポップアップ・ウィンドウが表⽰された場合は、任意の名前を⼊⼒し、作成をクリックしてください。
本資料ではスペース名として
「dev」を使用します
© 2015 IBM Corporation8
Web-DBシステムの構築Bluemix上に下の図のようなWeb-DBシステムを構築してみましょう。コードを実⾏するAppサーバーとしてNode.js、DBサーバーとしてSQL Databaseを使用します。
Webアプリサーバー
データベースサーバー
ルーター
IBM Bluemix
© 2015 IBM Corporation9
アプリケーション実⾏環境の構築 (1/3)1.上部メニューの”カタログ”にて、作成するアプリケーションの実⾏環境を選択します。
ランタイム カテゴリから、Node.js による JavaScriptの実⾏環境を選択します。
2.アプリケーション名とホスト名を指定して“作成”ボタンをクリックします。任意の名前を指定します。
重複しているとエラーになるのでユニークな名称を
指定してください
© 2015 IBM Corporation10
アプリケーション実⾏環境の構築 (2/3)3.アプリケーションのステージングが開始され、30秒ほどで完了します。
これだけの手順で Node.js の実⾏環境が構築できました。
© 2015 IBM Corporation11
アプリケーション実⾏環境の構築 (3/3)4.それでは作成したインスタンスにWebブラウザでアクセスし、サンプルとして
⽤意されたスターター・コードを実⾏してみましょう。URLリンクをクリックすると、作成された Node.js 上でJavaScript のスターター・アプリケーションが動いていることが確認できます。
この例では、http://Node012.mybluemix.net/にアクセスしています
このようにBluemixを使用するとクイックに、簡単に、アプリケーションの実⾏環境をセットアップすることができます。
© 2015 IBM Corporation12
サービスの追加 (1/4)
2. アプリケーションの概要ページが表示されます。“サービスまたはAPIの追加”をクリックします。
1. 上部メニューの”ダッシュボード”をクリックし、作成したアプリケーション(資料ではNode012)をクリックします。
© 2015 IBM Corporation13
サービスの追加 (2/4)3. Bluemixのカタログページが表示されます。
このカタログでアプリケーションと連携させたいサービスを選択します。
先ほど作成した Node.js の実⾏環境に SQL Databaseのサービスを追加してみましょう。 SQL Databaseのアイコンをクリックします。
© 2015 IBM Corporation14
サービスの追加 (3/4)4. アプリ欄に先ほど作成したNode.jsのアプリ名が設定されていること、
プランとして「Free Beta」が選択されていることを確認して「作成」ボタンをクリックします。 サービス名はデフォルトのままでOKです。
アプリケーションの再ステージを確認するダイアログボックスが表示されますので、「再ステージ」ボタンをクリックします。
© 2015 IBM Corporation15
サービスの追加 (4/4)5. 左側のメニューから”概要”をクリックします。
SQL Databaseサービスが追加されたことを確認してください。たったこれだけの手順で、クラウド上にWeb-DBシステムを構築することができました。
© 2015 IBM Corporation16
アプリケーション実⾏環境のクラスタ化 (1/4)
1. 左側のメニューから「SDK for Node.js」をクリックします。最後に仕上げとして、Node.jsを3台に増やしてみましょう。
© 2015 IBM Corporation17
アプリケーション実⾏環境のクラスタ化 (2/4)2. ここで実⾏環境のリソース変更が可能です。
インスタンス : 3、メモリー : 384MB と指定して「保存」をクリックします。再ステージ後、リソースが拡張されていることを確認してください。
© 2015 IBM Corporation18
Webアプリサーバー
データベースサーバー
ルーター
IBM Bluemix
ここまでの手順で、クラウド上に下の図のようなWeb-DBシステムができました。Node.jsのサーバーを3台並べて負荷分散を⾏っています。ユーザーからのリクエストは、自動的に3台のNode.jsのいずれかにルーティングされます。
アプリケーション実⾏環境のクラスタ化 (3/4)
© 2015 IBM Corporation19
アプリケーション実⾏環境のクラスタ化 (4/4)3. リソースは拡張することはもちろん、縮退させることも可能です。
元の状態に戻してみましょう。インスタンス : 1、メモリー : 256MB と指定して「保存」をクリックします。再ステージ後、リソースが縮退されていることを確認してください。
© 2015 IBM Corporation
IBM Cloud
20
Node-REDでHello World
© 2015 IBM Corporation
IBM Cloud
21
ハードウェアデバイス、API、オンラインサービスを連携させて、ロジックを作成できるフローエディター
What is Node-RED?
� WebブラウザベースのUI� node.js で稼動
• 軽量� 機能をノードという単位で
カプセル化して利⽤� 独自ノードの作成・追加可能� Bluemixの様々なサービスを簡
単に利⽤可能
Bluemixでなくても使用可能です
© 2015 IBM Corporation
IBM Cloud
22
Node-RED インターフェース
Node情報ウィンドウ または デバッグコンソール
デプロイ実⾏シート
ノード
ノードパレット
表示情報の切り替えキャンバス
処理フロー
© 2015 IBM Corporation
IBM Cloud
23
Node-RED 操作方法
②ノード間を接続
④Deployを選択Node-RED画面
③ノードプロパティ設定
①ノードを選択しドラッグ&ドロップ
© 2015 IBM Corporation
IBM Cloud
24
Node-RED ノードの操作方法
コネクタが左
•イベントの終了左からデータを受信。外部アプリの起動/DB保存などの処理を⾏い、フローを終了する。
コネクタが左右
•データの処理左からデータを受信。変換/分岐などの処理を⾏い、結果を右のノードに送信する。
コネクタが右
•イベントの起動イベント起動条件を満たしたとき、情報を右のノードに送信する。
フローの左から右⽅向に処理が流れる
© 2015 IBM Corporation
IBM Cloud
25
■本資料ではBluemixの米国のデータセンターを使用することを想定しています。右上部の「地域」をクリックし、「米国南部」を選択。
■上部メニューから「カタログ」をクリック。
■最上段の「ボイラープレート」カテゴリから「Node-RED Starter」を選択。
Node-RED環境の作成
もし「スペースの作成」というウィンドウが表示された場合は、任意の名前(dev等)を指定してスペースを作成してください。
© 2015 IBM Corporation
IBM Cloud
26
■アプリ名とホスト名を⼊⼒します。実際にはアプリ名を⼊⼒フィールドに⼊れると、ホスト名も同じ名前が指定されます。既に同じ名前のホストが存在する場合エラーとなりますので、他の人と重複しなそうな名前を指定してください。
Node-RED環境の作成
■「作成」ボタンをクリックすると、Node-REDの環境作成が始まります。完了までしばらくお待ちください。
© 2015 IBM Corporation
IBM Cloud
27
■ステージングが完了したら作成した環境にアクセスしてみましょう。Node-REDのリンクをクリックします。
■Node-REDが起動すればOKです。
赤いボタンをクリックする
Node-RED環境の作成
© 2015 IBM Corporation
IBM Cloud
28
■まずは処理を開始するノードを作ってみましょう。左側のパレットから「inject」ノードを中央のキャンバスにドラッグ&ドロップします。
■キャンバスにドロップした「inject」ノードをダブルクリックして設定画面を開きます。一番上のPayloadを「blank」を選択します。イベントの起動を⾏うだけで、次のノードにデータは送信されません。
「OK」をクリックします。
Node-REDでHello World – Step1
ドラッグ&ドロップ
この数字を転記する
© 2015 IBM Corporation
IBM Cloud
29
■次にメッセージの表示内容を定義するノードを作ってみましょう。パレットから「template」ノードをキャンバスにドラッグ&ドロップします。
■「template」ノードをダブルクリックして設定画面を開きます。もともと⼊⼒されている⽂字列を削除し、「Hello World!!」など、任意の⽂字列を⼊⼒してください。
「OK」をクリックします。
ドラッグ&ドロップ
Node-REDでHello World – Step1
© 2015 IBM Corporation
IBM Cloud
30
■受け取ったデータを表示するノードを用意します。左側のパレットから「debug」ノードをキャンバスにドラッグ&ドロップします。
■ノードの横にあるコネクタをクリック&ホールドし、3つのノードを線で繋ぎます。
ドラッグ&ドロップ
この部分を掴んで引っ張る
Node-REDでHello World – Step1
© 2015 IBM Corporation
IBM Cloud
31
■これでHello Worldを表示するフローが完成しました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。(この文字はすぐに消えます)
■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはこのコンソールに表⽰されます。injectノードの左側にあるボタンをクリックすると処理が起動します。Hello World!! の⽂字列がdebugコンソールに表示されれば成功です。
取得できる情報はスマホの機種によって異なる場合があります。
Node-REDでHello World – Step1
この部分をクリックすると処理がスタート
© 2015 IBM Corporation
IBM Cloud
32
■作成したフローを拡張してみましょう。Hello Worldの⽂字列をWebページに出⼒してみます。左側のパレットから「http」ノードをキャンバスにドラッグ&ドロップします。
■「http」ノードをダブルクリックして設定画面を開きます。URLとして「/hello」と⼊⼒します。このパスにWebブラウザでアクセスするとHello Worldの⽂字列が表⽰されます。
Node-REDでHello World – Step2
ドラッグ&ドロップ
© 2015 IBM Corporation
IBM Cloud
33
■「template」ノードは先ほど作成したノードをコピーします。ノードをクリックして選択し、Ctrl + C でコピーできます。
■パレットから「http response」ノードをキャンバスにドラッグ&ドロップします。
Node-REDでHello World – Step2
ドラッグ&ドロップ
templateノードをコピーします
© 2015 IBM Corporation
IBM Cloud
34
■3つのノードを線で繋ぎます。
■これでHello WorldをWebに表示するフローが完成しました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
Node-REDでHello World – Step2
■Webブラウザの新しいタブを開きます。Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「hello」と⼊⼒してWebページにアクセスします。
(例)https://node-red.xxx/red/#の場合は、https://node-red.xxx/hello を開きます。
Hello WorldがWebブラウザに表示されました!
© 2015 IBM Corporation
IBM Cloud
35
■あらかじめtemplateノードに書かれた⽂字列だけでなく、任意の⽂字列を表⽰できるようにしてみましょう。 そのためには変数を使用します。まずはURLリクエストパラメータで、⽂字列を変数として渡す⽅法を試してみます。
■Step2で作成したフローをコピーします。Shiftキーを押しながらノードをクリックするとフロー全体が選択されます。
■右端のhttpノードの設定画面を開き、URLとして「/hello2」と⼊⼒します。
■中央のtemplateノードの設定画面を開き、表示内容を修正します。{{name}}さん、はろーわーるど!!
と変更しました。
Node-REDでHello World – Step3
フローごとコピーします
© 2015 IBM Corporation
IBM Cloud
36
■左側のパレットから「function」ノードをキャンバスにドラッグ&ドロップします。
functionノードには JavaSctiptでコードを書くことができます。
■「function」ノードをダブルクリックして設定画面を開きます。⼀⾏目にmsg.name = msg.payload.name;と⼊⼒します。⼆⾏目はそのままでOKをクリックします。
Node-REDでHello World – Step3
フローごとコピーしますドラッグ&ドロップ
© 2015 IBM Corporation
IBM Cloud
37
■ノードを下の図のようにつなぎ直します。線を削除するには、クリックで線を選択してDELETEキーです。
■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。
それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
Node-REDでHello World – Step3
© 2015 IBM Corporation
IBM Cloud
38
■Webブラウザの新しいタブを開いて、以下のURLにアクセスしてみましょう。https://node-red.xxx/hello2?name=佐藤
■これでURLのパラメータで変数の値を受け取って、Webに⽂字列を表⽰するフローが完成しました。
Node-REDでHello World – Step3
name変数の値として「佐藤」という⽂字列を渡しています
パラメータで渡した名前がWebブラウザに表示されました!
Node-REDエディタのURLです
© 2015 IBM Corporation
IBM Cloud
39
Node-REDでWatson連携アプリを作成
© 2015 IBM Corporation40
1.上部メニューの”ダッシュボード”から、先ほど作成したNode-REDのアプリケーションを選択します。
2.「サービスまたはAPIの追加」をクリックします。
Watson Q&Aサービスの追加
© 2015 IBM Corporation41
3. カタログページに遷移します。Watsonカテゴリの「Question and Answer」をクリックします。
4. 「使用」をクリックします。
Watson Q&Aサービスの追加
© 2015 IBM Corporation42
5. アプリケーションの再ステージの確認がありますので「再ステージ」をクリックします。
6. ステージングが完了すれば準備OKです。リンクをクリックして、Node-REDにアクセスします。
これで Node-RED から WatsonのQ&A サービスが利⽤できるようになります。
Watson Q&Aサービスの追加
© 2015 IBM Corporation43
■Node-REDが起動します。Sheet 1に先ほど作成したフローが残っている方は別シートを追加します。上部の「+」(プラス)ボタンをクリックします。
新しいシートが開きますので、ここで処理フローを作成してみましょう。
Node-REDでWatsonアプリを作成
© 2015 IBM Corporation44
■Watsonに質問を投げて、その回答を受け取るフローを作ってみましょう。左側のパレットから、以下の4つのノードをキャンバスにドラッグ&ドロップして配置します。
Node-REDでWatsonアプリを作成
inputカテゴリinjectノード
outputカテゴリdebugノード
functionカテゴリtemplateノード
IBM_WatsonカテゴリQ and Aノード
© 2015 IBM Corporation45
■順に各ノードの設定を⾏っていきましょう。Node-REDでWatsonアプリを作成
■injectノード をダブルクリックして設定画面を開き、Payloadで「blank」を選択します。
OKをクリックします
© 2015 IBM Corporation46
Node-REDでWatsonアプリを作成■functionノード にはWatsonに投げる質問⽂を⼊⼒します。ここでは例として「Which is the best hotel to stay in Okayama?」とします。
OKをクリックします
© 2015 IBM Corporation47
Node-REDでWatsonアプリを作成■Q and Aノード ではWatsonのコーパスを指定します。Corpusで「Travel」を選択します。
OKをクリックします
© 2015 IBM Corporation48
Node-REDでWatsonアプリを作成■debugノード は変更なしでOKです。
■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
© 2015 IBM Corporation49
■injectノードの左端部分をクリックすると、処理が開始されます。templateノードに書かれた質問文がWatson Q&Aサービスに投げられ、その結果が右端のdebug画面に表示されます。
Node-REDでWatsonアプリを作成
ここをクリック
debugタブを選択
Watsonからの回答が表示されれば成功です!Node-REDを使⽤すると、⼀⾏もコードを書かずにWatson Q&Aサービスを利⽤できます。
© 2015 IBM Corporation50
■次にWatsonからの回答をWebページに表示するようにフローを編集してみましょう。■左側のパレットからfunctionノードをドラッグ&ドロップで追加します。
Node-REDでWatsonアプリを作成 Web編
functionカテゴリfunctionノード
■設定画面を開き 1⾏目に「context.global.answer = msg.payload;」と追記します。2⾏目は変更なしでOKです。
© 2015 IBM Corporation51
Node-REDでWatsonアプリを作成 Web編■追加したfunctionノードが、Q and Aノードとdebugノードの間に入るように線を繋ぎます。
これでWatsonからの回答が”context.global.answer”という変数に代入されました。続いて、その回答をWebページに表示するフローを作ってみましょう。
© 2015 IBM Corporation52
■Watsonからの回答をWebページに表示するフローを作ってみましょう。左側のパレットから、以下の4つのノードをキャンバスにドラッグ&ドロップして配置します。
Node-REDでWatsonアプリを作成 Web編
inputカテゴリhttpノード
functionカテゴリfunctionノード
functionカテゴリtemplateノード
outputカテゴリhttp responseノード
© 2015 IBM Corporation53
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/wat1」と⼊⼒します。
OKをクリックします
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation54
■functionノードをダブルクリックして設定画面を開き、1⾏目に「msg.payload = context.global.answer;」と追記します。2⾏目は変更なしでOKです。
OKをクリックします
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation55
■templateノードをダブルクリックして設定画面を開き、1⾏目に「<h1>Watsonさんの回答</h1>{{payload}}」と⼊⼒します。
OKをクリックします
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation56
■http responseノード は変更なしでOKです。■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation57
■先程と同様、injectノードの左端部分をクリックすると、処理が開始されます。Watsonからの回答がdebug画面に表示されていることを確認します。
■Webブラウザの新しいタブを開きます。Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「wat1」と⼊⼒してWebページにアクセスします。
(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/wat1 を開きます。
Watsonからの回答がWebブラウザに表示されました!
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation58
■Webブラウザから質問⽂を⼊⼒できるようにしましょう。これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。
■Shiftキーを押しながら先程作成した2つ目のフローをクリックします。このフローのすべてのノードが選択されます。
■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。
Node-REDでWatsonアプリを作成 Web編
フローをコピーします
© 2015 IBM Corporation59
■左端のhttpノードをダブルクリックし、URLを「/wat2」と変更します。■2番目のfunctionノードをクリックして選択し、「Delete」キーを押して削除します。■3番目のtemplateノードは次ページを参照。■4番目のhttp responseノードはそのままでOKです。
Node-REDでWatsonアプリを作成 Web編
削除 変更なし次ページ
© 2015 IBM Corporation60
■3番目のtemplateノードに、質問文を受け取るHTMLフォームを定義します。ダブルクリックして以下の内容を⼊⼒してください。元の記載内容は削除します。
Node-REDでWatsonアプリを作成 Web編
<form action=“/wat3” method=“post”><input type=“text” name=“question” value=“Which is the best hotel to stay in Okayama?”><br><button type=“submit”>質問する</button></form> 質問例⽂
■以下のように3つのノードを線で繋ぎます。これでWebブラウザから質問⽂を⼊⼒するフローができました。
© 2015 IBM Corporation61
■Watsonに質問し、回答を表示するフローを作成しましょう。これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。
■Shiftキーを押しながら先程作成した2つ目のフローをクリックして選択します。■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。
キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。
Node-REDでWatsonアプリを作成 Web編
もう⼀度フローをコピーします
© 2015 IBM Corporation62
■左端のhttpノードをダブルクリックし、Methodを「POST」、URLを「/wat3」と変更します。■2番目のfunctionノードをダブルクリックし、「context.global.answer」の部分を「msg.payload.question」と書き換えます。■3番目のtemplateノードはそのままでOKです。■4番目のhttp responseノードもそのままでOKです。
Node-REDでWatsonアプリを作成 Web編
変更なし変更なし
© 2015 IBM Corporation63
■Watsonに質問する処理を追加します。最初に作成したフローから、Q and Aノードをコピーします。
Node-REDでWatsonアプリを作成 Web編
Q and Aノードをコピーします
パレットからQ and Aノードを追加してもOKです。その場合は忘れずCorpusを「Travel」に変更してください。
© 2015 IBM Corporation64
■ノードを下記のように線で繋ぎ直します。これでWatsonに質問をして回答をWebブラウザに表示するフローが完成しました。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation65
■Node-REDフローエディタのURLの末尾の「red/#」を削除し、代わりに「wat2」と⼊⼒してWebページにアクセスします。
(例)http://node-red/red/#の場合は、http://node-red/wat2 を開きます。■質問⽂を⼊⼒して「質問する」をクリックすると回答画面に遷移します。Watsonからの回答がWebブラウザに表示されればOKです!
お疲れ様でした!このようにWebアプリケーションを作成する場合もNode-REDは非常に便利です。
Node-REDでWatsonアプリを作成 Web編
© 2015 IBM Corporation
IBM Cloud
66
Node-REDでDBアクセス
© 2015 IBM Corporation
IBM Cloud
67
1.⾦沢区が公開しているAEDの設置場所のデータをWebから取得します。Webブラウザを起動し、「⾦沢区データポータル」にアクセスします。https://ibm.biz/kanazawa
2.「AED設置場所」をクリックしてCSVファイルを保存します。ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
68
3.ダッシュボードにて、最初のハンズオンで作成したSQL Databaseサービスをクリックします。
4. Launch をクリックしてSQL Database のコンソールを起動します。
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
69
5.Load Dataをクリックします。SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
70
6.”Brows files” をクリックし、ダウンロードした”3-kz-somu.csv” を指定します。ダウンロードしたcsvファイルのコードページはShift_JISですので、Code pageを”1208”から”943”に上書き変更します。Does the file have columns that contain dates or times? を“Yes”にし、右下の”Load File” をクリックします。
コードページを1208→943
に変更
Yesに変更
ダウンロードしたcsvファイルを指定
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
71
7.サンプルデータのCSVファイルの内容が表示されていることを確認し、”Next” をクリックします。
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
72
8.”Create a new table and load” にチェックを入れ、”Next” をクリックします。SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
73
9.”Table name” を 「AEDKANAZAWA」に変更します。10.Columnを以下のとおり変更し、”Finish” をクリックします。
名称 ⇒ NAME 住所 ⇒ ADDRESS緯度 ⇒ LATITUDE 経度 ⇒ LONGITUDEAEDの数 ⇒ AED 更新⽇ ⇒ UPDATE
SQL Databaseへのデータ取り込み
© 2015 IBM Corporation
IBM Cloud
74
11.ロードしたテーブルを確認します。左上の「Manage」から「Work with Table」を選択します。
12.左側に表示されている「AEDKANAZAWA」をクリックすると、右側にテーブルの情報が表示されます
SQL Databaseへのデータ取り込み
表の作成とデータの取り込みが完了しました
© 2015 IBM Corporation
IBM Cloud
75
SQL Databaseサービスのバインド
1.上部メニューの”ダッシュボード”から、先ほど作成したNode-REDのアプリケーションを選択します。
2.「サービスまたはAPIのバインド」をクリックします。
© 2015 IBM Corporation
IBM Cloud
76
3. バインド可能なサービスが表示されます。「SQL Database」を選択し、「追加」をクリックします。
4. アプリケーションの再ステージの確認があるので「再ステージ」をクリックします。
ステージングが完了すると、Node-RED から SQL Databaseサービスが利⽤できるようになります。
SQL Databaseサービスのバインド
© 2015 IBM Corporation77
■SQL DatabaseからAEDの情報を取得するWeb APIを作成します■左側のパレットから、以下の3つのノードをキャンバスにドラッグ&ドロップして配置します。
Node-REDでDBアクセス
inputカテゴリhttpノード
outputカテゴリhttp responseノード
storageカテゴリsqldbノード
左右にコネクタが付いたノードです
© 2015 IBM Corporation78
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/api/aed」と⼊⼒します。
OKをクリックします
Node-REDでDBアクセス
© 2015 IBM Corporation79
■sqldbノード をダブルクリックして設定画面を開きます。
-Server :バインドしたSQL Databaseサービスを選択-Query : SELECT * FROM AEDKANAZAWA
OKをクリックします
Node-REDでDBアクセス
© 2015 IBM Corporation80
■http responseノード は変更なしでOKです。
■3つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
Node-REDでDBアクセス
© 2015 IBM Corporation81
Node-REDでDBアクセス■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの末尾の「red/#」を削除し、替わりに「api/aed」と⼊⼒してWebページにアクセスします。
(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/api/aed を開きます。
DBに格納されたAEDの情報がWebブラウザに表示されました!
© 2015 IBM Corporation82
Node-REDでDBアクセス■作成したAPIを呼び出すアプリケーションを作成します。■左側のパレットから、以下の3つのノードをキャンバスにドラッグ&ドロップして配置します。inputカテゴリ
httpノードoutputカテゴリ
http responseノード
functionカテゴリtemplateノード
© 2015 IBM Corporation83
■順に各ノードの設定を⾏っていきましょう。
■httpノード をダブルクリックして設定画面を開き、URLに「/aedmap」と⼊⼒します。
OKをクリックします
Node-REDでDBアクセス
© 2015 IBM Corporation84
■templateノード をダブルクリックして設定画面を開き、Template の内容として、https://ibm.biz/BdXueL のHTMLをコピーします
OKをクリックします
Node-REDでDBアクセス
© 2015 IBM Corporation85
■http responseノード は変更なしでOKです。
■3つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。右上の「deploy」をクリックします。
Node-REDでDBアクセス
© 2015 IBM Corporation86
Node-REDでDBアクセス■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの末尾の「red/#」を削除し、替わりに「aedmap」と⼊⼒してWebページにアクセスします。
(例)http://node-red.xxx/red/#の場合は、http://node-red.xxx/aedmap を開きます。
アプリケーションが起動すれば成功です!
© 2015 IBM Corporation
IBM Cloud
87
Node-REDでIoTアプリを作成
© 2015 IBM Corporation
IBM Cloud
88
Node-REDでIoTアプリを作成
IBM IoTFoundation
デバイス IBM Bluemix
■全体像 アプリケーション
スマホのセンサーで計測したデータをクラウドサービスに送信
サービス
アプリはサービスからセンサーデータを取得して処理する
IoT Foundationサービスはセンサーデータを仲介する
© 2015 IBM Corporation
IBM Cloud
89
■スマートフォンをお持ちの方は、スマホのブラウザで以下のURLにアクセスしてください。
http://phonesensor.mybluemix.net
PhoneSensorが起動します。スマホに内蔵された各種センサーの情報を取得し、BluemixのIoT Foundationサービスに送信しています。
■このセンサー情報を受け取って処理するアプリをBluemix上の Node-REDで作ってみましょう。
Node-REDでIoTアプリを作成
© 2015 IBM Corporation
IBM Cloud
90
■スマホのセンサー情報を、クラウド上のIoT Foundationサービスから受け取ってみましょう。左側のパレットから「ibmiot」ノードを中央のキャンバスにドラッグ&ドロップします。
■キャンバスにドロップした「IBM IoT App In」ノードをダブルクリックして設定画面を開きます。Authentication は「Quickstart」を選択。Device Id に先程のPhoneSensorに表示されている⽂字列の末尾12桁の数字を⼊⼒。
Node-REDでIoTアプリを作成
ドラッグ&ドロップ
この数字を転記する
© 2015 IBM Corporation
IBM Cloud
91
■受け取ったデータを表示するノードを用意します。左側のパレットから「debug」ノードを中央のキャンバスにドラッグ&ドロップします。
■ノードの横にあるコネクタをクリック&ホールドし、「ibmiot」ノードと「debug」ノードを線で繋ぎます。
Node-REDでIoTアプリを作成
ドラッグ&ドロップ
この部分を掴んで引っ張る
© 2015 IBM Corporation
IBM Cloud
92
■これでデータの⼊⼒と出⼒の定義ができました。それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。(この文字はすぐに消えます)
■実⾏結果を確認してみましょう。右上の「debug」タブを選択します。debugノードに流れてきたデータはここに表示されます。
先程のPhoneSensorを動かします。スマホのセンサー情報がdebug画面に表示されれば成功です。
Node-REDでIoTアプリを作成
取得できる情報はスマホの機種によって異なる場合があります。
© 2015 IBM Corporation
IBM Cloud
93
■debug画面にセンサーデータがうまく表示されない場合のチェックポイント-PhoneSensorが正しく稼動しているかどうかを確認してください。スリープ状態でアプリが停止していないでしょうか。
-PhoneSensorの接続ステータスが「Connected」になっていることを確認してください。例えば、誤ってPhoneSensor画面下部の「Register」をタップしてしまうと、ステータスが「Disconnected」になります。
-「ibmiot」ノードのDevice Idが正しく設定されているかどうかをご確認ください。スマホのWebブラウザでPhoneSensorを再読み込みするとDevice Idが変わってしまいます。その場合は再度「ibmiot」ノードの定義情報をPhoneSensor側と同じになるよう変更してください。
Node-REDでIoTアプリを作成
© 2015 IBM Corporation
IBM Cloud
94
■正しくセンサー情報が取得できたので、この情報に応じて何らかの処理を⾏うフローを作ってみましょう。「tiltLR」というデータ項目に着目します。これはスマホ端末の左右の傾きを測定しているようです。実際に端末を動かして、値の変化を確認してください。この傾き度合いによって表⽰メッセージを変えてみましょう。
■センサー情報から「tiltLR」の値だけを抽出します。左側のパレットから「function」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、Functionの内容を以下のように書き換えて「OK」をクリックします。
return {payload:msg.payload.d.tiltLR};
Node-REDでIoTアプリを作成
© 2015 IBM Corporation
IBM Cloud
95
■正しく動くかどうか確認してみましょう。「ibmiot」と「debug」との間に、今作成した「function」ノードを挟むように線を繋ぎ変えます。
■右上の「Deploy」ボタンをクリックします。
■不要な情報が削除されて、「tiltLR」の値だけが表示されればOKです。
Node-REDでIoTアプリを作成
線はクリックで選択した状態でDeleteキーで削除できます。
© 2015 IBM Corporation
IBM Cloud
96
■「tiltLR」の値によって処理を分岐させます。左側のパレットから「switch」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、分岐条件を指定します。左に5度以上傾いた場合=「左に傾いてます」右に5度以上傾いた場合=「右に傾いてます」傾きが5度未満の場合=「ほぼフラットです」
上記のような条件設定をするには右図のように指定して「OK」をクリックします。
Node-REDでIoTアプリを作成
条件を追加するには、「+rule」ボタンをクリックします。
傾きが-5度以上(左)なら1番へ傾きが5度以上(右)なら2番へ
どちらでもない(フラット)なら3番へ
© 2015 IBM Corporation
IBM Cloud
97
■条件分岐された後の処理を作成します。左側のパレットから「template」ノードを中央のキャンバスにドラッグ&ドロップします。
ダブルクリックで設定画面を開き、表示するメッセージを定義します。ご⾃由にメッセージの内容を⼊⼒してください。
同様に2番、3番のノードも作成し、それぞれメッセージを定義します。最後にswitchノードのコネクタと1番、2番、3番のノードを線で繋げます。
Node-REDでIoTアプリを作成
{{payload}} と指定すると、先程debug画面で確認した傾きデータの値が表示されます。
1番(左)
2番(右)
3番(フラット)
© 2015 IBM Corporation
IBM Cloud
98
■キャンバスの中を整理して、各ノードを以下の図のように接続してください。
■処理フローが完成しました!それでは実際に動かしてみましょう。右上の「Deploy」ボタンをクリックします。
Node-REDでIoTアプリを作成
正しく線が繋がっていれば、ノード自体はキャンバス内のどこに置かれていても動作に影響はありません。
© 2015 IBM Corporation
IBM Cloud
99
■「Successfully Deployed」のメッセージが表示されれば成功です。
PhoneSensorを稼動させたスマホを左右に傾けてメッセージが正しく表示されることを確認してください。
Node-REDでIoTアプリを作成
お疲れ様でした!IBM Bluemix と Node-RED によって、ほぼノンプログラミングでIoTデバイスから収集したデータを処理するアプリが作れました。
© 2015 IBM Corporation100
Node-RED応用編
© 2015 IBM Corporation
IBM Cloud
101
■Node-REDは作成したフローをJSON形式のテキストとして、export/importすることができます。
Node-REDでフローのエクスポート/インポート
[{“id”:“13257eec.669069”,“type”:“websocket-listener”,“path”:“/ws/stations”,“wholemsg”:“false”},{“id”:“28a6990b.d75966”,“type”:“websocket out”,“name”:“”,“server”:“13257eec.669069”,“x”:677,“y”:274,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“f5ecfe3e.0a13”,“type”:“xml”,“name”:“”,“attr”:“$”,“chr”:“_”,“x”:498.5,“y”:275,“z”:“60aa0f7b.9f55f”,“wires”:[[“28a6990b.d75966”,“3e967dc2.c16982”]]},{“id”:“3e967dc2.c16982”,“type”:“debug”,“name”:“”,“active”:true,“console”:“false”,“complete”:“false”,“x”:626.5,“y”:340,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“2c1c43fd.d3e3bc”,“type”:“http request”,“name”:“リクナビAPI呼び出し”,“method”:“GET”,“url”:“http://webservice.recruit.co.jp/shingaku/school/v2/?code=SC000059&key=43ba47966ce3abea”,“x”:326,“y”:275,“z”:“60aa0f7b.9f55f”,“wires”:[[“f5ecfe3e.0a13”]]},{“id”:“ad4079b6.52bf88”,“type”:“websocket in”,“name”:“”,“server”:“13257eec.669069”,“x”:126,“y”:275,“z”:“60aa0f7b.9f55f”,“wires”:[[“2c1c43fd.d3e3bc”]]},{“id”:“fda27200.025d9”,“type”:“http response”,“name”:“”,“x”:492,“y”:181,“z”:“60aa0f7b.9f55f”,“wires”:[]},{“id”:“774506a8.88baf8”,“type”:“template”,“name”:“表示内容の定義”,“field”:“payload”,“template”:“<!DOCTYPE html>¥n<html>¥n <head>¥n <meta name=¥”viewport¥“ content=¥”initial-scale=1.0, user-scalable=no¥“>¥n <meta charset=¥”utf-8¥“>¥n <title>大学キャンパスマップ</title>¥n <style>¥n html, body, #map-canvas {¥n height: 94%;¥n margin: 5px;¥n padding: 0px¥n }¥n </style>¥n <script src=¥"https://maps.googleapis.com/maps/api/js?v=3.exp¥"></script>¥n <script>¥n¥t¥tfunction initialize() {¥n¥t¥t var myLatlng= new google.maps.LatLng(36.095, 140.084);¥n¥t¥t var mapOptions = {¥n¥t¥t zoom: 11,¥n¥t¥t center: myLatlng,¥n¥t¥t };¥n¥t¥t var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);¥n¥t¥t ¥n¥t¥t var loc = window.location;¥n if (loc.protocol === ¥"https:¥") {¥n newUri = ¥"wss:¥";¥n } else {¥n newUri = ¥"ws:¥";¥n }¥n newUri += ¥"//¥" + loc.host + ¥"/ws/stations¥";¥n¥t¥t ¥n¥t¥t ¥n¥t¥t var sock = new WebSocket(newUri);¥n¥t¥t sock.onopen = function(){ ¥n¥t¥t console.log(¥"Connected websocket¥");¥n¥t¥t console.log(¥"Sending ping..¥");¥n¥t¥t¥tsock.send(¥"Ping!¥");¥n¥t¥t console.log(¥"Ping sent..¥");¥n¥t¥t };¥n¥t¥t sock.onerror = function(){ console.log(¥"Websocket error¥"); };¥n¥t¥t sock.onmessage = function(evt){¥n¥t¥t var schoolData = JSON.parse(evt.data);¥n¥t¥t var stations = schoolData.results.school[0].campus;¥n¥t¥t¥tfor(var i = 0; i< stations.length; i++) {¥n¥t¥t¥t var camp = stations[i];¥n var marker = new google.maps.Marker({¥n¥t¥t¥t position: new google.maps.LatLng(camp.latitude[0],camp.longitude[0]),¥n¥t¥t¥t map: map,¥n¥t¥t¥t animation: google.maps.Animation.BOUNCE,¥n¥t¥t¥t title: camp.address[0]¥n¥t¥t¥t });¥n¥t¥t¥t ¥n¥t¥t¥t}¥n¥t¥t };¥n¥t¥t};¥n¥t¥t¥n¥t¥tgoogle.maps.event.addDomListener(window, 'load', initialize);¥n¥n </script>¥n </head>¥n <body>¥n <div id=¥"map-canvas¥"></div>¥n <font size=¥"6¥">大学キャンパスマップ</font>¥n <br>powered by IBM Bluemix and Node-RED¥n <div align=¥"right¥"> ¥n <a href=¥"http://webservice.recruit.co.jp/¥"><img src=¥"http://webservice.recruit.co.jp/banner/shingaku-m.gif¥" alt=¥"リクナビ進学 Webサービス¥" width=¥"88¥" height=¥"35¥" border=¥"0¥" title=¥"リクナビ進学 Webサービス¥"></a>¥n </div> ¥n </body>¥n</html>","x":330,"y":181,"z":"60aa0f7b.9f55f","wires":[["fda27200.025d9"]]},{"id":"636d7b37.9c9284","type":"http in","name":"","url":"/schoolmap","method":"get","x":143,"y":181,"z":"60aa0f7b.9f55f","wires":[["774506a8.88baf8"]]}]
ここから先は応用編です。余裕のある方はぜひ試してみてください。
JSON形式のテキストの例
© 2015 IBM Corporation
IBM Cloud
102
□http://ibm.biz/noderedwebWatsonに質問をするWebアプリを機能拡張したフローを公開しています。
この記事の「4. サンプルフロー」の手順でフローを取り込んでみましょう。今回のハンズオンで作成したアプリだけでなく、さらに拡張したフローもありますのでWebアプリ作成の参考にしてください。
Node-REDでWatsonアプリを作成 Web編 - option
© 2015 IBM Corporation
IBM Cloud
103
□http://ibm.biz/noderedflow地図を表示するGoogle Maps APIと大学の情報を提供するリクナビ進学APIを連携させたキャンパスの場所を地図上に示すサンプルアプリのフローを公開しています。これらのフローをNode-REDに取り込んでみましょう。■JSON形式のテキストを「選択」→「コピー」します。
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
104
■Node-REDでシートを追加します。上部の「+」(プラス)ボタンをクリックして、新しいシートを開きます。
■新しいシートに先程コピーした処理フローを取り込みます。上部右端の三本線のアイコンをクリックし、表示されたメニューから「import」→「Clipboard」を選択します。
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
105
■「Import nodes」ウィンドウが表示されるので、先程クリップボードにコピーしたテキストをペーストして、OKボタンをクリックします。
■処理フローが取り込まれますので、キャンバスの適当な場所をクリックして配置します。
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
106
■このアプリを動かしてみましょう。右上の「Deploy」ボタンをクリックします。
■画面上部に「Successfully Deployed」の文字が表示されればOKです。
■実⾏結果を確認してみましょう。Webブラウザの新しいタブを開いて、Node-REDのホスト名の末尾に「/schoolmap」というパスを付加したURLにアクセスします。
Node-REDでWeb APIを活用したアプリを動かす
http://iotserver2015xx.mybluemix.net/red/# でNode-REDを開いている場合、
http://iotserver2015xx.mybluemix.net/schoolmap にアクセスします。
(例)
Node-REDを開いているWebブラウザのURLの末尾の「/red/#」を削除し、「/schoolmap」を追加します。
© 2015 IBM Corporation
IBM Cloud
107
■Node-REDで作ったサンプルアプリ「筑波大学はココ!」が表示されればOKです。
地図上の筑波大学のキャンパスにマーカーが表示され、マウスポインタを合わせると大学の住所が表示されます。
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
108
■debug画面に、リクナビ進学APIを呼び出した結果が表示されていることを確認してください。緯度経度や住所以外にも様々な情報が取得できています。
このようにクラウドで公開されている外部のAPIを呼び出すことで、アプリの機能を拡張できます
Node-REDでWeb APIを活用したアプリを動かす
© 2015 IBM Corporation
IBM Cloud
109
□試してみましょう□リクナビ進学APIに対してリクエストする内容を変えてみましょう。
■「リクナビAPI呼び出し」ノードをダブルクリックして構成画面を開きます。
■URL欄の「code=SC000059」の部分を「code=SC000006」と変更して「OK」をクリック。
■デプロイして結果を⾒てみましょう。右上の「Deploy」ボタンをクリックします。「筑波大学はココ!」をWebブラウザで再読み込みすると、実⾏結果はどう変わるでしょうか?
Node-REDでWeb APIを活用したアプリを動かす - option
SC000006は茨城大学の学校コードです。時間のある方は、
SC000192 : 関⻄⼤学SC000491 : 日本大学
なども試して結果を確認してみましょう。
© 2015 IBM Corporation
IBM Cloud
110
■大学キャンパスマップアプリはBluemix環境のNode-RED上で稼動しています。地図はGoogle Maps APIを、⼤学の住所および緯度経度の情報はリクナビ進学APIを呼び出して統合し、Webブラウザ上に表示しています。
API活用によるアプリ開発とIBM Bluemix
Google Maps API
リクナビ進学API
大学キャンパスマップアプリ
クラウドの世界ではAPIの公開が拡がっている
IBM Bluemix
APIを活用することで効率的なアプリ開発が可能
Recommended