Connexion Supabase

Aperçu

Supabase est une plateforme backend open source qui permet aux utilisateurs de stocker des données et de fournir des fonctionnalités de type backend. Vous pouvez vous connecter à Supabase pour résoudre le problème selon lequel votre équipe Atoms stocke uniquement dans la mémoire du navigateur, qui peut être perdue lors d'une actualisation ou d'une fermeture. En intégrant Atoms à Supabase, vous pouvez transformer votre site web en une application entièrement fonctionnelle avec un stockage persistant et des fonctionnalités avancées.

Voir plus d'instructions ici :

Principaux avantages

Outre le fait qu'aucune expérience en développement ne soit nécessaire, il offre encore trois autres avantages clés :

1. Configuration rapide : Mettez votre backend en place et accélérez votre processus de développement.
2. Hautement évolutif : Adaptez-vous à la croissance des utilisateurs, ce qui permet à votre projet de se développer sans limites.
3. Économique : Propose une offre gratuite idéale pour les petits projets et les startups.

Connecter Supabase à Atoms

Voici un guide rapide pour connecter Atoms à Supabase.

1. Démarrer l'Intégration Supabase dans Atoms

   • Ouvrez Paramètres.

   • Sélectionnez Connecteurs dans la barre latérale gauche.

   • Trouvez le connecteur Supabase et cliquez sur Connecter.

     

   • Atoms affichera une interface de configuration de connexion que vous pourrez suivre.

2. Authentifier et configurer votre projet

   Une fenêtre contextuelle apparaîtra et vous invitera à vous connecter à votre compte Supabase.

   • Sélectionnez votre organisation dans le menu déroulant.

   • Cliquez sur Autoriser Atoms pour autoriser votre compte Supabase. (La connexion se termine en quelques secondes – aucune configuration manuelle n'est nécessaire)

   • Une fois autorisé, vous pouvez :

     • Choisir un projet Supabase existant dans la liste, ou
     • Cliquer sur +Add New One pour ajouter instantanément une nouvelle organisation. (Si vous avez besoin d'aide, l'Assistant Atoms est disponible pour vous guider dans la connexion de Supabase à Atoms.)

3. Configuration automatique

   • Une fois votre projet sélectionné, Atoms se connectera automatiquement à votre projet Supabase. Il récupérera la structure de votre base de données, vos tables et vos paramètres de sécurité.
   • Lorsque vous voyez la notification "Connexion Supabaseed", votre backend est entièrement configuré et prêt à l'emploi.

Authentification des utilisateurs

Après avoir créé votre application dans Atoms, vous souhaiterez peut-être mettre en place l'authentification des utilisateurs. Supabase Auth simplifie l'ajout de l'authentification et de l'autorisation à votre application. Dans ce processus, Atoms vous guidera à travers deux méthodes : (1) Email and Password et (2) Social Logins (Google).

Email and Password

1. Connecter Supabase à Atoms

   • Assurez-vous d'avoir un compte Supabase valide.
   • Cliquez sur le bouton d'autorisation dans le coin supérieur droit de l'interface de chat pour autoriser votre compte Supabase.
   • Sélectionnez le projet Supabase que vous souhaitez utiliser.

2. Indiquer vos exigences aux Agents

   • Saisissez vos exigences dans le chat. Par exemple, vous pouvez simplement utiliser le prompt : "Add authentication".
   • Cela générera généralement une page basique de connexion et d'inscription connectée au système d'authentification de Supabase.

3. Créer des utilisateurs pour les tests

   • Utilisez l'interface de connexion/inscription nouvellement ajoutée pour créer un utilisateur de test.
   • Actualisez la page pour vérifier que la session utilisateur persiste.
   • Vous pouvez également accéder à votre tableau de bord Supabase, aller dans Authentication > Users, et ajouter manuellement un utilisateur pour les tests.

4. Déployer votre application

Social Logins (Google)

1. Configurer Google OAuth dans le projet Supabase

   • Accédez à la page Authentication dans votre tableau de bord Supabase.
   • Allez à la sous-page Sign In/Up.
   • Localisez l'option Google et activez l'interrupteur pour l'activer. (Pour les étapes détaillées de configuration de Supabase, reportez-vous à Configuring Google OAuth in Supabase ou à Supabase Docs.)

2. Indiquer vos exigences aux Agents

   • Saisissez vos exigences dans le chat. Par exemple : "Add Google authentication".
   • Cela ajoutera un bouton Continue with Google à votre page de connexion.

3. Tester l'authentification Google

   • Accédez à la page de connexion.
   • Cliquez sur le bouton Continue with Google.
   • Connectez-vous avec un compte Google et vérifiez que le profil utilisateur est correctement mis à jour.
   • Terminez le flux Google OAuth pour vous assurer que l'utilisateur est redirigé vers votre application.

4. Déployer votre application sur App World d'Atoms

Configuring Google OAuth in Supabase

1. Créer un projet Google Cloud

   • Accéder à la Google Cloud Console

     • Ouvrez la Google Cloud Console et connectez-vous à votre compte Google.

   • Créer un nouveau projet

     • Cliquez sur le menu déroulant en haut et sélectionnez New Project.
     • Saisissez un nom de projet, sélectionnez un compte de facturation, puis cliquez sur Create.

2. Configurer les identifiants Google OAuth

   • Configurer l'écran de consentement

     • Dans la barre de recherche, tapez OAuth et ouvrez l'écran de consentement OAuth.
     • Renseignez le nom de votre application, l'adresse e-mail de support utilisateur et les autres champs requis.
     • Sélectionnez Externe ou Interne, puis cliquez sur Create.

   • Créer un ID client OAuth

     • Cliquez sur Create OAuth Client, puis sélectionnez OAuth Client ID.
     • Pour le type d'application, choisissez Web application.
     • Dans Authorized redirect URIs, ajoutez l'URL de rappel depuis le tableau de bord Supabase.
     • Cliquez sur Create et notez le Client ID et le Client Secret générés.

3. Configurer Google OAuth dans Supabase

   • Se connecter au tableau de bord Supabase

     • Ouvrez le Supabase Dashboard et connectez-vous à votre projet.

   • Activer Google OAuth

     • Accédez à la page Authentication.
     • Dans la section Providers, trouvez l'option Google et activez-la.
     • Ajoutez le Client ID et le Client Secret générés précédemment dans les champs correspondants.

   • Enregistrer la configuration

     • Cliquez sur Save pour appliquer les modifications.

Stockage des données

Vous souhaiterez peut-être également stocker des données utilisateur après avoir configuré l'authentification des utilisateurs pour votre web/app.

Une fois connecté à Supabase, dites simplement à Atoms quelles données vous souhaitez enregistrer dans la base de données. Les agents configureront automatiquement les tables de base de données et les intégreront directement dans votre UI.

1. Définir vos exigences

   • Saisissez vos exigences dans le chat. Par exemple : "Please ensure that new trip records are saved to the database".
   • Décrivez aussi clairement que possible les données que vous souhaitez stocker.
   • Atoms configurera automatiquement la structure de base de données requise en fonction de votre saisie.

2. Tester la fonctionnalité dans Atoms

   • Créez des données d'exemple dans votre application, par exemple en ajoutant quelques "trip records" via l'UI.
   • Enregistrez les données et actualisez la page. Les données seront synchronisées avec la base de données Supabase.
   • Connectez-vous à Supabase et vérifiez si les données nouvellement ajoutées existent dans la base de données.

3. Valider la synchronisation des données entre Atoms et Supabase

   • Ouvrez le tableau de bord Supabase et accédez à l'éditeur de tables.
   • Modifiez des données existantes ou créez de nouvelles données.
   • Les modifications effectuées dans Supabase seront synchronisées en temps réel avec votre application Atoms.
   • Revenez à Atoms et vérifiez si les données modifiées ou nouvellement créées s'affichent correctement.
   • Si les données se synchronisent correctement, alors votre configuration est terminée.

4. Déployer votre application

Edge Functions

Les Supabase Edge Functions sont des programmes backend serverless déployés sur des nœuds de serveur proches de vos utilisateurs. Elles éliminent la nécessité de créer et de maintenir des serveurs traditionnels, vous permettant d'exécuter toute logique personnalisée avec une latence réseau plus faible et des temps de réponse plus rapides. Dans la plupart des applications web, le frontend (boutons, formulaires, UI) gère les interactions de base, mais certaines opérations critiques doivent s'exécuter sur le backend, telles que :

• l'envoi automatique d'un e-mail de bienvenue après l'inscription d'un utilisateur ;
• l'appel d'API IA pour analyser ou évaluer du contenu lors de la soumission d'un formulaire ;
• l'intégration de passerelles de paiement tierces et l'enregistrement des détails de commande lors du paiement.

Toutes ces opérations sont mises en œuvre via les Edge Functions.

Cas d'utilisation

En utilisant les Supabase Edge Functions dans Atoms, vous pouvez :

• Envoyer des e-mails de bienvenue : envoyer automatiquement aux nouveaux utilisateurs un message de bienvenue avec des indications sur les étapes suivantes après leur inscription, afin d'améliorer l'engagement et l'expérience d'intégration.
• Gérer les soumissions de formulaires utilisateur : lors de la soumission d'un avis, d'une inscription ou d'un commentaire, générer et envoyer automatiquement une notification de confirmation (par ex., "Nous avons bien reçu votre retour et l'examinerons sous peu") afin que les utilisateurs sachent que leur action a réussi.
• Planifier des rappels : définir des notifications quotidiennes ou hebdomadaires par e-mail ou push (pour des réunions, tâches ou événements) afin d'aider les utilisateurs à gérer leur temps et à rester productifs.
• Exploiter des services d'IA : après la saisie de texte par l'utilisateur, appeler automatiquement des API IA comme OpenAI pour la correction grammaticale ou la reformulation intelligente, et renvoyer les résultats optimisés à l'utilisateur.
• Traiter les paiements en ligne : lorsque les utilisateurs lancent un paiement sur votre plateforme e-commerce ou de services, intégrer des passerelles comme Stripe pour gérer les transactions en toute sécurité et afficher des pages claires de succès ou d'échec avec les détails de la commande.

Stockage et gestion des clés

De nombreuses applications nécessitent des clés ou des identifiants d'API pour se connecter à des services tiers (par ex., Stripe, OpenAI). Lorsque Supabase est connecté, Atoms fournit un moyen sécurisé de gérer et d'utiliser ces secrets. Grâce à l'intégration d'Atoms avec Supabase, chaque fois qu'une fonction a besoin d'un secret, Atoms le détecte automatiquement et vous invite à saisir la valeur requise. Il vous suffit de cliquer sur le bouton "Add API Key" de l'Agent et de saisir votre clé ; Atoms la chiffre ensuite et la stocke dans le gestionnaire de secrets des Edge Functions de Supabase. Au moment de l'exécution, ces clés sont injectées de manière sécurisée dans la fonction, ce qui évite que les identifiants soient stockés en clair.

Ajouter et déployer des fonctions backend

Après vous être connecté à Supabase, dites à l'Agent ce dont vous avez besoin :

• Saisissez votre demande dans le chat. Par exemple : "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."

• Une fois que l'Agent a généré le code, deux boutons apparaîtront : Add API Key et View in Edge Function.

• Cliquez sur Add API Key.

• Saisissez votre clé API et cliquez sur Send.

• Cliquez sur View in Edge Function.

• Vous serez redirigé vers la page Supabase Edge Function.

  Remarque de sécurité : toutes les clés sont chiffrées et stockées dans Supabase ; Atoms ne peut pas y accéder.

FAQ

Comment ajouter des fonctionnalités backend Supabase à mon application ?

Intégrez Supabase à votre application en trois étapes simples :

• Cliquez sur le bouton d'autorisation dans le coin supérieur droit de l'interface de chat pour autoriser votre compte Supabase.
• Sélectionnez et liez le projet Supabase que vous souhaitez utiliser.
• Partagez vos exigences dans le chat, et les agents développeront des fonctionnalités basées sur votre projet Supabase connecté.

Supabase prend-il en charge les connexions sociales ?

Supabase prend en charge diverses méthodes d'authentification, notamment :

• Email and Password.
• Authentification sans mot de passe : options comme les mots de passe à usage unique (OTP) ou les liens magiques.
• Social Logins : prise en charge de fournisseurs tiers tels que Google, Twitter et GitHub.
• Authentification par téléphone.
• Authentification unique (SSO) : prise en charge du SAML SSO.
• Connexion anonyme : permet aux utilisateurs de se connecter anonymement.

Dois-je créer un projet Supabase distinct pour mon application ?

Vous pouvez soit sélectionner un projet Supabase existant, soit en créer un nouveau. Chaque chat ne peut se connecter qu'à un seul projet à la fois.

Après la connexion à Supabase, la connexion sera-t-elle maintenue si je fais un remix de mon projet ?

La connexion sera interrompue après un remix et devra être rétablie. De plus, si une application dans App World partagée par d'autres utilisateurs est connectée à Supabase, les autres utilisateurs ne peuvent pas en faire un remix.

Puis-je utiliser une base de données Supabase pour plusieurs projets Atoms ?

Oui, vous pouvez utiliser une base de données Supabase pour plusieurs projets Atoms. Cependant, vous devez gérer soigneusement les connexions et les configurations.

Pourquoi mon projet n'apparaît-il pas sous les organisations Supabase ?

Avec le forfait gratuit Supabase, tout projet sans activité pendant sept jours consécutifs est automatiquement mis en pause. Dans la liste des organisations Atoms, passez au filtre Inactive pour voir les projets mis en pause.

Pourquoi vois-je \

Supabase applique une liaison OAuth un-à-un entre chaque organisation et un compte Atoms. Si l'organisation “Test” a déjà été autorisée par un autre utilisateur Atoms, toute tentative ultérieure de la lier à un autre compte sera rejetée avec cette erreur. Pour résoudre ce problème, ouvrez la barre latérale du Supabase Dashboard sous Settings → API → OAuth Apps, supprimez l'autorisation OAuth Atoms existante pour cette organisation, puis revenez dans Atoms et reconnectez-vous avec votre propre compte.