bubbleでデータを保存したりそれらを表示させたり

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を起動して確認しておきましょう。

一連の流れはこちら

最後に

データの登録、登録されたデータの表示を試してみました。

基本的なことだけでしたが、コードがかけない私でもここまでできるのは便利ですね。

データに関してはまだまだ奥が深そうなので、別の記事で試してみようと思います。