ノーコードプログラミングのBubbleの解説をやっていきます。
Bubbleは僕もまだまだ勉強中な部分も非常に多いので備忘的な部分も多く含めているのをご了承ください。
DB内容の登録・削除まとめ
Bubbleのデータベースへの登録はMySQLやPostgreSQL等を使わずにオリジナルのデータベースが既に用意されているので特別な設定が不要で使用できます。
データベース周りは今後絶対に必要になってくるものなので使えるようにしておきましょう。
登録・削除方法一覧
新規テーブル作成方法
Bubbleでのテーブルは「Datatype」という名称で表示されるのでBubble内で「Datatype」とでてきたら「テーブル」だと思ってよさそうです。
新規カラム作成方法
Bubbleでのカラムは「field」という名称で表示されるのでBubble内で「field」と出てきたらその名の通りフィールドではありますが、カラム登録する時も「field」を作成する形となります。
また、「INT」や「String」といった型がなく、「INT」であれば「number」、「String」であれば「text」と型名が異なっているのも注意が必要です。
テーブル・カラム確認方法
Bubbleでのテーブルは「Data Type」、カラムは「field」という名称で表示されます。
そのためBubbleでテーブルを作成したい時は「Data Type」を作成し、カラムを作成したい時は「field」を作成するという形になります。
また、「field」には「INT」や「String」といった型がなく、「INT」であれば「number」、「String」であれば「text」と型名が異なっているのも注意が必要です。
そんなDB情報を確認するためには「Data」画面の「App Data」タブにて確認できます。
レコード登録方法
Bubbleでのテーブルは「Data Type」、カラムは「field」という名称で表示されます。
その「DataType」にレコードを登録する方法を解説していきます。
因みに登録時に「Slug」というものはリクエストパラメーターを送る必要がある際に便利です。
僕も詳しくはないですが、いずれ解説する予定です。
レコード修正方法
Bubbleでのテーブルは「Data Type」、カラムは「field」という名称で表示されます。
その「DataType」に登録したレコードを修正する方法を解説していきます。
レコード削除方法
Bubbleでのテーブルは「Data Type」、カラムは「field」という名称で表示されます。
その「DataType」に登録したレコードを削除する方法を解説していきます。
DataType(テーブル)削除方法
Bubbleでのテーブルは「Data Type」、カラムは「field」という名称で表示されます。
その「DataType(テーブル)」を削除する方法を解説していきます。
field(カラム)削除方法
Bubbleでのテーブルは「Data Type」、カラムは「field」という名称で表示されます。
その「DataType(テーブル)」を削除する方法を解説していきます。
BubbleのDB登録・削除手順
「Bubble」で新しいテーブル(Data type)を作成しよう
1-1.新しいテーブル(Datatype)を作成をすると次のような感じになります。
![データベース](https://katojishi.com/wp-content/uploads/2023/11/1-1-9.gif)
1-2.左のタブメニューの「Data」を押下します。
![データベース_画面遷移](https://katojishi.com/wp-content/uploads/2023/11/1-2-7.jpg)
1-3.「Data types」タブで「New type」に作成したいテーブル(Datatype)名を入力します。
![データベース_テーブル名](https://katojishi.com/wp-content/uploads/2023/11/1-3-9.jpg)
1-4.「Create」ボタンを押下します。
![データベース_テーブル作成](https://katojishi.com/wp-content/uploads/2023/11/1-4-9.jpg)
1-5.「CREATE」を押下すると新しいテーブル(Datatype)が作成されます。
(今回は「sample」というテーブル(Datatype)を作成しました。)
![データベース_テーブル作成完了](https://katojishi.com/wp-content/uploads/2023/11/1-5-5.jpg)
「Bubble」で新しいカラム(type)を作成しよう
2-1.今回のを実行すると次のような感じになります。
![カラム登録](https://katojishi.com/wp-content/uploads/2023/12/1-1.gif)
2-2.左のタブメニューの「Data」を押下します。
![データベース_画面遷移](https://katojishi.com/wp-content/uploads/2023/11/1-2-7.jpg)
2-3.「Data types」タブで「Create a new field」を押下します。
![データベース_新規field作成](https://katojishi.com/wp-content/uploads/2023/12/1-3.jpg)
2-4.「Field name」に英語名で登録したい名前を入力します。
![データベース_field名](https://katojishi.com/wp-content/uploads/2023/12/1-4.jpg)
2-5.「Field type」に登録したい型を選択します。
(今回は「text」(String)型を選択しました。)
![データベース_fieldタイプ](https://katojishi.com/wp-content/uploads/2023/12/1-5-1.jpg)
![データベース_fieldタイプ種類](https://katojishi.com/wp-content/uploads/2023/12/1-5-2-1.jpg)
2-6.「Create」を押下して新規「type」を作成します。
![データベース_field作成](https://katojishi.com/wp-content/uploads/2023/12/1-6.jpg)
2-7.「Data」画面に戻ると、作成した「samplefiled」が登録されています。
![データベース_field作成完了](https://katojishi.com/wp-content/uploads/2023/12/1-7.jpg)
「Bubble」で「Data Type」と「field」を確認しよう
3-1.前回、前々回で「Data Type」と「field」は作成しているので確認しておきましょう。
(Data type」は「sample」、「field」は「sampleField」を作成しています。
3-2.タブメニューの「Data」画面から「App data」タブを押下します。
![](https://katojishi.com/wp-content/uploads/2023/12/1-2.jpg)
3-3.「App Data」タブで「All samples」というのが作成した「Data Type(テーブル)」です。
![](https://katojishi.com/wp-content/uploads/2023/12/1-3-1.jpg)
3-4.DBテーブルの左側にある「samplefield」が作成した「Data(カラム)」です。
![](https://katojishi.com/wp-content/uploads/2023/12/1-4-1.jpg)
「Bubble」で「Record」を登録しよう
4-1.前回、前々回で「Data Type」と「field」は作成しているので確認しておきましょう。
(Data type」は「sample」、「field」は「sampleField」を作成しています。
![Bubble_データ登録_挙動](https://katojishi.com/wp-content/uploads/2023/12/1-1-1.gif)
4-2.タブメニューの「Data」画面から「App data」タブを押下します。
![Bubble_データ登録_AppData](https://katojishi.com/wp-content/uploads/2023/12/1-2.jpg)
4-3.「New entry」を押下してレコード登録画面を開きます。
![Bubble_データ登録_NewEntry](https://katojishi.com/wp-content/uploads/2023/12/1-3-2.jpg)
4-4.「Type of thing」に登録したい「DataType(テーブル)」で「samplefield」に登録したいカラムを入力します。
![Bubble_データ登録_データ登録](https://katojishi.com/wp-content/uploads/2023/12/1-4-2.jpg)
4-5.「Type of thing」を選択、「samplefield」を入力したら、「CREATE」ボタンを押下することで登録が完了します。
(「Slug」は未入力でも大丈夫です。)
![Bubble_データ登録_登録](https://katojishi.com/wp-content/uploads/2023/12/1-5.jpg)
4-6.ダイアログが表示されるので「GOT IT]を押下します。
![Bubble_データ登録_ダイアログ](https://katojishi.com/wp-content/uploads/2023/12/1-6-1.jpg)
4-7.Data画面の「AppData」画面へ戻ると登録したレコードが登録されます。
(登録日時と更新日時は自動で入力されます)
![Bubble_データ登録_登録完了](https://katojishi.com/wp-content/uploads/2023/12/1-7-1.jpg)
「Bubble」で「Record」を修正しよう
5-1.以前に「Data Type」と「field」は作成し、レコードも登録済なので確認しておきましょう。
(Data type」は「sample」、「field」は「sampleField」を作成しています。
![レコード修正](https://katojishi.com/wp-content/uploads/2023/12/1-1-2.gif)
5-2.タブメニューの「Data」画面から「App data」タブを押下します。
![Bubble_データ登録_AppData](https://katojishi.com/wp-content/uploads/2023/12/1-2.jpg)
5-3.修正したいレコードの鉛筆マークを押下します。
![レコード修正_修正](https://katojishi.com/wp-content/uploads/2023/12/1-3-3.jpg)
5-4.修正したいレコードを修正します。
(今回は「samplefield」の「サンプルレコード」を「サンプル」に修正します。)
![レコード修正_samplefield](https://katojishi.com/wp-content/uploads/2023/12/1-4-3.jpg)
5-5.「SAVE」を押下します。
![レコード修正_SAVE](https://katojishi.com/wp-content/uploads/2023/12/1-5-3.jpg)
5-6.ダイアログが表示されるので「GOT IT]を押下します。
![レコード修正_GOTIT](https://katojishi.com/wp-content/uploads/2023/12/1-6-2.jpg)
5-7.「samplefield」のレコードが修正されます。
(あわせて更新日時である「Modified Date」も更新されます。)
![レコード修正_修正完了](https://katojishi.com/wp-content/uploads/2023/12/1-7-2.jpg)
「Bubble」で「Record」を削除しよう
6-1.以前に「Data Type」と「field」は作成し、レコードも登録済なので確認しておきましょう。
(Data type」は「sample」、「field」は「sampleField」を作成しています。
![レコード削除_挙動](https://katojishi.com/wp-content/uploads/2023/12/1-1-3.gif)
6-2.タブメニューの「Data」画面から「App data」タブを押下します。
![Bubble_データ登録_AppData](https://katojishi.com/wp-content/uploads/2023/12/1-2.jpg)
6-3.修正したいレコードのチェックボックスにチェックを入れて「Delete」を押下します。
![レコード削除_Delete](https://katojishi.com/wp-content/uploads/2023/12/1-3-4.jpg)
6-4.ダイアログが表示されるので「COMFIRM」を押下します。
(今回は「samplefield」の「サンプル」を削除します。)
![レコード削除_CONFIRM](https://katojishi.com/wp-content/uploads/2023/12/1-4-4.jpg)
6-5.ダイアログが表示されるので「GOT IT]を押下します。
![レコード削除_GOTIT](https://katojishi.com/wp-content/uploads/2023/12/1-5-4.jpg)
6-6.チェックボックスにチェックを入れたレコードが削除されます。
![レコード削除_完了](https://katojishi.com/wp-content/uploads/2023/12/1-6-3.jpg)
「Bubble」で「DataType(テーブル)」を削除しよう
7-1.以前に「Data Type」は作成済なので確認しておきましょう。
(Data type」は「sample」を作成しています。
![Data画面_DataType削除](https://katojishi.com/wp-content/uploads/2023/12/1-1-4.gif)
7-2.タブメニューの「Data」画面を開きます。
![Data画面](https://katojishi.com/wp-content/uploads/2023/12/image.png)
7-3.削除したいDataType(テーブル)のゴミ箱アイコンを押下します。
(ダイアログなど表示されずに速攻で削除されるので注意が必要です)
![DataType削除](https://katojishi.com/wp-content/uploads/2023/12/1-3-5.jpg)
7-4.削除したDataType(テーブル)が削除されます。
![DataType削除完了](https://katojishi.com/wp-content/uploads/2023/12/1-4-5.jpg)
「Bubble」で「field(カラム)」を削除しよう
1-1.以前に「field(カラム)」は作成済なので確認しておきましょう。
(Data type」は「sample」、(filed)は「sampleField」を作成しています。
![カラム削除_挙動](https://katojishi.com/wp-content/uploads/2023/12/1-1-5.gif)
1-2.タブメニューの「Data」画面を開きます。
![Data画面](https://katojishi.com/wp-content/uploads/2023/12/image.png)
1-3.削除したいfield(カラム)のゴミ箱アイコンを押下します。
![カラム削除_ゴミ箱](https://katojishi.com/wp-content/uploads/2023/12/1-3-6.jpg)
1-4.削除確認ダイアログが表示されるので「DELETE」を押下します。
![カラム削除_DELETE](https://katojishi.com/wp-content/uploads/2023/12/1-4-6.jpg)
1-5.削除したfield(カラム)が削除されます。
![カラム削除_削除完了](https://katojishi.com/wp-content/uploads/2023/12/1-5-5.jpg)
今回はここまで。
次回はインプット項目について解説していきます。
コメント