Skip to main content

ページ遷移を実装する

Firebaseに保存されている商品データを一覧表示し、各商品の詳細ページに遷移する管理画面を実装する

新しいアプリを作成し、商品データを一覧表示するページを作成する

  1. ホーム画面で [アプリを新規作成] をクリックし、 [アプリの名前]商品管理 と入力し [作成する] をクリックする。
  2. [ページを新しく作成する] をクリックし、 [ページの名前]商品一覧 と入力し、 [作成する] をクリックする。
  3. [商品一覧] ページの [編集する] をクリックする。
  4. [テーブル] を配置する。
  5. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistProducts に変更する。
  6. データソースで Onbording Firebase を選択する。
  7. [Action]List documents を選択し、 [colleciton]products と入力する。
  8. [実行する] をクリックし、テーブルを選択した状態で、[エディター][データ]{{ listProducts.data }} と入力する。
  9. [テキスト] を配置し、[エディター] 内の [テキスト]商品一覧 と入力する。

商品詳細を表示するページを作成し、詳細情報をデータフローから取得する

  1. 編集画面からページ名の [商品一覧] をクリックし、 [新しくページを作成する] をクリックし、 [ページの名前]商品詳細画面 と入力し、 [作成する] をクリックする。
  2. [テーブル][エディター] 内の [イベントを追加] をクリックし、 [ページ] で先ほど作成した 商品詳細画面 を選択する。
  3. [バラメータを追加] をクリックし、 [key]documentId と、 [value]{{ table1.selectedRow.data.meta.id }} と入力する。
  4. [テーブル] 内の適当な商品データをクリックし、[商品詳細画面] ページへ移動する。
  5. [状態管理] をクリックし、 [グローバル][querierUrlParams] 内の [value]documentId が入っていることを確認する。
  6. [データフロー] 内の [新規作成] をクリックし、データフロー名をgetProduct に変更する。
  7. データソースで Onbording Firebase を選択する。
  8. [Action]Get document を選択し、 [colleciton]products と入力する。
  9. [Document id]{{ querierUrlParams.value.documentId }} と入力する。
  10. [実行する] をクリックし、 [状態管理] から [データフロー][getProduct] 内に選択した商品の詳細情報が入っていることを確認する。

商品詳細画面にコンポーネントを配置し、各コンポーネントに詳細情報を表示する

  1. [テキスト][カラム] 、 を配置し、 [カラム] の左側に [テキスト][画像] を配置する。
  2. [text1][エディター] 内の [テキスト]{{ getProduct.data ? getProduct.data.title : '' }} と入力する。
  3. [text2][エディター] 内の [テキスト]商品画像 と入力し、 [サイズ]small に変更する。
  4. [text1] を選択し、 Duplicate ボタンで5つのコピーを作成する。[text2] を選択し、 Duplicate ボタンで5つのコピーを作成する。
  5. [text1] から作成したコンポーネントの [エディター] を開きそれぞれの [テキスト] に以下の変数を記入する。

{{ getProduct.data ? getProduct.data.category : '' }}
{{ getProduct.data ? getProduct.data.price : '' }}
{{ String(getProduct.data ? getProduct.data.rate : '') }}
{{ String(getProduct.data ? getProduct.data.rateCount: '') }}
{{ getProduct.data ? getProduct.data.description : '' }}

  1. [text2] から作成したコンポーネントの [エディター] を開きそれぞれの [テキスト]カテゴリー価格 、 評価 、 評価数 、 商品説明 と記入する。
  2. [画像][エディター] 内の [URL]{{ getProduct.data ? getProduct.data.image : '' }} と入力する。
  3. それぞれのコンポーネントを適当な場所に配置する。
  4. [編集画面] に戻り、[ナビゲーション] から [商品詳細画面]ナビゲーションで非表示 に変更する。

動作を確認する

  1. ホーム画面にに戻り、 [商品一覧] ページをクリックし、 [商品詳細画面] ページへのページ遷移が正常に動作していることを確認する。