Conectar Supabase

Resumen

Supabase es una plataforma de backend de código abierto que permite a los usuarios almacenar datos y proporcionar funcionalidades similares a las de un backend. Puedes conectarte con Supabase para resolver el problema de que tu equipo de Atoms solo almacena en la memoria del navegador, que puede perderse al actualizar o cerrar. Al integrar Atoms con Supabase, puedes transformar tu sitio web en una aplicación completamente funcional con almacenamiento persistente y funciones avanzadas.

Consulta más instrucciones aquí:

Ventajas clave

Además de no requerir experiencia en desarrollo, aún tiene tres ventajas clave más:

1. Configuración rápida: Pon en marcha tu backend y acelera tu proceso de desarrollo.
2. Altamente escalable: Adáptate al crecimiento de usuarios, permitiendo que tu proyecto se expanda sin limitaciones.
3. Rentable: Ofrece un nivel gratuito ideal para proyectos pequeños y startups.

Conectar Supabase con Atoms

Aquí tienes una guía breve para conectar Atoms con Supabase.

1. Inicia la Integración de Supabase en Atoms

   • Abre Settings.

   • Selecciona Connectors en la barra lateral izquierda.

   • Busca el conector de Supabase y haz clic en Connect.

     

   • Atoms presentará una interfaz de configuración de conexión que puedes seguir.

2. Autentica y configura tu proyecto

   Aparecerá una ventana emergente que te pedirá iniciar sesión en tu cuenta de Supabase.

   • Selecciona tu organización en el menú desplegable.

   • Haz clic en Authorize Atoms para autorizar tu cuenta de Supabase. (La conexión se completa en segundos; no se necesita configuración manual)

   • Una vez autorizada, puedes:

     • Elegir un proyecto existente de Supabase de la lista, o
     • Hacer clic en +Add New One para agregar una nueva organización al instante. (Si necesitas orientación, el Asistente de Atoms está disponible para guiarte en la conexión de Supabase con Atoms.)

3. Configuración automática

   • Una vez seleccionado tu proyecto, Atoms se conectará automáticamente a tu proyecto de Supabase. Recopilará la estructura de tu base de datos, las tablas y la configuración de seguridad.
   • Cuando veas la notificación "Supabase Connected", tu backend estará completamente configurado y listo para usar.

Autenticación de usuarios

Después de crear tu app en Atoms, es posible que quieras implementar autenticación de usuarios. Supabase Auth simplifica la adición de autenticación y autorización a tu app. En este proceso, Atoms te guiará a través de dos métodos: (1) Email and Password y (2) Social Logins (Google).

Email and Password

1. Conecta Supabase con Atoms

   • Asegúrate de tener una cuenta válida de Supabase.
   • Haz clic en el botón de autorización en la esquina superior derecha de la interfaz de chat para autorizar tu cuenta de Supabase.
   • Selecciona el proyecto de Supabase que deseas usar.

2. Indica tus requisitos a los Agentes

   • Introduce tus requisitos en el chat. Por ejemplo, puedes simplemente escribir el prompt: "Add authentication".
   • Esto normalmente generará una página básica de inicio de sesión y registro conectada al sistema de autenticación de Supabase.

3. Crea usuarios para pruebas

   • Usa la interfaz de inicio de sesión/registro recién añadida para crear un usuario de prueba.
   • Actualiza la página para verificar que la sesión del usuario persiste.
   • Como alternativa, ve a tu panel de Supabase, navega a Authentication > Users y añade manualmente un usuario para pruebas.

4. Implementa tu app

Social Logins (Google)

1. Configura Google OAuth en el proyecto de Supabase

   • Navega a la página Authentication en tu panel de Supabase.
   • Ve a la subpágina Sign In/Up.
   • Localiza la opción Google y activa el interruptor para habilitarla. (Para pasos detallados de configuración de Supabase, consulta Configuración de Google OAuth en Supabase o Supabase Docs.)

2. Indica tus requisitos a los Agentes

   • Introduce tus requisitos en el chat. Por ejemplo: "Add Google authentication".
   • Esto añadirá un botón Continue with Google a tu página de inicio de sesión.

3. Prueba la autenticación de Google

   • Ve a la página de inicio de sesión.
   • Haz clic en el botón Continue with Google.
   • Inicia sesión con una cuenta de Google y verifica que el perfil del usuario se actualiza correctamente.
   • Completa el flujo de Google OAuth para asegurarte de que el usuario sea redirigido de vuelta a tu app.

4. Implementa tu app en el Mundo de Apps de Atoms

Configuración de Google OAuth en Supabase

1. Crea un proyecto de Google Cloud

   • Accede a Google Cloud Console

     • Abre la Google Cloud Console e inicia sesión en tu cuenta de Google.

   • Crea un nuevo proyecto

     • Haz clic en el menú desplegable de la parte superior y selecciona New Project.
     • Introduce un nombre para el proyecto, selecciona una cuenta de facturación y haz clic en Create.

2. Configura las credenciales de Google OAuth

   • Configura la pantalla de consentimiento

     • En la barra de búsqueda, escribe OAuth y abre la pantalla de consentimiento de OAuth.
     • Completa el nombre de tu app, el correo electrónico de soporte para usuarios y otros campos obligatorios.
     • Selecciona External o Internal, luego haz clic en Create.

   • Crea un OAuth Client ID

     • Haz clic en Create OAuth Client, luego selecciona OAuth Client ID.
     • En Application Type, elige Web application.
     • En Authorized redirect URIs, agrega la URL de callback del panel de Supabase.
     • Haz clic en Create y anota el Client ID y el Client Secret generados.

3. Configura Google OAuth en Supabase

   • Inicia sesión en el panel de Supabase

     • Abre el Supabase Dashboard e inicia sesión en tu proyecto.

   • Habilita Google OAuth

     • Navega a la página Authentication.
     • En la sección Providers, encuentra la opción Google y habilítala.
     • Agrega el Client ID y el Client Secret generados anteriormente en los campos correspondientes.

   • Guarda la configuración

     • Haz clic en Save para aplicar los cambios.

Almacenamiento de datos

También es posible que quieras almacenar datos de usuarios después de configurar la autenticación de usuarios para tu web/app.

Una vez conectado a Supabase, simplemente dile a Atoms qué datos quieres guardar en la base de datos. Los agentes configurarán automáticamente las tablas de la base de datos y las integrarán directamente en tu UI.

1. Define tus requisitos

   • Introduce tus requisitos en el chat. Por ejemplo: "Please ensure that new trip records are saved to the database".
   • Describe lo más claramente posible los datos que quieres almacenar.
   • Atoms configurará automáticamente la estructura de base de datos requerida según tu entrada.

2. Prueba la funcionalidad en Atoms

   • Crea datos de ejemplo en tu app, como agregar algunos "trip records" a través de la UI.
   • Guarda los datos y actualiza la página. Los datos se sincronizarán con la base de datos de Supabase.
   • Inicia sesión en Supabase y verifica si los datos recién agregados existen en la base de datos.

3. Valida la sincronización de datos entre Atoms y Supabase

   • Abre el panel de Supabase y navega al Table Editor.
   • Modifica datos existentes o crea nuevos datos.
   • Los cambios realizados en Supabase se sincronizarán en tiempo real con tu app de Atoms.
   • Regresa a Atoms y verifica si los datos modificados o recién creados se muestran correctamente.
   • Si los datos se sincronizan correctamente, entonces tu configuración estará completa.

4. Implementa tu app

Edge Functions

Las Supabase Edge Functions son programas de backend serverless implementados en nodos de servidor cercanos a tus usuarios. Eliminan la necesidad de crear y mantener servidores tradicionales, lo que te permite ejecutar cualquier lógica personalizada con menor latencia de red y tiempos de respuesta más rápidos. En la mayoría de las aplicaciones web, el frontend (botones, formularios, UI) maneja interacciones básicas, pero algunas operaciones críticas deben ejecutarse en el backend, como:

• Enviar automáticamente un correo electrónico de bienvenida después del registro de un usuario;
• Invocar APIs de IA para analizar o puntuar contenido al enviar formularios;
• Integrar pasarelas de pago de terceros y registrar detalles del pedido durante el proceso de pago.

Todas estas operaciones se implementan mediante Edge Functions.

Casos de uso

Al usar Supabase Edge Functions en Atoms, puedes:

• Enviar correos electrónicos de bienvenida: enviar automáticamente a los nuevos usuarios un mensaje de bienvenida con orientación sobre los siguientes pasos después de registrarse, mejorando la interacción y la experiencia de incorporación.
• Gestionar envíos de formularios de usuarios: tras el envío de comentarios, registros o comentarios en publicaciones, generar y enviar automáticamente una notificación de confirmación (por ejemplo, "Hemos recibido tus comentarios y los revisaremos en breve") para que los usuarios sepan que su acción se realizó correctamente.
• Programar recordatorios: configurar notificaciones diarias o semanales por correo electrónico o push (para reuniones, tareas o eventos) para ayudar a los usuarios a administrar su tiempo y mantenerse productivos.
• Aprovechar servicios de IA: después de que el usuario introduzca texto, llamar automáticamente a APIs de IA como OpenAI para corrección gramatical o reescritura inteligente, y devolver los resultados optimizados al usuario.
• Procesar pagos en línea: cuando los usuarios inicien un pago en tu plataforma de comercio electrónico o servicios, integrarte con pasarelas como Stripe para gestionar transacciones de forma segura y mostrar páginas claras de éxito o error con los detalles del pedido.

Gestión y almacenamiento de Claves

Muchas aplicaciones requieren claves o credenciales de API para conectarse con servicios de terceros (por ejemplo, Stripe, OpenAI). Cuando Supabase está conectado, Atoms proporciona una forma segura de gestionar y usar estos secretos. A través de la integración de Atoms con Supabase, cada vez que una función necesita un secreto, Atoms lo detecta automáticamente y te solicita que introduzcas el valor requerido. Simplemente haces clic en el botón "Add API Key" del Agente e introduces tu clave; luego Atoms la cifra y la almacena en el Edge Functions Secrets Manager de Supabase. En tiempo de ejecución, estas claves se inyectan de forma segura en la función, evitando que las credenciales se almacenen en texto plano.

Agregar e implementar funciones de backend

Después de conectarte a Supabase, dile al Agente lo que necesitas:

• Escribe tu solicitud en el chat. Por ejemplo: "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."

• Una vez que el Agente haya generado el código, aparecerán dos botones: Add API Key y View in Edge Function.

• Haz clic en Add API Key.

• Introduce tu clave de API y haz clic en Send.

• Haz clic en View in Edge Function.

• Serás redirigido a la página de Supabase Edge Function.

  Nota de seguridad: Todas las claves se cifran y almacenan en Supabase; Atoms no puede acceder a ellas.

Preguntas frecuentes

¿Cómo agrego funciones de backend de Supabase a mi aplicación?

Integra Supabase en tu aplicación en tres pasos sencillos:

• Haz clic en el botón de autorización en la esquina superior derecha de la interfaz de chat para autorizar tu cuenta de Supabase.
• Selecciona y vincula el proyecto de Supabase que deseas usar.
• Comparte tus requisitos en el chat, y los agentes desarrollarán funciones según tu proyecto de Supabase conectado.

¿Supabase admite inicios de sesión sociales?

Supabase admite varios métodos de autenticación, incluidos:

• Email and Password.
• Autenticación sin contraseña: opciones como contraseñas de un solo uso (OTP) o magic links.
• Inicios de sesión sociales: compatibilidad con proveedores de terceros como Google, Twitter y GitHub.
• Autenticación por teléfono.
• Single Sign-On (SSO): compatibilidad con SAML SSO.
• Inicio de sesión anónimo: permite a los usuarios iniciar sesión de forma anónima.

¿Necesito crear un proyecto de Supabase independiente para mi app?

Puedes seleccionar un proyecto existente de Supabase o crear uno nuevo. Cada chat solo puede conectarse a un proyecto a la vez.

Después de conectarme a Supabase, ¿la conexión se mantendrá si hago Remix de mi proyecto?

La conexión se desconectará después de hacer Remix y deberá establecerse nuevamente. Además, si una app en el Mundo de Apps compartida por otros usuarios está conectada a Supabase, otros usuarios no podrán hacer Remix.

¿Puedo usar una base de datos de Supabase para varios proyectos de Atoms?

Sí, puedes usar una base de datos de Supabase para varios proyectos de Atoms. Sin embargo, debes gestionar cuidadosamente las conexiones y configuraciones.

¿Por qué mi proyecto no aparece en las organizaciones de Supabase?

En el plan gratuito de Supabase, cualquier proyecto sin actividad durante siete días consecutivos se pausa automáticamente. En la lista de organizaciones de Atoms, cambia al filtro Inactive para ver cualquiera de tus proyectos que hayan sido pausados.

¿Por qué veo \

Supabase aplica una vinculación OAuth uno a uno entre cada organización y una cuenta de Atoms. Si la organización “Test” ya fue autorizada por otro usuario de Atoms, cualquier intento posterior de vincularla con una cuenta diferente será rechazado con este error. Para solucionarlo, abre la barra lateral del Supabase Dashboard en Settings → API → OAuth Apps, elimina la autorización OAuth existente de Atoms para esa organización y luego vuelve a Atoms para reconectarte usando tu propia cuenta.