【Part2 ワークフロー編】マーケットプレイスを作りながら学ぶゼロワン講座

こんにちは！この記事ではpart1の続きで、ワークフローを解説していきます！今回のマーケットプレイスではページ遷移、ログイン・会員登録、商品データの管理の三つのワークフローをつくっていきます。頑張りましょう！仕様が変わってしまっているところや、もしわからないところあれば概要欄から飛べるゼロワンのフォーラムで質問してください。

まずページ遷移ワークフローをつくっていきます。画面左側からワークフロータブを選択し左上の+のアイコンをクリックします。この時に+の左側にあるページ名をボタンの配置されているページになっているか注意してください。すると、ワークフロー名と色を入力するポップアップがでてきます。ワークフロー名はわかりやすい名前であれば大丈夫です。色は今は空欄のままにしておきます。

次に左下のトリガーの中からElement triggerを画面中央にドラッグします。右側に設定画面が表示されるのでイベントターゲットをそのワークフローを実行するときにユーザーがクリックするエレメントに設定します。そしてイベント名をclickにします。

次に左下のアクションからページナビゲーションを選択し、Go to (Push)を同様にドラッグします。そして設定のURLに遷移先のページのURLを入力します。

その後ドラッグした二つをつなげます。先にドラッグしたエレメントの左下の▽からもう一つにドラッグすると完成です。ページ遷移はいくつかありますが構造は同じなので割愛します。

ここからは、ログイン・会員登録のワークフローをつくっていきます。まず会員登録のワークフローからつくります。初めに先程と同様にトリガーをつくります。今回は会員登録ページの会員登録ボタンををトリガーにします。次にアクションにあるユーザーの中のEmailでサインアップするをドラッグします。設定画面のユーザーEmailとパスワードは静的からダイナミックに変え、会員登録画面のインプット名をそれぞれ選択します。その後ログイン後ページへの遷移を先程と同様に設定します。

次にログインワークフローをつくります。会員登録とほぼ同じですが今度はEmailでサインアップするではなくEmailでサインインするをドラッグしてください。設定は先程と同様にそれぞれ対応するインプットを選択してください。これでログイン・会員登録ワークフローは完了です。

ここからは、商品の売買についてのワークフローを作っていきます。しかしその前に商品のデータを入れるデータベースをつくります。新しいテーブルを作成するをクリックすると名前入力のインプットが出てくるので適当な名前を入力します。その後下にあるフィールドを追加というところから自分に必要なフィールドを追加します。今回は下記画像のように追加しました。name,message,image,priceは出品の際に入力されるようにします。soldとbuyerは購入の際に入力されるようにします。

まず、出品のワークフローを作ります。今回は商品追加ページのボタンをトリガーにします。その後、アクションにあるデータベースの中からドキュメントを更新するをドラッグします。そしてこれまでと同様にデータ名とインプットを対応させてください。その後ログイン後ページへの遷移を付ければ完了です。

次は購入のワークフローをつくります。出品のワークフローと同様にドキュメントを更新するを使います。下記画像のように設定します。今はこの設定がなにかわからないと思いますが、この後説明するのでとりあえずこのように設定しておいてください。

ワークフローはこれで一通り終わりましたがページ遷移などは各自必要に応じて追加してください。ここからはpart1で配置したリピータの表示設定をします。

まず、ログイン前ページのリピーターを設定します。左にあるコンテンツを動的にし、「～を検索する」を選びます。するとテーブルを選ぶインプットがでてくるので自分が設定した商品データのテーブルを選択します。その後下の画像のように設定します。soldはいいえにしておくことで購入されていない商品だけを表示するようにフィルターをかけています。created_atを降順にすることで新しいデータ順に表示するようにしています。リミットは取得するデータ数です。今回は10にしておきます。設定し終えたら右下のokをクリックします。ログイン後ページのリピーターは全く同じ設定なので割愛します。

次にマイページのリピーターを設定していきます。初めに出品中商品のリピーター設定をしていきます。ほとんど先程の設定と同じになります。フィルターのcreaterを現在のユーザーにすることで自分の出品した商品に限定しています。またsoldをいいえにすることで売れた商品は表示しないようにしています。

次に購入した商品のリピーターを設定していきます。soldをはい、buyerを現在のユーザーのidにします。先程設定したワークフローがここで活用されます。

これで表示設定も一通り設定し終えました。お疲れさまでした。ここでは最低限の機能しかついておらず、デザインもそれほどこだわっていないのでそれぞれ手を加えてみてください。

最後まで読んでいただきまして、ありがとうございました！

ゼロワンフォーラム：https://www.forum.thezeroone.io/
今回解説した動画：https://youtu.be/z8TDxBt1Aow
ゼロワンのHP：https://www.zeroone.today/

こんにちは！ゼロワンエバンジェリストの内藤です！
今回は、マーケットプレイスを作りながら学ぶゼロワン講座のPart2ということで、ワークフローについて説明してみました！初学者でもわかりやすい内容になっていると思うので、是非挑戦してみてください！

わからないことがあれば、フォーラム等でご質問ください。