Vibe Code con Gemini en Google AI Studio

1. Descripción general

En este codelab, compilarás una aplicación web de "Snake & Beats", un juego retro de Snake con un reproductor de música integrado. Usarás Gemini para generar una aplicación de React de un solo archivo con una estética de neón y, luego, la controlarás por versión y la implementarás en Cloud Run.

Actividades

• Compilación y solicitud: Usa el modo "Compilación" de Google AI Studio para generar un juego funcional a partir de una sola instrucción.
• Refine with System Instructions: Haz una "prueba de ambiente" de tu IA estableciendo un arquetipo persistente para futuras ediciones.
• Save to GitHub: Inicializa un nuevo repositorio directamente desde AI Studio.
• Deploy to Cloud Run: Envía tu juego a Google Cloud Run con un solo clic.

Qué aprenderás

• Cómo usar el modo de compilación en Google AI Studio para crear prototipos rápidos de apps
• Cómo usar las instrucciones del sistema para mantener un "ambiente de programación" coherente durante la iteración
• Cómo conectar Google AI Studio a GitHub y Cloud Run

Requisitos

• Navegador web Chrome
• Una cuenta de Gmail
• Un proyecto de Cloud con la facturación habilitada
• Una clave de API de Gemini
• Una cuenta de GitHub

2. Antes de comenzar

1. En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.
2. Asegúrate de que la facturación esté habilitada para tu proyecto de Cloud. Obtén información para verificar si la facturación está habilitada en un proyecto .

Para obtener créditos de Google Cloud: Si deseas obtener créditos de Google Cloud para comenzar, usa este vínculo para canjear créditos que te ayudarán a completar el lab. Puedes seguir las instrucciones que se indican aquí para canjearlo.

3. Build & Prompt (The Core)

Comenzaremos por crear toda la aplicación de una sola vez. Accede a Google AI Studio y asegúrate de estar en la interfaz de compilación.

1. Ingresa la instrucción de compilación: Pega la siguiente instrucción detallada en el cuadro de chat:

Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game. 

2. Selecciona tu modelo: En el panel de configuración de la derecha, asegúrate de que Gemini 3.0 Pro (o el modelo de versión preliminar más reciente) esté seleccionado para la generación de código más rápida.
3. Ejecutar: Presiona Compilar (o presiona Cmd + Intro).
4. Vista previa: Gemini generará el código y, por lo general, renderizará una vista previa en vivo en el lado derecho (como se muestra a continuación):

4. Cómo definir mejor la búsqueda con anotaciones, imágenes y voz

A veces, es difícil describir un cambio visual con palabras. El modo de anotación te permite dibujar en la vista previa de la app para comunicar tu visión de inmediato.

Cómo usar el modo de anotación

1. Activa el modo de anotación: En la interfaz de AI Studio (consulta el panel lateral izquierdo o la barra de herramientas inferior de la ventana de vista previa), selecciona la herramienta Anotación o Refinar.

2. Cómo marcar tu app:

• Dibujar: Usa la herramienta de caja para dibujar un rectángulo alrededor del contador de puntuación.
• Comentario: Escribe una instrucción adjunta a ese cuadro: "Haz que esta fuente sea más grande, digital y con fallas".
• Boceto: Usa la herramienta de flecha para señalar los botones de reproducción y pausa.
• Comentario: Escribe: "Cambia estos íconos por íconos de neón brillantes".

3. Iterar: Haz clic en "Agregar al chat" y, luego, presiona Enviar instrucción. Gemini interpretará tus marcas visuales y los comandos de texto para actualizar el código.
4. Verificar: Mira la actualización de la vista previa en vivo. Ahora, tus comentarios visuales deberían reflejarse en el código.

Entrada de voz (The Spoken Vibe)

A veces, es más fácil decir la "onda" que escribirla.

1. Acción: Haz clic en el ícono de micrófono en la barra de entrada (junto al botón +).

2. Habla: "Oye, la animación de la serpiente es demasiado lenta. Aceléralo y haz que la cola deje un rastro brillante".
3. Enviar: Gemini convierte tu voz en texto y aplica los cambios.

5. Establece instrucciones del sistema y vuelve a compilar

A diferencia de una instrucción normal, la instrucción del sistema persiste durante toda la sesión. Es el mejor lugar para definir tus estándares de codificación, convenciones de nomenclatura o un personaje visual específico que no debería cambiar.

1. Abrir configuración avanzada: En la interfaz de Google AI Studio (modo de compilación), busca el cuadro Instrucciones del sistema. Si no lo ves, haz clic en Configuración (ícono de ajustes) o en Configuración avanzada en la parte superior o lateral del panel de chat.

2. Agrega la instrucción "Vibe": Pega la siguiente instrucción en el cuadro de texto. Esto define un arquetipo de "arte de falla" para nuestro juego:

You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.

3. Cómo activar el cambio: Cambiar la instrucción del sistema no reescribe el código automáticamente. Debes indicarle a Gemini que aplique estas reglas nuevas.

• Cierra el panel de configuración.
• En la entrada de chat o instrucción, escribe: "Reconstruye la IU de la aplicación para que siga estrictamente las nuevas instrucciones del sistema".
• Haz clic en Ejecutar o Enviar.

4. Observa la actualización: Gemini reconocerá el cambio.

6. Guardar en GitHub

En lugar de descargar archivos y luchar con la línea de comandos, usaremos la integración de GitHub integrada para iniciar un repositorio al instante.

1. Ubica la integración: En la barra de herramientas superior de la interfaz de Google AI Studio, busca el ícono de GitHub que se encuentra entre los íconos de descarga e implementación.

2. Conecta tu cuenta: Haz clic en el ícono. Si es la primera vez que lo haces, se te pedirá que autorices a Google AI Studio para que acceda a tu cuenta de GitHub.
3. Crea el repositorio: Aparecerá un cuadro de diálogo titulado "Completa la siguiente información para crear tu repositorio".

4. Nombre del repositorio: Ingresa un nombre, p.ej., "Juego de Snake generado por IA con React".
5. Descripción del repositorio: Ingresa la descripción del repositorio.
6. Visibilidad: Selecciona Público (para que puedas compartirlo fácilmente) o Privado.
7. Push to GitHub: Haz clic en el botón "Create Git repo".

Momento mágico: AI Studio inicializará un nuevo repo, confirmará tu código generado y lo enviará a GitHub en segundo plano. Recibirás un vínculo a tu nuevo repositorio.

7. Implementa en Cloud Run

Ahora que la aplicación está lista y guardada en GitHub, implementémosla en Cloud Run.

1. Initiate Deployment: Haz clic en el botón que se destaca a continuación. Se encuentra en la esquina superior derecha de la página de AI Studio.

2. Seleccionar proyecto: Haz clic en el menú desplegable Seleccionar un proyecto de Cloud y selecciona tu proyecto en el menú desplegable.

3. Solución de problemas: Si no puedes encontrar tu proyecto en el menú desplegable, haz clic en Importar proyecto y selecciona tu proyecto en el panel Importar proyecto.
4. Verificación de facturación: Una vez que seleccionas el proyecto, se verifica que tenga habilitada la facturación. Esta verificación se aprobará automáticamente, ya que adjuntamos la cuenta de facturación al proyecto en la sección "Antes de comenzar".
5. Implementar: Haz clic en el botón Implementar app y espera a que se implemente la aplicación en Cloud Run. Nota: El nombre del servicio de Cloud Run se generará automáticamente.
6. La implementación debería completarse en unos minutos y obtendrás la URL de la app. Si haces clic en la URL, verás tu aplicación web implementada en vivo en Internet.

8. Limpia

Sigue estos pasos para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en esta publicación:

• En la consola de Google Cloud, ve a la página Administrar recursos.
• En la lista de proyectos, elige el proyecto que quieres borrar y haz clic en Borrar.
• En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.

9. Felicitaciones

¡Felicitaciones! Completaste correctamente la codificación de ambiente de una aplicación en AI Studio y la implementaste en Cloud Run.

AI Studio es una plataforma ideal y de referencia para desarrollar y probar aplicaciones, ya que permite a los usuarios visualizar de inmediato sus diseños en acción.

La integración perfecta de AI Studio con Cloud Run permite a los usuarios implementar sus aplicaciones sin esfuerzo directamente en Google Cloud. El uso de Cloud Run otorga todos los beneficios inherentes de un entorno sin servidores, lo que abstrae las complejidades y la sobrecarga de la administración de la infraestructura.