Supabase Verbinden

Overzicht

Supabase is een open-source backendplatform waarmee gebruikers gegevens kunnen opslaan en backend-achtige functionaliteit kunnen bieden. Je kunt verbinding maken met Supabase om het probleem op te lossen dat je Atoms-team alleen opslaat in het geheugen van de browser, wat verloren kan gaan bij verversen of sluiten. Door Atoms te integreren met Supabase kun je je website omvormen tot een volledig functionele applicatie met persistente opslag en geavanceerde functies.

Bekijk hier meer instructies:

Belangrijkste voordelen

Naast dat er geen ontwikkelingservaring nodig is, heeft het nog drie andere belangrijke voordelen:

1. Snelle installatie: Zet je backend op en versnel je ontwikkelingsproces.
2. Zeer schaalbaar: Pas je aan gebruikersgroei aan, zodat je project zonder beperkingen kan uitbreiden.
3. Kosteneffectief: Biedt een gratis niveau dat ideaal is voor kleine projecten en startups.

Supabase verbinden met Atoms

Hier is een korte handleiding om Atoms met Supabase te verbinden.

1. Start de Supabase Integratie in Atoms

   • Open Instellingen.

   • Selecteer Connectors in de linkerzijbalk.

   • Zoek de Supabase-connector en klik op Verbinden.

     

   • Atoms toont een interface voor het instellen van de verbinding die je kunt volgen.

2. Authenticeer en configureer je project

   Er verschijnt een pop-up waarin je wordt gevraagd je aan te melden bij je Supabase-account.

   • Selecteer je organisatie in het dropdownmenu.

   • Klik op Authorize Atoms om je Supabase-account te autoriseren. (De verbinding is binnen enkele seconden voltooid – geen handmatige configuratie nodig)

   • Zodra dit is geautoriseerd, kun je:

     • Een bestaand Supabase-project uit de lijst kiezen, of
     • Klikken op +Add New One om direct een nieuwe organisatie toe te voegen. (Als je begeleiding nodig hebt, is de Atoms Assistant beschikbaar om je stap voor stap te helpen bij het verbinden van Supabase met Atoms.)

3. Automatische configuratie

   • Zodra je project is geselecteerd, maakt Atoms automatisch verbinding met je Supabase-project. Het verzamelt je databasestructuur, tabellen en beveiligingsinstellingen.
   • Wanneer je de melding "Supabase Verbindened" ziet, is je backend volledig geconfigureerd en klaar voor gebruik.

Gebruikersauthenticatie

Nadat je je app in Atoms hebt gemaakt, wil je mogelijk gebruikersauthenticatie implementeren. Supabase Auth vereenvoudigt het toevoegen van authenticatie en autorisatie aan je app. In dit proces begeleidt Atoms je door twee methoden: (1) E-mail en wachtwoord en (2) Social Logins (Google).

E-mail en wachtwoord

1. Verbind Supabase met Atoms

   • Zorg ervoor dat je een geldig Supabase-account hebt.
   • Klik op de autorisatieknop in de rechterbovenhoek van de chatinterface om je Supabase-account te autoriseren.
   • Selecteer het Supabase-project dat je wilt gebruiken.

2. Vertel de Agents je vereisten

   • Voer je vereisten in in de chat. Je kunt bijvoorbeeld simpelweg de prompt invoeren: "Add authentication".
   • Dit genereert doorgaans een basispagina voor inloggen en registreren die is verbonden met het authenticatiesysteem van Supabase.

3. Maak gebruikers aan om te testen

   • Gebruik de nieuw toegevoegde interface voor inloggen/registreren om een testgebruiker aan te maken.
   • Vernieuw de pagina om te controleren of de gebruikerssessie behouden blijft.
   • Als alternatief ga je naar je Supabase-dashboard, navigeer je naar Authentication > Users, en voeg je handmatig een gebruiker toe om te testen.

4. Deploy je app

Social Logins (Google)

1. Configureer Google OAuth in het Supabase-project

   • Navigeer naar de Authentication-pagina in je Supabase-dashboard.
   • Ga naar de subpagina Sign In/Up.
   • Zoek de Google-optie en zet de schakelaar aan om deze in te schakelen. (Voor gedetailleerde configuratiestappen voor Supabase, raadpleeg Configuring Google OAuth in Supabase of Supabase Docs.)

2. Vertel de Agents je vereisten

   • Voer je vereisten in in de chat. Bijvoorbeeld: "Add Google authentication".
   • Dit voegt een knop Continue with Google toe aan je inlogpagina.

3. Test Google-authenticatie

   • Ga naar de inlogpagina.
   • Klik op de knop Continue with Google.
   • Log in met een Google-account en controleer of het gebruikersprofiel correct wordt bijgewerkt.
   • Voltooi de Google OAuth-flow om ervoor te zorgen dat de gebruiker wordt teruggeleid naar je app.

4. Deploy je app naar Atoms's App World

Google OAuth configureren in Supabase

1. Maak een Google Cloud-project aan

   • Open de Google Cloud Console

     • Open de Google Cloud Console en log in op je Google-account.

   • Maak een nieuw project aan

     • Klik op het dropdownmenu bovenaan en selecteer New Project.
     • Voer een projectnaam in, selecteer een factureringsaccount en klik op Create.

2. Google OAuth-inloggegevens configureren

   • Stel het toestemmingsscherm in

     • Typ in de zoekbalk OAuth en open het OAuth-toestemmingsscherm.
     • Vul de naam van je app, het e-mailadres voor gebruikersondersteuning en andere vereiste velden in.
     • Selecteer Extern of Intern en klik vervolgens op Create.

   • Maak een OAuth Client ID aan

     • Klik op Create OAuth Client en selecteer vervolgens OAuth Client ID.
     • Kies bij Application Type voor Web application.
     • Voeg bij Authorized redirect URIs de callback-URL uit het Supabase-dashboard toe.
     • Klik op Create en noteer de gegenereerde Client ID en Client Secret.

3. Google OAuth configureren in Supabase

   • Log in op het Supabase Dashboard

     • Open het Supabase Dashboard en log in op je project.

   • Schakel Google OAuth in

     • Navigeer naar de pagina Authentication.
     • Zoek in de sectie Providers de optie Google en schakel deze in.
     • Voeg de eerder gegenereerde Client ID en Client Secret toe aan de respectieve velden.

   • Configuratie opslaan

     • Klik op Save om de wijzigingen toe te passen.

Gegevensopslag

Mogelijk wil je ook gebruikersgegevens opslaan nadat je gebruikersauthenticatie voor je web/app hebt geconfigureerd.

Zodra je verbonden bent met Supabase, vertel je Atoms simpelweg welke gegevens je in de database wilt opslaan. De agents configureren automatisch databasetabellen en integreren deze direct in je UI.

1. Definieer je vereisten

   • Voer je vereisten in in de chat. Bijvoorbeeld: "Please ensure that new trip records are saved to the database".
   • Beschrijf de gegevens die je wilt opslaan zo duidelijk mogelijk.
   • Atoms configureert automatisch de vereiste databasestructuur op basis van je invoer.

2. Test de functionaliteit in Atoms

   • Maak voorbeeldgegevens aan in je app, zoals het toevoegen van een paar "trip records" via de UI.
   • Sla de gegevens op en vernieuw de pagina. De gegevens worden gesynchroniseerd met de Supabase-database.
   • Log in op Supabase en controleer of de nieuw toegevoegde gegevens in de database bestaan.

3. Valideer gegevenssynchronisatie tussen Atoms en Supabase

   • Open het Supabase-dashboard en navigeer naar de Table Editor.
   • Wijzig bestaande gegevens of maak nieuwe gegevens aan.
   • Wijzigingen die in Supabase worden aangebracht, worden in realtime gesynchroniseerd met je Atoms-app.
   • Ga terug naar Atoms en controleer of de gewijzigde of nieuw aangemaakte gegevens correct worden weergegeven.
   • Als de gegevens succesvol synchroniseren, is je configuratie voltooid.

4. Deploy je app

Edge Functions

Supabase Edge Functions zijn serverloze backendprogramma's die worden gedeployed op servernodes dicht bij je gebruikers. Ze maken het bouwen en onderhouden van traditionele servers overbodig, waardoor je aangepaste logica kunt uitvoeren met lagere netwerklatentie en snellere responstijden. In de meeste webapplicaties verwerkt de frontend (knoppen, formulieren, UI) basisinteracties, maar sommige kritieke bewerkingen moeten op de backend draaien, zoals:

• Automatisch een welkomstmail sturen na gebruikersregistratie;
• AI API's aanroepen om content te analyseren of te beoordelen bij het indienen van een formulier;
• Betaalgateways van derden integreren en bestelgegevens vastleggen tijdens het afrekenen.

Al deze bewerkingen worden geïmplementeerd via Edge Functions.

Toepassingsgevallen

Met Supabase Edge Functions in Atoms kun je:

• Welkomstmails versturen: Nieuwe gebruikers automatisch een welkomstbericht met richtlijnen voor de volgende stappen e-mailen nadat ze zich hebben geregistreerd, wat de betrokkenheid en onboardingervaring verbetert.
• Inzendingen van gebruikersformulieren afhandelen: Na het indienen van feedback, aanmelding of opmerkingen automatisch een bevestigingsmelding genereren en verzenden (bijv. "We've received your feedback and will review it shortly"), zodat gebruikers weten dat hun actie is gelukt.
• Herinneringen plannen: Dagelijkse of wekelijkse meldingen via e-mail of push instellen (voor vergaderingen, taken of evenementen) om gebruikers te helpen hun tijd te beheren en productief te blijven.
• AI-diensten benutten: Nadat de gebruiker tekst invoert, automatisch AI API's zoals OpenAI aanroepen voor grammaticacontrole of intelligente herformulering, en de geoptimaliseerde resultaten teruggeven aan de gebruiker.
• Online betalingen verwerken: Wanneer gebruikers een betaling starten op je e-commerce- of serviceplatform, integreren met gateways zoals Stripe om transacties veilig af te handelen en duidelijke pagina's met succes- of foutmeldingen en bestelgegevens weer te geven.

Opslag en beheer van sleutels

Veel applicaties vereisen sleutels of API-referenties om verbinding te maken met services van derden (bijv. Stripe, OpenAI). Wanneer Supabase is verbonden, biedt Atoms een veilige manier om deze geheimen te beheren en te gebruiken. Via Atoms's integratie met Supabase detecteert Atoms automatisch wanneer een functie een geheim nodig heeft en vraagt het je om de vereiste waarde in te voeren. Je klikt simpelweg op de knop "Add API Key" van de Agent en voert je sleutel in; Atoms versleutelt deze vervolgens en slaat deze op in Supabase's Edge Functions Secrets Manager. Tijdens runtime worden deze sleutels veilig in de functie geïnjecteerd, waardoor wordt voorkomen dat referenties in platte tekst worden opgeslagen.

Backendfuncties toevoegen en deployen

Nadat je verbinding hebt gemaakt met Supabase, vertel je de Agent wat je nodig hebt:

• Typ je verzoek in de chat. Bijvoorbeeld: "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."

• Zodra de Agent de code heeft gegenereerd, verschijnen er twee knoppen: Add API Key en View in Edge Function.

• Klik op Add API Key.

• Voer je API-sleutel in en klik op Send.

• Klik op View in Edge Function.

• Je wordt doorgestuurd naar de pagina Supabase Edge Function.

  Beveiligingsopmerking: Alle sleutels worden versleuteld en opgeslagen in Supabase; Atoms heeft er geen toegang toe.

Veelgestelde vragen

Hoe voeg ik Supabase-backendfuncties toe aan mijn applicatie?

Integreer Supabase in je applicatie in drie eenvoudige stappen:

• Klik op de autorisatieknop in de rechterbovenhoek van de chatinterface om je Supabase-account te autoriseren.
• Selecteer en koppel het Supabase-project dat je wilt gebruiken.
• Deel je vereisten in de chat, en de agents ontwikkelen functies op basis van je verbonden Supabase-project.

Ondersteunt Supabase social logins?

Supabase ondersteunt verschillende authenticatiemethoden, waaronder:

• E-mail en wachtwoord.
• Wachtwoordloze authenticatie: Opties zoals eenmalige wachtwoorden (OTP) of magic links.
• Social Logins: Ondersteuning voor externe providers zoals Google, Twitter en GitHub.
• Telefoonauthenticatie.
• Single Sign-On (SSO): Ondersteuning voor SAML SSO.
• Anoniem inloggen: Hiermee kunnen gebruikers anoniem inloggen.

Moet ik een apart Supabase-project maken voor mijn app?

Je kunt een bestaand Supabase-project selecteren of een nieuw project maken. Elke chat kan slechts met één project tegelijk verbinden.

Blijft de verbinding behouden als ik mijn project remix?

De verbinding wordt verbroken na het remixen en moet opnieuw tot stand worden gebracht. Daarnaast geldt dat als een app in de App World die door andere gebruikers is gedeeld verbonden is met Supabase, andere gebruikers deze niet kunnen remixen.

Kan ik één Supabase-database gebruiken voor meerdere Atoms-projecten?

Ja, je kunt één Supabase-database gebruiken voor meerdere Atoms-projecten. Je moet de verbindingen en configuraties echter zorgvuldig beheren.

Waarom wordt mijn project niet weergegeven onder Supabase-organisaties?

Bij het gratis Supabase-plan wordt elk project zonder activiteit gedurende zeven opeenvolgende dagen automatisch gepauzeerd. Schakel in de lijst Atoms Organizations over naar het filter Inactive om je projecten te bekijken die zijn gepauzeerd.

Waarom zie ik \

Supabase hanteert een één-op-één OAuth-koppeling tussen elke organisatie en een Atoms-account. Als de organisatie “Test” al door een andere Atoms-gebruiker is geautoriseerd, wordt elke volgende poging om deze met een ander account te koppelen afgewezen met deze fout. Om dit op te lossen open je in de zijbalk van het Supabase Dashboard onder Settings → API → OAuth Apps de bestaande Atoms OAuth-toestemming voor die organisatie en verwijder je deze. Ga daarna terug naar Atoms en maak opnieuw verbinding met je eigen account.