Como criar com o Google Antigravity

1. Introdução

Neste codelab, você vai aprender sobre o Google Antigravity, uma plataforma de desenvolvimento agêntico criada para ajudar você a desenvolver nessa era de agentes. O Antigravity funciona como o centro de comando central dos seus agentes de IA, oferecendo uma plataforma unificada para iniciar, monitorar e orquestrar as atividades deles.

Neste codelab, vamos usar o Antigravity para criar aplicativos reais. Vamos passar de pesquisas simples na Web para gerar aplicativos full-stack e testes de unidade de nível empresarial.

Pré-requisitos:

  • Antigravity e IDE do Antigravity instalados e configurados.
  • Noções básicas sobre o Google Antigravity. Recomendamos que você conclua o codelab: Introdução ao Google Antigravity.

2. Sobre os casos de uso

Como você já tem um conhecimento básico do Antigravity, vamos analisar alguns casos de uso para entender como ele funciona. O Antigravity é uma plataforma focada em agentes. Isso significa que, na maioria dos casos, estamos apenas uma instrução ao agente, que então realiza a tarefa, pede permissões se necessário, produz os artefatos e nos notifica quando a tarefa é concluída. Por isso, não podemos produzir todas as respostas da conversa do agente em cada um dos casos de uso a seguir. Vamos compartilhar as instruções e algumas capturas de tela necessárias dos resultados esperados, mas seus resultados podem ser um pouco diferentes.

Os casos de uso que vamos abordar variam desde a automação de algumas tarefas com sites externos até a geração e verificação de casos de teste de unidade para um projeto e o desenvolvimento completo de um site. Vamos lá.

3. Destaques de notícias

Esse é um caso de uso simples, mas pode ser a base para usar o navegador da Web para visitar sites, extrair informações, realizar algumas ações e retornar dados ao usuário.

Neste caso, vamos acessar o site do Google Notícias e extrair algumas informações de lá. Mas você pode testar facilmente um site da sua escolha e ver como ele funciona.

Vamos presumir que temos uma pasta raiz em que vamos criar os diferentes projetos que veremos neste codelab. Essa pasta raiz na nossa máquina se chama agy2-pprojects.

Primeiro, crie uma pasta chamada news-highlights na pasta acima para começar do zero.

Inicie o Antigravity e crie um projeto. Adicione a pasta news-highlights.

Inicie uma conversa no espaço de trabalho news-highlights recém-importado:

58c4419125240f8f.png

Em seguida, dê a seguinte instrução: "acesse news.google.com e me mostre os destaques do momento."

69859175cdace3c2.png

Isso vai iniciar o processo do agente, que vai determinar que ele precisa acessar o site news.google.com e pedir sua permissão. Ele pode pedir várias vezes para ler URLs, e você pode dar permissão para esse projeto etc.

85f14eddde22704c.png

Preste atenção ao processo de raciocínio e veja como o agente realiza o trabalho. Confira abaixo um exemplo de execução pelo agente:

7be51d200fb1296f.png

O que testar

  • Depois de entender isso, escolha um site disponível e de onde você quer que o agente acesse/resuma alguns dados. Pense em um site que você sabe que tem painéis e gráficos e peça para ele escolher alguns valores.
  • Tente o seguinte comando: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. Gerar um site dinâmico com Python e Flask

Agora vamos gerar um aplicativo da Web completo. O aplicativo da Web que vamos criar é um site que fornece informações sobre um evento técnico de um dia, com palestras de vários palestrantes ao longo do dia.

Mais uma vez, crie uma pasta chamada conference-website. Verifique se você criou um projeto na interface do agente do Antigravity e adicionou a pasta conference-website a ele.

Você pode começar a conversa com o comando mostrado abaixo:

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. 

O Antigravity analisa a solicitação e cria um plano de implementação. Ele vai criar um artefato principal chamado implementation_plan.md para você revisar em termos de como ele planeja criar e atender aos requisitos especificados no comando. Confira um exemplo de saída abaixo:

8f516fd94f4ad57.png

Antes de clicar em "Continuar", confira o plano de implementação. Clique no link para o arquivo implementation_plan.md acima ou ative o painel auxiliar no canto superior direito. Isso vai mostrar a visualização de artefato, e você pode ver que o plano de implementação está lá para sua análise.

e12b6e1270405137.png

Confira abaixo um exemplo de plano de implementação gerado para nossa execução:

5069ec7ab1ae6310.png

Você pode fornecer seus comentários no plano e pedir ao agente de novo ou, por enquanto, podemos aceitar o plano de implementação no estado em que se encontra e seguir em frente clicando no botão Continuar na interface de conversa.

O agente continua gerando os arquivos de código-fonte e atualiza outro artefato chamado "Tarefa". Essa é uma lista de ações ou tarefas que ele identificou como necessárias para alcançar o resultado final.

Você pode clicar na tarefa a qualquer momento ou acessar a lista de artefatos para conferir as tarefas. Confira um exemplo de ficha abaixo:

caf136694efc222f.png

Em algum momento da tarefa final, quando ela tenta executar e verificar o aplicativo, o Antigravity configura um ambiente Python e exige sua permissão para fazer isso, instalar as dependências e muito mais. Conceda as permissões conforme necessário.

Depois que a verificação for concluída, ela vai destacar os detalhes, além de outro artefato, o tutorial, que detalha os recursos concluídos, a pilha de tecnologia, os resultados da validação e as instruções.

d0f61eb85d348030.png

Confira um exemplo de tutorial abaixo:

fb18995f34c286ae.png

O site final quando visitamos o URL é mostrado abaixo:

2b2ee3149d59da7a.png

Se quiser ver o código gerado, clique em Abrir IDE no canto superior direito. Isso vai abrir a IDE do Antigravity, que você pode usar para conferir o código gerado. Confira abaixo uma captura de tela de exemplo:

12798431169dd8cf.png

O que testar

  • Adicione outras funcionalidades que você quer ao aplicativo. Forneça os detalhes ao agente e observe como ele realiza a tarefa, primeiro modificando a lista de tarefas, depois o plano de implementação e assim por diante.
  • Adicione mais dados à programação de eventos. Por exemplo, Add two more talks to the schedule.
  • Peça ao agente para gerar um README ou mais documentação para o aplicativo.

5. Gerar um app de produtividade simples

Agora vamos gerar um aplicativo da Web simples de timer Pomodoro.

Criar uma pasta pomodoro-timer. Verifique se você está no Agent Manager, importou e selecionou o espaço de trabalho pomodoro-timer. Comece com este comando:

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

Observe como ele cria o plano de implementação, a lista de tarefas e depois segue em frente. Continue prestando atenção ao fluxo. Em algumas situações, ele vai pedir sua revisão.

Confira abaixo um exemplo de execução com a mensagem do tutorial e as tarefas:

df0db367ba475db2.png

O app final ficou parecido com o abaixo e tem uma aparência muito boa.

ef8ac58d0677e56.png

O que testar

  • Adicione algumas imagens ao aplicativo. Por exemplo, adicione uma imagem de timer ao aplicativo.
  • Teste algumas variações de qualquer aplicativo que você queira gerar. Brinque com os estilos, imagens, peça mudanças etc.

6. Gerar testes de unidade, stubs de simulação e validar testes

O último caso de uso que vamos testar aqui é a geração de testes de unidade para um arquivo de código específico que temos e para o agente executar e validar os testes.

Para isso, vamos ter um espaço de trabalho com um único arquivo Python, como mostrado abaixo:

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}

Verifique se o arquivo Python acima (order_service.py) está disponível localmente em uma nova pasta e se o projeto está aberto para conversa no Antigravity.

Este é um serviço de pedidos simples que tem a seguinte funcionalidade principal na função checkout:

  1. Valida se o carrinho não está vazio.
  2. Verifique o estoque de todos os itens.
  3. Calcula o preço final.
  4. Cobranças de pagamento.
  5. Atualiza o inventário.

Vamos atribuir ao agente a tarefa de gerar casos de teste de unidade, fornecer implementações de simulação e executar os testes para garantir que eles sejam bem-sucedidos.

Vamos abrir a pasta específica do espaço de trabalho. Você vai notar que agora também podemos usar o símbolo @ para referenciar o arquivo. Por exemplo, podemos começar a digitar @order e o arquivo order_service.py vai aparecer.

c4331bee03c5512c.png

Podemos dar uma tarefa que nos ajude a entender esse arquivo. Dê o seguinte comando:

Explain the @order_service.py file

Isso aparece com alguma explicação sobre o que é esse arquivo:

269ff8450d813970.png

Podemos pedir para ele gerar uma visualização melhor com o comando:

Can you visually show this class for better understanding

O Antigravity menciona que a tarefa foi concluída e que gerou um artefato com a visualização:

ea389f494786a9ad.png

Podemos conferir a visualização como mostrado abaixo:

70e6822a86f74de9.png

e o seguinte:

3ebd94221655a03f.png

A próxima etapa é gerar os testes de unidade e pedir ao agente para testá-los. Dou o seguinte comando:

generate unit tests for this module and test it out with mock implementations.

Ele fez a tarefa, gerou e executou os testes e corrigiu um bug. Esta é a saída:

788cd07aadd09a4b.png

Um dos arquivos gerados também era o arquivo de teste. Confira uma captura de tela abaixo:

7a79d27eb34f0530.png

O que testar

Pegue seu próprio código e veja o que você pode pedir ao agente, desde adicionar mais funcionalidades até refatorar partes do seu código.

7. Parabéns

Parabéns! Você usou o Google Antigravity para:

  • Pesquisar na Web de forma autônoma.
  • Crie e faça iterações em aplicativos da Web de pilha completa.
  • Escrever e validar testes de unidade complexos com simulações.

Agora você já pode deixar o Antigravity cuidar do trabalho pesado nos seus projetos.

Documentos de referência