【Bubble】Bubbleでの超重要な機能「データベース」 １、Workflowを使ってデータを格納しよう
こんにちは。NoCode Ninjaです。
今日は前回のWorkflowに続きBubbleでの超重要な機能「データベース」を紹介します。
前回はWorkflowについて紹介しました。
そして今回、いよいよ来ました、データベース（Database、以下DB）です。
DBを触ってきたエンジニアさんにはお馴染みかもしれませんが、触ったことない方にとっては「？？？」だと思いますし、実際に触ってみて扱い方（入れ方や呼び出し方）で苦労された（される）のではないかと思います。
概念自体はシンプルなので、落ち着いて学んでいきましょう。
それでは、いってみましょう。
データベースとは
データを格納するところ
そのまんま過ぎましたね（笑）
データを入れて、保存できるのです。それをソフトウェアでやっています。
広義で言うと、電話帳や住所録、図書館なども同じです。
これらはハードウェア（紙など）でやっています。
で、データベースの真髄はどちらかというと・・
いつでも好きなように出せて便利
なのです。
掲示板サイトがわかりやすいかもしれません。
何か書き込みをすればDBにデータが入っていき、それが繰り返されて蓄積されていきます。
そしてそれを出すための場所さえ置いておけば、いつでもどれだけでも入っているものを出せるのです。（入っている以上のものは出ませんが）
そしてDBにデータを入れるのも出すのも、その動作は全てWorkflowで設定します。
前回のWorkflowの記事とつながるわけです。
早速やってみる
それでは、早速やってみましょう。データをDBに入れてみます。
今回はInputに値（文字）を入れて、DBに格納するというのをやってみます。
DB側の設定
まず、データを入れるための場所を作るためにDB側の設定をします。
任意のMy appを開き、左側のDataタブをクリックします。
「New Type」で新しいTypeを作りましょう。
ここでは「test」としておき、「Create」をクリック。
あっさりと「test」が左のCustom data typeに追加され、右側のType nameのInputにも「test」と表示されていることが確認できます。
「Test」という大きいテーブルが出来たというイメージです。
ここにフィールドをそれぞれ作っていくということですね。
続いて「Create a new field」をクリックしましょう。
Field nameを何かつけます。ここでは、「corner1」にします。
Field typeを選択します。今回はテキストで作るので「text」を選択してください。
This field is a listのチェックは空欄でOKです。
そして、全く同じものをもう一つ作りましょう。
設定も同じで、「corner2」にします。
続いて、上の「App data」をクリックしてきちんと出来ているか確認します。
左側の「All test」をクリックしてみてください。
出来ていますね。
DB側はこれでOKです。続いて、実装です。
実装する
Designタブへ戻りましょう。
何もないページを用意して、作っていきます。
Inputエレメントを選択し、右側の任意の場所に設置します（２つ）。
Buttonエレメントを選択し、少し下に設置します（１つ）。
目的は「それぞれのinputに値を入れて、DBに格納する」です。
これをWorkflowで実際に指示する。という意図を持って、作っていきます。
それでは、いきます。
inputを選択し、「Start/Edit Workflow」をクリック。
「Click here to add an action」→「Data(Things)」→「Create a new thing」を選択します。
少し複雑ですが、以下のように設定します。
赤く囲まれたTypeの欄は「test」を選択。
「＋ Set another field」が出ますのでクリック。
「click」と書かれた赤い文字をクリックし、「corner1」を選択。
「=」その右に更に「click」が出てきますのでそこに「Input A's value」と入れてください。
一帯が青い文字になったらOKです。
corner2も同じように設定にしたいので、「＋ Set another field」から「corner2」で「Input B's value」設定してください。
最終的に以下のようになればOKです。
これはつまり、「Button（データを入れる）をクリックすると、InputA,Bの値がDBのtest typeにあるCorner1,2にそれぞれ入りますよ（新しく作成）」というWorkflowの指示となります。
これで、設定は完了といいたいところなのですが、これではButtonを押してDBに値が入ってもInputにある値は残ったままになってしまいます。
Webサイトでそんな仕様のところはまずないのと、実際にやってもらったらわかりますが、Buttonを押しても何の反応も無いので「押した感」が全然無いのです。。
ということでもう一つだけ、「Buttonを押したらInputの値を消す」を指示します。
「Step1」の次の「Click here to add an action」をクリックすると、上に「Reset relevant inputs」という項目が出ているので、これをクリックしてください。
Bubble側で次のオススメ動作が表示されるのですね。これだけで完了です。
これで設定は全て完了です。
実際に動かしてみる
Previewを見て実際にやってみましょう。
押しましたら、DBを確認します。
Dataタブへ行き、先ほどのApp data→All testsで確認します。
成功しましたね！
試しに、逆もやってみましょう。
これ以降、何を入れてもそれぞれのInputからそれぞれのcornerに値が入っていきます！
楽しいですけど、やりすぎ注意ですよー笑
まとめ
これで、DBへ格納するというDBに対して実際に動くものが出来ました。
初めてだとなかなか難しいというかとっつきづらいのですが、これを見ながら順番にやっていくと必ず出来ると思います。
ちょっとした達成感が得られるかもしれません（笑）
ひとまず、今回はこれで目的達成です。
次回は、「入れた値を出す」を紹介します。
それでは、また！
