Bubbleでクローズドな教育系SNSを作る【ユーザー登録編④】

#はじめに
[前回](https://qiita.com/yuki_ink/items/f377ef0ced2e398aeac5)に引き続き、ユーザー登録機能を実装していきます。

**①ユーザー登録希望者がユーザー登録ページから申請する。
　→アカウントはこの時点で作成されるが、まだ無効の状態。ログインできない。
②申請内容がSNS管理者にメールで通知される。
③申請内容をSNS管理者がチェックする。
　→管理者が問題ないと判断すればアカウントを有効化する。
④アカウントが有効化されると申請者に通知される。**

今回でようやく！ようやく！①の部分が完成します！！

#ユーザー登録処理の確認
とはいえ前回で①はほぼほぼできちゃってるんですよね。
あとは確認とフラグの設定だけ。

というわけで、まずは前回作ったユーザー登録処理が正しく動作しているか見ていきます。

###Previewからユーザー登録してみる
せっかくなのでトップページからPreviewします。
「ユーザー登録」ボタンをぽちっとな。
正常にページ遷移できました。

ユーザー登録ページの入力フォームに必要な情報を入力します。
全ての入力フォームを埋めると「確認」ボタンが出てきました。
ぽちっとな。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/dc8b0837-98be-5c50-6ea7-9430d6dd3db0.png)
この内容で登録します。OK！
ユーザー登録後遷移ページに飛びました。

ここでPreview画面を閉じます。

Bubbleのページ左横のアイコンから「Data」をクリック。
Data typesタブにはテーブル情報が記載されています。

Bubbleの"type"＝"テーブル"という認識でOKだと思います。
"テーブル"という言葉に馴染みのない方は、[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/diff528db.html)を参照いただくとなんとなくのイメージが掴めるかなと思います。

ここで画面右側のFields for type Userを見てみると、[前回作ったフィールド](https://qiita.com/yuki_ink/items/f377ef0ced2e398aeac5#sign-the-user-up)が確認できます。
前回はWorkflow画面からフィールドを作りましたが、Data画面の「Create a new field」からでも新しいフィールドを作ることができます。~~むしろこっちからやるのが普通な気がする。~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/45b732ea-0aa5-e19f-daf0-b03a2dbe47a0.png)
次にApp dataタブをクリックします。
typeに入っているデータを実際に見れる場所です。
Database viewsに「All Users」という項目があるので、そこをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/740c558e-be57-689f-0e27-bd511fdcbf70.png)
先ほどユーザー登録した内容が閲覧できました！
確認のためだけに作ったユーザーなので消しておこうと思います。
行頭のチェックボックスにチェックを入れ、「Delete」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/be390c75-ffaa-7218-1a9a-0f49c20b77bc.png)
CONFIRM。
そのあと何か出てきたら「GOT IT」でOKです。

#アカウントの承認フラグを作る
②以降の要件を満たすために重要になってくるのが、アカウントが承認されているかどうか判定するフラグです。
このフラグが立っていればアカウントは承認されており、サインインできるようになります。
後々の作業になりますが、ユーザーがサインインを試みた際にそのユーザーの承認フラグを参照し、その内容によってサインインさせるかどうか判断するWorkflowを設定することになります。

###Create a new field
Data typesタブから「Create a new field」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/13d2450d-5a20-7cca-b946-38db406320be.png)
Field nameは「Approval flag」、Field typeは「yes/no」にしました。
デフォルトは「no」、アカウントが承認されたら「yes」に変更する想定です。

###Workflow修正
ユーザー登録処理の際、「Approval flag」に「no」を入れるようにWorkflowを修正します。

ユーザー登録処理のときに設定したWorkflowを開きます。
（ここで、あれ？なくね？と思ったそこのあなた。左上のPageでuser_registration以外のページを指定しているのでは。私ですね。）
「When Button OK is clicked」から「Sign the user up」をクリックし、「Change another field」から「Approval flag = "no"」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/5bd28900-82b1-7909-1453-a406131bdebd.png)
これで「Approval flag」のデフォルト値が「no」になりました。

###やってみる
ではもう一度Previewからユーザー登録してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/b3bdfb1b-84d6-f8de-bad2-7b6c522e0f00.png)
選ばれたのは煉獄さんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731275/e5eba6fa-1259-a6ae-057a-8d3b017d9345.png)
Data画面を見てみると煉獄さんがユーザー登録されており、「Approval flag」が「no」と登録されていることが分かります。

#終わりに
今回で要件①は完了です！
次回は②以降を実装していきます。

煉獄さんのアカウントを承認して「Approval flag」を「yes」に変更する、というWorkflow実装はかなり先になります笑。

ファンブックの煉獄さん、やっぱかっこよかったですね～～（何の話）