ZingGrid を Supabase に接続: 数分でバックエンドを追加-jsチュートリアル-php.cn

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

DDD

リリース： 2024-09-13 08:15:36

オリジナル

1046 人が閲覧しました

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

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

初期設定

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

1. アカウントの作成

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

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

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

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

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

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

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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

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

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

Supabase アダプター - REST API

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

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

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

<html lang="en">
<head>
  <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>
</head>
<body>
  <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>
</body>
</html>

ログイン後にコピー

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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

<html lang="en">
<head>
  <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>
</head>
<body>
  <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>
</body>
</html>

ログイン後にコピー

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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