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

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

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

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

5. Fügen Sie einige Beispieldaten hinzu

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

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

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

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

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

und dann diesen Client bei ZingGrid registrieren

ZingGrid.registerClient(supabaseClient);

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

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

Funktioniert wie zuvor

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!