NoodlでNode-RED on IBM Cloudの翻訳APIを使ってみた

Noodl Advent Calendar記念すべき１日目:ramen:
IBM Watsonのlanguage translatorを利用し、Noodl上で英語のテキストを入力すると日本語に翻訳してくれるアプリケーションを作ってみました！

# はじめに
Noodlはバージョン1.3.1を使っています。
Node-REDをIBM Cloud上で利用するための準備は、@makaishi2 さんと@kisaichi07 さんの記事を参考にさせていただきました。

・Noodl（バージョン 1.3.1）
　- [ダウンロード](https://classic.getnoodl.com/download)
・Node-RED on IBM Cloudについて参考にした記事
　- [最新版IBM Cloud ライトアカウント登録手順(2018-05-06時点)](https://qiita.com/makaishi2/items/ae83828a711d0d946011)
　- [IBM LiteアカウントでNode-REDインスタンスを作成する](https://qiita.com/makaishi2/items/ed9d4412331d7d65fde5)
・NoodlとIBM Cloudの連携で参考にした記事
　- [Noodl × IBM Cloud のNode-Red × Tone Analyzerで文章解析しよう](https://qiita.com/kisaichi07/items/69ac26b26e902c9b232a)

# 作ったもの
こんな感じ。
![translation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/cbcf682b-37b9-ca36-7a65-689af8ad044e.gif)


# 構成図
![architecture.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/805d653e-292d-00b7-d406-8e78f5fed3b5.jpeg)

# Language TranslatorとNode-REDを接続する
Node-REDでフロー構築する前に、IBM Cloud上でLanguage TranslatorとNode-REDを接続する必要があります。
### 手順
１. IBM Cloudログイン後、画面上の検索欄にLanguage Translator-epと検索して下の画像のページへ行きます。画像のように選択して「作成」をクリック。
![スクリーンショット 2019-11-24 20.07.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/ee99f81f-387f-e506-c692-1d8ac53d2bf0.png)
2. Node-REDのダッシュボードへアクセスし、「接続の作成」をクリック。
![スクリーンショット 2019-11-24 20.15.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/01e7c6e1-9ecf-231e-b635-86510cf939ee.png)
3. サービス欄にLanguage Translator-epが出てきたら、「接続」をクリック。
![スクリーンショット 2019-11-24 20.16.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/a0224578-e82d-34f8-275f-08bf876b137a.png)


# Node-RED on IBM Cloudでのフロー構築
１. 以下のJSONフォーマットをコピー（今回作ったデータです）

```
[
    {
        "id": "bec2a13.2c4746",
        "type": "tab",
        "label": "翻訳",
        "disabled": false,
        "info": ""
    },
    {
        "id": "2e245bef.5f4334",
        "type": "debug",
        "z": "bec2a13.2c4746",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 650,
        "y": 120,
        "wires": []
    },
    {
        "id": "32b85710.83a198",
        "type": "http in",
        "z": "bec2a13.2c4746",
        "name": "",
        "url": "/translate",
        "method": "post",
        "upload": false,
        "swaggerDoc": "",
        "x": 140,
        "y": 100,
        "wires": [
            [
                "875809e1.6f0388"
            ]
        ]
    },
    {
        "id": "2428c962.672486",
        "type": "watson-translator",
        "z": "bec2a13.2c4746",
        "name": "",
        "action": "translate",
        "basemodel": "en-tr",
        "domain": "general",
        "srclang": "en",
        "destlang": "ja",
        "password": "",
        "apikey": "",
        "custom": "",
        "domainhidden": "general",
        "srclanghidden": "en",
        "destlanghidden": "ja",
        "basemodelhidden": "en-tr",
        "customhidden": "",
        "filetype": "forcedglossary",
        "trainid": "",
        "lgparams2": true,
        "neural": false,
        "default-endpoint": true,
        "service-endpoint": "https://gateway.watsonplatform.net/language-translator/api",
        "x": 370,
        "y": 200,
        "wires": [
            [
                "2e245bef.5f4334",
                "21d87e07.143482"
            ]
        ]
    },
    {
        "id": "21d87e07.143482",
        "type": "http response",
        "z": "bec2a13.2c4746",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 710,
        "y": 200,
        "wires": []
    },
    {
        "id": "875809e1.6f0388",
        "type": "change",
        "z": "bec2a13.2c4746",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "payload.text",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 360,
        "y": 100,
        "wires": [
            [
                "2428c962.672486"
            ]
        ]
    }
]
```

２. Node-REDの画面右上のハンバーガーメニューから「読み込み」をクリック
![スクリーンショット 2019-12-01 0.42.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/59b1731a-28b6-2b41-7934-b729e3032925.png)

３. １でコピーしたJSONフォーマットをペーストし、「読み込み」をクリック
![スクリーンショット 2019-12-01 0.44.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/9b632250-bbf4-2f68-c726-ab8ea0edf1ce.png)

４. 以下ように表示されれば読み込み完了です！
![スクリーンショット 2019-12-01 0.45.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/d433ee56-0688-524b-8fdd-afa8b17d3574.png)

５. 最後に必ずデプロイをクリック！！
![スクリーンショット 2019-12-01 0.45.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/d16b8afd-5945-72b9-eb5c-71375ba6eecb.png)

# Noodlでのフロー構築
Text inputに入力されたテキスト（apple）をRESTノードへ送り、Enterキーが押されたらcomfirmedがtrueになり、翻訳されたテキスト（リンゴ）がFetchされます。
![スクリーンショット 2019-12-01 1.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/f3b8240a-06af-5041-6f1d-01aee9d49581.png)
### RESTノードの設定
下の画像のように設定します。
![スクリーンショット 2019-12-01 2.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/c949e5fc-51ed-dfff-2068-2e4f65973313.png)
Endpointには、下画像の赤い部分（隠してありますが、本当はリンクがあります）から飛んだページのURLを設定してください。
![スクリーンショット 2019-12-01 2.41.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/8719ebfa-12b5-e27c-8753-58b87d7bd47c.png)
### プロジェクトファイルのダウロード
GitHubの公開リポジトリにプロジェクトファイルがあります。
ダウンロードしてNoodlで開いていただくとフローが編集できます。
ご自由にお使いください（^-^）
https://github.com/pentake/Noodl-api-translation

**:ramen: 注意 :ramen:**
api_laguage_translationというフォルダの中にproject.jsonというファイルが入っています。
Noodl（バージョン1.3.1）から開く時は、Add external projectからapi_laguage_translationフォルダを選択してプロジェクトを開いてください（project.jsonは選択できません）

# おわりに
ほとんどコーディングをしなくてもAPIを利用したアプリケーションが構築できてしまう所にNoodlとNode-RED連携のスゴさを感じました！（コーディングは、NoodlのRESTノードのscriptに３行くらいJavaScriptを記述したくらいです）

これからもNoodlとNode-REDに目が離せませんね...！