リンクをクリックして、Node-REDにアクセスします。
これで
Node-RED
からWatson
のQ&A
サービスが利⽤できるようになります。■Node-REDが起動します。
Sheet 1に先ほど作成したフローが残っている方は別シートを追加します。
上部の「+」（プラス）ボタンをクリックします。
新しいシートが開きますので、ここで処理フローを作成してみましょう。
■Watsonに質問を投げて、その回答を受け取るフローを作ってみましょう。
左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。
inputカテゴリ
injectノード outputカテゴリ
debugノード
functionカテゴリ
templateノード IBM_Watsonカテゴリ
Q and Aノード
■injectノード をダブルクリックして設定画面を開き、Payloadで「blank」を選択します。
OKをクリックします
■functionノード にはWatsonに投げる質問⽂を⼊⼒します。
ここでは例として「Which is the best hotel to stay in Okayama?」とします。
OKをクリックします
■Q and Aノード ではWatsonのコーパスを指定します。
Corpusで「Travel」を選択します。
OKをクリックします
■debugノード は変更なしでOKです。
■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
■inject
templateノードに書かれた質問文がWatson Q&Aサービスに投げられ、その結果が 右端のdebug画面に表示されます。
ここをクリック
debugタブを選択
Watson
からの回答が表示されれば成功です！Node-REDを使⽤すると、⼀⾏もコードを書かずにWatson Q&Aサービスを利⽤できます。
■次にWatsonからの回答をWebページに表示するようにフローを編集してみましょう。
■左側のパレットからfunctionノードをドラッグ＆ドロップで追加します。
functionカテゴリ
functionノード
■設定画面を開き 1⾏目に「context.global.answer = msg.payload;」と追記します。
2⾏目は変更なしでOKです。
■追加したfunctionノードが、Q and Aノードとdebugノードの間に入るように線を繋ぎます。
これで
Watson
からの回答が” context.global.answer”という変数に代入されました。
続いて、その回答を
Web
ページに表示するフローを作ってみましょう。■Watsonからの回答をWebページに表示するフローを作ってみましょう。
左側のパレットから、以下の4つのノードをキャンバスにドラッグ＆ドロップして配置します。
inputカテゴリ httpノード functionカテゴリ
functionノード
functionカテゴリ
templateノード outputカテゴリ
http responseノード
■httpノード をダブルクリックして設定画面を開き、URLに「/wat1」と⼊⼒します。
OKをクリックします
■functionノードをダブルクリックして設定画面を開き、
1⾏目に「msg.payload = context.global.answer;」と追記します。
2⾏目は変更なしでOKです。
OKをクリックします
■templateノードをダブルクリックして設定画面を開き、
1⾏目に「<h1>Watsonさんの回答</h1>{{payload}}」と⼊⼒します。
OKをクリックします
■http responseノード は変更なしでOKです。
■4つのノードを下記のように線で繋ぎます。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
■先程と同様、injectノードの左端部分を クリックすると、処理が開始されます。
Watsonからの回答がdebug画面に 表示されていることを確認します。
■Webブラウザの新しいタブを開きます。
Node-REDフローエディタのURLの 末尾の「red/#」を削除し、代わりに
「wat1」と⼊⼒してWebページに アクセスします。
(例)
http://node-red.xxx/red/#の場合は、
http://node-red.xxx/wat1
を開きます。Watson
からの回答がWeb
ブラウザに表示されました！■Webこれまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。
■Shiftキーを押しながら先程作成した2つ目のフローをクリックします。
このフローのすべてのノードが選択されます。
■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。
キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。
フローをコピーします
■左端のhttpノードをダブルクリックし、URLを「/wat2
■2番目のfunctionノードをクリックして選択し、「Delete」キーを押して削除します。
■3番目のtemplateノードは次ページを参照。
■4番目のhttp responseノードはそのままでOKです。
削除 次ページ 変更なし
■3番目のtemplateノードに、質問文を受け取るHTMLフォームを定義します。
ダブルクリックして以下の内容を⼊⼒してください。元の記載内容は削除します。
<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ブラウザから質問⽂を⼊⼒するフローができました。
■Watsonに質問し、回答を表示するフローを作成しましょう。
これまで作成したフローから、再利⽤できる部分をコピーして新しいフローを作成してみます。
■Shiftキーを押しながら先程作成した2つ目のフローをクリックして選択します。
■「Ctrl」キーと「C」キーを同時に押してコピーし、「Ctrl」キーと「V」キーでペーストします。
キャンバスの適当な場所をクリックすると、コピーしたフローが配置されます。
もう⼀度フローをコピーします
■左端のhttpノードをダブルクリックし、Methodを「POST」、URLを「/wat3
■2番目のfunctionノードをダブルクリックし、「context.global.answer」の部分を
「msg.payload.question」と書き換えます。
■3番目のtemplateノードはそのままでOKです。
■4番目のhttp responseノードもそのままでOKです。
変更なし 変更なし
■Watson
最初に作成したフローから、Q and Aノードをコピーします。
Q and A
ノードをコピーします パレットからQ and A
ノードを追加しても
OK
です。その場合は忘れず
Corpus
を「
Travel」に変更してください
。■ノードを下記のように線で繋ぎ直します。
これでWatsonに質問をして回答をWebブラウザに表示するフローが完成しました。
■それでは実⾏してみましょう。
右上の「deploy」をクリックします。
■Node-REDフローエディタのURLの 末尾の「red/#」を削除し、代わりに
「wat2」と⼊⼒してWebページに アクセスします。
(例)
http://node-red/red/#の場合は、
http://node-red/wat2
を開きます。■質問⽂を⼊⼒して「質問する」をクリック すると回答画面に遷移します。
Watsonからの回答がWebブラウザに 表示されればOKです！
お疲れ様でした！
このように
Web
アプリケーションを作成する場合もNode-REDは非常に便利です。
Node-REDでDBアクセス
１．⾦沢区が公開している AEDの設置場所のデータをWebから取得します。
Web ブラウザを起動し、「⾦沢区データポータル」にアクセスします。
https://ibm.biz/kanazawa
２．「AED設置場所」をクリックしてCSVファイルを保存します。
ファイル名はデフォルトの ”3-kz-somu.csv” のままで結構です。
3．ダッシュボードにて、最初のハンズオンで作成したSQL Databaseサービスをクリックします。
4． Launch をクリックしてSQL Database のコンソールを起動します。
5．Load Dataをクリックします。
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ファイルを指定