今回はenebularでシンプルなフォームを作るサンプルをご紹介します。
今回のサンプル
以下の図のようなフォームをクラウド実行環境とデータストアでつくっていきます。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_01.png)
データストアとは
データストアとは、enebular サービスの中で JSON データを保存できる機能です。より詳細の使い方は データストアの概要 をご覧ください。
データストアの準備
- ee-connect-v2
- https://enebular.com/discover/privatenode/a34b2986-5340-488a-b89e-220e54ba9970
今回使うプロジェクトで ee-connect-v2 のプライベートノードをインポートしておきます。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_02.png)
プロジェクトのデータストアをクリックします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_03.png)
右下の+ボタンをクリックして新しくデータストアを作成します。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_04.png)
カスタム設定をクリックして次へボタンをクリックします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_05.png)
テーブル名はそのまま使って、メインキーを timestamp にして作成ボタンをクリックします。
メインキーをタイムスタンプにしたのは簡易的にメインキー上で ID がかぶらないようにするためです。メインキーの扱いは、データストアの管理上、ユニーク(テーブル上で唯一であること)である必要があるのでそうしています。実際の運用では、さらに投稿数のカウントや投稿された名前などを加えて、よりユニークにする必要があります。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_06.png)
テーブルが作成されました。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_07.png)
テーブル設定で、テーブル ID・実行環境からのアクセスのON・エディタからのアクセスのONを確認しておきます。
クラウド実行環境の準備
新リリースのenebularクラウド実行環境の使い方 の「クラウド実行環境の準備」を参考にクラウド実行環境の準備を行います。
クラウド実行環境でのデータストア接続を ON
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_08.png)
今回作成したクラウド実行環境の設定から「設定を編集する」をクリックします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_09.png)
データストア接続を ON にします。
クラウド実行環境の HTTP トリガー設定
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_10.png)
クラウド実行環境での HTTP トリガーに設定する重複しない URL をつくる TIPS こちらを参考にクラウド実行環境の HTTP トリガー設定します。
Discover Flow からフローをインポート
今回のサンプルはこちらです。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_11.png)
こちらをインポートボタンをクリックしてして、インポートしたいプロジェクトを選択してインポートします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_12.png)
インポート出来たらエディタで開いてみます。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_13.png)
「DSデータ保存」ノードをダブルクリックしてプロパティを表示します。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_14.png)
プロパティが開いたらデータストア設定 table1 を確認し、右にある鉛筆ボタンをクリックします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_15.png)
テーブル ID の項目を確認します。いまは空になっています。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_16.png)
今回扱うデータストアのテーブルで、設定を表示してテーブル ID をコピーします。矢印で示したボタンでコピーできます。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_17.png)
コピーしたテーブル ID を先ほどのテーブル ID の項目に入力して更新ボタンをクリックします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_18.png)
データ保存のノード編集画面では完了をクリックします。ワークスペースの右上の保存ボタンをクリックして、フローをデプロイします。
フローの仕組み
フローの主な仕組みをご紹介します。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_19.png)
フォームの仕組み自体は enebular クラウド実行環境で動作するシンプルなフォームの仕組みを作成してみる で流れを説明していますので参考ください。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_20.png)
今回は、このあたりのデータストア保存を中心にお伝えします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_21.png)
「データストア用調整」の change ノードの仕組みです。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_22.png)
フォームから来たデータをいったん msg.currenaPayload に逃がしてから、このあとデータストアが保存するために格納する msg.item 内に name 値・publish 値・condition 値・comment 値と設定しています。最後の timestamp はデータストア上でメインキーとしても使っていて、タイムスタンプ値をいれることでユニークな ID としても使えるようにしています。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_23.png)
データストアのデータ保存を担当する「DSデータ保存」ノードの仕組みです。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_24.png)
さきほどデータストア設定でテーブル ID を設定すると、このノードでデータストアへのデータ保存ができます。入力の保存データの項目はデフォルトの msg.item のまま使っています。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_25.png)
なお、データ保存の結果は msg.payload にかえってきます。
この仕組みがフォーム表示の流れに加わて、フォーム回答→データストア保存を実現しています。
フローのデプロイ
フローをクラウド実行環境に反映します。
新リリースのenebularクラウド実行環境の使い方 の「フローのデプロイ方法」を参考にクラウド実行環境へのフローのデプロイを行います。
HTTP トリガー URL 確認
準備ができたら HTTP トリガーの URL にアクセスしてみましょう。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_26.png)
このようにフォームが表示されます。
動作確認
シンプルにフォームの表示とフォームデータの受信を行ってみましょう。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_27.png)
フォームのお名前・コメント・体調・公開の項目を、試しにこんな形で入力して送信するボタンをクリックします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_28.png)
URL が 現在のHTTP トリガーURL/post
に遷移してします。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_29.png)
フォームデータを受信した画面が表示されて、先ほど設定したお名前・コメント・体調・公開についてのデータが表示されています。
![image](/wp-content/uploads/2023/10/lcdp-datastore-simple-sample_30.png)
まとめ
今回データを保存するデータストアのテーブルを確認すると、先ほど投稿したデータが表示されていることも確認できました!
クラウド実行環境で、シンプルにフォームの表示とフォームデータの受信ができ、データストアの仕組みでフォームデータの記録もできるようになると、簡単なアンケートシステムが enebular の仕組みだけで完結できます!enebularの用途も広がってくると思います。
今回の仕組み、ぜひお試しください!