enebularで作ったREST APIをNoodlから叩いてみた

これからenebularを始めるぞ！！ということで、
enebularで簡易的にAPIを作り、Noodlから叩いて見ました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">enebular で作ったREST APIをNoodlで叩いてみた <a href="https://t.co/kSOqzPfgVL">pic.twitter.com/kSOqzPfgVL</a></p>&mdash; hedgehog_noodl (@HNoodl) <a href="https://twitter.com/HNoodl/status/1160044781164122112?ref_src=twsrc%5Etfw">August 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


[enebularについて](https://www.enebular.com/ja/index.html)
[Noodlについて](https://tensorx.co.jp/noodl-jp/)

#【enebular】APIを準備
まずはenebularの準備。
入力のHttp inノード・Functionノード・ Http responseノードを使います。
初めて触りましたがすごく簡単！
<img width="994" alt="スクリーンショット 2019-08-10 13.12.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/cc879e27-8280-3355-8ee3-ec2cc5764df1.png">

##http in
- メソッド： GET
- URL: /hello
- 出力: req

##function
Noodlからリクエストするときに、パラメーター「animal」をつけ、
1だったら「ねこ」、2だったら「はりねずみ」、それ以外は「いぬ」を返すようにします。
<img width="1000" alt="スクリーンショット 2019-08-10 13.28.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/a6947ff4-36da-cb6c-61ce-8ff50906adbd.png">

##http response
他のドメインからのアクセスを許可するように、ヘッダに追加
「Access-Control-Allow-Origin」
<img width="996" alt="スクリーンショット 2019-08-10 13.31.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/05e6061d-361a-0016-3c9e-d95c7f88bded.png">

##まずはブラウザで叩く！
enebularのendpointは右上の「i」アイコンにカーソルを当てると出てきます。
<img width="378" alt="スクリーンショット 2019-08-10 13.34.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/09d8b5ef-1f59-d550-21ac-b13301a1681d.png">

下記をブラウザに入れてみると、、、
`https://ev2-prod-node-red-f3511762-e0b.herokuapp.com/hello?animal=1`
<img width="652" alt="スクリーンショット 2019-08-10 13.36.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/5a4c1206-b6ba-a1be-eacb-3ae2ae561b9e.png">
ちゃんと返ってきました！

#【Noodl】RESTノードを使って、APIを叩く

##RESTノードの設定
Noodlにはエンドポイントからデータをリクエストしたり引き出したりするのに、RESTのエンドポイントに繋げて使うRESTノードが用意されています。
####参考記事
[NoodlでHTTP通信する](https://qiita.com/ryusukefuda/items/0a9317ed3f8db50b1b1e)
[RESTノードのリファレンスはコチラ](https://noodl-jp.tds-g.biz/doc/node/rest/)

![スクリーンショット 2019-08-10 12.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/3fece02c-d274-6693-5d91-0492c1bfe24d.png)
1. GO!!!ボタンをタップしたらFetch（enabularで作成したAPIを叩く）
2. 取得したデータ（今回は動物の名前）をtextノードで文字として表示。

- Method: GET
- Resource: /hello （enabularのhttp in のURLに設定した値）
- endpoint: enabularの「i」アイコンにカーソルを当てると出てくる、httpNodePath

更に、RESTノードのScriptを編集していきます。
Editを押すと編集画面が出てきます。
<img width="998" alt="スクリーンショット 2019-08-10 13.38.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/24f66f20-fcc3-f112-2640-11acc4f68037.png">

```Javascript

define({
	// RESTノードにinputのポートを作成できます。 inputの名前："データ型"
	inputs:{
	    //ExampleInput:'number',
	    animal:"number"
	},
	
	// outputも同様。
	outputs:{
	    //ExampleOutput:'string',
	    message: "string"
	},
	
	request:function(inputs,request) {
	    //Fetchする時に実行される内容です。「animal」パラメーターに、inputs.animalを挿入。
	    request.parameters.animal = inputs.animal;
	},
	
	response:function(outputs,response) {
	    //Responseが返ってきた時に実行する内容です。
	    console.log(response.content);
	    outputs.message = response.content.name;//outputsのmessageに、レスポンスのnameの値を入れて、RESTノードから出力できるようにします。
	}
})
```

ここまでできたら、RESTノードの「animal」に数字を入れてFetchしてみましょう。

##UIも少し作り込んでみる
画面が味気ないので、写真のアイコンを入れてみました。
![スクリーンショット 2019-08-10 13.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/cd2df898-9480-b5f8-045d-6b9306275b50.png)
- 猫をクリック→animalパラメーターに1をセットしてFetch
- ハリネズミをクリック→animalパラメーターに2をセットしてFetch
- 犬をクリック→animalパラメーターに0をセットしてFetch

実は、CircleノードにImage pathを指定できるので、写真を丸く切り抜くのも簡単。
プロジェクトに画像挿入するときはドラッグ＆ドロップでいけます。
<img width="1440" alt="スクリーンショット 2019-08-10 12.41.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/bd04fde1-6894-ed66-9512-460b30fa6626.png">

詳細は下記ムービーで！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">UIつくりこみ <a href="https://t.co/gp3O6LO5hU">https://t.co/gp3O6LO5hU</a> via <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a></p>&mdash; はりねずみ麺 (@hedgehog_noodl) <a href="https://twitter.com/hedgehog_noodl/status/1160062063097462785?ref_src=twsrc%5Etfw">August 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#次回やってみたいこと
Firebaseも使ってランダムに画像を表示させるとかしたい！
私はバックエンドの知識が本当に無なのですが、enebular使ったら自力できそう。

#本編とあまり関係がない話
動物の写真は私と会社の同僚・上司のペットです。