この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Bubbleのコア機能にDataというのがあります。これはカスタムデータを定義し、独自のデータベースに追加することができます。
Bubbleのデータベースでは、TypesとFieldsというものを定義していくことになります。
Types（タイプ）
データベースにデータを格納したいものの種類です。
- ユーザー情報を保存したい -> User type
- 商品情報を保存したい -> Product type
みたいな感じです。
Fields（フィールド）
タイプの中にどのようなエントリーが入るべきかを定義します。
商品情報を保存するProduct typeを定義したとして、中身は
- 商品名
- 値段
- 在庫ありかなしか
などといったものがフィールドとなります。
各フィールドには型というのを選択する必要があります。
テキスト、数値、yes/no、日付、画像などです（組み込みのフィールド型）。
また組み込みのフィールド型以外に、別の方を持つことも可能です（複合型）。
例として、
注文タイプの中の注文者というフィールドが、ユーザータイプをもったりできます。
注文タイプがユーザータイプに接続されている状況と考えることができます（リレーションシップ）
やってみる
Bubbleはフリープランで行います。
以前、https://dev.classmethod.jp/articles/logout-bubble-webapp-with-auth0/ でAuth0を使ったログインログアウトを実装してみましたが、今回はこれの続きで、
ログインしたユーザーが自分のやることリストを作成できる といったユースケースを考えてみます。
なお、ユーザー情報はApi Connectorで連携したAuth0APIからの情報を使って、ログイン時に自動作成されています。
エレメント配置
デザイン編集画面から、入力ボックスとボタンを配置します。
タイプ作成
Dataタブをクリックし、編集画面に遷移します。そこのNew Typeの箇所にタイプの名前を入力します（今回はTodoという名前に）。
Make this data type private by default の項目にはチェックを入れてみましょう。
ここにチェックが入っていると、作成者しかデータが見れないようにできます。
入力が完了したらCreateします。
フィールド追加
タイプを作成したら、自動でフィールドも作成されます。
Creatorの型がUserになっていますね。デフォルトでつくみたいです。
フィールドの追加は、Create a new fieldボタンを押して行います。
今回は、contentというテキスト型と、endedというyes/no型を定義しました。
データを追加するworkflowを作成
登録ボタンを押したら、テキストエリアの内容をTodoのcontentフィールドに保存するフローを作ってみます。
- Eventにはボタンclicked
- Stepに、
Data(Things)->Create a New Thingを選択します
- Typeは先ほど作成した
Todoにします
Set another fieldをクリックしてcontent = テキストボックスのvalueとします。Only whenには、テキストボックスのvalue is not emptyとします。
おまけで、データ登録が完了したらメッセージを出すようにもしてみました。
データ登録の確認
Previewを実行し、データが登録できるかどうか確認してみます。
登録できたら上記のようにメッセージが表示されるはずです。
保存されたデータも確認していきます。Data->App Dataタブを開いて、All Todos を表示してみましょう。
画像のように、記述した内容が表示されていれば正常にworkflowが完了しています。
登録データを表示させてみる
では、登録したデータをページ上に表示させてみたいと思います。
今回は登録した複数のデータを表示させたいので、Container elementsのrepeating groupを使います。
リピーティンググループは、リストを受け取る特別なタイプのコンテナです。コンテンツの種類を定義してから、データソースを定義するか、アクションを使用してリピートグループにリストを表示します。このデータソースは、指定したコンテンツの種類のもののリストでなければなりません。データソースを定義する最も一般的な方法の1つは、データベースからの検索です。
repeating groupを配置した後、その中にテキストを配置します。このテキストにTodoに入っているcontentを表示させてみます。
repeating groupの編集画面を表示し、
- Type of content には Todoを選択
- Data source には Do a search for で Todoを選択します。
これでrepeating groupにTodoの内容を読み込む準備をしたことになります。
repeating groupにデータを読み込む設定が終わったので、次は配置したテキストエリアにTodoのcontentを表示させてみあmす。
テキストの編集画面のInsert Dynamic Dataから、Current cell's Todo,'s content を選択します。
これで登録したTodoのcontentがループされて表示されます。
Previewを起動して確認しておきましょう。
一連の流れはこちら
最後に
データの登録、登録されたデータの表示を試してみました。
基本的なことだけでしたが、コードがかけない私でもここまでできるのは便利ですね。
データに関してはまだまだ奥が深そうなので、別の記事で試してみようと思います。