9
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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

enebularについて
Noodlについて

【enebular】APIを準備

まずはenebularの準備。
入力のHttp inノード・Functionノード・ Http responseノードを使います。
初めて触りましたがすごく簡単!
スクリーンショット 2019-08-10 13.12.56.png

http in

  • メソッド: GET
  • URL: /hello
  • 出力: req

function

Noodlからリクエストするときに、パラメーター「animal」をつけ、
1だったら「ねこ」、2だったら「はりねずみ」、それ以外は「いぬ」を返すようにします。
スクリーンショット 2019-08-10 13.28.35.png

http response

他のドメインからのアクセスを許可するように、ヘッダに追加
「Access-Control-Allow-Origin」
スクリーンショット 2019-08-10 13.31.08.png

まずはブラウザで叩く!

enebularのendpointは右上の「i」アイコンにカーソルを当てると出てきます。
スクリーンショット 2019-08-10 13.34.25.png

下記をブラウザに入れてみると、、、
https://ev2-prod-node-red-f3511762-e0b.herokuapp.com/hello?animal=1
スクリーンショット 2019-08-10 13.36.05.png
ちゃんと返ってきました!

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

RESTノードの設定

Noodlにはエンドポイントからデータをリクエストしたり引き出したりするのに、RESTのエンドポイントに繋げて使うRESTノードが用意されています。

参考記事

NoodlでHTTP通信する
RESTノードのリファレンスはコチラ

スクリーンショット 2019-08-10 12.41.02.png
1. GO!!!ボタンをタップしたらFetch(enabularで作成したAPIを叩く)
2. 取得したデータ(今回は動物の名前)をtextノードで文字として表示。

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

更に、RESTノードのScriptを編集していきます。
Editを押すと編集画面が出てきます。
スクリーンショット 2019-08-10 13.38.40.png


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
- 猫をクリック→animalパラメーターに1をセットしてFetch
- ハリネズミをクリック→animalパラメーターに2をセットしてFetch
- 犬をクリック→animalパラメーターに0をセットしてFetch

実は、CircleノードにImage pathを指定できるので、写真を丸く切り抜くのも簡単。
プロジェクトに画像挿入するときはドラッグ&ドロップでいけます。
スクリーンショット 2019-08-10 12.41.39.png

詳細は下記ムービーで!

次回やってみたいこと

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

本編とあまり関係がない話

動物の写真は私と会社の同僚・上司のペットです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
9
Help us understand the problem. What are the problem?