【Part2 SignUpページ】チャットアプリを作りながら学ぶゼロワン講座

こんにちは。
今回の記事では、SignUpページの作成について説明していきます。

仕様が変わってしまっているところや、もしわからないところがあれば概要欄から飛べるゼロワンのフォーラムで質問してください。
それでは、始めましょう！

SignUpページのフロントエンド

まず、ページのレイアウトを設定します。

『Body（ページの空白部分）』をクリックし、画面右側の『外観』から設定できます。
下にスクロールし、『レイアウト』の『垂直（下向きの矢印）』を選択します。

画面左側の『パレット』内にある『基本エレメント』から『テキスト』をドラッグしてきて、画面右側にある『プロパティ』を選択し、『コンテンツ』に「新規登録」と入力します。

SignUpページで入力してほしいデータは以下の通りです。

・ユーザー名
・プロフィール画像
・メールアドレス
・パスワード

『テキスト』をドラッグして画面に4つ並べます。上から順に、「ユーザー名」「プロフィール画像」「メールアドレス」「パスワード」と入力してください。

そして、『インプットエレメント』から『インプット』をドラッグして、それぞれのテキストの下に配置しましょう。

それぞれの名前を「input user_name」「input user_image」「input_email」「input_password」と設定すると後々分かりやすいです。

デフォルトのデータ型は『テキスト』になっています。ここでプロフィール画像とパスワードのインプットのデータ型をそれぞれ『file』『password』にします。

最後に、ボタンを設置します。

『基本エレメント』から『ボタン』をドラッグし、一番下に配置します。

SignUpページのワークフロー

次に、ワークフローの設定を行います。

先程作成したボタンを選択し、『プロパティ』の一番下にある『ワークフロー』の『新規作成』をクリックします。

するとポップアップが表示されるので、『名前』には「signup」と入力し、『イベント』は「click」を選択してください。

『OK』をクリックすると、ワークフローの設定画面に遷移します。
既に『TRIGGER』が配置されている状態になっているかと思います。

『アクション』の中の『ユーザー』を開き、『Emailでサインアップする』をドラッグしてきて設置します。

『ユーザーEmail』は、『動的』を選択し、『input email』『値』と設定していってください。「input email's value」と表示されます。
『パスワード』も同様に、『input password』『値』と設定していってください。「input password's value」と表示されます。

次に、『Storage』から『Upload file』をドラッグしてきます。

『File from input』は、『動的』で「input user_image's value」と設定します。
バケットの名前は『静的』で「user_image」としましょう。
『Override file name』にチェックを入れてください。
ファイル名は『動的』から『uuid』を選択します。

次に、『ユーザー』から『ユーザーを更新する』をドラッグしてきます。

『値』に、『user_name』『user_image』を追加します。
『user_name』は「input user_name's value」、『user_image』は「Upload file's output's file」と設定します。

次に、『ページナビゲーション』から、『Go to (Push)』をドラッグしてきます。

『URL』は『静的』で「/home」と入力します。

そして最後に、これらのエレメントをすべて線で繋ぎます。

Part2は以上です！お疲れ様でした！

最後まで読んでいただき、ありがとうございます。
次回の記事では、Homeページの作成を解説します！

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
ゼロワンフォーラム：https://www.forum.thezeroone.io/
今回解説した動画：https://www.youtube.com/watch?v=bQfZJhpgtyA
ゼロワンのHP：https://www.zeroone.today/

こんにちは、ゼロワンエバンジェリストの大内です！
今回は、チャットアプリを作りながら学ぶゼロワン講座のPart2、SignUpページ作成の説明をしました。少々複雑な箇所もありますが、本記事と動画を見ながら試行錯誤してみてください！

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