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

Supabase ist eine Open-Source-Firebase-Alternative. Sie bieten eine Vielzahl von Diensten an, aber für die Zwecke dieses Artikels 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

Wir müssen zuerst 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 Datenbankkennwort.

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, stellen Sie also 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, sie 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 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

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

Funktioniert wie zuvor