ドキュメント
アプリの構築
ユースケース
作成機能を実装する

作成機能を実装する

Firestore に新しく商品を追加する

商品の一覧情報をテーブルに表示する

  1. [データフロー] 内の [新規作成] をクリックし、データフロー名を listProducts に変更する。
  2. データソースで Onboarding Firebase を選択する。
  3. [Action]List documents を選択し、 [Collection]products と入力する。
  4. [実行する] をクリックする。
  5. [テーブル] を配置し、エディターの [データ]{{ listProducts.data }} と入力する。

商品の追加を行うコンポーネントを配置する

  1. [カラム] を配置する。
  2. [カラム] の左側に先ほど配置した**[テーブル]** を、右側に [インプット] を 2 つと [セレクト][テキストエリア][ボタン] を配置する。
  3. カラムの右側に設置した [input1][input2][select1][textarea1][button1] のエディター内の [ラベル] にそれぞれ idtitlecategorydescription商品を追加する と入力する。
  4. [カラム] の幅を調節する。

商品データのカテゴリ一覧をデータフローで取得し、セレクトの値として表示する

  1. [データフロー] 内の [新規作成] をクリックし、データフロー名をlistCategories に変更する。
  2. データソースで Onboarding Firebase を選択する。
  3. [Action]List documents を選択し、 [Collection]categories と入力する。
  4. [実行する] をクリックする。
  5. [セレクト] を配置する。
  6. [セレクト] のエディターを開き、 [Values]{{ listCategories.data.map(d => d.id) }} と入力する。
  7. [Labels]{{ listCategories.data.map(d => d.name) }} と入力する。

商品の追加を行うデータフローを作成し、ボタンと紐づける

  1. [データフロー] 内の [新規作成] をクリックし、データフロー名をcreateProduct に変更する。
  2. データソースで Onboarding Firebase を選択する。
  3. [Action]Set document を選択し、 [Collection]products と入力する。
  4. [Data] に以下のように記述する。
{
  "id":          {{ input1.value }},
  "title":       {{ input2.value }},
  "category":    {{ select1.value }},
  "description": {{ textarea1.value }}
}
  1. [button1] を選択し、[イベントを追加する] をクリックし、[データフロー]createProduct を選択する。

空欄がある場合にボタンを disable にする

  1. [button1] を選択し、[無効にする条件]{{ !input1.value || input2.value === '' || select1.value === '' || textarea1.value === '' }} と記述する。