1. Objetivo deste laboratório
Neste laboratório prático, você vai aprender a usar o Antigravity para criar aplicativos com o Google Antigravity e implantá-los no Google Cloud. Este laboratório também vai apresentar o conceito de desenvolvimento orientado por especificações.
O que você vai aprender
- Entenda os conceitos básicos do Google Antigravity.
- Entenda os conceitos básicos do desenvolvimento orientado por especificações
- Saiba como implantar apps com facilidade no Cloud Run.
Figura 1: o Antigravity é a ferramenta de desenvolvimento focada em agentes criada pelo Google.
2. Configuração do ambiente
- Instale o Antigravity:
👉Download the [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from [here](https://antigravity.google/).
👉Instale o Antigravity no seu ambiente.
👉Acesse a pasta em que o Antigravity está instalado e clique duas vezes para abrir o instalador.
👉Siga as instruções do instalador para instalar o Antigravity no seu ambiente.
- Instalar o Python
👉Acesse https://www.python.org/downloads/ e instale o Python no seu sistema.
- Instalar a gcloud
👉gcloud é uma ferramenta de linha de comando que permite realizar várias operações no Google Cloud. Siga as instruções aqui para instalar a gcloud no seu ambiente.
👉Depois de instalado, teste a instalação abrindo o terminal do sistema e digitando gcloud. 
Figura 2: depois de instalar a gcloud , teste a instalação digitando gcloud no terminal.
3. Configuração do projeto
- Se você ainda não tiver um projeto para usar, crie um novo no console do GCP. Selecione o projeto no seletor de projetos (canto superior esquerdo do console do Google Cloud)
.
Figura 2: clicar na caixa ao lado do logotipo do Google Cloud permite selecionar seu projeto. Verifique se o projeto está selecionado.
- Neste laboratório, vamos usar o editor do Cloud Shell para realizar nossas tarefas. Abra o Cloud Shell e defina o projeto usando o Cloud Shell.
- Clique neste link para acessar diretamente o editor do Cloud Shell.
- Abra o terminal clicando em Terminal>Novo terminal no menu. Você pode executar todos os comandos deste tutorial nesse terminal.
- Para verificar se o projeto já está autenticado, use o seguinte comando no terminal do Cloud Shell.
gcloud auth list
- Execute o comando a seguir no Cloud Shell para confirmar seu projeto.
gcloud config list project
- Copie o ID do projeto e use o comando a seguir para defini-lo:
gcloud config set project <YOUR_PROJECT_ID>
- Se você não se lembrar do ID do projeto, liste todos os IDs com
gcloud projects list
4. Ativar APIs
Precisamos ativar alguns serviços de API para executar este laboratório. Execute o seguinte comando no Cloud Shell:
gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com
Apresentação das APIs
- A API Vertex AI (
aiplatform.googleapis.com) permite o acesso à plataforma Vertex AI , permitindo que seu aplicativo interaja com os modelos do Gemini para geração de texto, sessões de chat e chamadas de função. - A API Cloud Resource Manager (
cloudresourcemanager.googleapis.com) permite gerenciar metadados de forma programática para seus projetos do Google Cloud, como ID do projeto e nome, que geralmente são exigidos por outras ferramentas e SDKs para verificar a identidade e as permissões do projeto.
5. Confirmar se os créditos foram aplicados
Na etapa de configuração do projeto, você solicitou os créditos sem custo financeiro que permitem usar os serviços no Google Cloud. Ao aplicar os créditos, uma nova conta de faturamento sem custo financeiro chamada "Conta de faturamento de teste do Google Cloud Platform" é criada. Para verificar se os créditos foram aplicados, siga estas etapas no Editor do Cloud Shell:
curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3
Se tudo der certo, você vai ver um resultado como este: se aparecer "Projeto vinculado com sucesso", sua conta de faturamento está configurada corretamente. Ao executar a etapa acima, você pode verificar se sua conta está vinculada. Se não estiver, ela será vinculada. Se você não tiver selecionado o projeto, será solicitado que você escolha um. Também é possível fazer isso seguindo as etapas de configuração do projeto. 
Figura 3: confirmação da conta de faturamento vinculada
6. Introdução ao Google Antigravity
O Google Antigravity é uma ferramenta de desenvolvimento de software com foco em IA criada pelo Google DeepMind. O Google Antigravity aproveita o know-how de desenvolvimento de software acumulado ao longo de um longo período com a IA de ponta para oferecer uma experiência de desenvolvimento suave e perfeita para os desenvolvedores.
Confira alguns dos principais recursos do Google Antigravity.
A figura abaixo mostra os elementos básicos do Google Antigravity.
- 👉Abra o navegador e comece a explorar as várias partes dele.
Figura 4: os elementos básicos do Google Antigravity, os detalhes na Tabela 1
Tabela 1: detalhes dos componentes básicos do Google Antigravity
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Modelos Gemini 3 e Nanobanana integrados: com o Google Antigravity, você pode usar os modelos principais mais recentes do Google, como o Gemini 3 e o Nanobanana. Além desses modelos, você também pode usar modelos de terceiros, como o Claude.
Figura 5: você pode usar vários modelos no Google Antigravity 2. Programação orientada por agente: o Antigravity oferece uma experiência de programação nativa orientada por agente que permite que os desenvolvedores permaneçam produtivos sem atrapalhar.
- Planejamento e controle total do usuário: o agente recebe seu comando e o converte em um plano que precisa da sua aprovação antes da execução. Isso garante que o usuário possa mudar a direção do agente a qualquer momento antes da execução da tarefa.
- Feedback do usuário:durante a execução do agente, o usuário pode dar feedback se precisar fornecer mais instruções.
- Vários agentes: você pode gerar vários agentes para trabalhar em diferentes tarefas simultaneamente. Por exemplo, o agente A pode estar refatorando sua lógica de autenticação enquanto o agente B está escrevendo testes de unidade para uma nova API, e o agente C está pesquisando uma biblioteca em segundo plano.
- Agente no editor, terminal e navegador: os agentes do Google Antigravity funcionam em várias plataformas.
- Editor: os agentes do Google Antigravity escrevem o código e o apresentam no Editor.
- Terminal: dependendo das tarefas, os agentes do Google Antigravity podem precisar acessar seu terminal para executar alguns comandos. Os agentes podem executar os comandos para você quando necessário.
- Navegador: os agentes também podem trabalhar com seu navegador. Isso é especialmente útil se você precisar testar seus aplicativos da Web. O agente pode executar, testar e depurar seu aplicativo no navegador da Web.
7. Introdução ao desenvolvimento orientado por especificações de IA
O desenvolvimento orientado por especificações é um paradigma emergente de engenharia de software que coloca especificações estruturadas e agentes de IA no centro do ciclo de vida de desenvolvimento. Ao contrário da abordagem "teste e correção" (tentativa e erro) comum na programação básica de IA, o SDD prioriza a coleta meticulosa de requisitos, o design do sistema/arquitetura e o planejamento de testes. Ele empresta o rigor da fase de design do modelo em cascata, mas o integra a um loop iterativo ágil moderno por meio da automação. Embora o processo exija um planejamento e uma documentação meticulosos, ele é iterativo, já que os agentes de IA permitem implementação e testes rápidos. Assim, você recebe feedback mais rápido que pode ser usado para melhorar a documentação.
A filosofia principal
Nesse modelo, os engenheiros humanos passam de "escritores de código" para "arquitetos de sistema". A principal responsabilidade humana é a descrição de alta fidelidade de problemas e soluções. Essa saída detalhada serve como a única fonte de verdade (SSOT, na sigla em inglês), que os agentes de IA usam para gerar, verificar e refinar a base de código.
O ciclo de vida do SDD
O processo tem os seguintes componentes: As etapas de 1 a 3 são muito focadas no humano, enquanto as etapas de 4 a 5 são focadas no agente de IA. Esse é um processo iterativo em que, após o fim de um ciclo, o feedback pode ser usado para melhorar a especificação.
- Coleta de requisitos:identificação definitiva da lógica de negócios, das necessidades do usuário e das restrições do sistema.
- Design arquitetônico:definição da estrutura do sistema, modelos de dados e pontos de integração.
- Especificação do sistema e de teste:criação de documentos legíveis por máquina (ou altamente estruturados) que definem o que o sistema faz e como ele será validado.
- Geração automática de código:os agentes de IA consomem as especificações para produzir código pronto para produção.
- Teste e validação:os conjuntos automatizados verificam o código gerado em relação à especificação de teste.
Principais princípios operacionais
- O ciclo de design e implementação
As etapas de 1 a 5 não são um caminho linear, mas um ciclo de feedback contínuo. Como a geração de código (etapa 4) e o teste (etapa 5) são amplamente automatizados, a equipe de engenharia pode transferir a maior parte da largura de banda para as três primeiras etapas. Quando um bug é encontrado ou um recurso muda, o engenheiro atualiza a especificação, não o código, e aciona o loop novamente.
- Granularidade modular
Para manter a integridade do sistema, o SDD precisa ser aplicado a módulos refinados em vez de blocos monolíticos.
- Isolamento:se um módulo específico não passar na validação, apenas ele precisará ser especificado e gerado novamente.
- Escalabilidade:módulos pequenos e bem definidos evitam "alucinações" de IA e garantem que a janela de contexto do agente de IA permaneça focada e precisa.
- Controle de qualidade
Nesse paradigma, a especificação do sistema é o projeto, e a especificação do teste é o juiz. A especificação de teste garante que o código gerado sempre esteja em conformidade com os requisitos de qualidade predeterminados. Todo o processo pode ser integrado ao pipeline de CI/CD atual, garantindo que a integridade geral do sistema também atenda ao requisito de qualidade.
Neste laboratório, vamos conhecer os princípios básicos do desenvolvimento orientado por especificações usando o Google Antigravity.
8. Como desenvolver um aplicativo da Web com o Google Antigravity
Neste laboratório, vamos criar um aplicativo simples de galeria de fotos. O Nanobanana, o modelo de geração de imagens, foi criado no Google Antigravity. Vamos usar o Nanobanana para criar as imagens necessárias.
Configurar o navegador da Web
O navegador da Web será usado para testes automáticos do app. Nas etapas abaixo, vamos configurar o navegador para que o Antigravity possa testar o aplicativo automaticamente.
- 👉Clique no botão "Configurações" (ícone de engrenagem) no canto superior direito e selecione "Abrir configurações do usuário do Antigravity".
- 👉Clique em "Agente" no painel esquerdo e, na seção "ARTIFACT", selecione "Sempre continuar" em "Revisar política".
- 👉Clique em "Navegador" no painel à esquerda e verifique se a opção "Ativar ferramentas do navegador" está ativada.
Criar um aplicativo com o Google Antigravity
- 👉Abra o Google Antigravity clicando no ícone Google Antigravity.
- 👉Crie uma pasta chamada "Galeria" na sua pasta pessoal, por exemplo: Computador.
- 👉Toque em "Abrir pasta" no Antigravity e selecione a pasta "Galeria". Isso vai abrir um novo espaço de trabalho na pasta "Galeria".
- 👉Se o painel do agente ainda não estiver aberto, clique no botão Alternar painel do agente para abrir. Consulte a Figura 4, botão nº 2.
- 👉Para começar a programar, digite suas instruções no painel do agente. É muito importante deixar as instruções o mais claras possível. Insira o seguinte no painel do 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
Versão em 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. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します
- 👉Clique no botão "Executar". Depois de executar, o agente vai mostrar o plano de execução como abaixo.
Figura 5: o agente antigravidade mostra o plano de implementação
- 👉Você vai receber uma solicitação para confirmar. Faça isso conforme mostrado abaixo. O Antigravity vai usar automaticamente o Nanobanana e o modelo de LLM selecionado para realizar a tarefa.
Figura 6: o Antigravity quer executar um comando. Pressione Executar para permitir a execução.
Figura 7: pressione "Aceitar tudo" quando solicitado.
- 👉Depois que o código for gerado, o Antigravity vai abrir o navegador e começar o teste. Depois de testar, ele vai fornecer os resultados.
Figura 8: o Antigravity mostra os resultados do teste - 👉Se solicitado, pressione "Aceitar tudo" para salvar todo o código gerado no painel do agente.
- 👉No painel "Explorador" do Antigravity , você vai encontrar o código recém-gerado.
Figura 9: código final - 👉Para testar o aplicativo, clique com o botão direito do mouse em index.html, encontre o caminho do arquivo e cole na barra de URL do navegador da Web.
Figura 10: para testar o app, basta copiar o caminho do arquivo index.html no navegador da Web.
9. Configurar o ambiente para implantação
- 👉 Acesse https://console.cloud.google.com para conferir o ID do seu projeto do Google Cloud.
- 👉Clique no canto superior esquerdo e copie o ID do projeto em algum lugar. Vamos usar isso nas próximas etapas.
Figura 11: copie o ID do projeto e guarde-o para referência futura - 👉No terminal aberto do Antigravity, clique em Terminal->Novo terminal no menu.
- 👉Precisamos definir as variáveis de ambiente, que são diferentes para Windows e Mac/Linux. Substitua "YOUR CLOUD PROJECT" pelo projeto anotado na etapa 2. Observação para usuários do Windows PowerShell: abra o PowerShell no 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"
- Faça login no console, quando solicitado, faça login no Google Cloud no navegador.
gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT
Figura 12: realizar a autenticação
- 👉Instale o servidor MCP do Cloud Run. No canto superior direito da janela "Antigravity", clique em "..." . Clique na opção "Servidores MCP". Os servidores MCP são como as extensões do agente que permitem o acesso a dados e ferramentas externas.
- 👉Digite "Cloud Run" na caixa de pesquisa e clique em "Cloud Run"
Figura 13: servidor MCP do Cloud Run - 👉Volte ao painel do agente pressionando a tecla de seta para trás ao lado do título "Servidores MCP". Agora podemos começar a interagir com o Google Cloud Run. Insira o seguinte no painel do agente. Isso vai usar automaticamente o servidor MCP do Cloud Run e mostrar a lista de serviços em execução no Cloud Run.
Find me the list of services running in Cloud Run.
- 👉Implante o app com o seguinte comando. Basta implantar usando linguagem natural. O Antigravity vai usar automaticamente o servidor MCP para fazer a implantação.
Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80
- 👉O agente vai mostrar onde o app foi implantado. Por exemplo: https://photogallery-85469421903.us-central1.run.app . O servidor MCP do Cloud facilita muito a implantação do seu app da Web no Cloud Run.
10. Limpar
Agora vamos limpar o que acabamos de criar.
- 👉Exclua o app Cloud Run que acabamos de criar. Acesse o Cloud Run em Cloud Run . Você vai encontrar o app criado na etapa anterior. Marque a caixa ao lado do app e clique no botão "Excluir".
Figura 38: como excluir o app do Cloud Run
11. Conclusão
Parabéns! Você criou um app usando o Google Antigravity seguindo as práticas de desenvolvimento orientado por especificações e aprendeu a implantar o aplicativo no Cloud Run. Essa é uma conquista significativa que abrange o ciclo de vida principal de um aplicativo moderno nativo da nuvem, oferecendo uma base sólida para implantar seus próprios sistemas complexos.
Resumo
Neste laboratório, você aprendeu a:
- Criar um aplicativo multiagente usando o Google Antigravity
- Implante o aplicativo no Cloud Run.
Recursos úteis