OutSystems と Node-RED を HTTP GET でつないでみるメモ

この記事は OutSystems Advent Calendar 2021 の 13 日目の記事です。

OutSystems と Node-RED を HTTP GET でつないでみるメモです。

他の API からデータを取ってくることはできていた

以前の記事で、

OutSystems Service Studio で REST で柴犬 API につないで柴犬を表示するアプリをつくるメモ

このように、柴犬画像を返してくれる API から画像 URL を取得してくるところはできていました。

今回は OutSystems と Node-RED を HTTP GET でやりとり

image

この図のように message という値を軸に OutSystems と Node-RED を HTTP GET で、以下のようにやりとりします。

  • OutSystems から Node-RED に HTTP GET で message 値に Hello! I'm OutSystems! という文字列をクエリとして送ります
  • Node-RED に OutSystems へ message 値に Hello! I'm Node-RED! という文字列を {"message":"Hello! I'm Node-RED!"} という JSON データで返答します。

Node-RED で OutSystems からデータを受け付ける API を作る

Node-RED は こちら にあるように、

Node-REDはハードウェアデバイス、APIおよびオンラインサービスを新しく興味深い方法で接続するためのツールです。

ブラウザベースのエディタによってパレットに並ぶ多種多様なノードを結びつけて用意にフローを作成でき、さらにシングルクリックで実行環境にデプロイすることができます。

や、

ブラウザベースのエディタによってパレットに並ぶ多種多様なノードを結びつけて容易にフローを作成でき、さらにシングルクリックで実行環境にデプロイすることができます。

と紹介されています。

JavaScript で ローコードで IoT や API の仕組みを簡単に作れるツールです。今回は Node-RED で、Node-RED で OutSystems からデータを受け付ける API をつくります。

image

今回は Azure のバーチャルマシン上に立ち上げている Ubuntu に載せている Node-RED のサーバーでこのような Node-RED フローを作ります。

image

こちらのノードは HTTP GET の入り口をつくる http in ノードです。今回は、このサーバーに /outsystems/api というパスでのアクセスを受け入れます。

image

この debug ノードで受け付けたデータのクエリ部分をデバッグとして表示できるようにしています。

image

こちらは change ノードといって、今回は Node-RED に OutSystems へ返答するデータとして {"message":"Hello! I'm Node-RED!"} というJSONデータに書き換えて返答しています。

image

最後のノードは http response ノードといって、実際に HTTP レスポンスを先ほどのデータで返答します。

image

こちらの API の URL にアクセスすると、このように {"message":"Hello! I'm Node-RED!"} というJSONデータを返答します。

これで Node-RED の準備は完了です!

[{"id":"a3165551.209f48","type":"http in","z":"6ac39c3c.e85e94","name":"","url":"/outsystems/api","method":"get","upload":false,"swaggerDoc":"","x":350,"y":180,"wires":[["a366693e.c878c8","9c5b604c.0b727"]]},{"id":"a366693e.c878c8","type":"debug","z":"6ac39c3c.e85e94","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":610,"y":180,"wires":[]},{"id":"2234f073.72bd2","type":"http response","z":"6ac39c3c.e85e94","name":"","statusCode":"","headers":{},"x":950,"y":280,"wires":[]},{"id":"9c5b604c.0b727","type":"change","z":"6ac39c3c.e85e94","name":"{\"message\":\"Hello! I'm Node-RED!\"}","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"message\":\"Hello! I'm Node-RED!\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":280,"wires":[["2234f073.72bd2"]]},{"id":"55401a7a.52f4b4","type":"comment","z":"6ac39c3c.e85e94","name":"HTTP response","info":"","x":980,"y":240,"wires":[]},{"id":"4a7b0be9.c7a3e4","type":"comment","z":"6ac39c3c.e85e94","name":"-> From OutSystems data \"Hello! I'm OutSystems!\"","info":"","x":450,"y":140,"wires":[]}]

Node-RED は フローのインポート ができるので、インポートできる今回のフローのJSON データも置いておきます。

OutSystems で画面を作る

image

OutSystems Service Studio で REST で柴犬 API につないで柴犬を表示するアプリをつくるメモ で学んだことをベースに、Send Node-RED API ボタンをクリックして送信して、 受け取った値を下部のテキストフィールドに TextVars という値を経由して表示する仕組みを作りました。

REST のロジックを作る

1つまたは複数のREST APIメソッドを利用するのREST APIの単一のメソッドを利用するの部分 を参考に進めます。

image

Logicタブで、Integrationsフォルダを開いて、 Consume REST API をクリックします。

image

ADD SINGLE METHOD をクリック。

image

Consume REST API Method 設定画面が出てきます。

image

Method URL は GET を選択して http://<今回の Node-RED サーバーのアドレス>/outsystems/api を入力します。入力できたら Test タブで TEST ボタンをクリックします。

image

Response が返ってきたら COPY TO RESPONSE BODY をクリックします。

image

Body タブに Response が反映されました。

この API に message 値を付与できるようにクエリの記述をする

image

実は、Method URL の近くに、クエリ値を設定する方法が書かれています。これを設定すると、この API に対して message 値を設定した場合、操作側に message 値の欄が出てきて値の設定ができます。

image

ということで、このように http://<今回の Node-RED サーバーのアドレス>/outsystems/api から https://<今回の Node-RED サーバーのアドレス>/outsystems/api?message={message}に変更します。

設定できたら、FINISH をクリックします。

image

すると、Logic の REST 以下に今回の Node-RED 設定一式が準備されます。これで API の設定を作れました。

Button のクリックアクション設定

この Logic を Button のクリックアクションに設定していきます。

image

Button をダブルクリックして、動きの詳細を設定します。

image

このような画面になります。

image

さきほど作られた GetOutSystems を + のところにドラッグアンドドロップします。

image

左の部品メニューから Assign を GetOutSystems のあとにドラッグアンドドロップします。

image

Assign の設定を確認します。

image

まず Variable のほうを TextVar を指定します。

image

Value の部分を Suggessions から GetOusystems.Response.Message を選びます。

OutSystems から messege 値を送る設定をする

image

もう一度、GetOutSystems のアイコンをクリックします。

image

Run Server Action を確認します。すると、先ほどのクエリとして設定した message 値が設定できます。

image

message 値に "Hello! I'm OutSystems!" と設定します。これで、OutSystems から messege 値を送る設定もできました。

動かしてみる

image

ここまで出来上がったら、このデプロイボタンをクリックしてアプリをデプロイしてみましょう!

image

デプロイが進行します。

image

このようなボタンになったらクリックしてブラウザで確認します。

image

ログイン画面が出てくるので、自分の OutSystems のアカウントでログインします。

image

このようにアプリが表示されました。

image

Send Node-RED API ボタンをクリックすると、Node-RED の API にアクセスして、返ってきたデータを無事 Hello! I’m Node-RED! という文字で表示できました!

image

Node-RED 側でもデータを返答していると同時に、OutSystems から来たデータを表示しています。

image

このように、クエリとして message 値が Hello! I’m OutSystems! として受信出来ていることが確認できました。

実際やってみて、手軽に IoT や API が作れるローコードツールの Node-RED と、データの複雑なやり取りやフロントエンドな部分を深くローコードでつくれる OutSystems が、うまくコラボレーションできそうな片鱗を感じました!

OutSystems と Node-RED の今後も掘り下げていこうと思います!