ZingGrid mit Supabase verbinden: Fügen Sie in wenigen Minuten ein Backend hinzu-js-Tutorial-php.cn

ZingGrid mit Supabase verbinden: Fügen Sie in wenigen Minuten ein Backend hinzu

DDD

Freigeben： 2024-09-13 08:15:36

Original

1076 Leute haben es durchsucht

Cross-Beitrag aus meinem Artikel auf dem Zing-Blog.

Supabase ist eine Open-Source-Firebase-Alternative. Sie bieten eine Vielzahl von Diensten an, aber in diesem Artikel werden wir näher darauf eingehen, wie es als einfaches Backend für unsere Grids fungieren kann.

Ersteinrichtung

Es gibt ein paar Schritte, die wir auf der Supabase-Seite durchlaufen müssen, bevor wir mit der Konfiguration unserer Raster beginnen können.

1. Kontoerstellung

Zuerst müssen wir das Supabase-Konto erstellen, mit dem wir eine Verbindung herstellen möchten. Über diesen Link können Sie sich bei Supabase anmelden. Sobald Ihr Konto erstellt und per E-Mail bestätigt wurde, fahren Sie mit dem nächsten Schritt fort.

2. Erstellen Sie Ihr erstes Projekt

Gehen Sie zur Dashboard-Seite und erstellen Sie ein neues Projekt. Notieren Sie sich unbedingt den Projektnamen und das Datenbankpasswort.

3. Notieren Sie sich die Projektinformationen

An diesem Punkt sollten Sie Ihre Projekt-URL und Ihren API-Schlüssel sehen. Wir müssen beides später in unserem Code an ZingGrid übergeben, also stellen Sie sicher, dass Sie sie in einer sicheren lokalen Datei speichern.

4. Erstellen Sie Ihre erste Tabelle

Klicken Sie in der Seitenleiste auf den Abschnitt Tabelleneditor. Von hier aus können wir unsere erste Tabelle erstellen

Connecting ZingGrid to Supabase: Add a Backend in Minutes

Der erste Schritt besteht darin, unserer Tabelle einen Namen zu geben, hier verwende ich demoTable

Connecting ZingGrid to Supabase: Add a Backend in Minutes

Dann können wir die Spalten bearbeiten. Für dieses Beispiel habe ich zwei Spalten. Eine für Vornamen und eine für Nachnamen.

Connecting ZingGrid to Supabase: Add a Backend in Minutes

5. Fügen Sie einige Beispieldaten hinzu

Connecting ZingGrid to Supabase: Add a Backend in Minutes

6. Aktualisieren Sie die Sicherheitseinstellungen

Wir werden die Sicherheit auf Zeilenebene vorübergehend deaktivieren, damit wir für diese Demo problemlos aus unserer Tabelle lesen und schreiben können. In der Produktion möchten wir die richtigen Rollen mit Authentifizierung einrichten.

⚠️ HINWEIS: Diese Einstellungsänderung dient nur dem Zweck dieser Demo und ist nicht für die Produktion gedacht

Connecting ZingGrid to Supabase: Add a Backend in Minutes

Supabase-Adapter – REST-API

ZingGrid unterstützt beide Arten der Interaktion mit Supabase – über die REST-API und über das Client-Skript. Wir gehen zunächst auf die Verwendung der REST-API ein.

Stellen Sie sicher, dass Sie Folgendes ersetzen, indem Sie den anfänglichen Democode unten verwenden:

***Link*** – Die Projekt-URL, die Sie sich zuvor notiert haben
***tableName*** – Der Name der Supabase-Tabelle, die Sie gerade erstellt haben
***apiKey*** – Der Supabase-API-Schlüssel, den Sie zuvor notiert haben

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

Nach dem Login kopieren

Wenn Sie diese Seite im Browser anzeigen, sollten Sie die anfänglichen Daten sehen, die wir eingegeben haben!

Connecting ZingGrid to Supabase: Add a Backend in Minutes

SupabaseJS-Adapter – Client-Skript

Wenn Ihre App zufällig die Supabase-JavaScript-Client-Bibliothek verwendet (über die Sie auf der Dokumentationsseite mehr erfahren können), können Sie Ihre Supabase-Anmeldeinformationen außerhalb Ihres Markups speichern, was die Flexibilität erheblich erhöht.

Als Ergänzung zum vorherigen Beispiel erstellen wir zunächst ein Superbase-Clientobjekt (mehr dazu in ihren Dokumenten)

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

Nach dem Login kopieren

und dann diesen Client bei ZingGrid registrieren

ZingGrid.registerClient(supabaseClient);

Nach dem Login kopieren

Schließlich setzen wir das Adapterattribut für zg-data auf supabaseJS und wir haben Folgendes:

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

Nach dem Login kopieren

Funktioniert wie zuvor

Connecting ZingGrid to Supabase: Add a Backend in Minutes

Das obige ist der detaillierte Inhalt vonZingGrid mit Supabase verbinden: Fügen Sie in wenigen Minuten ein Backend hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!