Customer StoriesUsecasesQuerier Blog

クイックスタート - Firebase

Suggest Edits

今回はECサイトを運営している企業を想定し、以下の機能を実現する社内向け管理画面を構築して、クエリアの基本的な使い方をご紹介します。

  • プロダクト情報を一覧表示する
  • プロダクトの詳細情報を表示する
  • プロダクト情報を更新する
  • プロダクトを購入したユーザーリストを表示する

データを連携する

今回はすでに接続されている [Onboading Firebase] を使用するため、接続の設定などは必要ありません。

ご自身のデータソースを接続する場合は、こちらをご覧ください。

プロダクト情報を一覧表示する

  1. 右側の [コンポーネント] から [テキスト] をキャンバスにドラッグ＆ドロップします。
  2. 右側の [エディター] の [テキスト] に プロダクト一覧 と入力します。
  3. 右側の [エディター] の [サイズ] を large に変更します。
  4. 右側の [コンポーネント] から [テーブル] を1で配置した [テキスト] の下にドラッグ＆ドロップします。
  5. [データフローリスト] の [新規作成] をクリックします。
  6. データフローの名前を listProducts という名前に変更します。
  7. [Onboarding Firebase] を選択します。
  8. [Action] で List documents を選択し、[Collection] にはproducts と入力します。
  9. [実行する] をクリックします。
  10. 配置したテーブルを選択し、[エディター] の [データ] に {{ listProducts.data }} と入力します。

プロダクトの詳細情報を表示する

テーブルで選択した商品データの詳細情報を右に動的に表示させます。

  1. 右側の [コンポーネント] から [カラム] をキャンバスの一番下にドラッグ＆ドロップします。
  2. [カラム] の左側にすでにある [テーブル] を配置し、右側に [テキスト] を配置します。
  3. [テキスト] の [エディター] の中の [テキスト] に 商品名: {{ table1.selectedRow.data ? table1.selectedRow.data.title : '' }} と入力します。
  4. [テキスト] を選択した状態で [削除アイコン] の横に表示される [複製アイコン] をクリックします。
  5. コピーした新しい [テキスト] の [エディター] の中の [テキスト] を 価格: {{ table1.selectedRow.data ? table1.selectedRow.data.price : '' }} に変更します。

プロダクト情報を更新する

プロダクト更新のフォームを作成する

テーブルで選択した商品データの情報を更新します。
まず、カテゴリ一覧を取得するデータフローを作成し、セレクトに反映できるようにします。

  1. すでに配置してある [カラム] の右に [モーダル] を設置し、ラベルに 商品情報を更新 と入力します。
  2. [モーダル] の中に、 [セレクト] 、 [インプット] 、 [テキストエリア] 、 [ボタン] を 配置します。
  3. [データフローリスト] の [新規作成] をクリックします。
  4. データフローの名前を listCategories という名前に変更します。
  5. [Onboarding Firebase] を選択します。
  6. [Action] で List documents を選択し、[Collection] にはcategories と入力し、[実行] をクリックします。
  7. [モーダル] の中の [セレクト] をクリックします
  8. [Values] には　{{ listCategories.data.map(d => d.name) }} と入力します。
  9. [Labels] には {{ listCategories.data.map(d => d.name) }} と入力します。
  10. [Default value] には {{ table1.selectedRow.data ? table1.selectedRow.data.category : '' }} と入力します。

プロダクト更新のデータフローを作成し、ボタンに紐づける

  1. [モーダル] を開き、[セレクト] 、 [インプット] 、 [テキストエリア] それぞれのラベルを カテゴリー 、　商品名 、 説明 に変更します。
  2. [データフローリスト] の [新規作成] をクリックし、データフローの名前を updateProduct という名前に変更します。
  3. [アクションを選択] で Onboarding Firebase を選択します。
  4. [Action] で Update document 、 [Collection] で products をそれぞれ入力します。
  5. [Document id] に　{{ table1.selectedRow.data.meta.id }} と入力します。
  6. [Data] には以下のように記述します。
{
  "id":          {{ table1.selectedRow.data.id }},
  "category":    {{ select1.value }},
  "title":       {{ input1.value }},
  "description": {{ textarea1.value }},
}

  1. [成功時に実行するアクション] にチェックをつけ、listProducts を選択します。

  2. [モーダル] を開き、 [ボタン] のラベルを 更新する に変更し、[データフロー] で updateProductを選択します。

  3. [インプット]　と [テキストエリア] の [Defautl value]　に下記をそれぞれ入力します。
    {{ table1.selectedRow.data ? table1.selectedRow.data.title : '' }}
    {{ table1.selectedRow.data ? table1.selectedRow.data.description : '' }}

  4. [プレビュー] を開きプロダクト情報の更新が正常に作動していることを確認します。

プロダクトを購入したユーザーリストを表示する

  1. [テキスト] と [テーブル] を column1 の下にドラッグ&ドロップします。
  2. [テキスト] の [エディター] を開き、テキスト に {{ table1.selectedRow.data ? table1.selectedRow.data.title : '' }} を購入したユーザー と入力します。
  3. [データフローリスト] の [新規作成] をクリックし、データフローの名前を listUsers という名前に変更し、変更が発生したら自動でクエリを実行　にチェックをつけます。
  4. [action] で Onboarding Firebase を選択します。
  5. [Action] に List documents 、 [Collection] に users をそれぞれ入力します。
  6. [フィルターを追加する] をクリックし、[Key] 、 [比較演算子(記号)] 、 [Value]　にそれぞれ、 productIds 、 array-contains 、 {{ table1.selectedRow.data.id }} と入力します。
  7. [table2] の [エディター] を開き、 [データ] に {{ listUsers.data }} と入力します。
  8. [プレビュー] を開き、ユーザー情報が動的に表示されいていることを確認します。

Updated 5 months ago