Skip to main content

作成機能を実装する

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

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

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

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

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

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

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

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

  1. [データフロー] 内の [新規作成] をクリックし、データフロー名をcreateProduct に変更する。
  2. データソースで Onbording Firebase を選択する。
  3. [Action]Set document を選択し、 [Colleciton]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 === '' }} と記述する。

商品の追加が正常に作動していることをプレビュー画面で確認する