【Part3 ワークフロー作成編】顧客管理アプリを作りながらゼロワンを学ぶ講座

こんにちは！この記事ではフロンドエンド編の続きで、ワークフローについて解説していきます！
仕様が変わってしまっているところや、もしわからないところあれば概要欄から飛べるゼロワンのフォーラムで質問してください。

ログインページのワークフロー

まず、「ログイン」ボタンを押された時にメールアドレスとパスワードを
DBより参照してマイページに偏移するワークフローを組みます。

① 画面左側からワークフロータブを選択し左上の+のアイコンをクリックします。この時に+の左側にあるページ名をボタンの配置されているページになっているか注意してください。すると、ワークフロー名と色を入力するポップアップがでてきます。今回ワークフロー名は「ログイン」としておきます。色は行わなくても差し支えないです。

②トリガーの中にある「Element trigger」をドラッグします。イベントターゲットをそのワークフローを実行するときにユーザーがクリックするエレメントに設定します。今回はフロント部分作成時にエレメント名を「ログインボタン」としていたので、イベントターゲットを「ログインボタン」とします。そして、イベント名を「click」にします。

次に登録が済んでない人が登録するためのページに偏移するためのワークフローを組みます。こちらも先程と同じように作成していきます。

最後にアクションの中のページナビゲーションをクリックし、「Go to (Push)」をドラッグします。そして設定のURLに遷移先のページのURLを入力し、要素同士を繋げます。
以上でログインページのワークフローの作成は完了です。

社員登録及び顧客登録ページのワークフロー

次に社員登録及び顧客登録をDBに格納するワークフローを組みます。
① トリガーの中にある「Element trigger」をドラッグします。イベントターゲットを「社員登録ボタン」及び「顧客登録ボタン」とします。イベント名を「click」とします。

② アクションの中のデータベースをクリックし、「ドキュメントを作成する」をドラッグします。テーブルを「社員情報」及び「顧客情報」にし、【Part1 データベース編】で作成した「社員メールアドレス」「社員パスワード」及び「顧客名」、「顧客住所」を追加します。そして、それぞれの「エレメント名＋値」をクリックします。
最後に２つの要素をつなげるとワークフローの完成です。

マイページに戻るワークフローを作成する

社員登録画面及び、顧客登録画面からマイページに戻る為の
ワークフローを作成します。
基本的には①の作成方法と同じ作り方です。
トリガーの中にある「Element trigger」をドラッグします。
イベントターゲットをそれぞれ「マイページに戻るボタン」
「戻る顧客登録ページ⇒マイページ」としイベント名を「click」とします。

最後にアクションの中のページナビゲーションをクリックし、「Go to (Push)」をドラッグします。そして設定のURLに遷移先のページのURLを入力し、要素同士を繋げます。
最後に要素同士をつなげるとワークフローの完成です。

マイページのワークフロー

①マイページから各項目へアクセスするためのワークフローを組みます。
基本的には前項のマイページに戻るワークフローを要領は同じです。

画像ではマイページから社員登録画面への偏移をするためのワークフローを組んでいます。
トリガーの中にある「Element trigger」をドラッグします。
イベントターゲットを「社員登録ページ偏移」としイベント名を「click」とします。
最後にアクションの中のページナビゲーションをクリックし、「Go to (Push)」をドラッグします。そして設定のURLに遷移先のページのURLを入力し、要素同士を繋げます。この作業を各項目で行います。

②ログアウトボタンを押した時にログインページに偏移するワークフローを組む

　まず、トリガーの中にある「Element trigger」をドラッグします。イベントターゲットを「ログアウトボタン」とします。イベント名を「click」とします。

アクションの中のユーザーをクリックし、「ログアウト」をドラッグします。次に アクションの中のページナビゲーションをクリックし、「Go to (Push)」をドラッグします。そして設定のURLに遷移先のページのURLを入力します。

③ドラックした３つの要素をつなげるとワークフローの完成です。

以上で各ページのワークフローが完成しました。

今回は、顧客管理アプリを作りながら学ぶゼロワン講座のPart3ということで、ワークフローについて説明してみました！初学者でもわかりやすい内容になっていると思うので、是非私と一緒に手を動かして見てください！

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

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

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