1. Introdução
Neste codelab, você vai criar o CloudCrush, um jogo de arcade de combinar 3, usando o Gemini 3 e o agente de programação Antigravity. O jogo será escrito em Go e implantado no Google Cloud usando o Cloud Run.
Embora seja recomendável ter conhecimento da linguagem Go, não é necessário para fazer este workshop, já que o agente fará toda a programação. O principal objetivo deste codelab é desenvolver as habilidades para orquestrar o agente e criar aplicativos para você em vez de escrever código manualmente.
Este codelab é para desenvolvedores intermediários que querem aprender fluxos de trabalho agentivos avançados. A duração total estimada deste laboratório é de 60 minutos. Os recursos criados neste codelab usam preços baseados no consumo.
Atividades deste laboratório
- Crie a lógica principal do jogo de combinar 3 usando Go e o framework Ebitengine.
- Adaptar o jogo para ser executado em um navegador da Web usando o WebAssembly (WASM)
- Implante o jogo e a API de pontuação máxima no Cloud Run.
- Orquestrar subagentes e extensões especializados para testes e revisão de código
Pré-requisitos
- Conhecimento básico de linguagens de programação
- Conhecimento básico de infraestrutura em nuvem
- Conhecimento básico do console do Google Cloud
O que você vai aprender
- Como trabalhar com um agente de programação para criar aplicativos complexos
- Como trabalhar com o Gemini em um contexto multimodal
- Como implantar aplicativos na nuvem usando o Cloud Run
O que é necessário
Este workshop pode ser feito totalmente na nuvem usando o Cloud Shell, mas, se preferir usar sua máquina local, você vai precisar do seguinte:
- Antigravity 2.0 e CLI do Antigravity. Faça o download e instale seguindo as instruções em antigravity.google
- A cadeia de ferramentas Go (versão 1.26 ou mais recente). Faça o download e a instalação seguindo as instruções em go.dev.
- A CLI gcloud para interagir com o Google Cloud. Faça o download e a instalação seguindo as instruções na documentação do Google Cloud.
- Uma conta de faturamento do Google Cloud (para implantar o jogo na nuvem)
Principais tecnologias
Confira mais informações sobre as tecnologias que vamos usar:
- CLI do Antigravity: o agente de desenvolvimento
- Gemini 3: a versão mais recente do nosso modelo de linguagem grande de ponta
2. Configuração do ambiente
Escolha uma das seguintes opções: Configuração do ambiente no seu ritmo se quiser executar este codelab na sua própria máquina ou Iniciar o Cloud Shell se quiser executar este codelab totalmente na nuvem.
Configuração de ambiente personalizada
- Faça login no Console do Google Cloud e crie um novo projeto ou reutilize um existente. Crie uma conta do Gmail ou do Google Workspace, se ainda não tiver uma.
- O Nome do projeto é o nome de exibição para os participantes do projeto. É uma string de caracteres não usada pelas APIs do Google e pode ser atualizada quando você quiser.
- O ID do projeto precisa ser exclusivo em todos os projetos do Google Cloud e não pode ser mudado após a definição. O console do Cloud gera automaticamente uma string exclusiva. Em geral, não importa o que seja. Na maioria dos codelabs, é necessário fazer referência ao ID do projeto, normalmente identificado como
PROJECT_ID. Se você não gostar do ID gerado, crie outro aleatório. Se preferir, teste o seu e confira se ele está disponível. Ele não pode ser mudado após essa etapa e permanece durante o projeto. - Para sua informação, há um terceiro valor, um Número do projeto, que algumas APIs usam. Saiba mais sobre esses três valores na documentação.
- Em seguida, ative o faturamento no console do Cloud para usar os recursos/APIs do Cloud. A execução deste codelab não vai ser muito cara, se tiver algum custo. Para encerrar os recursos e evitar cobranças além deste tutorial, exclua os recursos criados ou exclua o projeto. Novos usuários do Google Cloud estão qualificados para o programa de US$ 300 de avaliação sem custos.
Iniciar o Cloud Shell
Embora o Google Cloud e o Spanner possam ser operados remotamente do seu laptop, neste codelab usaremos o Google Cloud Shell, um ambiente de linha de comando executado no Cloud.
No Console do Google Cloud, clique no ícone do Cloud Shell na barra de ferramentas superior à direita:
O provisionamento e a conexão com o ambiente levarão apenas alguns instantes para serem concluídos: Quando o processamento for concluído, você verá algo como:
Essa máquina virtual contém todas as ferramentas de desenvolvimento necessárias. Ela oferece um diretório principal persistente de 5 GB, além de ser executada no Google Cloud. Isso aprimora o desempenho e a autenticação da rede. Neste codelab, todo o trabalho pode ser feito com um navegador. Você não precisa instalar nada.
3. Configuração do projeto
Criar o diretório do projeto
Primeiro, precisamos criar um novo diretório para seu projeto. No terminal, execute os seguintes comandos:
mkdir -p codelab-match3 && cd codelab-match3
Iniciar a CLI do Antigravity
Primeiro, vamos verificar se a CLI do Antigravity foi instalada corretamente. Execute no terminal:
agy --version
Você verá algo como:
$ agy --version 1.0.2
Agora, inicie a CLI do Antigravity com o comando agy:
agy
O Antigravity vai perguntar se você confia neste projeto. Como acabamos de criar uma pasta vazia, é seguro confiar nela. Confirme o acesso para abrir o prompt da CLI:
Se você estiver vendo o prompt da CLI Antigravity, está tudo certo. Caso contrário, verifique se você perdeu alguma das etapas de configuração anteriores.
4. Criar o jogo base no modo de planejamento
Vamos começar criando a lógica principal do jogo de combinar 3. Por padrão, o Antigravity começa no modo de planejamento. Portanto, não é necessário emitir comandos especiais para mudar para esse modo.
No entanto, é útil saber que você pode ativar o modo de planejamento a qualquer momento com o comando de barra /planning no prompt da CLI do Antigravity:
/planning
Se você tentar executar esse comando agora, o Antigravity vai lembrar que ele já está em planejamento.
O oposto do modo de planejamento é o modo rápido, que pode ser ativado com /fast:
/fast
No modo rápido, o Antigravity começa a trabalhar na tarefa imediatamente. Ele é destinado a tarefas mais simples e independentes. O modo de planejamento foi criado para tarefas complexas. Nele, o agente primeiro elabora um plano que você pode revisar e repetir antes da execução.
Baixar os recursos
Precisamos baixar as imagens que serão usadas no jogo. Como essa é uma tarefa pequena e independente, não é necessário executá-la no modo de planejamento. Vamos aproveitar o fato de estarmos no modo rápido para fazer isso imediatamente:
Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang
O Antigravity vai pedir permissão para executar alguns comandos shell e baixar os arquivos. Depois disso, você verá algo assim:
Criar o jogo base
Com os recursos prontos, agora é hora de criar o jogo base. Como criar um jogo é uma tarefa bastante complexa, vamos voltar ao modo de planejamento antes de dar o comando:
/planning
No modo de planejamento, copie e cole o seguinte comando na CLI do Antigravity:
Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background.
On the right side of the play area include a side panel with UI elements
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.
Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.
The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.
Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.
The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.
Ele pode fazer algumas pesquisas antes de criar o plano, por exemplo, inspecionar os arquivos PNG para ver as dimensões. Quando o plano estiver pronto, você vai precisar revisá-lo:
Preste atenção no canto inferior direito, onde você escreveu 1 artefato e a dica para usar /artifact para revisar. No Antigravity, os arquivos de suporte, como planos, listas de tarefas e tutoriais, são chamados de "artefatos" para diferenciá-los dos arquivos comuns que fazem parte da solução (por exemplo, código-fonte).
Ao inserir o comando /artifact no prompt, você pode ver o plano e fazer comentários sobre ele caso precise fazer ajustes.
/artifact
Você verá algo como:
Há um arquivo chamado implementation_plan.md com as opções para abrir, aprovar ou rejeitar. Pressione Enter para abrir. Confira um exemplo de como o plano aparece no meu sistema:
Você pode rolar para cima e para baixo com as teclas de seta e adicionar um comentário em qualquer linha pressionando a tecla C. Nesse caso, não gosto de usar uma versão mais antiga do Go. Por isso, vou adicionar um comentário para usar o Go 1.26 (a versão mais recente no momento da redação deste artigo) na linha 16:
Depois de inserir o comentário, ele vai aparecer em linha:
Uma seção importante para verificar é o "Plano de verificação". É difícil testar jogos automaticamente, mas Go é uma linguagem compilada. Portanto, precisamos garantir que o modelo nos entregue um código que seja compilado. Se uma etapa automatizada para criar o binário não estiver incluída, adicione-a como um comentário:
Uma seção importante para verificar é o "Plano de verificação". Os jogos são notoriamente difíceis de testar automaticamente, mas Go é uma linguagem compilada. Portanto, precisamos garantir que o modelo esteja nos entregando um código que seja compilado. Se uma etapa automatizada para criar o binário não estiver incluída, adicione-a como um comentário:
Repita esse processo até ficar satisfeito com o plano e pressione ESC para voltar. Em seguida, pressione Y para confirmar o envio dos comentários ao agente:
Depois que você pressionar Y, o agente vai começar a trabalhar imediatamente. Pressione ESC mais uma vez para sair do menu "Artefato". Isso vai levar você de volta ao modo de comando. Enquanto isso, o agente pode pedir muito mais confirmações de chamadas de função porque precisa executar comandos do shell.
Enquanto isso, podemos continuar trabalhando no design colocando comandos em fila. Por exemplo, podemos aproveitar essa oportunidade para adicionar um novo requisito que não foi incluído no comando original:
Add a 60-seconds countdown timer and an in-memory high-score tracker to enhance the arcade game experience. Combos should give a score bonus of 10% per combo number.
Uma solicitação na fila vai aparecer no histórico de mensagens com uma pequena ponta de seta na frente:
Você também pode notar que o número de artefatos está aumentando. Além do plano, o Antigravity também cria uma lista de tarefas (task.md) para acompanhar cada item que precisa ser implementado ou ação que precisa ser realizada. Depois disso, ele cria um arquivo de tutorial (walkthrough.md) com uma explicação dos objetivos alcançados. É possível inspecionar todos eles usando o comando /artifact novamente.
Confira um exemplo do arquivo task.md após concluir a implementação do jogo básico:
A qualquer momento, você pode abrir esses arquivos e adicionar comentários a eles. Ao serem enviados ao agente, eles serão enfileirados para execução, assim como um comando enfileirado. É uma boa prática comentar nesses arquivos para dar ao agente mais contexto sobre sua solicitação.
Depois que o binário for criado, você verá algo assim:
Tente executar o jogo e veja se ele funciona conforme o esperado. É uma boa ideia executar o comando no prompt do agente. Você pode mudar o comando para o "modo shell" digitando um ponto de exclamação "!":
A mensagem "modo bash ativado" vai aparecer abaixo do comando. Pressione Enter para executar o comando. Executar o binário nesse modo oferece o benefício de que o agente "observa" qualquer saída para o terminal. Assim, caso o jogo não seja executado ou falhe abruptamente, não é necessário explicar ao agente o problema que aconteceu. Ele vai ter imediatamente todas as informações necessárias do contexto do shell.
Teste o jogo e ajuste os parâmetros até ficar satisfeito com a experiência (por exemplo, acelerando ou diminuindo a animação, ajustando a resposta aos comandos etc.).
Por exemplo, esse comando vai melhorar a experiência, adicionando um modo de acessibilidade e novos comandos de teclado:
Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.
Also enable Arrow Keys to move the selection cursor and Space to select the gem to
swap (space is pressed once to select, then arrow key immediately makes
the move - no need to press space again).
Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.
Depois de concluir o refinamento, passe para a próxima seção para converter o app em um aplicativo da Web.
5. Adaptar o jogo para ser executado em um navegador da Web
No momento, o jogo Ebitengine é um aplicativo para computador. Vamos pedir à CLI Antigravity para adaptar o código e executá-lo em um navegador da Web usando o WebAssembly (WASM). Isso envolve compilar o código Go para o destino do navegador e configurar um servidor da Web básico.
Use o comando a seguir para orientar o agente:
We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.
O agente vai tentar encontrar um arquivo chamado wasm_exec.js no seu sistema de arquivos. Isso é esperado e precisa ser permitido, já que esse arquivo é o wrapper que permite executar binários Go via JS. Exemplo:
Depois que o agente concluir a tarefa, você poderá instruí-lo a executar o servidor de jogos em segundo plano.
Agora abra http://localhost:8080 no navegador para ver o jogo em execução na Web:
Agora que ele está em execução na Web, vamos dar um toque final antes de implantá-lo na nuvem.
6. Criar a tela de título e o placar
O jogo funciona, mas faltam alguns recursos importantes para uma experiência de arcade adequada. Primeiro, vamos adicionar uma tela de título e depois um placar para que você possa competir com seus amigos. Use o seguinte comando:
Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which
will then be recorded to populate the leaderboard at the end of the round.
Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries,
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.
Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).
Leaderboard scores should be saved in-memory, server-side.
Ele está começando a ficar um pouco mais profissional. 🙂
7. Implantar o jogo no Cloud Run
Chegou a hora de compartilhar nossa criação com o mundo! Vamos implantar todo o aplicativo no Google Cloud Run para poder acessá-lo de qualquer lugar.
Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.
Como o jogo agora está disponível na nuvem, seria uma oportunidade perdida não permitir que ele fosse executado em dispositivos móveis. Você pode fazer isso com o seguinte comando:
Now enable this game to run on mobile devices. You need to update the input system to handle "taps" as well as key presses and clicks. Since mobile devices most likely won't have a keyboard, add a virtual keyboard to the name entry screen and a confirmation button to the name entry.
Finally, generate a QR code for the CloudRun link and display it on the screen so that people can scan it to access the mobile version and compete against their friends for the high score.
Execute o jogo novamente no navegador. Tente acessar o URL também em um dispositivo móvel. Você pode gerar um QR code para simplificar essa experiência.
8. Usar o agente do navegador para testar o jogo
Embora um jogo seja difícil de testar automaticamente porque depende de feedback visual, ainda podemos usar alguma automação para garantir que a implantação esteja funcionando corretamente e que os elementos básicos estejam no lugar.
Para isso, vamos usar o subagente do navegador. No Antigravity, um subagente é uma persona isolada com um contexto novo, perfeita para tarefas em que você não quer que o contexto atual influencie os resultados ou quando quer evitar que a tarefa "contamine" a janela de contexto principal.
O agente do navegador é um agente especial integrado para tarefas relacionadas ao navegador. Para esta etapa, precisamos usar o app Antigravity para computador, já que o agente do navegador não está disponível na linha de comando.
Abra o app Antigravity para computador e inicie uma nova conversa no projeto Cloud Crush:
Para acionar o subagente do navegador, digite /browser seguido deste comando:
Go to http://localhost:8080 and capture screenshots of the following game screens:
1. Title Screen (initial state: "PRESS ENTER TO PLAY")
2. Name Entry Screen (press Enter to reach this screen)
3. Main Gameplay Screen (type a name like "PLAYER" and press Enter to start)
4. Leaderboard Screen (let the game timer run out to view the high scores)
Essa abordagem permite usar as capturas de tela para corrigir elementos da interface que, de outra forma, seriam difíceis de descrever apenas em texto.
Para fazer referência a arquivos, use o símbolo "@" seguido do nome do arquivo. Por exemplo, aqui estou pedindo ao agente para aumentar o tamanho do logotipo na tela de título:
Embora esse exemplo seja um pouco forçado, já que o modelo não precisa necessariamente "ver" a imagem para aplicar uma correção de 50% no tamanho, é uma técnica útil para fazer ajustes na interface em que seria mais difícil descrever o problema em formato de texto. Ele também permite que o agente valide o próprio trabalho tirando capturas de tela antes e depois. Portanto, mantenha esse truque na sua caixa de ferramentas.
9. Criar um agente personalizado para proteger o jogo
Uma preocupação comum com aplicativos "vibe-coded" é como manter a alta qualidade e as práticas recomendadas do ponto de vista da programação e da segurança. Você pode tentar melhorar os comandos para que sejam muito rigorosos nesses dois aspectos, mas quanto mais você adiciona a um comando, menos focado o agente fica, o que geralmente resulta em resultados abaixo do ideal.
Para esse tipo de cenário, o uso de subagentes é ideal, já que eles podem se concentrar na tarefa que você atribui a eles. Vamos criar um agente personalizado para fazer uma auditoria de segurança nesse código e garantir que não estamos vazando credenciais nem nos expondo a riscos desnecessários ao implantar esse jogo.
Este comando fornece uma boa base para o agente:
create a new subagent called "security_auditor" using the following instructions:
You are a ruthless Security Auditor. Your job is to analyze code for potential vulnerabilities.
Focus on:
1. SQL Injection
2. XSS (Cross-Site Scripting)
3. Hardcoded credentials
4. Unsafe file operations
When you find a vulnerability, explain it clearly and suggest a fix. Do not fix it yourself; just report it.
O Antigravity vai usar a ferramenta "DefineSubagent" para criar o novo agente:
Peça ao agente para fazer uma verificação de segurança no código do jogo com o seguinte comando:
Run the security auditor agent in this code
Você verá algo como:
Quando o agente concluir a tarefa, você vai receber um relatório como este:
Vamos pedir para o Antigravity corrigir isso para nós 🙂:
Fix these findings for me please!
E voilà:
Os agentes criados dessa forma só existem durante a conversa. Se você quiser um agente "reutilizável" entre sessões, crie-o usando um arquivo de configuração. Para mais informações, consulte o comando /agents.
10. Conclusão
Parabéns! Você usou a CLI Antigravity para criar, implantar, testar e auditar um jogo de arcade, demonstrando fluxos de trabalho de agente avançados, desde o scaffolding inicial até a implantação.
Limpeza
Para evitar cobranças contínuas na sua conta do Google Cloud, exclua os recursos criados durante este codelab.
- Exclua o serviço do Cloud Run:
I'm finished with this project. Delete the cloud run deployment.
- Exclua o diretório do projeto:
cd .. && rm -rf codelab-match3
Como alternativa, é possível excluir todo o projeto do Google Cloud se ele foi criado apenas para este codelab.
Próximas etapas
Você pode continuar sua jornada de aprendizado explorando outros codelabs nesta plataforma ou melhorando o Cloud Crush por conta própria. Não se esqueça de limpar os recursos quando terminar de usá-los.
Divirta-se com os códigos!