Anslut Supabase

Översikt

Supabase är en backendplattform med öppen källkod som gör det möjligt för användare att lagra data och tillhandahålla backend-liknande funktionalitet. Du kan ansluta till Supabase för att lösa problemet med att ditt Atoms-team bara lagrar i webbläsarens minne, vilket kan gå förlorat vid uppdatering eller stängning. Genom att integrera Atoms med Supabase kan du omvandla din webbplats till en fullt fungerande applikation med beständig lagring och avancerade funktioner.

Se fler instruktioner här:

Viktiga fördelar

Utöver att ingen utvecklingserfarenhet krävs har det ytterligare tre viktiga fördelar:

1. Snabb installation: Få igång din backend och snabba upp din utvecklingsprocess.
2. Mycket skalbart: Anpassa dig till användartillväxt och låt ditt projekt växa utan begränsningar.
3. Kostnadseffektivt: Erbjuder en gratisnivå som är idealisk för små projekt och startups.

Ansluta Supabase till Atoms

Här är en kort guide för att ansluta Atoms till Supabase.

1. Starta Supabase-integrationen i Atoms

   • Öppna Inställningar.

   • Välj Connectors i den vänstra sidopanelen.

   • Hitta Supabase-anslutningen och klicka på Connect.

     

   • Atoms visar ett gränssnitt för anslutningsinställning som du kan följa.

2. Autentisera och konfigurera ditt projekt

   Ett popup-fönster visas och uppmanar dig att logga in på ditt Supabase-konto.

   • Välj din organisation i rullgardinsmenyn.

   • Klicka på Authorize Atoms för att auktorisera ditt Supabase-konto. (Anslutningen slutförs på några sekunder – ingen manuell konfiguration krävs)

   • När det är auktoriserat kan du:

     • Välja ett befintligt Supabase-projekt från listan, eller
     • Klicka på +Add New One för att lägga till en ny organisation direkt. (Om du behöver vägledning finns Atoms Assistant tillgänglig för att hjälpa dig att ansluta Supabase till Atoms.)

3. Automatisk konfiguration

   • När ditt projekt har valts ansluter Atoms automatiskt till ditt Supabase-projekt. Det hämtar din databasstruktur, tabeller och säkerhetsinställningar.
   • När du ser aviseringen "Supabase anslutet" är din backend helt konfigurerad och klar att använda.

Användarautentisering

När du har skapat din app i Atoms kanske du vill implementera användarautentisering. Supabase Auth gör det enkelt att lägga till autentisering och auktorisering i din app. I den här processen guidar Atoms dig genom två metoder: (1) E-post och lösenord och (2) Sociala inloggningar (Google).

E-post och lösenord

1. Anslut Supabase till Atoms

   • Se till att du har ett giltigt Supabase-konto.
   • Klicka på auktoriseringsknappen i det övre högra hörnet av chattgränssnittet för att auktorisera ditt Supabase-konto.
   • Välj det Supabase-projekt du vill använda.

2. Berätta för Agenterna om dina krav

   • Ange dina krav i chatten. Du kan till exempel helt enkelt skriva: "Lägg till autentisering".
   • Detta genererar vanligtvis en grundläggande inloggnings- och registreringssida som är ansluten till Supabases autentiseringssystem.

3. Skapa användare för testning

   • Använd det nyligen tillagda inloggnings-/registreringsgränssnittet för att skapa en testanvändare.
   • Uppdatera sidan för att verifiera att användarsessionen kvarstår.
   • Alternativt kan du gå till din Supabase-dashboard, navigera till Authentication > Users, och lägga till en användare manuellt för testning.

4. Distribuera din app

Sociala inloggningar (Google)

1. Konfigurera Google OAuth i Supabase-projektet

   • Gå till sidan Authentication i din Supabase-dashboard.
   • Gå till undersidan Sign In/Up.
   • Leta upp Google-alternativet och aktivera reglaget. (För detaljerade konfigurationssteg för Supabase, se Konfigurera Google OAuth i Supabase eller Supabase Docs.)

2. Berätta för Agenterna om dina krav

   • Ange dina krav i chatten. Till exempel: "Lägg till Google-autentisering".
   • Detta lägger till en Continue with Google-knapp på din inloggningssida.

3. Testa Google-autentisering

   • Gå till inloggningssidan.
   • Klicka på knappen Continue with Google.
   • Logga in med ett Google-konto och verifiera att användarprofilen uppdateras korrekt.
   • Slutför Google OAuth-flödet för att säkerställa att användaren omdirigeras tillbaka till din app.

4. Distribuera din app till Atoms's App World

Konfigurera Google OAuth i Supabase

1. Skapa ett Google Cloud-projekt

   • Öppna Google Cloud Console

     • Öppna Google Cloud Console och logga in på ditt Google-konto.

   • Skapa ett nytt projekt

     • Klicka på rullgardinsmenyn högst upp och välj New Project.
     • Ange ett projektnamn, välj ett faktureringskonto och klicka på Create.

2. Konfigurera Google OAuth-uppgifter

   • Ställ in samtyckesskärmen

     • Skriv OAuth i sökfältet och öppna OAuth consent screen.
     • Fyll i appens namn, användarsupportens e-postadress och andra obligatoriska fält.
     • Välj External eller Internal och klicka sedan på Create.

   • Skapa ett OAuth Client ID

     • Klicka på Create OAuth Client och välj sedan OAuth Client ID.
     • För Application Type väljer du Web application.
     • Under Authorized redirect URIs lägger du till callback-URL:en från Supabase-dashboarden.
     • Klicka på Create och anteckna det genererade Client ID och Client Secret.

3. Konfigurera Google OAuth i Supabase

   • Logga in på Supabase Dashboard

     • Öppna Supabase Dashboard och logga in på ditt projekt.

   • Aktivera Google OAuth

     • Gå till sidan Authentication.
     • I avsnittet Providers hittar du alternativet Google och aktiverar det.
     • Lägg till Client ID och Client Secret som genererades tidigare i respektive fält.

   • Spara konfigurationen

     • Klicka på Save för att tillämpa ändringarna.

Datalagring

Du kanske också vill lagra användardata efter att ha konfigurerat användarautentisering för din webb/app.

När du har anslutit till Supabase behöver du bara berätta för Atoms vilken data du vill spara i databasen. Agenterna konfigurerar automatiskt databastabeller och integrerar dem direkt i ditt användargränssnitt.

1. Definiera dina krav

   • Ange dina krav i chatten. Till exempel: "Se till att nya reseposter sparas i databasen".
   • Beskriv den data du vill lagra så tydligt som möjligt.
   • Atoms konfigurerar automatiskt den databasstruktur som krävs baserat på din input.

2. Testa funktionaliteten i Atoms

   • Skapa exempeldata i din app, till exempel genom att lägga till några "reseposter" via användargränssnittet.
   • Spara datan och uppdatera sidan. Datan synkroniseras till Supabase-databasen.
   • Logga in på Supabase och verifiera om den nyligen tillagda datan finns i databasen.

3. Validera datasynkronisering mellan Atoms och Supabase

   • Öppna Supabase-dashboarden och gå till Table Editor.
   • Ändra befintlig data eller skapa ny data.
   • Ändringar som görs i Supabase synkroniseras i realtid till din Atoms-app.
   • Gå tillbaka till Atoms och verifiera om den ändrade eller nyskapade datan visas korrekt.
   • Om datan synkroniseras korrekt är din konfiguration klar.

4. Distribuera din app

Edge Functions

Supabase Edge Functions är serverlösa backendprogram som distribueras på servernoder nära dina användare. De eliminerar behovet av att bygga och underhålla traditionella servrar, vilket gör att du kan köra anpassad logik med lägre nätverkslatens och snabbare svarstider. I de flesta webbapplikationer hanterar frontend (knappar, formulär, UI) grundläggande interaktioner, men vissa kritiska operationer måste köras på backend, till exempel:

• Skicka ett välkomstmejl automatiskt efter användarregistrering;
• Anropa AI-API:er för att analysera eller poängsätta innehåll när ett formulär skickas in;
• Integrera tredjepartsbetalningsgateways och registrera orderdetaljer i kassan.

Alla dessa operationer implementeras via Edge Functions.

Användningsfall

Med Supabase Edge Functions i Atoms kan du:

• Skicka välkomstmejl: Skicka automatiskt ett välkomstmeddelande med vägledning om nästa steg till nya användare efter att de registrerat sig, vilket ökar engagemanget och onboardingupplevelsen.
• Hantera användares formulärinlämningar: Vid inskickad feedback, registrering eller kommentar generera och skicka automatiskt en bekräftelsenotifiering (t.ex. "Vi har tagit emot din feedback och kommer att granska den inom kort") så att användarna vet att åtgärden lyckades.
• Schemalägga påminnelser: Ställ in dagliga eller veckovisa notifieringar via e-post eller push (för möten, uppgifter eller händelser) för att hjälpa användare att hantera sin tid och förbli produktiva.
• Dra nytta av AI-tjänster: När användaren har angett text, anropa automatiskt AI-API:er som OpenAI för grammatikkontroll eller intelligent omskrivning och returnera de optimerade resultaten till användaren.
• Bearbeta onlinebetalningar: När användare initierar en betalning på din e-handels- eller tjänsteplattform, integrera med gateways som Stripe för att säkert hantera transaktioner och visa tydliga sidor för lyckad eller misslyckad betalning med orderdetaljer.

Lagring och hantering av nycklar

Många applikationer kräver nycklar eller API-inloggningsuppgifter för att ansluta till tredjepartstjänster (t.ex. Stripe, OpenAI). När Supabase är anslutet erbjuder Atoms ett säkert sätt att hantera och använda dessa hemligheter. Genom Atoms's integration med Supabase upptäcker Atoms automatiskt när en funktion behöver en hemlighet och uppmanar dig att ange det nödvändiga värdet. Du klickar helt enkelt på Agent's knapp "Add API Key" och anger din nyckel; Atoms krypterar sedan och lagrar den i Supabases Edge Functions Secrets Manager. Vid körning injiceras dessa nycklar säkert i funktionen, vilket förhindrar att inloggningsuppgifter lagras i klartext.

Lägg till och distribuera backendfunktioner

När du har anslutit till Supabase berättar du för Agent vad du behöver:

• Skriv din begäran i chatten. Till exempel: "Generera en webbsida som anropar Gemini API för att uppskatta matkalorier och returnerar resultatet när jag laddar upp ett matfoto."

• När Agent har genererat koden visas två knappar: Add API Key och View in Edge Function.

• Klicka på Add API Key.

• Ange din API-nyckel och klicka på Send.

• Klicka på View in Edge Function.

• Du omdirigeras till sidan för Supabase Edge Function.

  Säkerhetsanmärkning: Alla nycklar krypteras och lagras i Supabase; Atoms kan inte komma åt dem.

Vanliga frågor

Hur lägger jag till backendfunktioner från Supabase i min applikation?

Integrera Supabase i din applikation i tre enkla steg:

• Klicka på auktoriseringsknappen i det övre högra hörnet av chattgränssnittet för att auktorisera ditt Supabase-konto.
• Välj och länka det Supabase-projekt du vill använda.
• Dela dina krav i chatten, så utvecklar agenterna funktioner baserat på ditt anslutna Supabase-projekt.

Stöder Supabase sociala inloggningar?

Supabase stöder olika autentiseringsmetoder, inklusive:

• E-post och lösenord.
• Lösenordsfri autentisering: Alternativ som engångslösenord (OTP) eller magic links.
• Sociala inloggningar: Stöd för tredjepartsleverantörer som Google, Twitter och GitHub.
• Telefonautentisering.
• Single Sign-On (SSO): Stöd för SAML SSO.
• Anonym inloggning: Gör det möjligt för användare att logga in anonymt.

Behöver jag skapa ett separat Supabase-projekt för min app?

Du kan antingen välja ett befintligt Supabase-projekt eller skapa ett nytt. Varje chatt kan bara ansluta till ett projekt åt gången.

Om jag remixar mitt projekt efter att ha anslutit till Supabase, kommer anslutningen att finnas kvar?

Anslutningen kopplas bort efter remixning och behöver återupprättas. Dessutom, om en app i App World som delas av andra användare är ansluten till Supabase, kan andra användare inte remixa den.

Kan jag använda en Supabase-databas för flera Atoms-projekt?

Ja, du kan använda en Supabase-databas för flera Atoms-projekt. Du behöver dock hantera anslutningarna och konfigurationerna noggrant.

Varför visas inte mitt projekt under Supabase-organisationer?

Med Supabases gratisplan pausas projekt utan aktivitet under sju dagar i följd automatiskt. I listan Atoms Organizations byter du till filtret Inactive för att visa de projekt som har pausats.

Varför ser jag \

Supabase tillämpar en en-till-en-OAuth-bindning mellan varje organisation och ett Atoms-konto. Om organisationen “Test” redan har auktoriserats av en annan Atoms-användare kommer varje efterföljande försök att binda den till ett annat konto att avvisas med detta fel. För att åtgärda detta öppnar du sidopanelen i Supabase Dashboard under Settings → API → OAuth Apps, tar bort den befintliga Atoms OAuth-behörigheten för den organisationen och återgår sedan till Atoms för att ansluta igen med ditt eget konto.