5 Preguntas que me hacen TODO el tiempo sobre crear apps web con IA

Hay preguntas que se repiten tanto que terminan formando la columna vertebral de cualquier proyecto que combine desarrollo web con inteligencia artificial. Aquí comparto mi enfoque, las soluciones que utilizo y los trucos que me han salvado horas de frustración. Todo en un tono práctico y directo, con ejemplos reales y pasos que puedes aplicar hoy mismo.

Tabla de contenidos

🔎 ¿Supabase o MySQL? No es solo elegir una base de datos

La primera duda que surge siempre es la misma: ¿por qué usar Supabase en vez de la base de datos SQL de Hostinger (MySQL)? La respuesta corta es que Supabase no es solo una base de datos; es una plataforma completa que actúa como backend as a service sobre PostgreSQL.

MySQL es un motor tradicional de gestión de bases de datos relacionales. Si tu proyecto es un stack clásico con PHP y te sientes cómodo programando la capa de autenticación, lógica y demás directamente, MySQL sigue siendo una excelente opción. PHP y MySQL han sido pareja por décadas y funcionan muy bien cuando todo corre en un mismo servidor compartido.

Supabase, por otro lado, te ofrece mucho más fuera de la caja:

  • Autenticación lista para usar: gestión de usuarios, sesiones y permisos sin tener que programarlo desde cero.
  • Funciones del lado del servidor: puedes ejecutar código en la infraestructura de Supabase (servidor del proveedor) para tareas como llamadas a APIs, lógica de negocio o transformaciones de datos.
  • Realtime y suscripciones: muy útil para aplicaciones que requieren actualizaciones en vivo.
  • Integraciones con servicios y SDKs que aceleran el desarrollo de una app moderna.

Si tu proyecto es una aplicación web moderna que conectará con modelos de IA o múltiples servicios externos, Supabase te adelanta mucho trabajo y reduce la complejidad de mantenimiento. Si lo que buscas es algo sencillo, económico y que «encaje» con PHP clásico, MySQL en Hostinger sigue siendo válido.

Captura de YouTube Studio en la sección Comunidad con comentarios sobre Supabase y una superposición circular del presentador hablando.

⚠️ ¿Por qué mi Supabase se pone inactivo y deja de funcionar?

Un problema recurrente: la app se «duerme» y al entrar al sitio aparece una página en blanco. ¿Qué pasa? Si estás en el plan gratuito de Supabase, es normal que proyectos inactivos sin tráfico queden «hibernando». La plataforma prioriza recursos y busca optimizar costos.

Algunas claves para manejar esto:

  • Llevar tráfico real. Si tu aplicación tiene usuarios, el problema se resuelve naturalmente. Supabase está pensado para tener apps activas.
  • Usar pings periódicos. Implementar un pequeño bot o cron que haga peticiones periódicas a tu endpoint para evitar que la instancia se desactive. Hay servicios gratuitos y scripts simples que hacen ping cada pocos minutos.
  • Considerar un plan pago si el servicio es crítico. Invertir en infraestructura es parte del negocio cuando la app pasa de fase beta a producción.

Importante: cuando la app carga en blanco sin error visible, lo más probable es que falte una API Key o haya fallado una pre-llamada a un servicio externo que bloquea la carga inicial. Revisa la consola del navegador para ver errores. Ahí normalmente verás indicios claros, por ejemplo una respuesta 401/403 o un mensaje sobre falta de credenciales.

YouTube Studio - comentario de usuario mencionando Supabase inactivo y página en blanco

🧭 Flujo recomendado: Google AI Studio para prototipos y Antigravity para desarrollo

Una duda común es por qué comenzar en Google AI Studio y después pasar a Antigravity, si ambos pueden usar el modelo Gemini 3 Pro y la misma API Key. Mi proceso es un flujo de prototipado rápido seguido de desarrollo estructurado.

Así es como trabajo habitualmente:

  1. Ideación y conversación con la IA. Antes de escribir código, hablo con varios modelos o asistentes para darle forma a la idea. Esto incluye iterar prompts, obtener propuestas y definir la funcionalidad mínima viable.
  2. Prototipado en Google AI Studio. Es una herramienta más libre y menos rígida. Puedo abrir varias pestañas, duplicar aplicaciones y generar 3 o 4 variantes simultáneamente. Me quedo con la que mejor funciona como prototipo.
  3. Validación rápida de APIs. En AI Studio es cómodo explorar qué APIs usar y probar prompts con análisis de imágenes o procesamiento de texto sin preocuparse demasiado por límites de uso.
  4. Pasar a Antigravity para desarrollo. Una vez elegido el prototipo ganador, Antigravity es el entorno donde estructuro la app, controlo versiones, manejo despliegues y trabajo en detalles de producción.

Ventajas de comenzar en Google AI Studio:

  • Mayor libertad para explorar ideas sin la estructura rígida del framework de producción.
  • Límites de API más permisivos para pruebas.
  • Velocidad para generar varias alternativas y quedarse con la mejor.

Antigravity es excelente para cuando ya tienes una propuesta clara y necesitas:

  • Controlar dependencias y la arquitectura del proyecto.
  • Desplegar con prácticas más profesionales.
  • Integrar las API Keys, configuraciones y mejores patrones de seguridad.

Google AI Studio mostrando tarjetas de funcionalidades, un cursor sobre 'Analyze images' y el presentador en un recuadro circular.

🛠️ Google AI Studio no guarda cambios: trucos prácticos

Ocurre más de lo que parece: guardas cambios y la app no los refleja. Antes de perder la paciencia, prueba este flujo:

  1. Haz cambios en la aplicación.
  2. Di explícitamente: implementa los cambios. AI Studio a veces muestra que hizo la tarea pero no actualiza los archivos en realidad. Si no ves los archivos modificados en la sección de cambios, significa que no se aplicaron.
  3. Si no funciona tras intentarlo una vez, no te encapriches. Resetear la conversación y empezar de nuevo suele ser la forma más rápida de recuperar coherencia.
  4. Usa los botones de revertir si las modificaciones llevaron la app a un estado peor. Identifica el punto donde todo funcionaba y vuelve a él.

Consejo: evita insistir con variaciones agresivas cuando la IA empieza a generar resultados aleatorios. Cuando la conversación «se ensucia», la probabilidad de que empeores la app aumenta. Mejor retrocede y retoma el estado limpio.

Google AI Studio con el panel Code Assistant a la izquierda, vista previa de la app a la derecha y el texto 'implementa los cambios' visible en la caja de entrada inferior.

🔁 Cómo modificar una página web ya publicada (deploys automáticos)

Actualizar una web publicada es un proceso estándar si seguiste buenas prácticas desde el inicio. La idea clave es trabajar con control de versiones y despliegues automáticos.

Pasos típicos:

  1. Asegúrate de que tu proyecto esté enlazado con un repositorio en GitHub.
  2. Guarda los cambios en la herramienta donde desarrollas (Google AI Studio, Antigravity u otra).
  3. Haz commit y push de esos cambios al repositorio.
  4. Las plataformas modernas como Vercel, Netlify o Hostinger Cloud detectan el push y despliegan automáticamente la nueva versión.

Si usas la función «Guardar en GitHub» desde la herramienta de prototipado, ese paso ya está cubierto: al guardar vas a ver «cambios pendientes» y un botón para enviar esos cambios al repositorio. Una vez en GitHub, el deploy automático se encarga del resto.

Si prefieres mayor control, siempre puedes ir a la sección Git de la herramienta y crear manualmente commits con mensajes claros. Esa trazabilidad ayuda cuando necesitas revertir o auditar cambios.

YouTube Studio en modo oscuro con la sección Comentarios visible y el presentador en un recuadro circular

💸 ¿Dónde está el verdadero costo en apps con IA?

Cuando se habla de costos en apps que usan IA, muchas veces la discusión se queda en la infraestructura del backend. Eso es comprensible, pero hay una realidad contundente: el verdadero costo recurrente suele ser el consumo de tokens.

Detalles a tener en cuenta:

  • Tokens son las unidades que consumen las llamadas a modelos de lenguaje y visión. Si tu app hace muchas inferencias por usuario o procesa imágenes grandes, el gasto sube rápido.
  • El backend (Supabase, MySQL, Hostinger) generalmente no es lo que descarrila el presupuesto en etapas tempranas; los tokens sí.
  • Planifica estrategias para optimizar tokens: cachear resultados, limitar llamadas por usuario, usar modelos más económicos cuando sea aceptable y agrupar consultas.

En resumen, la elección de Supabase u otra plataforma rara vez será la causa principal del sobrecosto. Revisa cómo y cuánto llamas a los modelos de IA.

🧰 Errores comunes y cómo diagnosticarlos

Cuando algo deja de funcionar, la consola del navegador es tu mejor amiga. Antes de entrar en pánico, revisa lo siguiente:

  • Errores de API Key: peticiones fallidas por falta de credenciales suelen arrojar 401 o mensajes claros en la consola.
  • Problemas de compilación: si el deploy es manual (por ejemplo en planes no optimizados para hosting estático), es posible que no se hayan copiado correctamente los archivos de la carpeta dist.
  • Pre-llamadas desde plataformas como Google AI Studio: si hay una llamada a una API en la carga inicial y falla, la app puede quedar bloqueada antes de mostrar contenido.
  • Mensajes invisibles: una página en blanco no siempre significa «sin errores». Abre la consola y copia el mensaje para analizarlo o consultarlo con la IA.

Si usas una IA para ayudarte en la resolución, pega el error exacto en la conversación. Muchas veces con ese único detalle la solución aparece rápido.

🧩 Prompts y prototipado: cómo estructurar tu idea antes de codificar

No empieces a programar sin primero convertir la inspiración en un prompt sólido. Mi flujo incluye un paso de conversación con distintos asistentes para moldear la idea. Esto se traduce en:

  • Definir la funcionalidad principal en una o dos frases.
  • Generar 3-4 variantes rápidas en Google AI Studio.
  • Comparar resultados y elegir la propuesta con mejor experiencia de usuario.
  • Documentar el prompt final y las decisiones arquitectónicas antes de pasar a Antigravity o al editor.

Este hábito evita re-trabajo y te permite iterar sobre prototipos comparables. Tener versiones paralelas te da la libertad de experimentar sin romper lo que ya funciona.

🔍 Casos concretos: cuándo elegir cada herramienta

A continuación una guía práctica según el tipo de proyecto:

Prototipo rápido / idea en pruebas

  • Google AI Studio: ideal por su rapidez y límites más permisivos.
  • Objetivo: validar concepto, UX y prompts.

Proyecto en crecimiento / MVP

  • Pasar a Antigravity para estructurar la app.
  • Usar Supabase para autenticación, funciones serverless y almacenamiento.
  • Vercel o Netlify para deploys automáticos desde GitHub.

Stack clásico / sitio con PHP

  • MySQL en Hostinger si quieres simplicidad y costes bajos.
  • Ideal para sitios donde no necesitas funciones serverless avanzadas.

📌 Checklist rápido antes del deploy

  1. ¿Están las API Keys configuradas en producción? Revisa variables de entorno.
  2. ¿Commit y push en GitHub hechos con mensajes claros?
  3. ¿Revisaste la consola para errores de pre-llamadas?
  4. ¿Hay un plan para manejar hibernación en Supabase (pings, plan pago)?
  5. ¿Estás cacheando respuestas de IA donde sea posible?

🤝 Buenas prácticas para escalar sin romper la billetera

Escalar una app que usa IA implica decisiones técnicas y de producto. Algunas recomendaciones sencillas que funcionan:

  • Rate limiting para usuarios y endpoints que consultan modelos caros.
  • Cacheo de resultados para respuestas que no cambian con frecuencia.
  • Métricas y logs para entender consumo de tokens y patrones de uso.
  • Pruebas A/B para probar modelos más económicos y comparar calidad vs coste.

💬 Frases útiles y directas para tus prompts

Al diseñar prompts, evita la ambigüedad. Algunas plantillas que uso:

  • «Actúa como un asistente que resume artículos en 3 puntos clave y añade un call to action.»
  • «Genera 5 variantes de texto para la landing enfocadas a startups, cada una con tono informal y 2 líneas.»
  • «Analiza esta imagen y devuelve etiquetas principales, un resumen de 20 palabras y un posible prompt para descripción.»

Guarda tus prompts finalizados en un archivo o en el repositorio para reproducibilidad. Eso hace más fácil iterar y delegar.

🔗 Recursos y enlaces mencionados

Playlist con tutoriales sobre crear apps web: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI

Hostinger con descuento aplicado: https://hostinger.com/rodrigo

🏁 Cierre: actitud práctica y foco en lo que importa

Construir apps web con IA no es magia: es iteración, herramientas y control de costos. Si quieres mi consejo práctico:

  • Prototipa rápido en Google AI Studio para explorar ideas.
  • Elige Supabase si quieres acelerar la parte de backend con autenticación y funciones listas.
  • Usa MySQL si tu proyecto encaja en un stack clásico con PHP y buscas simplicidad económica.
  • Cuida el consumo de tokens: ahí está la mayor parte del coste real en aplicaciones con IA.
  • Mantén tu flujo conectado a GitHub para despliegues automáticos y trazabilidad.

“Si ya tienes la idea, prueba varias versiones; quédate con la mejor y luego estructura para producción.”

Si sigues estos principios, vas a reducir fricción, acortar tiempos y evitar sorpresas de costo. Y lo más importante: vas a poder iterar sobre algo que funcione y entregue valor real.

Pantalla de Perplexity con la caja de búsqueda al centro y el presentador en un recorte circular, mostrando la interfaz de una herramienta de IA.