【bubble】Webサービスには欠かせない！ユーザーの新規登録(Sign up)の実装方法

ノーコーダーのつかさです。

今回は、Webサービスを開発する上では欠かすことのできない「ユーザーの新規登録」の実装方法についてご紹介します。

bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

新規登録の見た目を作る

一般的なWebサービスで「新規登録」に必要な情報といえば

の２つです。場合によっては名前や電話番号の入力も求められますが、今回は操作を覚えることが目的なので、この２つに絞って学習していきましょう！

まずはEメールアドレスの入力欄を画像のようにInputをクリックして右側の空白にドラッグ＆ドロップします。

Input欄を配置できたら、右側の黒い設定画面の①Placeholderに「Email」と入力してみましょう！すると②の表示が「Input Email」、③の空欄に薄文字で「Email」とそれぞれ表示されるようになります。

同じようにパスワード欄も設置していきましょう！

InputをEmail欄の少し下側に配置し、①Placeholderに「Password」と入力してみましょう！同じように②と③の表示も変わりましたか？

最後にボタンを配置しましょう！

左側のButtonをクリックしてPassword欄の下に配置します。Appearanceに①「新規登録」と入力するとボタンの設定画面の名称が②「Button 新規登録」にボタンの表示名が③「新規登録」に変更されます。

これで見た目は完成です！次はいよいよ新規登録の機能的な部分を作っていきましょう！

いよいよ機能的な部分の実装です！bubbleではワークフローというものを利用しながら作成していきます。

まずは新規登録ボタンの設定画面から「Start/Edit workflow」をクリックしてワークフロー画面に移動しましょう！

ワークフロー画面では「新規登録ボタン」を押した時の処理を設定することができます。

今回は、

新規登録ボタンを押した時にInput Email欄に入力されているEメールアドレスとInput Password欄に入力されているパスワードをユーザーとして新規登録する

という処理を設定してきます。

下記の①〜③を順になぞって、「Sign the user up」をクリックしてください。

設定画面が呼び出されるので、それぞれ

を設定してください。これでInput Email欄とInput Password欄に入力された値(value)を受け取ってbubble内のデータベースにユーザーとして登録することができました。

簡単ですね！

最後にInput Email欄とInput Password欄に入力された値をクリアする設定を行なっておきましょう。

こちらも同様に新規登録ボタンを押した時の動作として登録するので、「Sing the user up」の隣の「Click here to ad an action」から挙動を選択してきましょう。

「Element Actions」から「Reset Inputs」をクリックして完了です！

ユーザーの新規登録のような、多くのサービスで必ず使用される機能はNoCodeのありがたみが良くわかりますね。

もちろん新規登録を行なっただけではサービスを利用できないので、次回はログイン、ログアウト処理の実装を行なっていきます。

Enjoy NoCode！