More than 3 years have passed since last update.

enebular × Noodlで保活支援アプリのプロトタイピングに挑戦！

Last updated at 2020-12-09Posted at 2020-12-09

この記事は enebular Advent Calendar 2020に投稿した記です！
アドベントカレンダーに参加していると12月があっという間に過ぎるように感じます。

本題

私には今年の7月に生まれたばかりの息子がいます。来年度から保育園に通わせるために人生初の「保活」をしました。この保活がとても大変だったので、少しでも苦労を減らそうと支援アプリを考えました。

そのアプリについて【オンライン】enebular developer meetupにてLTをしました。技術にはあまり触れていなかったので、この記事に残します。

Node-RED on enebularは、フロントエンドのプロトタイピングにおいて、爆速で作れるバックエンドサーバーになる！

私は普段、フロントエンドのプロトタイピングにNoodlというビジュアルプログラミングツールを使用しています。

作る時間を減らしてアイデアを考える時間を増やしたいと思っています。
enebular × Noodlは、この思いを実現できる強力な組み合わせです！

今回はNode-RED on enebularをRESTサーバーに見立て、NoodlでUIをプロトタイピングするために使用しました。

機能としては地図とメモ帳が一体になったアプリです。保活の時に、地図にメモを書き込みたいけど見づらくなるなと思い作ってみました。

次の図のように、Noodlで作成したUIと、Node-RED on enebularでデータのやり取りを行い、Node-REDのフローでデータをFirebase Realtime DatabaseなどのDBに蓄積&参照します。

今回はNoodlでUIを作成し、http requestをNode-REDに送り、レスポンスを受け取るというシンプルなものです。

Node-REDでhttp requestの受け取りをするには、http inノードを使用します。
今回はシンプルにGETリクエストを受け取るようにしました。

http requestの処理はhttp inノードと合わせて、http responseノードを使用します。このノードは名前のとおりhttpのレスポンスを返すノードです。今回は200レスポンスを返すようにしました。

今回はhttp response何もデータやアクションを起こしていませんが、今後はFirebase Realtime databaseやGoogleスプレッドシートにデータを蓄積するようにしていこうと思います。

余談ですが、Googleスプレッドシートを扱うノードGSheetノードを使おうとGoogle APIに新規プロジェクト作成しようとしたら、無料トライアルで作成できるプロジェクト数の上限に達しており作席できませんでした😢

年末なのでクラウドも使っていないのは断捨離ですね。