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

1. Introducción

Descripción general

¿Por dónde comienza la creación con IA hoy? Para la mayoría de nosotros, comienza con una consulta o un prototipo simple. 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 pila completa con la generación de código impulsada por los modelos de Gemini.

En este codelab, compilarás una aplicación de tareas pendientes 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

  • Indica a Google AI Studio que cree un prototipo de una aplicación web de lista de tareas pendientes 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 el entorno 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 un 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 iniciar AI Studio, verifica el estado de tu cuenta y los requisitos previos.

Información de la cuenta y el nivel de Google

  1. Si aún no tienes una Cuenta de Google, crea una.
    • Nota: Si es posible, usa una Cuenta de Google personal para este lab. Las cuentas grupales, corporativas o escolares pueden aplicar 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 establecer una cuenta de facturación completa de Google Cloud.
    • Implementación estándar: Se conecta a un proyecto existente de Google Cloud pagado 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 de IA que compile capas de seguridad y persistencia.

  1. Navega al panel de apps de Google AI Studio y haz clic en New App.
  2. En el cuadro de instrucción de 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 Build para iniciar el proceso de generación de la aplicación.

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

  1. Después de aproximadamente un minuto, aparecerá una tarjeta de integración para Enable Firebase en el espacio de trabajo.
  2. Haz clic en el botón Enable Firebase para confirmar y aceptar las Condiciones del Servicio.
  3. El agente ejecutará la configuración en segundo plano. En segundo plano:
    • 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 dentro de Google AI Studio.
  2. Haz clic en el botón Login para activar la autenticación de Acceso 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, enfrentes 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 muestra un botón Fix en el chat, lo que te permite pedirle al agente que diagnostique y repare automáticamente el problema.
    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. Activa algunas tareas como completadas y borra una para asegurarte de que los controladores del cliente y las actualizaciones de estado de la base de datos se realicen correctamente.
  5. Si quieres cambiar el estilo o el comportamiento, indica 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 Publish para iniciar el asistente de implementación.Ubicación del botón Publicar de Google AI Studio
  2. Haz clic en Get Started para configurar tu proyecto de Google Cloud.
    • Verifica que el menú desplegable Google Cloud Project de destino coincida con el proyecto que asociaste con 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 la 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 Publish App.
  5. Los pasos de compilación del contenedor, registro del contenedor y la implementación del servicio se realizan en segundo plano. Por lo general, este proceso se completa en 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 en segundo plano para ver cómo se realiza el seguimiento de los esquemas de datos y los usuarios.

  1. Ve a la Firebase Console.
  2. Selecciona tu proyecto (que tiene la etiqueta AI Studio o el ID del proyecto vinculado 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 creados por 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 propagaron 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 la 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 apagar 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 de pila completa colaborativa directamente desde Google AI Studio.

Para obtener la insignia por completar un lab de desarrolladores y encontrar otro lab para continuar tu recorrido, ve a goo.gle/builders.

Más información