【Bubble入門・基礎②】新規登録・ログインの実装【NoCode】
(※Bubble公式(英語)のチュートリアルに沿って、実践解説していきます)
📢【入門】今回Bubbleで作るもの
以下のような機能を、実装していきます!
・ユーザー登録
・ユーザーログイン
・ログアウト
画面の完成形はこんな感じ・・・
上画像のように、必要情報を入れると、登録+ログインします。
今回は、ログインしているユーザーのメールアドレスが、右側に表示されるようにしていく仕様です。
では早速・・・
📌1:必要なパーツを配置しよう
まずは、左メニューから、必要なパーツを配置していきます。
パーツの配置は、以下のような具合です。
パーツが配置し終わったら、以下のように、Placeholderに入力していってください。
まずは、Input から・・・。
input部品の名前を「Input Email」に変更して、Placeholderもメールアドレスと入力します。
パスワードの方も、input部品の名前を「Input Password」に変更して、Placeholderもパスワードと入力します。
続いて、ボタンのラベルも変更していきましょう!
ここでも、ボタンパーツの名前を変更しておきます。
📌2:ユーザーの新規登録機能を実装する
ここまで来たら、新規登録ボタンの実装をしていきましょう!
以下の画像のように、ボタンを選択し、「Start/ Edit workflow」をクリックします。
WorkFlowの画面が表示されるので、以下の手順どおりに、設定してみてください。
ここで、「Sign the user up」を選択すると、設定ウィンドウが表示されます。
画面に、inputパーツで、「メールアドレス」と「パスワード」を入力するフォームを配置しましたね!
そこに入力された値を、Bubbble側に渡す処理を、ここで設定していきます。
Email項目には、まず配置したInput部品名、「input Email」を選択します。
その後、「's value」を選択すれば、「input Emailに入力された値」といった意味になります。
同様に、下画像のようにPassword項目も、設定してしまいましょう!
ここでも、「's value」を選択します。
📌3:ユーザーログイン機能も実装しよう!
続いて、下画像の点線枠「Click here to add an event」をクリックします。
その後、「Elements ➡ An element is clicked」の順に、選択していきましょう!
すると、Whenの項目が、「エレメント(部品)をクリックしたとき」となります。
どのエレメントをクリックした時か、ここで設定していきましょう。
今実装したいのは、ログインでしたね!
なので、「Button Login」をクリックしたとき、と設定しましょう!
そうしたら、以下のような手順で、ログイン機能を設定していきます。
ログイン機能の完了です!
コード実装がないと、かなり楽ですね!
📌4:ログイン中のユーザーのメールアドレスを表示する
まず、デザインへ戻りましょう!
次に、以下のように、Group と Text を配置していってください。
配置したTextの設定ウィンドウから、「Insert dynamic data」を選択します。
これは、動的に変わる値という意味で、主にDBからデータを引っ張てくるときに使います。
今回は、現在ログイン中のユーザーのメールアドレスを表示させたいので、以下のように設定していきましょう!
📌5:ログアウトボタンの実装
その前に、先ほど配置したGroupには、「Group Logged In」と名前を付けておきましょう。後で、これ自体を表示・非表示にする際に、この名前が必要になります。
そして、ログアウトボタンも配置しておいてください。
ボタンラベルを「ログアウト」にしたら、「Start/ Edit workflow」をクリックします。
ログアウトの処理は、以下のような手順で設定して完了です。
📌6:「未ログイン」「ログイン中」で表示を切り替える
ログイン中のユーザーのメールアドレスと、ログアウトボタンは、ユーザーがログイン中のときだけ、表示させるのが自然ですね!
というわけで、WorlFlowでまず、「ログインしているとき」という条件を加えていきます。
次に、ログインしているときは、さっき命名したGroupを表示させる設定を加えていきましょう!
このGroupですね!
まず、エレメントを表示させる設定です。
そして、先ほどのGroupを選択してあげましょう!
これでログイン中は、「Group Logged In」自体が、見えるようになりました!
次に、ログアウトしたら(未ログインのときは)、Group Logged In が、見えなくなる設定も必要ですね。
新しく、Whenの条件を加えていきましょう!
以下は、ログアウトした時、エレメントを隠す設定です。
隠すのは、「Group Logged In」という名のGroupでしたね!
お疲れ様でした!これで完成です!
😋さいごに:Bubbleプレビューで動作確認
右上の Preview から、動作の確認をしてみましょう!
適当に、任意のメールアドレスとパスワードを入力して、新規登録をクリックします。
このとき、右側にはなにも表示されていませんね!
新規ボタンを押すと、右側にログイン中のアドレスが表示され、ログアウトボタンも表示されました!
ログアウトもしてみましょう。
うむ、右側が非表示なりました~!ぱちぱちぱち!
これで、完成!!!
「♥」「フォロー」もしていただけたら
励みになります🙏
👇入門③はコチラ👇