Konnektoren

Supabase verbinden

Mit Supabase können Sie ganz einfach ein Backend für Ihre Websites konfigurieren – ganz ohne Entwicklungserfahrung.

Überblick

Supabase ist eine Open-Source-Backend-Plattform, mit der Benutzer Daten speichern und backendähnliche Funktionen bereitstellen können. Sie können sich mit Supabase verbinden, um das Problem zu lösen, dass Ihr Atoms-Team nur im Speicher des Browsers speichert, der beim Aktualisieren oder Schließen verloren gehen kann. Durch die Integration von Atoms mit Supabase können Sie Ihre Website in eine voll funktionsfähige Anwendung mit persistentem Speicher und erweiterten Funktionen verwandeln.

Weitere Anweisungen finden Sie hier:

Hauptvorteile

Neben der Tatsache, dass keine Entwicklungserfahrung erforderlich ist, gibt es noch drei weitere Hauptvorteile:

Schnelle Einrichtung: Bringen Sie Ihr Backend schnell zum Laufen und beschleunigen Sie Ihren Entwicklungsprozess.
Hoch skalierbar: Passen Sie sich dem Nutzerwachstum an, sodass Ihr Projekt ohne Einschränkungen erweitert werden kann.
Kosteneffizient: Bietet eine kostenlose Stufe, die ideal für kleine Projekte und Start-ups ist.

Supabase mit Atoms verbinden

Hier ist eine kurze Anleitung, um Atoms mit Supabase zu verbinden.

Starten Sie die Supabase-Integration in Atoms
- Öffnen Sie Einstellungen.
- Wählen Sie Connectors in der linken Seitenleiste aus.
- Suchen Sie den Supabase-Connector und klicken Sie auf Verbinden.
- Atoms zeigt Ihnen eine Oberfläche zur Verbindungseinrichtung an, der Sie folgen können.
Authentifizieren und Ihr Projekt konfigurieren

Ein Pop-up wird angezeigt und fordert Sie auf, sich bei Ihrem Supabase-Konto anzumelden.
- Wählen Sie Ihre Organisation aus dem Dropdown-Menü aus.
- Klicken Sie auf Atoms autorisieren, um Ihr Supabase-Konto zu autorisieren. (Die Verbindung wird in wenigen Sekunden abgeschlossen – keine manuelle Konfiguration erforderlich)
- Nach der Autorisierung können Sie:
  - ein vorhandenes Supabase-Projekt aus der Liste auswählen oder
  - auf +Neues hinzufügen klicken, um sofort eine neue Organisation hinzuzufügen. (Wenn Sie Unterstützung benötigen, steht Ihnen der Atoms Assistant zur Verfügung, um Sie beim Verbinden von Supabase mit Atoms zu begleiten.)
Automatische Konfiguration
- Sobald Ihr Projekt ausgewählt ist, verbindet sich Atoms automatisch mit Ihrem Supabase-Projekt. Es erfasst Ihre Datenbankstruktur, Tabellen und Sicherheitseinstellungen.
- Wenn Sie die Benachrichtigung "Supabase verbunden" sehen, ist Ihr Backend vollständig konfiguriert und einsatzbereit.

Benutzerauthentifizierung

Nachdem Sie Ihre App in Atoms erstellt haben, möchten Sie möglicherweise die Benutzerauthentifizierung implementieren. Supabase Auth vereinfacht das Hinzufügen von Authentifizierung und Autorisierung zu Ihrer App. In diesem Prozess führt Atoms Sie durch zwei Methoden: (1) E-Mail und Passwort und (2) Social Logins (Google).

E-Mail und Passwort

Supabase mit Atoms verbinden
- Stellen Sie sicher, dass Sie über ein gültiges Supabase-Konto verfügen.
- Klicken Sie auf die Autorisierungsschaltfläche in der oberen rechten Ecke der Chat-Oberfläche, um Ihr Supabase-Konto zu autorisieren.
- Wählen Sie das Supabase-Projekt aus, das Sie verwenden möchten.
Teilen Sie den Agents Ihre Anforderungen mit
- Geben Sie Ihre Anforderungen im Chat ein. Sie können zum Beispiel einfach den Prompt eingeben: "Add authentication".
- Dadurch wird in der Regel eine grundlegende Anmelde- und Registrierungsseite erzeugt, die mit dem Authentifizierungssystem von Supabase verbunden ist.
Benutzer zum Testen erstellen
- Verwenden Sie die neu hinzugefügte Anmelde-/Registrierungsoberfläche, um einen Testbenutzer zu erstellen.
- Aktualisieren Sie die Seite, um zu überprüfen, dass die Benutzersitzung bestehen bleibt.
- Alternativ können Sie zu Ihrem Supabase-Dashboard gehen, zu Authentication > Users navigieren und manuell einen Benutzer zum Testen hinzufügen.
Stellen Sie Ihre App bereit

Google OAuth im Supabase-Projekt konfigurieren
- Navigieren Sie zur Seite Authentication in Ihrem Supabase-Dashboard.
- Gehen Sie zur Unterseite Sign In/Up.
- Suchen Sie die Google-Option und aktivieren Sie den Schalter. (Detaillierte Schritte zur Supabase-Konfiguration finden Sie unter Configuring Google OAuth in Supabase oder in den Supabase Docs.)
Teilen Sie den Agents Ihre Anforderungen mit
- Geben Sie Ihre Anforderungen im Chat ein. Zum Beispiel: "Add Google authentication".
- Dadurch wird Ihrer Anmeldeseite eine Schaltfläche „Continue with Google“ hinzugefügt.
Google-Authentifizierung testen
- Gehen Sie zur Anmeldeseite.
- Klicken Sie auf die Schaltfläche „Continue with Google“.
- Melden Sie sich mit einem Google-Konto an und überprüfen Sie, ob das Benutzerprofil korrekt aktualisiert wird.
- Schließen Sie den Google-OAuth-Ablauf ab, um sicherzustellen, dass der Benutzer zurück zu Ihrer App weitergeleitet wird.
Stellen Sie Ihre App in Atoms App-Welt bereit

Google OAuth in Supabase konfigurieren

Ein Google Cloud-Projekt erstellen
- Auf die Google Cloud Console zugreifen
  - Öffnen Sie die Google Cloud Console und melden Sie sich bei Ihrem Google-Konto an.
- Ein neues Projekt erstellen
  - Klicken Sie oben auf das Dropdown-Menü und wählen Sie New Project. aus.
  - Geben Sie einen Projektnamen ein, wählen Sie ein Abrechnungskonto aus und klicken Sie auf Create.
Google OAuth-Anmeldedaten konfigurieren
- Den Zustimmungsbildschirm einrichten
  - Geben Sie in der Suchleiste OAuth ein und öffnen Sie den OAuth consent screen.
  - Füllen Sie den Namen Ihrer App, die Support-E-Mail für Benutzer und andere erforderliche Felder aus.
  - Wählen Sie External oder Internal aus und klicken Sie dann auf Create.
- Eine OAuth-Client-ID erstellen
  - Klicken Sie auf Create OAuth Client und wählen Sie dann OAuth Client ID aus.
  - Wählen Sie bei Application Type die Option Web application.
  - Fügen Sie unter Authorized redirect URIs die Callback-URL aus dem Supabase-Dashboard hinzu.
  - Klicken Sie auf Create und notieren Sie sich die generierte Client ID und das Client Secret.
Google OAuth in Supabase konfigurieren
- Melden Sie sich beim Supabase-Dashboard an
  - Öffnen Sie das Supabase Dashboard und melden Sie sich bei Ihrem Projekt an.
- Google OAuth aktivieren
  - Navigieren Sie zur Seite Authentication.
  - Suchen Sie im Abschnitt Providers die Option Google und aktivieren Sie sie.
  - Fügen Sie die zuvor generierte Client ID und das Client Secret in die entsprechenden Felder ein.
- Konfiguration speichern
  - Klicken Sie auf Save, um die Änderungen anzuwenden.

Datenspeicherung

Möglicherweise möchten Sie auch Benutzerdaten speichern, nachdem Sie die Benutzerauthentifizierung für Ihre Web-/App konfiguriert haben.

Sobald die Verbindung zu Supabase hergestellt ist, teilen Sie Atoms einfach mit, welche Daten Sie in der Datenbank speichern möchten. Die Agents konfigurieren automatisch Datenbanktabellen und integrieren sie direkt in Ihre UI.

Definieren Sie Ihre Anforderungen
- Geben Sie Ihre Anforderungen im Chat ein. Zum Beispiel: "Please ensure that new trip records are saved to the database".
- Beschreiben Sie die Daten, die Sie speichern möchten, so klar wie möglich.
- Atoms konfiguriert automatisch die erforderliche Datenbankstruktur auf Grundlage Ihrer Eingaben.
Testen Sie die Funktionalität in Atoms
- Erstellen Sie Beispieldaten in Ihrer App, zum Beispiel indem Sie über die UI einige „trip records“ hinzufügen.
- Speichern Sie die Daten und aktualisieren Sie die Seite. Die Daten werden mit der Supabase-Datenbank synchronisiert.
- Melden Sie sich bei Supabase an und überprüfen Sie, ob die neu hinzugefügten Daten in der Datenbank vorhanden sind.
Überprüfen Sie die Datensynchronisierung zwischen Atoms und Supabase
- Öffnen Sie das Supabase-Dashboard und navigieren Sie zum Table Editor.
- Ändern Sie vorhandene Daten oder erstellen Sie neue Daten.
- Änderungen, die in Supabase vorgenommen werden, werden in Echtzeit mit Ihrer Atoms-App synchronisiert.
- Kehren Sie zu Atoms zurück und überprüfen Sie, ob die geänderten oder neu erstellten Daten korrekt angezeigt werden.
- Wenn die Daten erfolgreich synchronisiert werden, ist Ihre Konfiguration abgeschlossen.
Stellen Sie Ihre App bereit

Edge Functions

Supabase Edge Functions sind serverlose Backend-Programme, die auf Serverknoten in der Nähe Ihrer Benutzer bereitgestellt werden. Sie machen den Aufbau und die Wartung traditioneller Server überflüssig und ermöglichen es Ihnen, beliebige benutzerdefinierte Logik mit geringerer Netzwerklatenz und schnelleren Antwortzeiten auszuführen. In den meisten Webanwendungen übernimmt das Frontend (Schaltflächen, Formulare, UI) grundlegende Interaktionen, aber einige kritische Vorgänge müssen im Backend ausgeführt werden, zum Beispiel:

automatisches Senden einer Willkommens-E-Mail nach der Benutzerregistrierung;
Aufrufen von KI-APIs, um Inhalte bei der Formularübermittlung zu analysieren oder zu bewerten;
Integration von Zahlungs-Gateways von Drittanbietern und Erfassung von Bestelldetails während des Bezahlvorgangs.

All diese Vorgänge werden über Edge Functions implementiert.

Anwendungsfälle

Mit Supabase Edge Functions in Atoms können Sie:

Willkommens-E-Mails senden: Senden Sie neuen Benutzern nach der Registrierung automatisch eine Willkommensnachricht mit Hinweisen zu den nächsten Schritten und verbessern Sie so das Engagement und das Onboarding-Erlebnis.
Benutzerformularübermittlungen verarbeiten: Erzeugen und senden Sie nach der Übermittlung von Feedback, Anmeldungen oder Kommentaren automatisch eine Bestätigungsbenachrichtigung (z. B. "We've received your feedback and will review it shortly"), damit Benutzer wissen, dass ihre Aktion erfolgreich war.
Erinnerungen planen: Legen Sie tägliche oder wöchentliche Benachrichtigungen per E-Mail oder Push fest (für Meetings, Aufgaben oder Ereignisse), um Benutzern beim Zeitmanagement zu helfen und ihre Produktivität zu steigern.
KI-Dienste nutzen: Nachdem der Benutzer Text eingegeben hat, rufen Sie automatisch KI-APIs wie OpenAI für Grammatikprüfungen oder intelligentes Umschreiben auf und geben die optimierten Ergebnisse an den Benutzer zurück.
Online-Zahlungen verarbeiten: Wenn Benutzer eine Zahlung auf Ihrer E-Commerce- oder Serviceplattform initiieren, integrieren Sie Gateways wie Stripe, um Transaktionen sicher abzuwickeln und klare Erfolgs- oder Fehlerseiten mit Bestelldetails anzuzeigen.

Schlüssel-Speicherung und -Verwaltung

Viele Anwendungen benötigen Schlüssel oder API-Anmeldedaten, um sich mit Drittanbieterdiensten zu verbinden (z. B. Stripe, OpenAI). Wenn Supabase verbunden ist, bietet Atoms eine sichere Möglichkeit, diese Geheimnisse zu verwalten und zu verwenden. Durch die Integration von Atoms mit Supabase erkennt Atoms automatisch, wann eine Funktion ein Geheimnis benötigt, und fordert Sie auf, den erforderlichen Wert einzugeben. Sie klicken einfach auf die Schaltfläche „Add API Key“ des Agent und geben Ihren Schlüssel ein; Atoms verschlüsselt ihn dann und speichert ihn im Secrets Manager der Edge Functions von Supabase. Zur Laufzeit werden diese Schlüssel sicher in die Funktion eingefügt, sodass Anmeldedaten nicht im Klartext gespeichert werden.

Backend-Funktionen hinzufügen und bereitstellen

Nachdem die Verbindung zu Supabase hergestellt wurde, teilen Sie dem Agent mit, was Sie benötigen:

Geben Sie Ihre Anfrage im Chat ein. Zum Beispiel: "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."
Sobald der Agent den Code generiert hat, erscheinen zwei Schaltflächen: Add API Key und View in Edge Function.
Klicken Sie auf Add API Key.
Geben Sie Ihren API-Schlüssel ein und klicken Sie auf Send.
Klicken Sie auf View in Edge Function.
Sie werden zur Seite der Supabase Edge Function weitergeleitet.

Sicherheitshinweis: Alle Schlüssel werden verschlüsselt und in Supabase gespeichert; Atoms kann nicht darauf zugreifen.

FAQs

Wie füge ich meiner Anwendung Supabase-Backend-Funktionen hinzu?

Integrieren Sie Supabase in drei einfachen Schritten in Ihre Anwendung:

Klicken Sie auf die Autorisierungsschaltfläche in der oberen rechten Ecke der Chat-Oberfläche, um Ihr Supabase-Konto zu autorisieren.
Wählen Sie das Supabase-Projekt aus, das Sie verwenden möchten, und verknüpfen Sie es.
Teilen Sie Ihre Anforderungen im Chat mit, und die Agents entwickeln Funktionen auf Grundlage Ihres verbundenen Supabase-Projekts.

Unterstützt Supabase Social Logins?

Supabase unterstützt verschiedene Authentifizierungsmethoden, darunter:

E-Mail und Passwort.
Passwortlose Authentifizierung: Optionen wie Einmalpasswörter (OTP) oder Magic Links.
Social Logins: Unterstützung für Drittanbieter wie Google, Twitter und GitHub.
Telefonauthentifizierung.
Single Sign-On (SSO): Unterstützung für SAML SSO.
Anonyme Anmeldung: Ermöglicht es Benutzern, sich anonym anzumelden.

Muss ich für meine App ein separates Supabase-Projekt erstellen?

Sie können entweder ein vorhandenes Supabase-Projekt auswählen oder ein neues erstellen. Jeder Chat kann jeweils nur mit einem Projekt verbunden sein.

Bleibt die Verbindung nach dem Verbinden mit Supabase erhalten, wenn ich mein Projekt remixe?

Die Verbindung wird nach dem Remixen getrennt und muss erneut hergestellt werden. Wenn außerdem eine App in der App-Welt, die von anderen Benutzern geteilt wurde, mit Supabase verbunden ist, können andere Benutzer sie nicht remixen.

Kann ich eine Supabase-Datenbank für mehrere Atoms-Projekte verwenden?

Ja, Sie können eine Supabase-Datenbank für mehrere Atoms-Projekte verwenden. Allerdings müssen Sie die Verbindungen und Konfigurationen sorgfältig verwalten.

Warum wird mein Projekt unter den Supabase-Organisationen nicht angezeigt?

Im kostenlosen Supabase-Plan wird jedes Projekt ohne Aktivität für sieben aufeinanderfolgende Tage automatisch pausiert. Wechseln Sie in der Organisationsliste von Atoms zum Filter Inactive, um Ihre pausierten Projekte anzuzeigen.

Warum sehe ich beim Versuch, Supabase zu verbinden, \

Supabase erzwingt eine Eins-zu-eins-OAuth-Bindung zwischen jeder Organisation und einem Atoms-Konto. Wenn die Organisation „Test“ bereits von einem anderen Atoms-Benutzer autorisiert wurde, wird jeder nachfolgende Versuch, sie mit einem anderen Konto zu verbinden, mit diesem Fehler abgelehnt. Um das Problem zu beheben, öffnen Sie in der Seitenleiste des Supabase Dashboard unter Settings → API → OAuth Apps den vorhandenen Atoms-OAuth-Grant für diese Organisation und löschen Sie ihn. Kehren Sie anschließend zu Atoms zurück und verbinden Sie sich erneut mit Ihrem eigenen Konto.

War diese Seite hilfreich?