【Part3 ワークフロー作成編】顧客管理アプリを作りながらゼロワンを学ぶ講座
こんにちは!この記事ではフロンドエンド編の続きで、ワークフローについて解説していきます!
仕様が変わってしまっているところや、もしわからないところあれば概要欄から飛べるゼロワンのフォーラムで質問してください。
ログインページのワークフロー
まず、「ログイン」ボタンを押された時にメールアドレスとパスワードを
DBより参照してマイページに偏移するワークフローを組みます。
① 画面左側からワークフロータブを選択し左上の+のアイコンをクリックします。この時に+の左側にあるページ名をボタンの配置されているページになっているか注意してください。すると、ワークフロー名と色を入力するポップアップがでてきます。今回ワークフロー名は「ログイン」としておきます。色は行わなくても差し支えないです。
②トリガーの中にある「Element trigger」をドラッグします。イベントターゲットをそのワークフローを実行するときにユーザーがクリックするエレメントに設定します。今回はフロント部分作成時にエレメント名を「ログインボタン」としていたので、イベントターゲットを「ログインボタン」とします。そして、イベント名を「click」にします。
次に登録が済んでない人が登録するためのページに偏移するためのワークフローを組みます。こちらも先程と同じように作成していきます。
最後にアクションの中のページナビゲーションをクリックし、「Go to (Push)」をドラッグします。そして設定のURLに遷移先のページのURLを入力し、要素同士を繋げます。
以上でログインページのワークフローの作成は完了です。
社員登録及び顧客登録ページのワークフロー
次に社員登録及び顧客登録をDBに格納するワークフローを組みます。
① トリガーの中にある「Element trigger」をドラッグします。イベントターゲットを「社員登録ボタン」及び「顧客登録ボタン」とします。イベント名を「click」とします。
② アクションの中のデータベースをクリックし、「ドキュメントを作成する」をドラッグします。テーブルを「社員情報」及び「顧客情報」にし、【Part1 データベース編】で作成した「社員メールアドレス」「社員パスワード」及び「顧客名」、「顧客住所」を追加します。そして、それぞれの「エレメント名+値」をクリックします。
最後に2つの要素をつなげるとワークフローの完成です。
マイページに戻るワークフローを作成する
社員登録画面及び、顧客登録画面からマイページに戻る為の
ワークフローを作成します。
基本的には①の作成方法と同じ作り方です。
トリガーの中にある「Element trigger」をドラッグします。
イベントターゲットをそれぞれ「マイページに戻るボタン」
「戻る顧客登録ページ⇒マイページ」としイベント名を「click」とします。
最後にアクションの中のページナビゲーションをクリックし、「Go to (Push)」をドラッグします。そして設定のURLに遷移先のページのURLを入力し、要素同士を繋げます。
最後に要素同士をつなげるとワークフローの完成です。
マイページのワークフロー
①マイページから各項目へアクセスするためのワークフローを組みます。
基本的には前項のマイページに戻るワークフローを要領は同じです。
画像ではマイページから社員登録画面への偏移をするためのワークフローを組んでいます。
トリガーの中にある「Element trigger」をドラッグします。
イベントターゲットを「社員登録ページ偏移」としイベント名を「click」とします。
最後にアクションの中のページナビゲーションをクリックし、「Go to (Push)」をドラッグします。そして設定のURLに遷移先のページのURLを入力し、要素同士を繋げます。この作業を各項目で行います。
②ログアウトボタンを押した時にログインページに偏移するワークフローを組む
まず、トリガーの中にある「Element trigger」をドラッグします。イベントターゲットを「ログアウトボタン」とします。イベント名を「click」とします。
アクションの中のユーザーをクリックし、「ログアウト」をドラッグします。次に アクションの中のページナビゲーションをクリックし、「Go to (Push)」をドラッグします。そして設定のURLに遷移先のページのURLを入力します。
③ドラックした3つの要素をつなげるとワークフローの完成です。
以上で各ページのワークフローが完成しました。
今回は、顧客管理アプリを作りながら学ぶゼロワン講座のPart3ということで、ワークフローについて説明してみました!初学者でもわかりやすい内容になっていると思うので、是非私と一緒に手を動かして見てください!
ゼロワンフォーラム:https://www.forum.thezeroone.io/
今回解説した動画:https://youtu.be/Pvk14lGsuGU
ゼロワンのHP:https://www.zeroone.today/
わからないことがあれば、フォーラム等でご質問ください。
最後まで読んでいただきまして、ありがとうございました!