1. Introducción
En este codelab, aprenderás sobre Google Antigravity, una plataforma de desarrollo con agentes diseñada para ayudarte a desarrollar en esta era de agentes. Antigravity sirve como centro de comando central de tus agentes de IA, ya que proporciona una plataforma unificada para iniciar, supervisar y organizar sus actividades.
En este codelab, usaremos Antigravity para compilar aplicaciones reales. Pasaremos de la investigación web simple a la generación de aplicaciones de full stack y pruebas de unidades de nivel empresarial.
Requisitos previos:
- Antigravity y el IDE de Antigravity instalados y configurados.
- Conocimientos básicos de Google Antigravity. Se recomienda completar el codelab: Primeros pasos con Google Antigravity.
2. Acerca de los casos de uso
Como tienes conocimientos básicos de Antigravity, veamos algunos casos de uso para ver cómo funciona. Ten en cuenta que Antigravity es una plataforma centrada en los agentes. Esto significa que, en la mayoría de los casos, simplemente le damos una instrucción al agente, y este se va por su cuenta, realiza su tarea, solicita permisos si es necesario, produce los artefactos y, luego, nos notifica si la tarea está lista. Como resultado, no podemos producir cada resultado de la conversación del agente en cada uno de los siguientes casos de uso. Compartiremos las instrucciones y algunas capturas de pantalla necesarias de los resultados esperados, pero es posible que tus resultados difieran un poco.
Los casos de uso que abordaremos abarcan desde la automatización de algunas tareas con sitios externos hasta la generación y verificación de casos de prueba de unidades para un proyecto y el desarrollo completo de un sitio web. Aquí vamos.
3. Noticias destacadas
Este es un caso de uso simple, pero puede ser la base a través de la cual puedes usar el navegador web para visitar sitios web, extraer información, realizar algunas acciones y, luego, devolver datos al usuario.
En este caso, visitaremos el sitio de Google Noticias y extraeremos información de allí. Sin embargo, puedes experimentar fácilmente con un sitio de tu elección y ver cómo funciona.
Supondremos que tenemos una carpeta raíz en la que crearemos los diferentes proyectos que veremos en este codelab. Esta carpeta raíz en nuestra máquina se llama agy2-pprojects.
Primero, crea una carpeta llamada news-highlights en la carpeta anterior para comenzar de nuevo.
Inicia Antigravity y crea un proyecto nuevo. Agrega la carpeta news-highlights.
Inicia una conversación nueva en el espacio de trabajo news-highlights recién importado:
Luego, da la siguiente instrucción: "visit news.google.com and get me the highlights at the moment."
Esto iniciará el proceso del agente y determinará que debe visitar el sitio news.google.com y solicitar tu permiso. Es posible que te solicite varias veces que leas las URLs, y puedes elegir otorgarle permiso para este proyecto, etc.
Debes prestar mucha atención al proceso de pensamiento y ver cómo el agente realiza su trabajo. A continuación, se muestra una ejecución de muestra del agente:
Pruebas para hacer
- Una vez que comprendas esto, elige un sitio web que esté disponible y del que quieras que el agente obtenga o resuma algunos datos. Considera algún sitio web que sepas que tiene paneles y gráficos, y pídele que elija algunos valores.
- Prueba la siguiente instrucción:
Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.
4. Genera un sitio web dinámico con Python y Flask
Ahora pasemos a generar una aplicación web completa. La aplicación web que crearemos es un sitio que proporciona información sobre un evento técnico de 1 día, que incluye charlas durante todo el día de varios oradores.
Una vez más, crea una carpeta nueva llamada conference-website. Asegúrate de haber creado un proyecto nuevo en la interfaz del agente de Antigravity y de haber agregado la carpeta conference-website.
Para iniciar la conversación, da la instrucción que se muestra a continuación:
I would like to generate a website that is a 1-day technical conference informational site.
The website should have the following functionality:
1. A home page that shows the current date, location, schedule and time table.
2. The 1-day event is a list of 8 talks in total.
3. Each talk has 1 or 2 max. speakers.
4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
5. Each speaker has a First Name, Last Name and LinkedIn url.
6. Allow for users to search by category, speaker, title.
7. Give a lunch break of 60 minutes.
8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript.
10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes.
11. Launch the web application for me to review.
Antigravity analizará la solicitud y, primero, creará un plan de implementación. Creará un artefacto clave llamado implementation_plan.md para que lo revises en términos de cómo planea crear y cumplir con los requisitos que especificaste en la instrucción. A continuación, se muestra un resultado de ejemplo:
Antes de hacer clic en Continuar, consulta el plan de implementación. Puedes hacer clic en el vínculo al archivo implementation_plan.md anterior o activar el panel auxiliar en la esquina superior derecha. Se mostrará la vista de artefactos y podrás ver que el plan de implementación está allí para que lo revises.
A continuación, se muestra un plan de implementación de muestra generado para nuestra ejecución:
Puedes proporcionar tus comentarios en el plan y volver a solicitarle al agente o, por ahora, podemos aceptar el plan de implementación tal como está y hacer clic en el botón Continuar en la interfaz de conversación.
El agente continúa generando los archivos de código fuente y también notarás que actualiza otro artefacto llamado tarea. Esta es una lista de acciones o tareas que identificó que se deben realizar para lograr el resultado final.
Puedes hacer clic en la tarea en cualquier momento o incluso visitar la lista de artefactos para ver las tareas. A continuación, se muestra una lista de muestra:
En algún momento de la tarea final, cuando intente ejecutar y verificar la aplicación, Antigravity configurará un entorno de Python y requerirá tu permiso para configurar el entorno, instalar las dependencias y mucho más. Otorga los permisos según sea necesario.
Una vez que la verificación se realice correctamente, se destacarán los detalles, junto con otro artefacto, el instructivo, que detalla las funciones completadas, la pila tecnológica, los resultados de la validación y las instrucciones.
A continuación, se muestra un instructivo de muestra:
El sitio web final cuando visitamos la URL se muestra a continuación:
Si deseas ver el código generado, puedes hacer clic en Abrir IDE en la esquina superior derecha. Se abrirá el IDE de Antigravity, que puedes usar para ver el código generado. A continuación, se muestra una captura de pantalla de muestra:
Pruebas para hacer
- Agrega funciones adicionales que quieras a la aplicación. Proporciona los detalles al agente y observa cómo realiza su tarea modificando primero la lista de tareas, luego el plan de implementación, etcétera.
- Agrega datos adicionales al cronograma del evento. Por ejemplo,
Add two more talks to the schedule. - Pídele al agente que genere un archivo README o más documentación para la aplicación.
5. Genera una app de productividad simple
Ahora generaremos una aplicación web simple de temporizador Pomodoro.
Crea una carpeta pomodoro-timer. Asegúrate de estar en el Agent Manager, haber importado y seleccionado el espacio de trabajo pomodoro-timer. Comienza con la siguiente indicación:
Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.
Observa cómo crea el plan de implementación, la lista de tareas y, luego, cómo realiza la tarea. Presta atención al flujo, ya que puede haber situaciones en las que te solicite que lo revises.
A continuación, se muestra una ejecución de muestra con el mensaje del instructivo y las tareas:
La app final se veía como la siguiente y se ve bastante bien.
Pruebas para hacer
- Agrega algunas imágenes a la aplicación. Por ejemplo, agrega una imagen de temporizador a la aplicación.
- Prueba algunas variaciones de cualquier aplicación que quieras generar. Juega con los estilos, las imágenes, solicita cambios, etcétera.
6. Genera pruebas de unidades, stubs simulados y valida pruebas
El caso de uso final que probaremos aquí es el de generar pruebas de unidades para un archivo de código específico que tenemos y para que el agente también ejecute las pruebas y las valide.
Para ello, tendremos un espacio de trabajo que tenga un solo archivo de Python, como se muestra a continuación:
from typing import Dict
# --- Custom Exceptions ---
class InventoryShortageError(Exception):
"""Raised when there is not enough item stock."""
pass
class PaymentFailedError(Exception):
"""Raised when the payment gateway rejects the transaction."""
pass
class InvalidOrderError(Exception):
"""Raised when the order violates business rules."""
pass
# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
def get_stock(self, product_id: str) -> int:
"""Connects to DB to check stock."""
raise NotImplementedError("Real connection required")
def decrement_stock(self, product_id: str, quantity: int):
"""Connects to DB to reduce stock."""
raise NotImplementedError("Real connection required")
class PaymentGateway:
def charge(self, amount: float, currency: str) -> bool:
"""Connects to Stripe/PayPal."""
raise NotImplementedError("Real connection required")
# --- Main Business Logic ---
class Order:
def __init__(self,
inventory_service: InventoryService,
payment_gateway: PaymentGateway,
customer_email: str,
is_vip: bool = False):
self.inventory = inventory_service
self.payment = payment_gateway
self.customer_email = customer_email
self.is_vip = is_vip
self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
self.is_paid = False
self.status = "DRAFT"
def add_item(self, product_id: str, price: float, quantity: int = 1):
"""Adds items to the cart. Rejects invalid prices or quantities."""
if price < 0:
raise ValueError("Price cannot be negative")
if quantity <= 0:
raise ValueError("Quantity must be greater than zero")
if product_id in self.items:
self.items[product_id]['qty'] += quantity
else:
self.items[product_id] = {'price': price, 'qty': quantity}
def remove_item(self, product_id: str):
"""Removes an item entirely from the cart."""
if product_id in self.items:
del self.items[product_id]
@property
def total_price(self) -> float:
"""Calculates raw total before discounts."""
return sum(item['price'] * item['qty'] for item in self.items.values())
def apply_discount(self) -> float:
"""
Applies business logic:
1. VIPs get flat 20% off.
2. Regulars get 10% off if total > 100.
3. No discount otherwise.
"""
total = self.total_price
if self.is_vip:
return round(total * 0.8, 2)
elif total > 100:
return round(total * 0.9, 2)
return round(total, 2)
def checkout(self):
"""
Orchestrates the checkout process:
1. Validates cart is not empty.
2. Checks stock for all items.
3. Calculates final price.
4. Charges payment.
5. Updates inventory.
"""
if not self.items:
raise InvalidOrderError("Cannot checkout an empty cart")
# 1. Check Inventory Logic
for product_id, data in self.items.items():
available_stock = self.inventory.get_stock(product_id)
if available_stock < data['qty']:
raise InventoryShortageError(f"Not enough stock for {product_id}")
# 2. Calculate Final Price
final_amount = self.apply_discount()
# 3. Process Payment
try:
success = self.payment.charge(final_amount, "USD")
if not success:
raise PaymentFailedError("Transaction declined by gateway")
except Exception as e:
# Catching generic network errors from the gateway
raise PaymentFailedError(f"Payment gateway error: {str(e)}")
# 4. Decrement Stock (Only occurs if payment succeeded)
for product_id, data in self.items.items():
self.inventory.decrement_stock(product_id, data['qty'])
self.is_paid = True
self.status = "COMPLETED"
return {"status": "success", "charged_amount": final_amount}
Asegúrate de tener el archivo de Python anterior (order_service.py) disponible de forma local en una carpeta nueva y de que ese proyecto esté abierto para la conversación en Antigravity.
Este es un servicio de pedidos simple que tiene la siguiente funcionalidad clave en la función checkout:
- Valida que el carrito no esté vacío.
- Verifica el stock de todos los artículos.
- Calcula el precio final.
- Cobra el pago.
- Actualiza el inventario.
Le asignaremos al agente la tarea de generar casos de prueba de unidades, proporcionar implementaciones simuladas y ejecutar las pruebas para asegurarnos de que se realicen correctamente.
Abriremos nuestra carpeta de espacio de trabajo específica y notarás que ahora también podemos usar el símbolo @ para hacer referencia al archivo. Por ejemplo, podríamos comenzar a escribir @order y debería mostrar el archivo order_service.py.
Podemos dar una tarea que nos ayude a comprender este archivo. Dale la siguiente instrucción:
Explain the @order_service.py file
Esto proporciona una explicación de qué es este archivo:
Podemos pedirle que genere una mejor visualización a través de la siguiente instrucción:
Can you visually show this class for better understanding
Antigravity menciona que la tarea se completó y que generó un artefacto que contiene la visualización:
Podemos consultar la visualización como se muestra a continuación:
y lo siguiente:
El siguiente paso es generar las pruebas de unidades y pedirle al agente que las pruebe. Doy la siguiente instrucción:
generate unit tests for this module and test it out with mock implementations.
Realizó su tarea, generó las pruebas, las ejecutó y también corrigió un error. Este es el resultado:
Uno de los archivos que generó también fue el archivo de prueba. A continuación, se muestra una captura de pantalla:
Pruebas para hacer
Toma tu propio código y ve qué puedes pedirle al agente que haga, desde agregar más funciones hasta refactorizar partes de tu código.
7. Felicitaciones
¡Felicitaciones! Usaste Google Antigravity correctamente para hacer lo siguiente:
- Investigar la Web de forma autónoma
- Compilar aplicaciones web de full stack y realizar iteraciones en ellas
- Escribir y validar pruebas de unidades complejas con simulaciones
Ahora estás listo para dejar que Antigravity se encargue del trabajo pesado en tus propios proyectos.
Documentos de referencia
- Codelab : Primeros pasos con Google Antigravity
- Sitio oficial : https://antigravity.google/
- Documentación: https://antigravity.google/docs
- Descarga : https://antigravity.google/download
- Canal de YouTube de Google Antigravity : https://www.youtube.com/@googleantigravity