【NoCode】bubbleのチュートリアル解説②ユーザーの新規登録とログインシステムを実装する。

bubbleの登録はこちらから。登録するとチュートリアルが選べるようになります。今回は「Building a sign-up system」というチュートリアルをやってみます。

★目的：ユーザーの新規登録、ログインシステムを作る

★このチュートリアルで学べるbubbleの新しい機能：

①「Sign up」と「Log in」機能の実装

②「Containers」の「Group」を使ってログイン後の挙動を実装

③「Log out」機能

１．見た目を作る。

まずはじめに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」にします。

これでとりあえず見た目がそれっぽくなりました。次に機能を追加していきます。

２．新規登録できるようにする

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」は冒頭で見た目を作る時に設定した名前とリンクしています。

これでユーザーの新規登録の処理を記述することができました。とても簡単ですね。

３．ログイン処理を実装する

同じようにログイン処理を作っていきます。「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」を入力します。新規登録の時と同じですね。

これでログイン処理も記述することができました。

４．ログイン後にEメールアドレスを表示する

ログインしたことがわかるように、ログイン後にメールアドレスを表示させてみましょう。

Designページに戻ってElement PaletteからContainersのGroupを選択して任意の場所に配置してください。ボーダーで囲まれた枠が出現します。ここがログイン後にアクティブになる範囲となります。さらにElement PaletteからTextを選択して作ったGroupのボーダー内に配置し、Insert Dynamic DataからCurrent User's emailを選択します。

５．ログアウトボタンを作成する

Element PaletteからButtonを選択してGroupのボーダー内に配置します。Appearanceには「Log out」と入力します。

最後にStart/Edit workflowをクリックしてログアウト機能を追加します。

６．ログイン後に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ボタンを押すと再びメールアドレスが消えます

↓↓↓次のチュートリアルはこちら↓↓↓