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

2021.10.08

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

一連の流れはこちら

最後に

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

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

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