1. Objetivo de este lab
En este lab práctico, aprenderás a usar Antigravity para crear aplicaciones con Google Antigravity y, luego, implementarlas en Google Cloud. En este lab, también se te presentará el concepto de desarrollo basado en especificaciones.
Qué aprenderás
- Comprende los conceptos básicos de Google Antigravity.
- Comprende los conceptos básicos del desarrollo basado en especificaciones
- Aprende a implementar apps fácilmente en Cloud Run.
Figura 1: Antigravity es la herramienta de desarrollo centrada en los agentes que desarrolló Google.
2. Configuración del entorno
- Instala Antigravity:
👉Download the [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from [here](https://antigravity.google/).
👉Instala Antigravity en tu entorno.
👉 Ve a la carpeta en la que está instalado Antigravity y haz doble clic para abrir el instalador.
👉 Sigue las instrucciones del instalador para instalar Antigravity en tu entorno.
- Instala Python
👉 Ve a https://www.python.org/downloads/ y, luego, instala Python en tu sistema.
- Instala gcloud
👉 gcloud es una herramienta de línea de comandos que te permite realizar diversas operaciones en Google Cloud. Sigue las instrucciones aquí para instalar gcloud en tu entorno.
👉 Una vez instalado, prueba la instalación. Para ello, abre la terminal del sistema y escribe gcloud. 
Figura 2: Una vez que instales gcloud , puedes probar la instalación escribiendo gcloud en tu terminal.
3. Configuración del proyecto
- Si aún no tienes un proyecto que puedas usar, deberás crear uno nuevo en la consola de GCP. Selecciona el proyecto en el selector de proyectos (en la parte superior izquierda de la consola de Google Cloud)
.
Figura 2: Si haces clic en el cuadro que se encuentra junto al logotipo de Google Cloud, puedes seleccionar tu proyecto. Asegúrate de que tu proyecto esté seleccionado.
- En este lab, usaremos el Editor de Cloud Shell para realizar nuestras tareas. Abre Cloud Shell y configura el proyecto con Cloud Shell.
- Haz clic en este vínculo para navegar directamente al editor de Cloud Shell.
- Abre la terminal si aún no está abierta. Para ello, haz clic en Terminal > New Terminal en el menú. Puedes ejecutar todos los comandos de este instructivo en esta terminal.
- Puedes verificar si el proyecto ya está autenticado con el siguiente comando en la terminal de Cloud Shell.
gcloud auth list
- En Cloud Shell, ejecuta el siguiente comando para confirmar tu proyecto.
gcloud config list project
- Copia el ID del proyecto y usa el siguiente comando para configurarlo.
gcloud config set project <YOUR_PROJECT_ID>
- Si no recuerdas el ID de tu proyecto, puedes enumerar todos tus IDs de proyecto con
gcloud projects list
4. Habilita las APIs
Debemos habilitar algunos servicios de API para ejecutar este lab. Ejecuta el siguiente comando en Cloud Shell.
gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com
Introducción a las APIs
- La API de Vertex AI (
aiplatform.googleapis.com) permite acceder a la plataforma de Vertex AI , lo que permite que tu aplicación interactúe con los modelos de Gemini para la generación de texto, las sesiones de chat y las llamadas a funciones. - La API de Cloud Resource Manager (
cloudresourcemanager.googleapis.com) te permite administrar de forma programática los metadatos de tus proyectos de Google Cloud, como el ID y el nombre del proyecto, que a menudo requieren otras herramientas y SDKs para verificar la identidad y los permisos del proyecto.
5. Confirma si se aplicaron tus créditos
En la etapa de configuración del proyecto, solicitaste los créditos gratuitos que te permiten usar los servicios en Google Cloud. Cuando aplicas los créditos, se crea una nueva cuenta de facturación gratuita llamada "Cuenta de facturación de prueba de Google Cloud Platform". Para asegurarte de que se aplicaron los créditos, sigue estos pasos en el editor de Cloud Shell:
curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3
Si se ejecuta correctamente, deberías ver el resultado como se muestra a continuación. Si ves el mensaje “Successfully linked project”, significa que tu cuenta de facturación está configurada correctamente. Si ejecutas el paso anterior, podrás verificar si tu cuenta está vinculada. Si no lo está, se vinculará por ti. Si no seleccionaste el proyecto, se te pedirá que elijas uno, o bien puedes hacerlo de antemano siguiendo los pasos de configuración del proyecto. 
Figura 3: Confirmación de la vinculación de la cuenta de facturación
6. Introducción a Google Antigravity
Google Antigravity es una herramienta de desarrollo de software que prioriza la IA y que desarrolló Google DeepMind. Google Antigravity aprovecha los conocimientos de desarrollo de software acumulados durante un largo período con la IA de vanguardia para brindarles a los desarrolladores una experiencia de desarrollo fluida y sin problemas impulsada por IA.
Estas son algunas de las funciones clave de Google Antigravity.
En la siguiente figura, se muestran los elementos básicos de Google Antigravity.
- 👉 Abre el navegador y comienza a explorar sus diferentes partes.
Figura 4: Los elementos básicos de Google Antigravity, los detalles en la Tabla 1
Tabla 1: Detalles de los componentes básicos de Google Antigravity
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Modelos integrados Gemini 3 y Nanobanana: Con Google Antigravity, puedes usar los modelos insignia más recientes de Google, como Gemini 3 y Nanobanana. Junto con esos modelos, también puedes usar modelos de terceros, como Claude.
Figura 5: Puedes elegir entre muchos modelos en Google Antigravity 2. Codificación impulsada por agentes: Antigravity proporciona una experiencia de codificación nativa impulsada por agentes que permite a los desarrolladores mantener la productividad sin interferir en su trabajo.
- Planificación y control total del usuario: El agente toma tu entrada y convierte la tarea en un plan que te pedirá que apruebes antes de ejecutarlo. Esto garantiza que el usuario pueda cambiar la dirección del agente en cualquier momento antes de la ejecución de la tarea.
- Comentarios del usuario:Durante la ejecución del agente, el usuario puede proporcionarle comentarios si necesita darle instrucciones adicionales.
- Multi Agents: Puedes generar varios agentes para que trabajen en diferentes tareas de forma simultánea. Por ejemplo, el agente A puede refactorizar tu lógica de autenticación, mientras que el agente B escribe pruebas de unidades para una nueva API y el agente C investiga una biblioteca en segundo plano.
- Agente en el editor, la terminal y el navegador: Los agentes de Google Antigravity funcionan en varias plataformas.
- Editor: Los agentes de Google Antigravity escriben el código y te lo presentan en el Editor.
- Terminal: Según las tareas, es posible que los agentes de Google Antigravity necesiten acceder a tu terminal para ejecutar algunos comandos. Los agentes pueden ejecutar los comandos por ti cuando sea necesario.
- Navegador: Los agentes también pueden trabajar con tu navegador. Esto es especialmente útil si necesitas probar tus aplicaciones web, ya que el agente puede ejecutar tu aplicación en el navegador web, probarla y depurarla.
7. Introducción al desarrollo basado en especificaciones de IA
El desarrollo basado en especificaciones es un paradigma emergente de ingeniería de software que coloca las especificaciones estructuradas y los agentes de IA en el centro del ciclo de vida del desarrollo. A diferencia del enfoque de "prueba y error" común en la programación básica de IA, el SDD prioriza la recopilación meticulosa de requisitos, el diseño del sistema o la arquitectura, y la planificación de pruebas. Toma prestada la rigurosidad de la fase de diseño del modelo de cascada, pero la integra en un bucle iterativo ágil moderno a través de la automatización. Aunque el proceso requiere que realices una planificación y documentación meticulosas de antemano, en realidad es un proceso iterativo, ya que los agentes de IA permiten una implementación y pruebas rápidas. Esto te permite obtener comentarios más rápidos que se pueden usar para mejorar la documentación.
La filosofía principal
En este modelo, los ingenieros humanos pasan de ser "escritores de código" a "arquitectos de sistemas". La principal responsabilidad humana es la descripción de alta fidelidad de los problemas y las soluciones. Este resultado detallado sirve como la única fuente de verdad (SSOT), que los agentes de IA usan para generar, verificar y perfeccionar la base de código.
El ciclo de vida del SDD
El proceso tiene los siguientes componentes. Los pasos del 1 al 3 se centran mucho en el ser humano, mientras que los pasos del 4 al 5 se centran en el agente de IA. Este es un proceso iterativo en el que, después del final de un ciclo, se puede usar la retroalimentación para mejorar la especificación.
- Recopilación de requisitos: Identificación definitiva de la lógica empresarial, las necesidades del usuario y las restricciones del sistema
- Diseño de la arquitectura: Definición de la estructura del sistema, los modelos de datos y los puntos de integración
- Especificación del sistema y de la prueba: Creación de documentos legibles por máquina (o altamente estructurados) que definen qué hace el sistema y cómo se validará.
- Generación de código automatizada: Los agentes de IA consumen las especificaciones para producir código listo para producción.
- Pruebas y validación: Los paquetes automatizados verifican el código generado en función de la especificación de prueba.
Principios operativos clave
- El ciclo de diseño e implementación
Los pasos del 1 al 5 no son un camino lineal, sino un ciclo continuo de comentarios. Dado que la generación de código (paso 4) y las pruebas (paso 5) están automatizadas en gran medida, el equipo de ingeniería puede dedicar la mayor parte de su ancho de banda a las primeras tres etapas. Cuando se encuentra un error o cambia una función, el ingeniero actualiza la especificación, no el código, y vuelve a activar el bucle.
- Nivel de detalle modular
Para mantener la integridad del sistema, la SDD se debe aplicar a módulos detallados en lugar de bloques monolíticos.
- Aislamiento: Si un módulo específico no pasa la validación, solo se debe volver a especificar y generar ese módulo.
- Escalabilidad: Los módulos pequeños y bien definidos evitan las "alucinaciones" de la IA y garantizan que la ventana de contexto del agente de IA siga siendo precisa y enfocada.
- Control de calidad
En este paradigma, la Especificación del sistema es el plano, y la Especificación de la prueba es el juez. La especificación de prueba garantiza que el código generado siempre cumplirá con los requisitos de calidad predeterminados. Todo el proceso se puede integrar sin problemas en la canalización de CICD existente, lo que garantiza que el estado general del sistema también cumpla con el requisito de calidad.
En este lab, exploraremos los conceptos básicos del desarrollo basado en especificaciones con Google Antigravity.
8. Cómo desarrollar una aplicación web con Google Antigravity
En este lab, crearemos una aplicación de galería de fotos simple. Nanobanana, el modelo de generación de imágenes, se creó dentro de Google Antigravity. Usaremos Nanobanana para crear las imágenes necesarias.
Configura el navegador web
El navegador web se usará para probar automáticamente la app. En los siguientes pasos, configuraremos el navegador para que Antigravity pueda probar la aplicación automáticamente.
- 👉 Haz clic en el botón Configuración (ícono de ajustes) en la esquina superior derecha y selecciona "Abrir la configuración del usuario de Antigravity".
- 👉 Haz clic en Agent en el panel izquierdo y, en la sección ARTIFACT, selecciona Review Policy "Always Proceed".
- 👉 Haz clic en Browser en el panel izquierdo y asegúrate de que Enable Browser Tools esté habilitado.
Crea una aplicación con Google Antigravity
- 👉 Haz clic en el ícono de Google Antigravity para abrir Google Antigravity.
- 👉Crea una carpeta llamada "Gallery" en tu carpeta personal, p. ej., Computadoras de escritorio
- 👉 Presiona Open Folder en Antigravity y selecciona la carpeta Gallery. Se abrirá un nuevo espacio de trabajo en la carpeta Galería.
- 👉 Si el panel Agent aún no está abierto, haz clic en el botón "Toggle Agent Pane" para abrirlo. Consulta la Figura 4, botón núm. 2.
- 👉 Para comenzar a escribir código, escribe tus instrucciones en el panel del agente. Es muy importante que las instrucciones sean lo más claras posible. Ingresa lo siguiente en el panel del agente
**English Version:**
Create a photo granary with following specs.
1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.
2. Photo Content
Quantity: The page will feature a total of 20 photos.
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos
3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.
4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.
5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation
Versión en japonés:
以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。
2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。
3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。
4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。
5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します
- 👉 Haz clic en el botón Ejecutar. Una vez que ejecutes el agente, este debería mostrarte el plan de ejecución como se muestra a continuación.
Figura 5: El agente de antigravedad te mostrará el plan de implementación
- 👉 Se te pedirá que confirmes la acción. Confirma cuando se te solicite, como se muestra a continuación. Antigravity usará automáticamente Nanobanana y el modelo de LLM seleccionado para realizar la tarea.
Figura 6: Antigravity quiere ejecutar un comando. Presiona Ejecutar para permitir la ejecución.
Figura 7: Presiona Aceptar todo cuando se te solicite.
- 👉 Después de generar el código, Antigravity abrirá el navegador y comenzará a realizar pruebas. Después de la prueba, debería proporcionarte los resultados.
Figura 8: Antigravity te mostrará los resultados de la prueba - 👉 Si se te solicita, presiona "Aceptar todo" para guardar todo el código generado en el panel del agente.
- 👉 En el panel Explorador de Antigravity , deberías tener el código recién generado.
Figura 9: Código final - 👉 Para probar la aplicación, haz clic con el botón derecho en index.html, obtén la ruta de acceso del archivo y pégala en la barra de URL del navegador web.
Figura 10: Para probar la app, solo copia la ruta de acceso del archivo index.html en tu navegador web.
9. Configura el entorno para la implementación
- 👉 Obtén el ID de tu proyecto de Google Cloud: Ve a https://console.cloud.google.com.
- 👉 Haz clic en la parte superior izquierda y copia el ID de tu proyecto en algún lugar. Lo usaremos en los próximos pasos.
Figura 11: Copia el ID del proyecto y guárdalo para consultarlo más adelante - 👉 En la terminal abierta de Antigravity, haz clic en Terminal->New Terminal en el menú.
- 👉 Debemos establecer las variables de entorno, que son diferentes para Windows y Mac/Linux. Reemplaza "TU PROYECTO DE CLOUD" por el que anotaste en el paso 2. Nota para los usuarios de Windows PowerShell: Abre PowerShell en modo de administrador
#This is only for Powershell users.
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"
#For Windows Command Prompt follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"
#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"
- 👉 Accede a la consola. Cuando se te solicite, accede a Google Cloud en el navegador.
gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT
Figura 12: Realiza la autenticación
- 👉 Instala el servidor de MCP de Cloud Run. En la esquina superior derecha de la ventana de Antigravity, haz clic en "…". Deberías ver la opción "Servidores de MCP". Haz clic en ella. Los servidores de MCP son como las extensiones del agente que permiten que los agentes accedan a datos y herramientas externos.
- 👉 Ingresa “Cloud Run” en el cuadro de búsqueda y haz clic en “Cloud Run”.
Figura 13: Servidor de MCP de Cloud Run - 👉Para volver al panel del agente, presiona la tecla de flecha hacia atrás junto al título de los servidores de MCP. Ahora podemos comenzar a interactuar con Google Cloud Run. Ingresa lo siguiente en el panel del agente. Esto debería usar automáticamente el servidor de MCP de Cloud Run y mostrarte la lista de servicios que se ejecutan en Cloud Run.
Find me the list of services running in Cloud Run.
- 👉 Implementa la app con el siguiente comando. Puedes realizar la implementación simplemente con lenguaje natural. Antigravity usará automáticamente el servidor de MCP para la implementación.
Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80
- 👉 El agente debería mostrarte dónde se implementó la app. P. ej. https://photogallery-85469421903.us-central1.run.app . El servidor de MCP de Cloud facilita la implementación de tu app web en Cloud Run.
10. Limpia
Ahora, limpiemos lo que acabamos de crear.
- 👉Borra la app de Cloud Run que acabamos de crear. Accede a Cloud Run desde Cloud Run . Deberías poder ver la app que creaste en el paso anterior. Marca la casilla junto a la app y haz clic en el botón Borrar.
Figura 38: Borra la app de Cloud Run
11. Conclusión
¡Felicitaciones! Creaste correctamente una app con Google Antigravity siguiendo las prácticas de desarrollo basado en especificaciones.También aprendiste a implementar la aplicación en Cloud Run. Este es un logro significativo que abarca el ciclo de vida principal de una aplicación moderna nativa de la nube y te proporciona una base sólida para implementar tus propios sistemas complejos.
Resumen
En este lab, aprendiste a hacer lo siguiente:
- Crea una aplicación de múltiples agentes con Google Antigravity
- Implementa la aplicación en Cloud Run.
Recursos útiles