1. Introducción
Google Antigravity (en adelante, Antigravity) es un IDE basado en agentes de Google. En el codelab de introducción a Antigravity, puedes aprender los conceptos básicos de Antigravity. En este codelab, usaremos Antigravity para compilar aplicaciones reales. Pasaremos de la investigación web simple a la generación de aplicaciones de pila completa y pruebas de unidades de nivel empresarial.
Requisitos previos:
- Google Antigravity instalado y configurado
- Conocimientos básicos de Google Antigravity Se recomienda completar el codelab Primeros pasos con Google Antigravity.
2. Acerca de los casos de uso
Ahora que tienes una comprensión básica 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 encarga de realizar la tarea, solicitar permisos si es necesario, producir los artefactos y notificarnos cuando finaliza la tarea. 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 de un sitio web completo. Aquí vamos.
3. Noticias destacadas
Este es un caso de uso simple, pero puede ser la base para 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 el sitio que elijas y ver cómo funciona.
Asegúrate de estar en Agent Manager y de haber seleccionado Playground, como se muestra a continuación:
Luego, da la siguiente instrucción:
Esto iniciará el proceso del agente y determinará que debe iniciar el navegador, etcétera. Debes prestar mucha atención al proceso de pensamiento y ver cómo el agente realiza su trabajo. Si todo sale bien, se debería iniciar el navegador Antigravity y visitar el sitio como se muestra a continuación. El borde azul alrededor del sitio muestra que el agente ahora controla el navegador y navega por el sitio para obtener la información.
Una vez que termine su trabajo, también deberías ver cómo se generan los artefactos, como se muestra a continuación:
A continuación, se muestra un ejemplo de ejecución del agente:
Ten en cuenta que, a la izquierda, tenemos el Proceso de pensamiento. También puedes desplazarte por los puntos y ver la reproducción y otros datos.
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. Piensa en un 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, generemos 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 a lo largo del día a cargo de varios oradores.
Una vez más, asegúrate de estar en Agent Manager y de haber seleccionado Playground.
Dale la siguiente instrucció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.
Puedes comenzar la conversación con la instrucción anterior:
A medida que el agente realiza su tarea, procederá a crear los artefactos:
- Artefacto de la tarea
- Artefacto de implementación
- Artefacto de explicación
El artefacto de tarea que se muestra a continuación fue la secuencia inicial de tareas que el agente descifró que debía realizar en función de la tarea que se le asignó. A continuación, se muestra una captura de pantalla de muestra de la ejecución:
Luego, puedes hacer clic en el artefacto Plan de implementación. A continuación, se muestra una captura de pantalla de ejemplo:
Por último, tienes el artefacto Walkthrough. Contiene todo lo que hizo el agente, como se muestra a continuación:
Observa que inició el servidor y me proporcionó la URL, en la que hago clic y tengo la aplicación. A continuación, se muestra una captura de pantalla de muestra:
Si cambias al Editor, observa en la pantalla que contiene la carpeta en la que se genera la aplicación de Flask de Python. También notarás que el Agent mode está etiquetado a la derecha y que puedes continuar la conversación allí también.
Ahora, supongamos que queremos agregar más charlas al evento. Podemos permanecer en el Editor y en el panel del Agente, y dar una instrucción como Add two more talks to the schedule.
Esto hará que el agente analice el requisito, actualice la tarea y el plan de implementación, y, luego, valide la funcionalidad actualizada. A continuación, se muestra una conversación de ejemplo:
Puedes volver al Administrador de agentes si lo deseas. Este proceso debería ayudarte a comprender el proceso de cambio de Administrador de agentes a Editor, realizar los cambios correspondientes, etcétera.
Pruebas para hacer
- Agrega la funcionalidad adicional que desees 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, y así sucesivamente.
- 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.
Asegúrate de estar en Agent Manager y de haber seleccionado Playground. Dale la siguiente instrucción:
Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.
Observa cómo crea la lista de tareas, el plan de implementación y, luego, cómo lo lleva a cabo. Sigue prestando atención al flujo, ya que puede haber situaciones en las que se te solicite que lo revises. A continuación, se muestra un ejemplo de ejecución.
En este caso, también debería iniciar el navegador Antigravity, realizar sus propias pruebas y, luego, confirmar que las pruebas se realizaron correctamente. Una de las cosas que generó fue un artefacto de medios que contiene el video de su verificación. Esta es una excelente manera de ver qué se probó. También sugerí algunos cambios de estilo, ya que no se aplicaron, y se pudieron realizar.
La app final se veía como la siguiente y se ve bastante bien.
¿Qué tal si agregamos una imagen de temporizador agradable a la aplicación? Todo lo que tenemos que hacer es emitir una instrucción de seguimiento como la que se indica a continuación:
Add an image to the application that displays a timer.
Esto hizo que el agente agregara una nueva tarea al artefacto de tareas:
Luego, generó una imagen a medida que realizaba su tarea:
Por último, la app tenía la imagen que solicitamos:
Pruebas para hacer
- Observa que el fondo del ícono de reloj de arena en la aplicación no es transparente. Intenta pedirle al agente que lo haga transparente.
- Prueba algunas variaciones de cualquier aplicación que desees generar. Experimenta con los estilos y las imágenes, pide 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 con 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 localmente en una carpeta y cárgalo como un Workspace 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.
- Cargos de pago.
- Actualiza el inventario.
Le asignaremos al agente la tarea de generar casos de prueba de unidades, proporcionar implementaciones de simulacros 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 hacer lo siguiente:
Aparecerá una explicación sobre qué es este archivo:
Podemos pedirle que genere una mejor visualización a través de la instrucción:
Can you visually show this class for better understanding
El siguiente paso es generar las pruebas de unidades y pedirle al agente que las pruebe. Le doy la siguiente instrucción:
generate unit tests for this module and test it out with mock implementations.
Generó el siguiente artefacto de tarea y se puso a trabajar en ella.
También puedes ver los detalles de las pruebas que se ejecutaron:
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 observa lo que puedes pedirle al agente que haga, desde agregar más funcionalidad hasta refactorizar partes de tu código.
7. Felicitaciones
¡Felicitaciones! Usaste correctamente Google Antigravity para hacer lo siguiente:
- Investiga en la Web de forma autónoma.
- Compila aplicaciones web de pila completa y realiza iteraciones en ellas.
- Genera recursos y define la estética de la IU.
- Escribe y valida pruebas de unidades complejas con simulaciones.
Ahora puedes dejar que Antigravity se encargue de las tareas más pesadas en tus propios proyectos.
Documentos de referencia
- Codelab : Primeros pasos con Google Antigravity
- Sitio oficial : https://antigravity.google/
- Documentación: https://antigravity.google/docs
- Casos de uso : https://antigravity.google/use-cases
- Descargar : https://antigravity.google/download
- Canal de YouTube de Google Antigravity : https://www.youtube.com/@googleantigravity