Connessione Supabase

Panoramica

Supabase è una piattaforma backend open-source che consente agli utenti di archiviare dati e fornire funzionalità simili a un backend. Puoi collegarti a Supabase per risolvere il problema per cui il tuo team Atoms archivia i dati solo nella memoria del browser, che può andare persa al refresh o alla chiusura. Integrando Atoms con Supabase, puoi trasformare il tuo sito web in un'applicazione completamente funzionale con archiviazione persistente e funzionalità avanzate.

Vedi ulteriori istruzioni qui:

Vantaggi principali

Oltre al fatto che non è necessaria esperienza di sviluppo, ci sono altri tre vantaggi chiave:

1. Configurazione rapida: Attiva il tuo backend e accelera il processo di sviluppo.
2. Altamente scalabile: Si adatta alla crescita degli utenti, consentendo al tuo progetto di espandersi senza limitazioni.
3. Conveniente: Offre un piano gratuito ideale per piccoli progetti e startup.

Collegare Supabase ad Atoms

Ecco una breve guida per collegare Atoms con Supabase.

1. Avvia l'Integrazione Supabase in Atoms

   • Apri Settings.

   • Seleziona Connectors dalla barra laterale sinistra.

   • Trova il connettore Supabase e fai clic su Connect.

     

   • Atoms presenterà un'interfaccia di configurazione della connessione che potrai seguire.

2. Autentica e configura il tuo progetto

   Verrà visualizzato un pop-up che ti chiederà di accedere al tuo account Supabase.

   • Seleziona la tua organizzazione dal menu a discesa.

   • Fai clic su Authorize Atoms per autorizzare il tuo account Supabase. (La connessione si completa in pochi secondi: non è necessaria alcuna configurazione manuale)

   • Una volta autorizzato, puoi:

     • Scegliere un progetto Supabase esistente dall'elenco, oppure
     • Fare clic su +Add New One per aggiungere immediatamente una nuova organizzazione. (Se hai bisogno di assistenza, Atoms Assistant è disponibile per guidarti nel collegare Supabase ad Atoms.)

3. Configurazione automatica

   • Una volta selezionato il progetto, Atoms si collegherà automaticamente al tuo progetto Supabase. Raccoglierà la struttura del database, le tabelle e le impostazioni di sicurezza.
   • Quando vedi la notifica "Connessione Supabaseed", il tuo backend è completamente configurato e pronto all'uso.

Autenticazione utente

Dopo aver creato la tua app in Atoms, potresti voler implementare l'autenticazione utente. Supabase Auth semplifica l'aggiunta di autenticazione e autorizzazione alla tua app. In questo processo, Atoms ti guiderà attraverso due metodi: (1) Email e password e (2) Accessi social (Google).

Email e password

1. Collega Supabase con Atoms

   • Assicurati di avere un account Supabase valido.
   • Fai clic sul pulsante di autorizzazione nell'angolo in alto a destra dell'interfaccia chat per autorizzare il tuo account Supabase.
   • Seleziona il progetto Supabase che vuoi usare.

2. Comunica i tuoi requisiti agli Agenti

   • Inserisci i tuoi requisiti nella chat. Ad esempio, puoi semplicemente usare il Prompt: "Add authentication".
   • Questo in genere genera una pagina base di accesso e registrazione collegata al sistema di autenticazione di Supabase.

3. Crea utenti per i test

   • Usa la nuova interfaccia di accesso/registrazione per creare un utente di test.
   • Aggiorna la pagina per verificare che la sessione utente persista.
   • In alternativa, vai alla dashboard Supabase, passa a Authentication > Users e aggiungi manualmente un utente per i test.

4. Distribuisci la tua app

Accessi social (Google)

1. Configura Google OAuth nel progetto Supabase

   • Vai alla pagina Authentication nella tua dashboard Supabase.
   • Vai alla sottopagina Sign In/Up.
   • Individua l'opzione Google e attiva l'interruttore per abilitarla. (Per i passaggi dettagliati di configurazione di Supabase, fai riferimento a Configuring Google OAuth in Supabase o a Supabase Docs.)

2. Comunica i tuoi requisiti agli Agenti

   • Inserisci i tuoi requisiti nella chat. Ad esempio: "Add Google authentication".
   • Questo aggiungerà un pulsante Continue with Google alla tua pagina di accesso.

3. Testa l'autenticazione Google

   • Vai alla pagina di accesso.
   • Fai clic sul pulsante Continue with Google.
   • Accedi con un account Google e verifica che il profilo utente venga aggiornato correttamente.
   • Completa il flusso Google OAuth per assicurarti che l'utente venga reindirizzato alla tua app.

4. Distribuisci la tua app su Mondo App di Atoms

Configurazione di Google OAuth in Supabase

1. Crea un progetto Google Cloud

   • Accedi alla Google Cloud Console

     • Apri la Google Cloud Console e accedi al tuo account Google.

   • Crea un nuovo progetto

     • Fai clic sul menu a discesa in alto e seleziona New Project.
     • Inserisci un nome per il progetto, seleziona un account di fatturazione e fai clic su Create.

2. Configura le credenziali Google OAuth

   • Imposta la schermata di consenso

     • Nella barra di ricerca, digita OAuth e apri la schermata di consenso OAuth.
     • Inserisci il nome della tua app, l'email di supporto per gli utenti e gli altri campi richiesti.
     • Seleziona External o Internal, quindi fai clic su Create.

   • Crea un ID client OAuth

     • Fai clic su Create OAuth Client, quindi seleziona OAuth Client ID.
     • Per Application Type, scegli Web application.
     • In Authorized redirect URIs, aggiungi l'URL di callback dalla dashboard Supabase.
     • Fai clic su Create e annota il Client ID e il Client Secret generati.

3. Configura Google OAuth in Supabase

   • Accedi alla dashboard Supabase

     • Apri la Supabase Dashboard e accedi al tuo progetto.

   • Abilita Google OAuth

     • Vai alla pagina Authentication.
     • Nella sezione Providers, trova l'opzione Google e abilitala.
     • Aggiungi il Client ID e il Client Secret generati in precedenza nei rispettivi campi.

   • Salva la configurazione

     • Fai clic su Save per applicare le modifiche.

Archiviazione dati

Potresti anche voler archiviare i dati degli utenti dopo aver configurato l'autenticazione utente per la tua web/app.

Una volta collegato a Supabase, ti basta dire ad Atoms quali dati vuoi salvare nel database. Gli agenti configureranno automaticamente le tabelle del database e le integreranno direttamente nella tua UI.

1. Definisci i tuoi requisiti

   • Inserisci i tuoi requisiti nella chat. Ad esempio: "Please ensure that new trip records are saved to the database".
   • Descrivi nel modo più chiaro possibile i dati che vuoi archiviare.
   • Atoms configurerà automaticamente la struttura del database necessaria in base al tuo input.

2. Testa la funzionalità in Atoms

   • Crea dati di esempio nella tua app, ad esempio aggiungendo alcuni "trip records" tramite la UI.
   • Salva i dati e aggiorna la pagina. I dati verranno sincronizzati con il database Supabase.
   • Accedi a Supabase e verifica se i dati appena aggiunti esistono nel database.

3. Verifica la sincronizzazione dei dati tra Atoms e Supabase

   • Apri la dashboard Supabase e vai al Table Editor.
   • Modifica i dati esistenti o crea nuovi dati.
   • Le modifiche apportate in Supabase verranno sincronizzate in tempo reale con la tua app Atoms.
   • Torna ad Atoms e verifica che i dati modificati o appena creati vengano visualizzati correttamente.
   • Se i dati si sincronizzano correttamente, la configurazione è completa.

4. Distribuisci la tua app

Edge Functions

Le Supabase Edge Functions sono programmi backend serverless distribuiti su nodi server vicini ai tuoi utenti. Eliminano la necessità di creare e mantenere server tradizionali, consentendoti di eseguire qualsiasi logica personalizzata con una latenza di rete inferiore e tempi di risposta più rapidi. Nella maggior parte delle applicazioni web, il frontend (pulsanti, moduli, UI) gestisce le interazioni di base, ma alcune operazioni critiche devono essere eseguite sul backend, come:

• inviare automaticamente un'email di benvenuto dopo la registrazione dell'utente;
• invocare API di IA per analizzare o valutare contenuti all'invio di un modulo;
• integrare gateway di pagamento di terze parti e registrare i dettagli dell'ordine durante il checkout.

Tutte queste operazioni sono implementate tramite Edge Functions.

Casi d'uso

Utilizzando le Supabase Edge Functions in Atoms, puoi:

• Inviare email di benvenuto: inviare automaticamente ai nuovi utenti un messaggio di benvenuto con indicazioni sui passaggi successivi dopo la registrazione, aumentando il coinvolgimento e migliorando l'esperienza di onboarding.
• Gestire l'invio di moduli utente: dopo l'invio di feedback, registrazioni o commenti, generare e inviare automaticamente una notifica di conferma (ad esempio, "Abbiamo ricevuto il tuo feedback e lo esamineremo a breve") così gli utenti sanno che l'azione è andata a buon fine.
• Pianificare promemoria: impostare notifiche giornaliere o settimanali via email o push (per riunioni, attività o eventi) per aiutare gli utenti a gestire il proprio tempo e mantenere la produttività.
• Sfruttare i servizi di IA: dopo che l'utente inserisce del testo, chiamare automaticamente API di IA come OpenAI per il controllo grammaticale o la riscrittura intelligente e restituire all'utente i risultati ottimizzati.
• Elaborare pagamenti online: quando gli utenti avviano un pagamento sulla tua piattaforma e-commerce o di servizi, integrare gateway come Stripe per gestire in modo sicuro le transazioni e mostrare pagine chiare di successo o errore con i dettagli dell'ordine.

Gestione e archiviazione delle Chiavi

Molte applicazioni richiedono chiavi o credenziali API per connettersi a servizi di terze parti (ad esempio, Stripe, OpenAI). Quando Supabase è collegato, Atoms fornisce un modo sicuro per gestire e usare questi segreti. Tramite l'integrazione di Atoms con Supabase, ogni volta che una funzione richiede un segreto, Atoms lo rileva automaticamente e ti chiede di inserire il valore richiesto. Ti basta fare clic sul pulsante "Add API Key" dell'Agente e inserire la tua chiave; Atoms quindi la crittografa e la archivia nel Secrets Manager delle Edge Functions di Supabase. In fase di esecuzione, queste chiavi vengono inserite in modo sicuro nella funzione, evitando che le credenziali vengano archiviate in testo normale.

Aggiungi e distribuisci funzioni backend

Dopo esserti collegato a Supabase, comunica all'Agente ciò di cui hai bisogno:

• Digita la tua richiesta nella chat. Ad esempio: "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."

• Una volta che l'Agente ha generato il codice, appariranno due pulsanti: Add API Key e View in Edge Function.

• Fai clic su Add API Key.

• Inserisci la tua chiave API e fai clic su Send.

• Fai clic su View in Edge Function.

• Verrai reindirizzato alla pagina Supabase Edge Function.

  Nota di sicurezza: tutte le chiavi sono crittografate e archiviate in Supabase; Atoms non può accedervi.

FAQ

Come faccio ad aggiungere funzionalità backend di Supabase alla mia applicazione?

Integra Supabase nella tua applicazione in tre semplici passaggi:

• Fai clic sul pulsante di autorizzazione nell'angolo in alto a destra dell'interfaccia chat per autorizzare il tuo account Supabase.
• Seleziona e collega il progetto Supabase che vuoi usare.
• Condividi i tuoi requisiti nella chat e gli agenti svilupperanno funzionalità basate sul tuo progetto Supabase collegato.

Supabase supporta gli accessi social?

Supabase supporta vari metodi di autenticazione, tra cui:

• Email e password.
• Autenticazione senza password: opzioni come password monouso (OTP) o magic link.
• Accessi social: supporto per provider di terze parti come Google, Twitter e GitHub.
• Autenticazione tramite telefono.
• Single Sign-On (SSO): supporto per SAML SSO.
• Accesso anonimo: consente agli utenti di accedere in modo anonimo.

Devo creare un progetto Supabase separato per la mia app?

Puoi selezionare un progetto Supabase esistente oppure crearne uno nuovo. Ogni chat può collegarsi a un solo progetto alla volta.

Dopo la connessione a Supabase, la connessione rimarrà attiva se faccio un Remix del mio progetto?

La connessione verrà interrotta dopo il Remix e dovrà essere ristabilita. Inoltre, se un'app in Mondo App condivisa da altri utenti è collegata a Supabase, gli altri utenti non possono farne il Remix.

Posso usare un database Supabase per più progetti Atoms?

Sì, puoi usare un database Supabase per più progetti Atoms. Tuttavia, devi gestire con attenzione connessioni e configurazioni.

Perché il mio progetto non viene visualizzato tra le organizzazioni Supabase?

Nel piano gratuito di Supabase, qualsiasi progetto senza attività per sette giorni consecutivi viene automaticamente messo in pausa. Nell'elenco Organizations di Atoms, passa al filtro Inactive per visualizzare i tuoi progetti che sono stati messi in pausa.

Perché vedo \

Supabase applica un'associazione OAuth uno a uno tra ogni organizzazione e un account Atoms. Se l'organizzazione “Test” è già stata autorizzata da un altro utente Atoms, qualsiasi successivo tentativo di associarla a un account diverso verrà rifiutato con questo errore. Per risolvere il problema, apri la barra laterale della Supabase Dashboard in Settings → API → OAuth Apps, elimina la concessione OAuth Atoms esistente per quell'organizzazione, quindi torna su Atoms e ricollegati usando il tuo account.