【Bubble】データベースに値を入れ、取り出す方法

#概要
NoCodeツール、BubbleでのDBの扱い方を紹介します。
今回の例はWorkflowを使って値を入れて、必要な時に取り出すシンプルなものです。
Inputに値を入れて、DBに格納します。

##DB側の設定

任意のMy appを開き、左側のDataタブをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/970c5a09-8b45-1453-3e60-55fe95549469.png)

「New Type」で作成。
ここでは「test」としておき、「Create」をクリック。

「test」が左のCustom data typeに追加され、右側のType nameのInputにも「test」の表示を確認。

続いて「Create a new field」をクリック。

Field name → 任意。ここでは「corner1」。

Field type → 「text」を選択。

This field is a listのチェックは空欄でOK。

そして、全く同じものをもう一つ作成。

設定も同じで、「corner2」。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/291fcf36-e9e5-f336-5994-8cd85c93bdf9.png)

上の「App data」をクリックして確認。

左側の「All tests」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/003a327d-824d-4b09-5b07-6690735de516.png)

画像のようになっていればOK。
 
##実装

###エレメント設置

再度Designタブへ。

Inputエレメントを選択し、右側の任意の場所に２つ設置。

Buttonエレメントを選択し、少し下に１つ設置。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/b54be7bf-5bf8-0f00-4245-e8bb5d7123c0.png)

###Workflow（それぞれのinputに値を入れて、DBに格納する）を指示。

inputを選択、「Start/Edit Workflow」をクリック。

「Click here to add an action」→「Data(Things)」→「Create a new thing」 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/42a5c8ce-b54d-70c2-d4c9-0bf02f0cf792.png)

以下のように設定。

```
赤く囲まれたTypeの欄は「test」を選択。

「＋ Set another field」が出ますのでクリック。

「click」と書かれた赤い文字をクリックし、「corner1」を選択。

「=」その右に更に「click」が出てきますのでそこに「Input A's value」と入力。

一帯が青い文字になったらOK。
```

corner2も同じように設定。「＋ Set another field」から「corner2」で「Input B's value」設定。

これで完成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/e8920208-5d01-6e12-b0da-9dd295cc8c0b.png)

「Buttonをクリック → InputA,Bの値がDBのtest typeにあるCorner1,2にそれぞれ入る」というWorkflowの指示。

###Workflow（値を入れた後に残ったInputの値を消す）

「Step1」の次の「Click here to add an action」をクリック。
上に「Reset relevant inputs」という項目が出ているので、これをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/7cc3836c-a06c-6bf4-d8be-7c828acf8250.png)
 
##チェック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/005bcc17-4a50-273a-0775-ad76076600ee.png)

Buttonをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/172b0551-b79a-bbda-0d90-1993958c2875.png)

入っています。
逆もチェック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/6a4bffe3-fbb7-f8e9-d56f-c580d6f8771a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/5d46023a-4e87-4a5d-1511-6751c2befdb6.png)

完成です。

##呼び出す

続いて、DBに入った値を呼び出します。

###エレメントの設置

下のほうに、エレメントを設置（Text）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/97f2db93-1ff8-0abe-8c90-46c755ee324e.png)

###エレメントの設定

「Edit me...」をクリック。「Insert dynamic data」という青い表示が出てくるのでクリック。

以下の表示になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/2215133e-e206-c281-92e8-0664b41c7ba0.png)

「Do a search for」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/154baa45-f119-52b0-cde2-35ee243f2916.png)

Typeで「test」を選択。

続いて、右側の赤いところ「More」をクリック。

「's corner1」をクリックします。

すると、青い表示になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/e5edf7c5-49c6-9568-b38e-fbc2ae217bc4.png)

Preview。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/de228775-2fc3-b5a8-e88d-fa1b76d738d4.png)

「corner1」の値が「全て（２つ）」出ました。

上でDBに入れる動作を2回したのと「corner1」以上の指定を特にしていないので、どちらも出てくる仕様です。

どちらか指定をする場合を試してみます。


###「Search for test's corner1」

「corner1」 → 「More」

「:first item」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/78473487-68a0-e74c-5057-9a2df67fa436.png)

再びPreview。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/ea4378ac-a876-f688-e779-519f35d793af.png)

指定完了です。

もう一つも出します。


###「Search for test's corner2」

Designタブに戻り、今作ったTextエレメントをコピペ。

値もそのままコピペされるので少し修正。

「corner1」→「corner2」

###応用

ちなみにここ「corner2」を使って、「同じ意味の違う指定パターン」も紹介。

コピペした「～:first item」を「～:item #1」に変更。

「corner2のitem #1」と「first item」が同義となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/c6e0c3ef-7b39-9289-baf9-5364d4d60293.png)

##チェック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/be1ca26f-d853-1d4e-c264-deaa007fc1b9.png)

完了しました。

なお、当然ですが逆にするとこうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/ac2b816e-98ec-67f0-a753-38d1da03f042.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589552/eb50f122-52ef-5886-9ef5-eb59a62a8888.png)


#まとめ

以上、BubbleでのDBの操作方法でした。

全部英語がややこしいですが、動き自体はシンプルにまとまっています。

ここからの応用も色々考えられますので試してみてください。