ZingGrid を Supabase に接続: 数分でバックエンドを追加

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 キー

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="/lib/zinggrid.js"></script>
  <title>Supabase</title>


  <zing-grid page-size="5" sort pager title="Supabase" editor-controls editor-disabled-fields="id" src="https://***link***.supabase.co/rest/v1/***tableName***">
    <zg-data adapter="supabase">
      <zg-param name="headers" value='
          {
            "Authorization": "Bearer ***apiKey***",
            "apikey": "***apiKey***"
          }'></zg-param>
    </zg-data>
  </zing-grid>

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

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 に設定すると、次のようになります。

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Supabase</title>
  <!-- ZingGrid -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <!-- Supabase Client Library -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>


  <script>
    const supabaseUrl = 'https://***link***.supabase.co/';
    const supabaseKey = '***apiKey***';
    const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
    ZingGrid.registerClient(supabaseClient);
  </script>
  <zing-grid page-size="5" sort pager title="SupabaseJS" editor-controls editor-disabled-fields="id">
    <zg-data adapter="supabaseJS">
      <zg-param name="dataTable" value="***tableName***"></zg-param>
    </zg-data>
  </zing-grid>

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

以上がZingGrid を Supabase に接続: 数分でバックエンドを追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。