Guía de Despliegue Web App Real

Google AI Studio (Firebase Studio) + Firebase + Hostinger

¿Cómo construir y lanzar aplicaciones web reales?

Esta guía condensa el tutorial de Metics Media para construir aplicaciones full-stack funcionales en minutos. Aprende a utilizar la inteligencia artificial para programar el front-end, configurar Firebase de manera segura para la base de datos y almacenamiento, y desplegar en producción mediante GitHub y Hostinger con sincronización automática.

video_library

Video Original

Metics Media

schedule

Duración

42 Minutos

play_arrow

dns

Los 4 Pilares del Backend

Toda aplicación web real y segura en producción depende de estos cuatro conceptos principales, independientemente del nicho del proyecto:

Autenticación de Usuarios

Permite a los usuarios crear cuentas, iniciar y cerrar sesión. Asegura que cada usuario tenga una sesión privada.

Base de Datos (Firestore)

Guarda información y recuerda estados entre sesiones (datos de perfil, transacciones, fechas de registro, etc.).

Almacenamiento (Storage)

Guarda archivos pesados como imágenes, documentos o videos en la nube de forma segura y asociados al ID del usuario.

Conexión a la Interfaz (UI)

Vincula los elementos visuales (botones, formularios) con el backend. Es el pilar final que da vida a la app.

forum

Generador de Prompts Interactivo

La Fórmula de Prompts de 4 Partes es el método definitivo de Metics Media para estructurar instrucciones en la IA. Rellena los campos a continuación para generar instantáneamente tu prompt de desarrollo optimizado.

title Nombre de la Aplicación

description ¿Qué hace la aplicación? (1-2 líneas)

featured_play_list Características (Una por línea)

palette Estilo Visual y Colores

¿Incluye carga de archivos? (Firebase Storage)

smart_toy PROMPT OPTIMIZADO PARA IA STUDIO

timeline

Guía de Construcción Paso a Paso

ETAPA 1 schedule 00:30 - 03:11

Mapa de Ruta y Concepto

Antes de escribir código, se define el flujo de la aplicación. Para este ejemplo, construimos ClientVault (un portal seguro de intercambio de archivos entre freelancers y clientes).

Clave del flujo de trabajo: Utilizaremos la interfaz intuitiva de prompts en Google AI Studio (Firebase Studio) para generar la interfaz, conectarla a Firebase y finalmente llevarla a producción utilizando un servidor en la nube gestionado con Hostinger.

lightbulb

Consejo de Diseño: Mantén siempre la especificidad sobre el flujo de negocio antes de tocar la IA. Saber exactamente quién sube qué y quién puede verlo ahorra múltiples rondas de corrección.

ETAPA 2 schedule 03:11 - 07:43

Crear la App en Google AI Studio

Accede a aistudio.google.com y crea un nuevo proyecto web. Utiliza el generador del apartado anterior o copia el prompt de ejemplo.

Pega el prompt en la caja de texto. Google AI Studio analizará las 4 partes (Qué es, Qué necesita, Cómo luce, Backend) y generará los archivos correspondientes a la estructura del frontend (usando frameworks modernos como React o Vite).

Configuración de Firebase en AI Studio: Busca el botón o pestaña de Firebase Integration. AI Studio iniciará la generación del backend y te solicitará conectar una base de datos Firebase real.

ETAPA 3 schedule 07:43 - 13:44

Configuración de la Consola de Firebase

Abre console.firebase.google.com en una nueva pestaña y realiza los siguientes pasos obligatorios:

Crear Proyecto: Haz clic en "Crear proyecto" (o añade uno nuevo). Desactiva Google Analytics si deseas agilizar el proceso y crea el proyecto.
Habilitar Autenticación: Navega a la barra lateral izquierda, entra en Authentication, haz clic en "Comenzar", selecciona el proveedor Correo electrónico/Contraseña, actívalo y haz clic en Guardar.
Configurar Storage (Almacenamiento): Ve a Storage (Almacenamiento) en el menú lateral. Haz clic en "Comenzar", selecciona la ubicación del servidor de almacenamiento más cercana a tus usuarios, configúralo en Modo de producción y finaliza.

warning

Importante: Asegúrate de que tanto la autenticación por email como el Storage se hayan completado correctamente antes de regresar a Google AI Studio, de lo contrario la sincronización fallará.

ETAPA 4 schedule 13:44 - 16:04

Sincronización de Backend en AI Studio

Una vez configurado Firebase, debes notificar a AI Studio para que complete las conexiones. Copia y envía el siguiente prompt de sincronización:

PROMPT DE SINCRONIZACIÓN

Esto es lo que he configurado en la consola de Firebase:
1. Habilité la autenticación por correo electrónico/contraseña como proveedor de inicio de sesión
2. Configuré Firebase Storage con un bucket predeterminado en modo de producción

Por favor, asegúrate de que la función de carga de archivos de la aplicación esté completamente conectada a Firebase Storage y que el flujo de autenticación por correo electrónico/contraseña funcione correctamente tanto para el registro como para el inicio de sesión.

La IA conectará las credenciales a las variables de entorno, escribirá la lógica de carga usando SDKs oficiales de Firebase y actualizará la UI.

ETAPA 5 schedule 16:04 - 21:57

Flujo "Probar, Anotar y Corregir"

Ejecuta la vista previa interactiva integrada de tu aplicación en Google AI Studio (o Firebase Studio) y sigue rigurosamente esta metodología:

1. Prueba todo: Intenta registrarte con un correo ficticio, inicia sesión, sube un archivo de prueba, bórralo y cierra sesión.

2. Anota los errores: Si un botón no responde o la carga falla, no intentes arreglarlo de inmediato. Haz una lista de lo que está fallando.

3. Corrige un problema a la vez: Envía prompts cortos y específicos a la IA para solucionar cada error por separado. Esto evita bucles de errores cruzados.

ETAPA 6 schedule 21:57 - 28:34

Panel de Administración y Reglas de Seguridad

Para gestionar la aplicación, necesitas un panel de administración restringido únicamente a tu usuario administrador:

1. Ve a Firebase Console > Authentication > pestaña de Usuarios. Copia tu Identificador de usuario (UID).

2. Envía el prompt de desarrollo del dashboard a AI Studio pegando tu UID real en el campo correspondiente (puedes usar el generador del apartado inferior).

3. Configura las reglas del Storage manualmente: Las reglas de Firestore se sincronizan desde AI Studio, pero las de Storage deben aplicarse en la consola. Ve a la consola de Firebase > Storage > pestaña Rules (Reglas), pega el código generado abajo y haz clic en Publicar.

ETAPA 7 schedule 28:34 - 41:52

Publicar en GitHub y Desplegar en Hostinger

Lleva tu aplicación web al público y configúrala para que se actualice automáticamente en cada cambio:

Guardar en GitHub: En la barra de herramientas de la IA (Project IDX o Firebase Studio), haz clic en el icono de control de versiones (Git). Inicializa el repositorio local, conéctalo a tu cuenta de GitHub y publica las ramas en un repositorio privado o público.
Desplegar en Hostinger: Abre tu panel de control hPanel en Hostinger. Ve al menú Sitio Web > Git. Introduce la URL de tu repositorio de GitHub, selecciona la rama main y haz clic en desplegar.
Configurar Variables de Entorno en Hostinger: En los ajustes de despliegue en Hostinger, añade tres variables con tu Gemini API Key para permitir el funcionamiento de las funciones de IA:
- GEMINI_API_KEY
- GOOGLE_API_KEY
- VITE_GEMINI_API_KEY
(Consigue tu API Key en AI Studio API Keys)
Auto-Sync Webhook: Copia la URL del Webhook que te proporciona Hostinger en la sección de Git, ve a la configuración de tu repositorio en GitHub > Webhooks, añade un nuevo webhook pegando esa URL y actívalo. Ahora, cada vez que hagas git push en GitHub, Hostinger reconstruirá y actualizará tu web automáticamente.

admin_panel_settings

Generador de Reglas de Seguridad de Storage

Inserta tu User UID de administrador (obtenido en Firebase Console > Authentication > Users) para generar y copiar la regla de seguridad del almacenamiento de archivos. Esta regla asegura que solo tú y los propietarios de los archivos puedan leer los datos.

key Firebase User UID del Administrador

lock rules.storage

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read: if request.auth != null
        && (request.auth.uid == userId
        || request.auth.uid == 'REPLACE_WITH_YOUR_ADMIN_UID');
      allow write: if request.auth != null
        && request.auth.uid == userId;
    }
  }
}

error

Resolución de Errores Comunes

Filtra o busca las soluciones de los bloqueos típicos explicados en la guía de Elefante X 🐘:

Registro / Acceso

No puedo registrar usuarios ni iniciar sesión

Al intentar registrarse en la web de pruebas, la interfaz arroja un error de conexión con la autenticación de Firebase.

Solución: Ve a Firebase Console > Authentication > pestaña "Sign-in method" y asegúrate de que el proveedor "Correo electrónico/Contraseña" esté activado.

Storage

Las subidas de archivos fallan (Upload Fail)

Al presionar el botón de subir archivos, la barra de progreso se detiene en 0% o arroja un error en consola.

Solución: En Firebase Console > Storage, verifica que creaste el bucket y pásalo a plan Blaze en caso de ser necesario en tu región. Luego, envía el prompt de sincronización a AI Studio.

Admin Panel

El administrador no puede ver los archivos de otros usuarios

El administrador inicia sesión, accede al dashboard, ve la lista de emails pero al pulsar en ver archivos aparece vacío o con error de permisos.

Solución: Modifica la regla de Storage (en Firebase Console > Storage > Rules). Valida que reemplazaste "REPLACE_WITH_YOUR_ADMIN_UID" con tu UID exacto en el bloque de código de las reglas.

Despliegue

Pantalla en blanco (White Page) al desplegar la web

Después de desplegar correctamente en Hostinger mediante Git, el enlace del dominio muestra una pantalla blanca vacía.

Solución: Es un problema de la base del enrutador de Vite. Envía este prompt a la IA de AI Studio: 'Actualiza la configuración de Vite para que la base se establezca en / para el despliegue de producción.'. Luego haz commit a GitHub.

Despliegue

Los cambios en GitHub no se muestran en el sitio web live

Modificas el código en AI Studio / Firebase Studio, realizas un push a GitHub pero al refrescar tu dominio nada cambia.

Solución: Asegúrate de que configuraste correctamente el Webhook proporcionado por Hostinger en los ajustes de tu repositorio de GitHub. Espera de 1 a 2 minutos para que el servidor complete el rebuild.

Seguridad

La IA de AI Studio desconfiguró las reglas de seguridad

En una nueva iteración de cambios en la UI, el inicio de sesión se rompe porque la IA modificó el archivo de reglas locales.

Solución: Escribe un prompt recordándole el contexto: 'Asegúrate de que las reglas de seguridad de Firebase estén completamente actualizadas. Garantiza que mi ID de usuario administrador [UID] tenga acceso de lectura a todos los datos.'.

Recursos y Enlaces del Tutorial

Herramientas oficiales y utilidades externas recomendadas por Metics Media para el proyecto:

console.firebase.google.com