Lanza tu videojuego basado en la Web con IA

1. Introducción

Descripción general

¿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 full stack con la generación de código impulsada por los modelos de Gemini.

En este codelab, crearás un videojuego por turnos basado en la Web con una base de datos de Firestore con Event Sourcing (para conservar las acciones del juego como una secuencia de eventos para que los jugadores puedan ver el historial de partidas y volver a turnos anteriores) y Firebase Authentication para los accesos de los usuarios. El agente de AI Studio configurará todos los servicios de backend y escribirá el frontend, la lógica de Event Sourcing y el código de interacción de la base de datos. Una vez que la app esté lista, la implementarás directamente en Cloud Run con un solo clic.

Versión final de un sitio web de portfolio

Actividades

  • Indica a Google AI Studio que cree un prototipo de una aplicación web de videojuego multijugador por turnos.
  • Implementa la compatibilidad con un código de juego corto y compartible o un vínculo de unión para permitir que los amigos se conecten a la misma partida.
  • Implementa el almacenamiento de la base de datos de Firestore con un patrón de Event Sourcing para hacer un seguimiento de los historiales de partidas y permitir el viaje en el tiempo del juego (deshacer o volver a reproducir turnos).
  • 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 juego de full stack con lenguaje natural
  • Cómo implementar un patrón arquitectónico de Event Sourcing con Cloud Firestore para almacenar el historial del juego
  • 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 de Google y del nivel

  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 full stack en una región seleccionada sin costo, sin establecer una cuenta de facturación de Google Cloud completa.
    • Implementación estándar: Se conecta a un proyecto de Google Cloud pagado existente y expande los límites de almacenamiento, los recursos de CPU y las APIs.

3. Crea un videojuego por turnos 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 las capas de seguridad, la lógica de juego y la persistencia de Event Sourcing.

  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 videojuego por turnos: 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    Este vínculo completará automáticamente el cuadro de instrucción.
  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 la 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 habilitar Firebase en el espacio de trabajo.
  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 iniciar 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 Acceder 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 conectado, inicia una nueva partida, copia el código de juego corto generado o el vínculo para compartir y verifica que se pueda usar para unirte a la partida.
  4. Realiza varios movimientos y verifica que el historial de partidas se renderice correctamente.
  5. Intenta volver a los turnos anteriores de la partida. Asegúrate de que el tablero o el estado se actualicen para reflejar ese punto anterior en el historial del juego y verifica que puedas restablecer o revertir ese estado.
  6. Si deseas cambiar el estilo o el comportamiento, indica al agente a través de la ventana de chat. Por ejemplo:
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. 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.
    • De manera opcional, puedes especificar un prefijo de URL .ai.studio personalizado (p.ej., your-portfolio-name.ai.studio) como parte de la configuración de implementación.
  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 detrás de escena 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 de forma manual).
  3. En el panel de navegación de la izquierda, selecciona Compilar > 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 deseas 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 un videojuego por turnos directamente desde Google AI Studio.

Visita este vínculo para reclamar la insignia Completed Builder Journey.

Para continuar tu recorrido, ve a goo.gle/builders para el siguiente lab.

Más información