7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

enebularAdvent Calendar 2020

Day 9

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

Last updated at Posted 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をプロトタイピングするために使用しました。

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

##想定するシステム構成
次の図のように、Noodlで作成したUIと、Node-RED on enebularでデータのやり取りを行い、Node-REDのフローでデータをFirebase Realtime DatabaseなどのDBに蓄積&参照します。
image.png

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

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

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

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

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

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

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?