作成機能を実装する

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] のエディター内の [ラベル] にそれぞれ id 、 title 、 category 、 description 、 商品を追加する と入力する。
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 }}
}

5. [button1] を選択し、[イベントを追加する] をクリックし、[データフロー] で createProduct を選択する。

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

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