Watson Workspace用チャットボットを作る方法

# Watson Workspaceをご存知でしょうか？

Slackのようなメッセージングサービスで、Web以外にPC向けやスマートフォン向けアプリも提供されています。IBM IDを持っていれば、誰でも利用することができます。IBM IDは、個人でも取得できます。
2017年10月12日現在は、有料の「Essentials」と無料の「Preview」の２つ。今回は、無料の「Preview」に登録し、WebhookとNode-REDを使って、Watson Workspaceのためのチャットボットアプリを作ってみましょう。
先ずは、Watson Workspace に[登録](https://help.workspace.ibm.com/hc/ja)します。

# Watson Workspace アプリの作成

Watson workspaceにログインし、画面左下の歯車のアイコンから「Developers」をクリックします。
![watson_workspace_アプリ開発_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/83a1aa76-26db-f05d-a796-5183b046a6ca.png)

「Go to Watson Work Services」をクリックします。
![watson_workspace_アプリ開発_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/28c2e8c0-78d5-b7f3-1e56-a3083c2875ca.png)

Watson workspaceへのログインに使用しているIBM ID でログインします。
![watson_workspace_アプリ開発_3.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/2ae1339a-c1af-43ff-0745-b196116d79e8.png)

画面右上の「Your Apps」をクリックします。次に、「Create new App」をクリックします。
![watson_workspace_アプリ開発_4.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/33d9a54e-c002-8ab4-1cb2-35e21da9d9bb.png)

![watson_workspace_アプリ開発_5.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/1a99af3f-94d9-2fc8-2ece-df66cf62d4fa.png)


「Create new App」画面で、最低アプリケーション名だけでも入力します。「Create」をクリックします。
![watson_workspace_アプリ開発_6.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/00aff1ce-6418-158b-dc5e-6b1215ec0315.png)

表示された「App ID」と「App secret」をメモしておきます。両方とも使いますし、特に「App secret」は、「Got it」をクリックして閉じると二度と表示されません。
![watson_workspace_アプリ開発_7 - コピー.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/8643f4a2-6055-bfa7-b950-efa4851aebb1.png)

# スペースの設定

Watson Workspace画面で、スペースを選択します。
スペース名横の下向きの矢印をクリックし、スペース設定画面を表示します。
![watson_workspace_アプリ開発_スペース設定_0.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/f6d976bb-75a5-faa2-2229-ff7b0d3c4e4c.png)

スペース設定画面で、「Apps」をクリックし、作成したアプリのアイコンをクリックします。
![watson_workspace_アプリ開発_スペース設定_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/bc1224c7-a49f-e736-8e2d-f775afc81505.png)

表示された画面で「Add App」をクリックし、緑色のチェックがつけばOKです。
![watson_workspace_アプリ開発_スペース設定_3.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/59fbaf2c-4373-cf19-3bd0-7487fe974852.png)

# Node-REDを用意

一先ず画面はそのままに、別のタブやウィンドウを開いて、Bluemix上でNode-REDを起動します。Node-REDが手元に無い方は、Bluemixにログインし、ボイラーテンプレートの「[Node-RED Starter](https://console.bluemix.net/catalog/starters/node-red-starter)」を使って、Node-RED環境を用意してください。Bluemixアカウントをお持ち出ない方は、[標準プラン](https://qiita.com/kolinz/items/84abe854d6173283998a)を使えばクレジットカードなしで用意することができます。

# Node-RED：ノードを追加

Watson WorkspaceをNode-REDで使用するために、「[node-red-contrib-wwsNodes](https://www.npmjs.com/package/node-red-contrib-wwsNodes)」を追加します。追加方法は、Node-REDにアクセスし、User Settings からノードを追加します。
![watson_workspace_アプリ開発_node-red_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/7abe3a37-0c15-d451-8d24-db024c14e425.png)

# Node-RED：ノード設定 (1)

ノード追加後、入力から「wwsin」ノードを配置し、設定します。「WWS App」の右端にあるペン型のアイコンをクリックし、下記項目に入力します。

- App Name：先ほど作成したアプリ名
- App ID : メモしたApp ID
- App secret : メモしたApp secret

保存しますと、下図のような画面が表示されます。
![watson_workspace_アプリ開発_node-red_3.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/0b4bfab2-535d-e0bd-2614-b511a3c46fef.png)

この状態で、再び、Watson Workspace側の画面に戻ります。

# Watson Workspace Webhookの設定 (1)

作成したアプリ設定画面を開きます。Watson Workspaceの「Your App」の画面で作成したアプリ名をクリックし、アプリ名設定画面を開きます。
![watson_workspace_アプリ.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/1410ab99-4ac9-a8b3-ce30-294b2eb6e91c.png)

画面左側の「Listen to events」から、「Add an outbound webhook」をクリックします。
![watson_workspace_アプリ開発_node-red_4.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/00e86caf-ce6c-faa8-44e2-f5d470e80e04.png)


下記の画面が表示されます。次の項目を入力します。

- Webhook Name : 英数字で名称を入力
- Webhook URL : ノードの「wwwsin」の設定が表示されたWebhook URLを入力。しかしミスが一箇所だけあります。ここでは、Node-REDのURLが、https://cource-app.eu-gb.mybluemix.net と想定します。
    - https://cource-app.eu-gb.mybluemix.netuser と、wwwsinのノード設定画面で表示されていますが、このままWebhooK URLにコピー&ペーストするとエラーが起きます。正解は、https://cource-app.eu-gb.mybluemix.net/user としてください。これでエラーなく通ります。
- Events : message-created にチェック

![watson_workspace_アプリ開発_node-red_5.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/3795f440-0b12-588c-25cb-632255bce5fd.png)

Saveをクリックします。
Id と Webhook secret をメモしておきます。Id は、Node-REDの「wwsin」ノード設定で、Webhook IDとして使用します。
![watson_workspace_アプリ開発_node-red_6 - コピー.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/0f71d08c-a561-1143-a54e-728945cb3ebd.png)

画面を閉じずに、Node-RED側の画面に戻ります。

# Node-RED：ノード設定 (2)

「wwsin」ノードの設定画面で、先ほどメモした「Webhook ID」と「Webhook secret」を入力します。「Callback URL」には、「/user」を入力し画面右上の「完了」をクリックします。
![watson_workspace_アプリ開発_8_ノード設定.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/ccde7d61-a833-fcae-ed43-c46d3086212a.png)

デバッグノードを追加して、「デプロイ」をクリックします。
![watson_workspace_アプリ開発_8_デプロイをクリック.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/878802e7-e747-13ce-ac2b-5a833b644ceb.png)

## Watson Workspace Webhookの設定 (2)

Webhook画面に戻ります。作成したWebhookの「Enable」をクリックします。
![watson_workspace_アプリ開発_node-red_7.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/5408e2b8-5c00-1e01-c651-70e0552bfa11.png)

## Webhook 動作チェック

Watson workspace のスペースにて、Hello! と投稿します。Node-REDのデバッグノードにログが表示されますので確認します。下図のように表示されるはずです。
![watson_workspace_アプリ開発_11 - コピー.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/a2b18eab-f861-a507-9f0e-5293d07d84f1.png)

デバッグ結果から、「content」がWatson Workspaceで投稿されたメッセージですから、これだけを抜き出して、そのまま返したり、Watson Conversationノードに引き渡すことで、チャットボットにすることができます。

# Node-RED：オウム返しのチャットボットを作る

「wwwsin」ノードに、「function」ノードを追加します。コードは次のように書き、保存します。

```
msg.payload = msg.payload.content+"";
return msg;
```

デバッグすると、Watson Workspaceのスペースに投稿されたメッセージだけ取得できます。

![watson_workspace_アプリ開発_12.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/af2fb85d-3ed9-8e6d-bfbe-c98798423a2e.png)

さらに、「wwws send」ノードを追加します。「WWS App」横の「新規にwwwsApplicationsを追加」をクリックし、登録済みのWatson Workspaceアプリを選択します。
![watson_workspace_アプリ開発_13.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/60713b8e-d8a7-a4b2-bdb2-efee1eaa2517.png)

「wwwsin」ノードで設定しましたので、既に登録されています。選択後、「完了」をクリックします。
![watson_workspace_アプリ開発_14.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/e53efe12-c3c7-5ca2-86fe-3fe4d41c02dd.png)

Watson Workspaceのスペースに投稿されたメッセージをそのまま返す、オウム返しのチャットボットのフローは下図のようになります。「wwws Send」ノードの手前に「Watson Conversation」ノードを追加すれば、実用的なチャットボットになります。

![watson_workspace_アプリ開発_15.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/ceec25f4-02f4-bc10-0f11-a004202eae45.png)

実際に動きを確認してみましょう。


# まとめ

シンプルなオウム返しするチャットボットにしました。Node-REDで作ったフローを拡張することで、SlackやFacebook、旅行サイト向けチャットボットなどで培った経験がそのまま活きます。


# おまけ
Watson Conversationノードを追加した場合のフローは下記のようになっています。
Node-REDで読み込んで試してみてください。

![node-red_conversation_workspace.PNG](https://qiita-image-store.s3.amazonaws.com/0/41414/425ff6b5-98f6-3e5e-1f82-b3a3b12ea4db.png)

```
[{"id":"12b6af25.cf81d1","type":"tab","label":"Watson Workspace Bot","disabled":false,"info":""},{"id":"4635d957.778128","type":"wwsIn","z":"12b6af25.cf81d1","name":"","wwsApplications":"","callbackUrl":"/user","whId":"","whSecret":"","x":100,"y":60,"wires":[["af1c9516.52e028"]]},{"id":"af1c9516.52e028","type":"function","z":"12b6af25.cf81d1","name":"funciton 1","func":"msg.payload = msg.payload.content+\"\";\nreturn msg;","outputs":1,"noerr":0,"x":260,"y":60,"wires":[["558429ac.fbb0b8","db9f932d.016ba"]]},{"id":"558429ac.fbb0b8","type":"debug","z":"12b6af25.cf81d1","name":"wwsIn input","active":true,"console":"false","complete":"payload","x":490,"y":60,"wires":[]},{"id":"4ad2b7a6.4220c8","type":"wwsSend","z":"12b6af25.cf81d1","name":"","wwsApplications":"","allSpaces":false,"listSpaces":"No space found","spaceId":"","update":"","spacesRefreshed":true,"x":750,"y":260,"wires":[]},{"id":"bc4b554a.ed01a8","type":"debug","z":"12b6af25.cf81d1","name":"conversation output","active":true,"console":"false","complete":"payload","x":490,"y":180,"wires":[]},{"id":"daadac34.fb465","type":"function","z":"12b6af25.cf81d1","name":"msg payload output text","func":"msg.payload=msg.payload.output.text+\"\";\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":260,"wires":[["4ad2b7a6.4220c8","2e497465.5ae0bc"]]},{"id":"2e497465.5ae0bc","type":"debug","z":"12b6af25.cf81d1","name":"wws send","active":true,"console":"false","complete":"payload","x":740,"y":340,"wires":[]},{"id":"db9f932d.016ba","type":"watson-conversation-v1","z":"12b6af25.cf81d1","name":"","workspaceid":"","multiuser":false,"context":true,"default-endpoint":true,"service-endpoint":"https://gateway.watsonplatform.net/conversation/api","x":290,"y":180,"wires":[["bc4b554a.ed01a8","daadac34.fb465"]]}]
```