見出し画像

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

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

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

画像27

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

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

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

③「Log out」機能

1.見た目を作る。

まずはじめにEmail入力欄とPassword入力欄を作ります。

左側のElement PaletteのInputを選択し任意の場所に配置します。「Input Email」というポップアップウィンドウが出るのでPlaceholderに「Email」と入力。

スクリーンショット 2020-08-03 10.38.49

同様にElement PaletteからInputを選択し任意の場所に配置します。今度は「Input Password」というポップアップウィンドウのPlaceholderに「Password」と入力。

スクリーンショット 2020-08-03 10.39.12

この「Input Email」と「Input Password」は機能を実装する際にも使いますので覚えておいてください。ちなみにチュートリアルでははじめから「Input Email」「Input Password」という名前で表示されていますが、実際の作業ではPlaceholderに入力された文字列が「Input ○○○」の○○○に反映されます。

入力欄の見た目ができたので次はSing upボタンとLog inボタンの見た目を作ります。同じく左側のElement PaletteからButtonを選択して、それぞれ配置して名前を「Sign up」と「Log in」にします。

スクリーンショット 2020-08-03 10.39.42

スクリーンショット 2020-08-03 10.52.05

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

スクリーンショット 2020-08-03 10.54.55

2.新規登録できるようにする

Sign upボタンを押した時にユーザーが新規登録できるようにします。Sign upボタンをクリックして出てくるポップアップウィンドウから「Start/Edit workflow」をクリックします。

スクリーンショット 2020-08-03 11.07.42

すると画面が遷移するので「Click here to add an action」を選択します。

スクリーンショット 2020-08-03 11.11.43

AccountタブからSign the user upを選択してEmailとPasswordにInputフォームの入力を受け取るように記述します。はじめから全て用意されているのがbubbleの素晴らしいところですね。

スクリーンショット 2020-08-03 11.17.30

それぞれ「Input Email's value」「Input Password's value」となっています。この「Input Email」や「Input Password」は冒頭で見た目を作る時に設定した名前とリンクしています。

スクリーンショット 2020-08-03 11.22.10

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

3.ログイン処理を実装する

同じようにログイン処理を作っていきます。「Click here to add an event」をクリックしてElementsから「An element is clicked」を選択します。※Designに戻ってログインボタンのWorkflowから飛ぶことも可能です。

スクリーンショット 2020-08-04 11.41.24

スクリーンショット 2020-08-04 11.42.52

Elementの項目でButton Loginを選びます。これで「Log inボタンを押した時の処理」が記述できるようになりました。次に処理の中身を作っていきます。

スクリーンショット 2020-08-04 11.43.10

Sign up(新規登録)ボタンを作った時と同じように「Click here to add an action」をクリックして今回は「Log the user in」を選択します。

スクリーンショット 2020-08-04 11.45.53

スクリーンショット 2020-08-04 11.46.03

EmailとPasswordの欄にそれぞれ「Input Email's value」「Input Password's value」を入力します。新規登録の時と同じですね。

スクリーンショット 2020-08-04 11.46.48

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

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

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

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

スクリーンショット 2020-08-04 14.41.58

スクリーンショット 2020-08-04 13.15.40

5.ログアウトボタンを作成する

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

スクリーンショット 2020-08-04 13.29.32

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

スクリーンショット 2020-08-04 13.34.53

スクリーンショット 2020-08-04 13.35.32

6.ログイン後にEmailアドレスを表示する

Workflowから「Click here to add an event」をクリックして「User is logged in」を選択します。ログイン中の処理を記述するためです。

スクリーンショット 2020-08-04 13.42.38

「Click here to add an action」のElement ActionsからShowを選択。これでユーザーがログインしている状態の時にユーザーのメールアドレスが表示される、という処理の完成です。

スクリーンショット 2020-08-04 13.44.15

スクリーンショット 2020-08-04 13.48.00

最後にユーザーがログアウトしている状態elementをHideするという処理を作って完成!これでログアウトボタンを押した時にメールアドレスが消えます。

スクリーンショット 2020-08-04 14.16.34

完成したシステムの挙動を確認してみましょう。メールアドレスとパスワードを入力してSign upボタンを押すと...

右側のグループのボーダー内にメールアドレスが表示されています。

スクリーンショット 2020-08-04 14.09.48

Log outボタンを押すと再びメールアドレスが消えます

スクリーンショット 2020-08-04 14.27.49

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


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
4
NoCode Walkerサロンオーナー&編集長(https://nocodewalker.com/)