Zing ブログの私の記事からのクロスポスト。

Supabase は、オープンソースの Firebase の代替品です。提供するサービスはさまざまですが、この記事では、グリッドの単純なバックエンドとして機能する方法について詳しく説明します。

初期設定

グリッドの構成を開始する前に、Supabase 側で実行する必要がある手順がいくつかあります。

1. アカウントの作成

まず、接続する Supabase アカウントを作成する必要があります。このリンクを使用して Supabase にサインアップできます。アカウントが作成され、メールアドレスが確認されたら、次のステップに進みます。

2. 最初のプロジェクトを作成する

ダッシュボード ページに移動して、新しいプロジェクトを作成します。プロジェクト名とデータベースのパスワードを必ず書き留めてください。

3. プロジェクト情報をメモする

この時点で、プロジェクト URL と API キーが表示されます。後でコード内でこれらの両方を ZingGrid に渡す必要があるため、必ず安全なローカル ファイルに保存してください。

4. 最初のテーブルを作成する

サイドバーから「テーブルエディター」セクションをクリックします。ここから最初のテーブルを作成できます

最初のステップはテーブルに名前を付けることです。ここではdemoTableを使用します

次に列を編集できます。この例では 2 つの列を用意します。 1 つは名前用、もう 1 つは姓用です。

5. サンプルデータを追加する

6. セキュリティ設定を更新する

このデモでは、テーブルから簡単に読み書きできるように、行レベル セキュリティを一時的に無効にします。運用環境では、認証を使用して適切なロールを設定する必要があります。

⚠️ 注: この設定の変更はこのデモのみを目的としたものであり、運用を目的としたものではありません

Supabase アダプター - REST API

ZingGrid は、REST API 経由とクライアント スクリプト経由の両方の方法で Supabase と対話する方法をサポートしています。まず、REST API の使用について説明します。

以下の最初のデモ コードを使用して、次の部分を必ず置き換えてください:

• ***link*** - 先ほどメモしたプロジェクトの URL
• ***tableName*** - 作成したばかりの Supabase テーブルの名前
• ***apiKey*** - 前に書き留めた Supabase API キー

ブラウザでそのページを表示すると、入力した初期データが表示され始めるはずです。

SupabaseJS アダプター - クライアント スクリプト

アプリが Supabase JavaScript クライアント ライブラリ (ドキュメント サイトで詳細を読むことができます) を使用している場合、マークアップの外側に Supabase 認証情報を保存できるため、より柔軟になります。

前の例を修正して、最初に Superbase クライアント オブジェクトを作成します (詳細についてはドキュメントを参照してください)

const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

そしてそのクライアントを ZingGrid に登録します

ZingGrid.registerClient(supabaseClient);

最後に、zg-data のアダプター属性を supabaseJS に設定すると、次のようになります。

以前と同じように動作します