こんにちは!shiraishiです!
今回は、前回の要件定義から
昔懐かし前略プロフィール再現アプリの実装に入っていきます!
あの頃を思い出しながらノーコードツールを触っているのは何ともエモいですね。

この記事では基本機能として、
ユーザー登録/ログイン機能プロフィール作成機能を作成していきます!

ユーザー登録/ログイン

今回は「任意のアカウント名」+「パスワード」でのユーザー登録/ログイン機能を実装します。

Bubbleでのユーザー登録/ログイン機能は、
チュートリアルでもあるようにメールアドレスを使用したものが用意されています。
(記事はこちらbubbleチュートリアルやってみた: 新規登録とログインを作ってみよう-2

このようにBubbleでのログイン機能はメールアドレスの使用に依存しているようで、メールアドレスでの認証がマストなようです。
それでも調べていくと方法はあるようで、Bubble公式フォーラム内で次のようなやりとりがありました。
https://forum.bubble.io/t/can-i-use-username-as-text-field-instead-of-email/859/22
ここを読むと、アカウント名でのログインをするならば
ユーザーに任意のアカウント名を入力してもらい、
「入力したアカウント名@yourdomain.com」のようにダミーアドレスを作成・保存して、ログイン認証に使用する、という流れが必要なようです。
少し面倒な気もしますが、今回はこのダミーアドレスを使用する形でログイン機能を実装していきます!

Design作成

まず、DesignでInput formsからinputを2つ作成し、「アカウント名」と「パスワード」の入力フォームを作ります。
そしてVisual ElementsからButtonを2つ作成し、「ログイン」と「新規作成」ボタンを作成します。

次はボタンクリック時の処理を作っていきます!

ユーザー登録

まずはユーザー登録の処理を作成します。

Workflowに移ります。
ページ内のボタンをクリックした時の処理を追加したいので、
Click here to add an event → Elements → An element is clickedを選択します。

Elementは先ほど作成したButton 新規登録を選択します。
Click here to add an action.. → Account → Sign the user upを選択します。
Emailの部分は「Input アカウント名’s value:append@yourdomain.com」とします。
この設定で、
アカウント名の入力フォームから値を取得
→取得した値からダミーアドレスを作成
→作成したダミーアドレスを用いてユーザー登録
の処理が出来ました。

ユーザー登録の処理が出来たのでログインの処理を作成します!

ログイン

新規登録の時と同じように、Workflowから
Click here to add an event → Elements → An element is clickedを選択します。
Elementは先ほど作成した「Button ログイン」を選択し、
Click here to add an action.. → Account →Log the user inを選択します。
Emailの部分はユーザー登録と同じように「Input アカウント名’s value:append@yourdomain.com」とします。

これでユーザー登録/ログインまでの処理が出来ました!

プロフィール作成機能

プロフィールの表示/編集を行う機能を作成していきます。

Dataの作成

まずプロフィール用のDataを作成します。
Dataに移動し、次のような形でprofile typeのfieldを作成します。

UserというfieldでUser dataとの関連付けを行なっています。
プロフィールの項目は実際60個以上作る想定ですが、まずはHN、HNの由来、性別の3つで作成を進めます。
ちなみにHNはハンドルネームのことですね、少し前略プロフィール臭がしてきました。

また、デフォルトにあるUser typeにもprofileと関連づけるためのprofile fieldを作成します。

これでDataの準備が整いました!

ページ作成

次にプロフィールの表示/編集ページを作成します!
プロフィールを表示するページ:profile
プロフィールを編集するページ:edit_profile
として2つのページを作成します。
どちらのページもType of contentはprofileとします。

Workflow追加

次にユーザー登録後の処理を追加します。
ユーザー登録後にCurrent Userと関連付くprofileを作成します。

その後、Current Userを前のステップで作成したprofileと関連付けます。

また、ログイン後に自分のプロフィールページへ遷移する処理を追加します。

ページに要素追加

ページにTextやButtonなど要素を追加します!

profileページ
プロフィール編集へのリンクボタン、ログアウトボタンを配置します。
また、確認用のためprofileの各fieldの値表示用のTextを配置しました。
profileページの実装は次の記事で行います!

profile編集ページ
profileの各fieldのinputやプロフィールを更新するボタンを配置しました。

プロフィール編集flowの追加

「プロフィールを更新する」Buttonクリックで、フォームに入力した値をDataに反映するflowを作成します。

また、更新後はプロフィールを表示するページへ遷移するflowを追加します。

また、その他にも他のユーザーが編集できないように、他のユーザーがアクセスした場合に他のページへ遷移する処理を追加しました。

ここまででユーザー登録→プロフィール登録までの基本機能を実装することができました!
今回実際に作りながら、前略プロフィールってとてもシンプルな機能のWebサービスだったんなあと感じました。
まだデザインはBubbleデフォルトのままなので前略プロフィール感は出せていませんが、今後に期待です!

ここまでご覧頂きありがとうございました!