Cómo lanzar tu app web de tareas pendientes con IA

1. Introducción

Descripción general

¿Dónde comienza la creación con IA hoy en día? Para la mayoría de nosotros, todo comienza con una simple búsqueda o un prototipo. Google AI Studio ofrece un potente modo de compilación (a menudo denominado "vibe coding") que te permite diseñar, probar y compilar aplicaciones web de full stack con la generación de código impulsada por los modelos de Gemini.

En este codelab, compilarás una aplicación de tareas colaborativa con una base de datos de Firestore para el almacenamiento persistente y Firebase Authentication para los accesos de usuarios. El agente de AI Studio configurará todos los servicios de backend y escribirá el código de interacción de frontend y de base de datos. Una vez que la app esté lista, la implementarás directamente en Cloud Run con un solo clic.

Actividades

  • Indícale a Google AI Studio que cree un prototipo de una aplicación web de lista de tareas colaborativa.
  • Configura y habilita la integración de Firebase para aprovisionar una base de datos de Firestore y configurar la autenticación de Acceso con Google.
  • Prueba la aplicación en la zona de pruebas de la vista previa interactiva.
  • Implementa la aplicación en Cloud Run directamente desde la IU de Google AI Studio.

Qué aprenderás

  • Cómo usar el modo de compilación de Google AI Studio para crear rápidamente un prototipo de servicio de pila completa con lenguaje natural
  • Cómo Google AI Studio configura automáticamente las integraciones de Firebase Firestore y Authentication
  • Cómo implementar tu aplicación de AI Studio como un contenedor sin servidores en Cloud Run
  • Cómo inspeccionar los registros de la base de datos y el estado de seguridad dentro de Firebase console

2. Configuración del proyecto

Antes de lanzar AI Studio, verifica el estado de tu cuenta y los requisitos previos.

Información de la Cuenta de Google y el nivel

  1. Si aún no tienes una Cuenta de Google, créala.
    • Nota: Si es posible, usa una Cuenta de Google personal para este lab. Es posible que las cuentas de grupo, corporativas o educativas apliquen políticas de Workspace que inhabiliten las funciones experimentales o las integraciones en la nube.
  2. Revisa los detalles de facturación de las implementaciones:
    • Nivel inicial de Google Cloud: Permite publicar hasta dos aplicaciones de pila completa en una región seleccionada sin costo, sin necesidad de establecer una cuenta de facturación de Google Cloud completa.
    • Implementación estándar: Se conecta a un proyecto pagado existente de Google Cloud y expande los límites de almacenamiento, los recursos de CPU y las APIs.

3. Crea una app de tareas pendientes en el modo de compilación de AI Studio

Creemos el shell de la aplicación y solicitemos al asistente de código basado en IA que compile las capas de seguridad y persistencia.

  1. Navega al panel de apps de Google AI Studio y haz clic en Nueva app.
  2. En el cuadro de instrucciones del chat, ingresa la descripción de tu aplicación de tareas pendientes: 
    Build a collaborative to-do list application using Firebase as a backend. Users must be able to securely sign in using Google Sign-In, view their personal tasks, add new task items, toggle status as completed, and delete tasks. The database must isolate tasks so users can only view and modify their own records.
  3. Haz clic en Compilar para iniciar el proceso de generación de la aplicación.

Cuando el agente de AI Studio reconoce la necesidad de almacenamiento de bases de datos y acceso seguro del usuario, activa el flujo de configuración automatizado de Firebase.

  1. Después de aproximadamente un minuto, aparecerá en el espacio de trabajo una tarjeta de integración para habilitar Firebase.
  2. Haz clic en el botón Habilitar Firebase para confirmar y aceptar las Condiciones del Servicio.
  3. El agente ejecutará la configuración en segundo plano. Detrás de escena:
    • Se aprovisiona una instancia de base de datos de Firestore.
    • Firebase Authentication está habilitado con Acceso con Google habilitado.
    • Se establece una configuración de cuenta de servicio (p.ej., se crea src/lib/firebase.ts que contiene credenciales de la API).
    • Se agrega un firestore.rules que contiene límites de seguridad predeterminados (reglas de aislamiento del usuario).

4. Pruebe y repita.

Antes de lanzar el servicio en vivo, ejecuta verificaciones de validación en la vista previa interactiva.

  1. Abre el panel de vista previa en Google AI Studio.
  2. Haz clic en el botón Acceder para activar la autenticación de Acceder con Google del entorno de pruebas.
    • Nota sobre la corrección de errores: Durante la generación o las pruebas, es posible que, en ocasiones, se produzcan problemas de tiempo de ejecución, errores de compilación o fallas de permisos de Firestore debido a una desalineación de las reglas de seguridad. Si esto sucede, AI Studio mostrará un botón Fix en el chat, lo que te permitirá pedirle al agente que diagnostique y repare el problema automáticamente.
    Ubicación del botón de corrección de Google AI Studio
  3. Una vez que accedas, agrega varias tareas (p.ej., "Revisar la documentación de Cloud Run", "Completar el codelab").
  4. Marca algunas tareas como completadas y borra una para asegurarte de que los controladores del cliente y el estado de la base de datos se actualicen correctamente.
  5. Si quieres cambiar el diseño o el comportamiento, dale instrucciones al agente a través de la ventana de chat. Por ejemplo:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. Espera a que el agente actualice la base de código y revisa el navegador de vista previa para ver las actualizaciones.

5. Implementa en Cloud Run

Una vez que tu prototipo sea completamente funcional, impleméntalo como un servicio público en Cloud Run.

  1. En la esquina superior derecha de Google AI Studio, haz clic en el botón Publicar para iniciar el asistente de implementación.Ubicación del botón Publicar de Google AI Studio
  2. Haz clic en Comenzar para configurar tu proyecto de Google Cloud.
    • Verifica que el menú desplegable del proyecto de Google Cloud de destino coincida con el proyecto que asociaste a tu espacio de trabajo.
    • AI Studio generará automáticamente un identificador de servicio único para la instancia de Cloud Run.
  3. Si es la primera vez que realizas una implementación y usas parámetros estándar de Google Cloud, es posible que se te solicite que especifiques un tipo de organización y proporciones detalles de facturación.
  4. Haz clic en Publicar app.
  5. Los pasos de compilación y registro del contenedor, y de implementación del servicio se realizan en segundo plano. Este proceso suele completarse en un plazo de 2 a 4 minutos.
  6. Cuando finalice la implementación, copia la URL de la app generada y visita el vínculo de la aplicación en vivo en una pestaña del navegador.
  7. Prueba la aplicación web en vivo en tu navegador.

6. Inspecciona en Firebase console

Echa un vistazo a los detalles para ver cómo se hace un seguimiento de los esquemas de datos y los usuarios.

  1. Ve a Firebase console.
  2. Selecciona tu proyecto (que tiene la etiqueta AI Studio o el ID del proyecto que vinculaste manualmente).
  3. En el panel de navegación de la izquierda, selecciona Compilación > Base de datos de Firestore:
    • Consulta las colecciones y los documentos de la base de datos que creó tu aplicación.
    • Verifica que cada documento tenga un ID de propietario que coincida con las credenciales de autenticación del usuario activo.
  4. Selecciona la pestaña Seguridad en el panel de Firestore para revisar las directivas de seguridad generadas automáticamente que limitan los permisos de lectura y escritura a los propietarios de documentos verificados.
  5. Navega a Seguridad > Autenticación para ver la lista de credenciales de usuario activas que se completaron durante las pruebas de acceso.

7. Limpieza

Para evitar cargos de facturación imprevistos o liberar espacio en los recursos de tu espacio de trabajo, haz lo siguiente:

  1. En Google AI Studio, ve a la página Apps.
  2. Busca tu aplicación en la cuadrícula o la lista.
  3. Haz clic en el ícono de papelera para borrar el estado de la app y anular la publicación del servicio de Cloud Run.
  4. Si realizaste la implementación con un proyecto estándar y quieres cerrar todos los recursos por completo, ve a la configuración del proyecto de la consola de Google Cloud y borra el proyecto subyacente.

8. Conclusión

¡Felicitaciones! Diseñaste, desarrollaste e implementaste una aplicación web colaborativa de pila completa directamente desde Google AI Studio.

Más información