🍜

Noodlでログイン機能を作ってみる

2020/12/20に公開

Noodlアドベントカレンダー19日目!(1日遅れですがご容赦ください...)
YouTube動画の埋め込みをしたかったのでZennで書いてみることにしました。

Noodl バージョン2.1 ではデータベース連携が可能になりました。
今回の記事では、Noodlのクラウドデータベースを利用して、ログイン機能を実装してみます。

データベース連携

Noodl 2.1のクラウドデータベースは、Parseを利用しています。Noodlの編集画面からデータベース(Parse)のダッシュボードを開くことができ、データの確認や直接編集ができます。他の外部データベースとの連携もできるようですが、今回はNoodlクラウドデータベースについて書きます。
ダッシュボード

動画:シンプルなログイン機能を作ってみた

作成の手順

  1. Simple Design Systemモジュールの読み込み
  2. ログイン画面、アカウント作成画面、ログイン後画面の作成
  3. User Managementモジュールの読み込み
  4. バックエンドの作成
  5. ログイン機能のフロー構築

以上の手順で作りました。
1と2はモジュールを使ったデザインの作成なので省きます、3から5について書いていきます。
サンプルデータをGithubにアップしたのでご参考になれば!一番下にリンク載せました。

手順3:User Managementモジュールの読み込み

編集画面でUser Managementモジュールを「add」で読み込んでください。

読み込むと以下の4つのノードが追加され、使えるようになります。

手順4:バックエンドの作成

編集画面の右上のアイコン → 「ENABLE」をクリック

「CREATE NEW BACKEND」をクリック

名前と説明を記入して「CREATE」をクリック

「USE AS PROJECT BACKEND」をクリック

「PROJECT BACKEND」というオレンジの文字が表示されたら「DASHBOARD」をクリック

Parseのダッシュボードが開きました!

手順5:ログイン機能のフロー構築

ログイン画面

アカウント作成画面

ログイン後の画面(コンテンツは適当です笑)

アカウント作成が成功すると...

「User」or「Refresh」で情報が更新されると思います。追加されると、どんどん行が増えていきます。

データを削除したい時は...

  • 削除したいデータにチェックを入れて「Delete this row」
  • もしくは、「Delete all rows」で全てのデータ(行)を削除

サンプルデータ

Githubにアップしてあります。サンプルを使ってみる場合は、手順4のバックエンドをご自身で作成してください。
https://github.com/pentake/Noodl-login

おわりに

今回はちゃんと触れていませんが、UserノードでユーザーのIDを簡単に利用できます。
IDにデータを紐づけてModelやCollectionと連携すれば、ログイン中のユーザーによってデータの出し分けができるので、いい感じにWebアプリが構築できそうです!

Discussion