Zenn
🍜

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

2020/12/20に公開
Web
Database
noodl
lowcode
parse
tech

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

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

データベース連携

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

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

作成の手順

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

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

手順３：User Managementモジュールの読み込み

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

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

手順４：バックエンドの作成

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

「CREATE NEW BACKEND」をクリック

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

「USE AS PROJECT BACKEND」をクリック

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

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

手順５：ログイン機能のフロー構築

ログイン画面

アカウント作成画面

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

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

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

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

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

サンプルデータ

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

おわりに

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

Discussion