【NoCode】bubbleのチュートリアル解説②ユーザーの新規登録とログインシステムを実装する。
bubbleの登録はこちらから。登録するとチュートリアルが選べるようになります。今回は「Building a sign-up system」というチュートリアルをやってみます。
★目的:ユーザーの新規登録、ログインシステムを作る
★このチュートリアルで学べるbubbleの新しい機能:
①「Sign up」と「Log in」機能の実装
②「Containers」の「Group」を使ってログイン後の挙動を実装
③「Log out」機能
1.見た目を作る。
まずはじめにEmail入力欄とPassword入力欄を作ります。
左側のElement PaletteのInputを選択し任意の場所に配置します。「Input Email」というポップアップウィンドウが出るのでPlaceholderに「Email」と入力。
同様にElement PaletteからInputを選択し任意の場所に配置します。今度は「Input Password」というポップアップウィンドウのPlaceholderに「Password」と入力。
この「Input Email」と「Input Password」は機能を実装する際にも使いますので覚えておいてください。ちなみにチュートリアルでははじめから「Input Email」「Input Password」という名前で表示されていますが、実際の作業ではPlaceholderに入力された文字列が「Input ○○○」の○○○に反映されます。
入力欄の見た目ができたので次はSing upボタンとLog inボタンの見た目を作ります。同じく左側のElement PaletteからButtonを選択して、それぞれ配置して名前を「Sign up」と「Log in」にします。
これでとりあえず見た目がそれっぽくなりました。次に機能を追加していきます。
2.新規登録できるようにする
Sign upボタンを押した時にユーザーが新規登録できるようにします。Sign upボタンをクリックして出てくるポップアップウィンドウから「Start/Edit workflow」をクリックします。
すると画面が遷移するので「Click here to add an action」を選択します。
AccountタブからSign the user upを選択してEmailとPasswordにInputフォームの入力を受け取るように記述します。はじめから全て用意されているのがbubbleの素晴らしいところですね。
それぞれ「Input Email's value」「Input Password's value」となっています。この「Input Email」や「Input Password」は冒頭で見た目を作る時に設定した名前とリンクしています。
これでユーザーの新規登録の処理を記述することができました。とても簡単ですね。
3.ログイン処理を実装する
同じようにログイン処理を作っていきます。「Click here to add an event」をクリックしてElementsから「An element is clicked」を選択します。※Designに戻ってログインボタンのWorkflowから飛ぶことも可能です。
Elementの項目でButton Loginを選びます。これで「Log inボタンを押した時の処理」が記述できるようになりました。次に処理の中身を作っていきます。
Sign up(新規登録)ボタンを作った時と同じように「Click here to add an action」をクリックして今回は「Log the user in」を選択します。
EmailとPasswordの欄にそれぞれ「Input Email's value」「Input Password's value」を入力します。新規登録の時と同じですね。
これでログイン処理も記述することができました。
4.ログイン後にEメールアドレスを表示する
ログインしたことがわかるように、ログイン後にメールアドレスを表示させてみましょう。
Designページに戻ってElement PaletteからContainersのGroupを選択して任意の場所に配置してください。ボーダーで囲まれた枠が出現します。ここがログイン後にアクティブになる範囲となります。さらにElement PaletteからTextを選択して作ったGroupのボーダー内に配置し、Insert Dynamic DataからCurrent User's emailを選択します。
5.ログアウトボタンを作成する
Element PaletteからButtonを選択してGroupのボーダー内に配置します。Appearanceには「Log out」と入力します。
最後にStart/Edit workflowをクリックしてログアウト機能を追加します。
6.ログイン後にEmailアドレスを表示する
Workflowから「Click here to add an event」をクリックして「User is logged in」を選択します。ログイン中の処理を記述するためです。
「Click here to add an action」のElement ActionsからShowを選択。これでユーザーがログインしている状態の時にユーザーのメールアドレスが表示される、という処理の完成です。
最後にユーザーがログアウトしている状態elementをHideするという処理を作って完成!これでログアウトボタンを押した時にメールアドレスが消えます。
完成したシステムの挙動を確認してみましょう。メールアドレスとパスワードを入力してSign upボタンを押すと...
右側のグループのボーダー内にメールアドレスが表示されています。
Log outボタンを押すと再びメールアドレスが消えます
↓↓↓次のチュートリアルはこちら↓↓↓
この記事が気に入ったらサポートをしてみませんか?