1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-02-09

#はじめに
前回に引き続き、ユーザー登録機能を実装していきます。

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

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

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

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

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

ユーザー登録ページの入力フォームに必要な情報を入力します。
全ての入力フォームを埋めると「確認」ボタンが出てきました。
ぽちっとな。
image.png
この内容で登録します。OK!
ユーザー登録後遷移ページに飛びました。

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

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

Bubbleの"type"="テーブル"という認識でOKだと思います。
"テーブル"という言葉に馴染みのない方は、「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典を参照いただくとなんとなくのイメージが掴めるかなと思います。

ここで画面右側のFields for type Userを見てみると、前回作ったフィールドが確認できます。
前回はWorkflow画面からフィールドを作りましたが、Data画面の「Create a new field」からでも新しいフィールドを作ることができます。むしろこっちからやるのが普通な気がする。
image.png
次にApp dataタブをクリックします。
typeに入っているデータを実際に見れる場所です。
Database viewsに「All Users」という項目があるので、そこをクリックします。
image.png
先ほどユーザー登録した内容が閲覧できました!
確認のためだけに作ったユーザーなので消しておこうと思います。
行頭のチェックボックスにチェックを入れ、「Delete」をクリックします。
image.png
CONFIRM。
そのあと何か出てきたら「GOT IT」でOKです。

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

###Create a new field
Data typesタブから「Create a new field」します。
image.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
これで「Approval flag」のデフォルト値が「no」になりました。

###やってみる
ではもう一度Previewからユーザー登録してみましょう。
image.png
選ばれたのは煉獄さんでした。
image.png
Data画面を見てみると煉獄さんがユーザー登録されており、「Approval flag」が「no」と登録されていることが分かります。

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

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?