Contáctame

El Método GRATIS que Uso para Crear Apps Web: Google AI Studio + DYAD + Supabase

Interfaz de Google AI Studio mostrando el cuadro modal 'Crea una clave nueva' para la API Gemini

Crear una aplicación web funcional hoy puede ser mucho más rápido y accesible que nunca. Con la combinación adecuada de herramientas se puede generar el esqueleto de una app, probarla localmente, conectar una base de datos y publicarla sin grandes complicaciones ni costos iniciales. Aquí explico el flujo completo que utilizo: generar código con Google AI Studio, gestionarlo y extenderlo localmente con DYAD y conectar una base de datos real con Supabase. También incluyo pasos para instalar Node.js y consejos prácticos para evitar errores comunes.

Tabla de contenidos

🧭 Qué vas a lograr con este método

Al final tendrás una aplicación web lista para pruebas funcionales que incluya:

  • Interfaz frontend generada automáticamente (login, registro, feed de posts).
  • Conexión a una API de lenguaje (por ejemplo, Google Gemini) para funcionalidades avanzadas si las necesitas.
  • Base de datos real con tablas para usuarios, posts, likes y relaciones, gestionadas por Supabase.
  • Capacidad de ejecutar y modificar la aplicación en tu máquina local gracias a DYAD, sin necesitar subir todo a la nube para cada cambio.
  • Opciones sencillas para desplegar en GitHub y plataformas como Vercel cuando estés listo.

🧰 Herramientas que vas a necesitar

Estas son las piezas clave del flujo. Incluyo los enlaces directos para que puedas acceder rápido:

  • Google AI Studio – Generador inicial del proyecto: https://aistudio.google.com
  • DYAD (herramienta local para importar y manejar el proyecto): https://www.dyad.sh/
  • Supabase (base de datos y autenticación): https://supabase.com
  • Node.js (runtime necesario para compilar y ejecutar): https://nodejs.org
  • Hosting recomendado con descuento: https://hostinger.com/rodrigo

⚙️ Antes de comenzar: decisiones de diseño

Hay un par de decisiones a tomar al inicio que condicionan el flujo técnico:

  • Qué motor de IA vas a usar: Google Gemini (integrado en AI Studio) es una opción robusta y gratuita para comenzar. También puedes cambiar a modelos de OpenAI, Anthropic u OpenRouter si prefieres o necesitas otra API.
  • Si quieres mantener todo local o usar un entorno en la nube. DYAD facilita trabajar localmente pero puedes conectarlo con GitHub y desplegar en Vercel o similares.
  • Elegir la región del servidor de Supabase cercana a tu público para latencia optimizada.

⬇️ Paso 1: Generar el proyecto base con Google AI Studio

Google AI Studio puede crear aplicaciones web de ejemplo a partir de plantillas. Para este flujo usé una plantilla de red social básica que incluye registro, login y feed de publicaciones.

Pasos resumidos:

  1. Ir a https://aistudio.google.com.
  2. Seleccionar una plantilla o pegar el diseño que quieres que la IA genere.
  3. Hacer clic en «Build» para que la plataforma construya y muestre el código y una vista previa.

Verás cómo la herramienta comienza a programar y aparecerá una vista previa con el frontend generado.

La interfaz muestra el progreso y el código generado. Cuando termine, puedes abrir la vista previa completa para interactuar con el prototipo.

💾 Paso 2: Descargar el proyecto desde AI Studio

Una vez que la aplicación base está lista en AI Studio, lo siguiente es descargar el proyecto para poder trabajarlo localmente e integrarlo con una base de datos real.

  1. En el proyecto de AI Studio, buscar el botón para descargar la aplicación y descargar el ZIP del proyecto.
  2. Descomprimir la carpeta en tu máquina.

Una vez descomprimido tendrás una carpeta con todo el código generado automáticamente por AI Studio.

🛠️ Paso 3: Instalar y configurar DYAD (herramienta local)

DYAD es la pieza que facilita importar el proyecto generado y trabajar con él en tu máquina sin complicaciones. Se instala en Windows, Mac o Linux y ofrece un flujo de tres pasos: instalar Node, seleccionar la API key del modelo y compilar/ejecutar la app localmente.

Pasos resumidos:

  1. Descargar DYAD desde https://www.dyad.sh/ (enlace directo).
  2. Ejecutar el instalador y permitir la ejecución si el sistema operativo advierte sobre la procedencia del archivo.
  3. Seguir las instrucciones: el instalador te pedirá instalar Node.js (si no lo tienes) y te permitirá configurar una API key para el modelo de lenguaje.

El instalador ofrece versiones para distintos sistemas. No necesitas una versión pro para este flujo; la versión gratuita es suficiente.

Durante la configuración DYAD te pedirá instalar Node.js. Si no aparece automáticamente, puedes ir manualmente a https://nodejs.org y descargar la versión recomendada.

🔑 Paso 4: Obtener y configurar la API Key de Google Gemini

Para usar el modelo de lenguaje en el proyecto (por ejemplo, para funciones avanzadas en el chat o generación de contenido), necesitas una API key de la cuenta de Google AI Studio o del servicio de modelo que elijas.

Procedimiento:

  1. Desde DYAD, en la sección de configuración de proveedor de IA, elegir Google Gemini API.
  2. DYAD abrirá AI Studio o el panel correspondiente donde podrás obtener una API key con el botón «Get API Key».
  3. Crear la clave y copiarla. No es necesario añadir tarjeta si solo usas las opciones gratuitas disponibles durante la configuración inicial.
  4. Pegar la API key en la sección de variables de entorno de DYAD y guardar.

Interfaz de Google AI Studio mostrando el cuadro modal 'Crea una clave nueva' para la API Gemini

La API key se pega en la configuración del proyecto dentro de DYAD. Guarda para que el proyecto pueda acceder a los modelos de Gemini y ejecutar funcionalidades que dependan de la IA.

📥 Paso 5: Importar el proyecto de AI Studio a DYAD

Con DYAD instalado y la API key configurada, importa la carpeta del proyecto descargado desde AI Studio.

  1. Abrir DYAD y elegir «Import app» o «Import project».
  2. Seleccionar la carpeta raíz del proyecto descomprimido.
  3. Aplicar cambios que DYAD pueda solicitar (por ejemplo, reglas o ajustes automáticos) y permitirlos.

Interfaz de DYAD mostrando el panel de chat a la izquierda y la vista previa del login de la app SocialConnect a la derecha

DYAD procesará el proyecto y generará archivos necesarios para ejecutar localmente. Confirma cualquier cambio de reglas o permisos que solicite la herramienta.

🔧 Paso 6: Configurar variables de entorno en DYAD

Antes de ejecutar o compilar, asegúrate de que todas las variables de entorno necesarias estén definidas. La más importante es la API key de Gemini, pero pueden existir otras como claves de servicio para Supabase, claves de terceros, etc.

  • En DYAD, ir a Configure -> Environment Variables.
  • Pegar la API key de Gemini en la variable correspondiente.
  • Guardar y volver a reconstruir la aplicación en DYAD si te lo solicita.

Interfaz de DYAD mostrando el formulario de Environment Variables con GEMINI_API_KEY y campo placeholder

Guradar estas variables evita errores en tiempo de ejecución y permite a la aplicación comunicarse con APIs externas sin exponer directamente las claves en el código.

🔗 Paso 7: Conectar Supabase en un par de clicks

Supabase es el reemplazo moderno y sencillo para una base de datos + autenticación similar a Firebase. La integración con DYAD y la app generada por AI Studio puede hacerse con muy pocos clics.

Resumen del flujo:

  1. Desde el panel del proyecto en DYAD hacer clic en «Connect Supabase».
  2. Si no tienes cuenta en Supabase, registrarte en https://supabase.com.
  3. Autorizar la conexión (DYAD solicitará permisos a través de OAuth o un token según el flujo).
  4. Crear un nuevo proyecto en Supabase con el nombre deseado y la región más cercana a tu audiencia.
  5. Configurar la autenticación para permitir registro de usuarios (puedes desactivar confirmación de correo temporalmente para pruebas).

Pantalla de Supabase para autorizar acceso API a Dyad con la lista de permisos y el botón 'Authorize Dyad' resaltado, lista para confirmar la vinculación.

Si autorizas desde tu cuenta de GitHub o directamente desde Supabase, DYAD detectará el proyecto y te preguntará qué proyecto enlazar.

Pantalla de Supabase con el nombre del proyecto 'tutorial1002', contraseña enmascarada y la región 'South America (São Paulo)' seleccionada.

Crear el proyecto en Supabase es sencillo: elegir nombre, generar contraseña (guárdala para emergencias) y elegir la ubicación de los datos.

✅ Paso 8: Probar registro y login

Con Supabase conectado, la aplicación generada ya puede usar la autenticación real y persistir usuarios en la base de datos.

  1. Reconstruir (rebuild) la app en DYAD para aplicar los cambios de integración con Supabase.
  2. Probar el formulario de registro (Sign up) en la interfaz generada. Si todo está bien, el usuario aparecerá en el panel de Supabase -> Authentication -> Users.
  3. Iniciar sesión con el mismo usuario en la app para comprobar que la autenticación funciona y la sesión se mantiene.

Feed principal de SocialConnect tras iniciar sesión con campo para publicar y mensaje 'No hay publicaciones para mostrar'

Al registrarte verás que el usuario aparece en Supabase y que la app admite login sin necesidad de código adicional por tu parte.

✍️ Paso 9: Publicar posts y crear tablas automáticamente

La plantilla de red social incluye la lógica para crear posts y relaciones típicas (posts, likes, comentarios, solicitudes de amistad). Al conectar Supabase, la aplicación puede crear las tablas necesarias automáticamente mediante scripts SQL que vienen con el proyecto o con la ayuda de DYAD.

Proceso:

  1. Desde la app, iniciar sesión y publicar un mensaje en el feed.
  2. Revisar la sección Database en Supabase para comprobar que se crearon tablas como posts, profiles, likes, comments y friend_requests.
  3. Verificar registros: el post que publicaste debe aparecer con created_at y author_id relacionados al perfil del usuario.

Panel de DYAD mostrando 'Paso 1: Crear las tablas en Supabase' con múltiples entradas SQL marcando la creación de tablas

La app realiza operaciones SQL estándar para crear relaciones y registros. Verás columnas como id, created_at, author_id y el texto del post en la tabla posts.

Editor de tabla de Supabase mostrando un registro con el texto 'hola mundo!' en la tabla posts

Este es el momento en que compruebas que el post «Hola mundo» o el mensaje que hayas publicado realmente se guardó en la base de datos.

📚 Estructura típica de la base de datos

Entender las tablas y sus relaciones te ayudará a ampliar la app más adelante. Ejemplo de estructura generada por la plantilla:

  • profiles: información de usuario (id, nombre, correo, avatar, etc.).
  • posts: cada post tiene id, author_id, content, created_at.
  • likes: relación many-to-many que liga user_id con post_id y un timestamp.
  • comments: comentarios con su autor y relación al post.
  • friend_requests: solicitudes de amistad con estados y referencias a usuarios.

Conceptos clave:

  • El campo id es un identificador único para cada fila.
  • El campo created_at registra la fecha y hora exacta en que se creó el registro y es útil para ordenar feeds o auditar acciones.
  • Las relaciones se hacen mediante foreign keys (ej. author_id en posts referencia a profiles.id).

Lo único que necesita una tabla de likes es relacionar un usuario con un post; no necesita texto. El timestamp indica cuándo ocurrió la acción.

🤖 Modelos y opciones de IA

La plantilla utiliza por defecto el modelo que configuraste (por ejemplo, Gemini). Desde DYAD puedes cambiar al proveedor que prefieras: OpenRouter, OpenAI, Anthropic, o incluso un modelo local si tienes el hardware necesario.

Consideraciones:

  • Modelos en la nube (Gemini, OpenAI, Anthropic) son más sencillos y no requieren infraestructura local potente.
  • Un modelo local como Llama o similares requiere GPU potente y configuración avanzada.
  • DYAD permite configurar modelos custom si tienes una API propia o un proveedor menos conocido.

Menú 'Cloud Models' en DYAD abierto con el submenú 'Google Models' visible y opciones 'Gemini 2.5 Pro' y 'Gemini 2.5 Flash'.

En la interfaz verás las opciones para seleccionar el proveedor de modelo y cambiar la API key si decides migrar.

🚀 Publicar la app: GitHub y Vercel

Cuando estés listo para que otros prueben la aplicación, puedes sincronizarla con GitHub directamente desde DYAD y desplegar en plataformas como Vercel. El proceso suele ser tan simple como:

  1. Conectar tu cuenta de GitHub desde DYAD.
  2. Subir el repositorio generado.
  3. Configurar variables de entorno en Vercel (misma API key y credenciales de Supabase) y desplegar.

El despliegue automático te permitirá testear la app con usuarios reales y recibir retroalimentación. También facilita compartir tu trabajo como demo o MVP.

⚠️ Errores comunes y cómo evitarlos

Al integrar varias herramientas pueden surgir pequeños problemas. Aquí algunos y cómo resolverlos:

  • No reconoce el instalador de DYAD en Windows: Haz clic en «Más información» y permitir la ejecución; es seguro si lo descargaste de la web oficial.
  • Node.js no instalado: DYAD suele guiarte a la instalación, pero también puedes descargar Node desde https://nodejs.org manualmente.
  • API key incorrecta o no guardada: Verifica que pegaste la clave en la sección de environment variables y que guardaste antes de reconstruir la app.
  • No aparecen tablas en Supabase: Asegúrate de que la app haya ejecutado los scripts de migración o permisos; reconstruye la app en DYAD y revisa logs para detectar errores SQL.
  • Problemas de CORS o endpoints: Revisa la configuración de API y las variables de entorno; en muchos casos falta una URL o clave que impide la comunicación entre frontend y backend.

💡 Consejos prácticos para avanzar rápido

  • Para pruebas tempranas, desactiva la confirmación de correo en Supabase para ahorrar pasos y acelerar el testeo.
  • Usa regiones cercanas para Supabase si tu audiencia está en una zona geográfica concreta.
  • Guardar contraseñas, claves y endpoints en un gestor de contraseñas o en variables de entorno para facilitar la migración a producción.
  • Si vas a abrir el proyecto a colaboradores, añade un README con los pasos mínimos para instalar Node, importar y configurar DYAD y crear el proyecto de Supabase.

🔎 Ejemplo práctico: flujo completo paso a paso

Aquí una checklist rápida que puedes seguir sin saltarte pasos:

  1. Generar project en Google AI Studio y descargar el ZIP.
  2. Instalar DYAD desde https://www.dyad.sh/ y ejecutar el instalador.
  3. Instalar Node.js si DYAD lo solicita (https://nodejs.org).
  4. Obtener API key de Gemini en AI Studio y pegarla en DYAD (Environment Variables).
  5. Importar la carpeta del proyecto a DYAD y permitir cambios sugeridos por la herramienta.
  6. En DYAD, usar «Connect Supabase» y crear un nuevo proyecto en Supabase (https://supabase.com).
  7. Rebuild en DYAD, registrarte en la app y verificar usuarios en Supabase -> Authentication.
  8. Publicar un post y comprobar que aparece en Supabase -> Database -> posts.
  9. Si todo funciona, subir a GitHub y desplegar en Vercel configurando variables de entorno para producción.

📎 Recursos y enlaces útiles

Enlaces directos para ahorrar tiempo:

  • Google AI Studio: https://aistudio.google.com
  • DYAD (descarga directa): https://www.dyad.sh/
  • Supabase: https://supabase.com
  • Node.js: https://nodejs.org
  • Hosting con descuento: https://hostinger.com/rodrigo

🔁 Qué sigue después de tener tu MVP

Una vez el MVP está corriendo, hay varias direcciones lógicas para evolucionar la aplicación:

  • Agregar validaciones y seguridad: confirma emails, habilita autenticación multifactor y revisa reglas de acceso en Supabase.
  • Crear migraciones controladas y un pipeline CI/CD para despliegues automáticos desde GitHub.
  • Optimizaciones de rendimiento: paginación del feed, índices en la base de datos y almacenamiento de assets en un CDN.
  • Monitoreo y logs: añadir herramientas para medir uso, errores y latencia.

📌 Conclusión

Combinar Google AI Studio para generar el esqueleto de la aplicación, DYAD para gestionarla localmente y Supabase para la base de datos es una manera poderosa y gratuita de construir prototipos y MVPs funcionales en muy poco tiempo. El flujo elimina gran parte de la fricción inicial: generación de interfaz, configuración del backend y persistencia de datos. Con unos pasos adicionales puedes pasar de un prototipo en tu máquina a una aplicación accesible públicamente.

Si te interesa experimentar, sigue los enlaces proporcionados y prueba este flujo con una plantilla pequeña. Con práctica, podrás adaptar la arquitectura a proyectos más complejos y escalar hacia producción cuando lo necesites.

🖼️ Capturas y puntos clave del proceso

A continuación se incluyen capturas ubicadas en los momentos clave para que puedas comparar con tu propia ejecución.

Interfaz principal de Google AI Studio mostrando la vista previa y un ejemplo de código

📣 Última nota

Este método prioritiza velocidad y facilidad para obtener resultados rápidos. Más adelante podrás introducir mejoras de seguridad, optimización y personalización. Comenzar con herramientas que reduzcan la fricción te permite enfocarte en la experiencia del usuario y validar hipótesis sin invertir semanas en infraestructura.

Entradas relacionadas