O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Planejar e criar apps com o plug-in Conductor

1. Introdução

Neste codelab, você vai aprender a planejar e criar aplicativos de software com o plug-in Conductor. O Conductor é um plug-in de código aberto criado pelo Google que ativa recursos de desenvolvimento orientados por especificações, como planejamento e acompanhamento da implementação. Você vai começar criando um aplicativo "greenfield" do zero. Em seguida, vai tratá-lo como um projeto "brownfield", iterando nele para adicionar autenticação e armazenamento.

Atividades deste laboratório

Instalar o plug-in Conductor na CLI do Antigravity ou no Claude Code
Criar um app da Web "Picker Wheel" do zero usando os recursos de planejamento e implementação do Conductor
Adicionar personalização ao aplicativo, incluindo autenticação e armazenamento usando o Firebase

O que você vai aprender

Como usar o plug-in Conductor para planejar, implementar e revisar um aplicativo "greenfield"
Como usar o plug-in Conductor para adicionar recursos a um aplicativo "brownfield"

O que é necessário

Um navegador da Web, como o Chrome
Tenha um projeto na nuvem do Google Cloud com o faturamento ativado.
Node.js instalado (versão 18 ou mais recente recomendada)
Um editor de código local, como o Visual Studio Code
Um agente de programação, como a CLI do Antigravity ou o Claude Code

2. Antes de começar

Criar um projeto do Google Cloud

No console do Google Cloud, na página de seletor de projetos, selecione ou crie um projeto na nuvem.
Verifique se o faturamento está ativado para seu projeto na nuvem. Saiba como verificar se o faturamento está ativado em um projeto.

Iniciar o Cloud Shell

O Cloud Shell é um ambiente de linha de comando em execução no Google Cloud que vem pré-carregado com as ferramentas necessárias.

Clique em Ativar o Cloud Shell na parte de cima do console do Google Cloud.
Depois de se conectar ao Cloud Shell, verifique sua autenticação:
```
gcloud auth list
```
Confirme se o projeto está configurado:
```
gcloud config get project
```

Se o projeto não estiver definido como esperado, defina-o:

export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

Ativar APIs

Ative a API Firebase Management no seu projeto na nuvem do Google Cloud.

gcloud services enable firebase.googleapis.com

Adicione o Firebase ao seu projeto

A CLI do Firebase vem pré-instalada no Cloud Shell. No Cloud Shell, faça login com a mesma Conta do Google que dá acesso ao projeto na nuvem do Google Cloud. Se você estiver trabalhando localmente, instale a CLI do Firebase seguindo as instruções.

firebase login

Execute o seguinte comando para adicionar o Firebase ao seu projeto do Google Cloud:

firebase projects:addfirebase

Se esta for a primeira vez que você executa a CLI firebase, responda às perguntas que forem feitas.

Sair do Cloud Shell

Você pode fechar a janela do Cloud Shell. Na seção a seguir, vamos configurar seu ambiente local.

3. Instalar e autenticar agentes de programação da CLI

Nesta etapa, você vai preparar seu ambiente de desenvolvimento local instalando e autenticando a CLI do Antigravity ou o Claude Code no editor de código local usando suas credenciais do Google Cloud.

Instalar e autenticar a CLI do Antigravity

Instale a versão mais recente da CLI do Antigravity.

# MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd

Reinicie o terminal para que agy seja adicionado ao seu CAMINHO.
Verifique se a instalação instalou a versão mais recente.
```
agy --version
```
Autentique usando suas credenciais do Google Cloud.
- Inicie a CLI do Antigravity.
```
agy
```
- Quando solicitado a Selecionar o método de login, selecione Usar um projeto do Google Cloud. Abra o URL de autorização segura em um navegador da Web. Faça login com suas credenciais aprovadas e conclua a autenticação. O navegador mostra um código de autorização alfanumérico exclusivo. Copie esse código, volte ao terminal e cole-o no prompt.
Você também pode escolher outros métodos de login. Este codelab tem como objetivo mostrar como trabalhar com um projeto do Google Cloud.
Saia da CLI do Antigravity.Digite /exit no terminal da CLI para encerrar a sessão da CLI do Antigravity antes de continuar.

Instalar e autenticar o Claude Code

Como alternativa, você pode usar o plug-in Conductor com o Claude Code. Aqui, vamos instalar e autenticar o Claude Code usando suas credenciais do Google Cloud.

Instale a versão mais recente do Claude Code.
Autentique usando suas credenciais do Google Cloud.
- Inicie o Claude Code.
```
claude
```
- Digite /login para selecionar seu método de login. Escolha a opção Plataforma de terceiros · Amazon Bedrock, Microsoft Foundry ou Vertex AI e Google Vertex AI. Para configurar a Vertex AI do Google, escolha Application Default Credentials (google auth) e conclua a configuração conforme solicitado.
Você também pode escolher outros métodos de login. Este codelab tem como objetivo mostrar como trabalhar com um projeto do Google Cloud.
Reinicie o Claude Code.

4. Instalar o plug-in Conductor

O Conductor é um plug-in de código aberto criado pelo Google que ativa recursos de desenvolvimento orientados por especificações, como planejamento e acompanhamento da implementação.

Instalar na CLI do Antigravity

Instale o plug-in:

CLI do Antigravity

agy plugins install https://github.com/gemini-cli-extensions/conductor

Verifique a instalação:
- Inicie a CLI do Antigravity.
```
agy
```
- Digite /conductor e você verá uma lista de comandos como /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement, etc.
Saia da CLI.Digite /exit no terminal para encerrar a sessão da CLI antes de continuar.

Instalar no Claude Code

Registre o repositório do marketplace e instale o plug-in Conductor diretamente na sessão do Claude Code.
```
/plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
```
Verifique a instalação.
- Digite /conductor e você verá uma lista de comandos como /conductor-setup, conductor-new-track, conductor-implement, etc.
Saia da CLI.Digite /exit no terminal do Claude Code para encerrar a sessão da CLI antes de continuar.

5. Desenvolvimento greenfield: a roda de seleção

Agora que seu ambiente está configurado, você vai criar um novo aplicativo do zero. Você vai criar uma "roda de seleção", um app da Web leve que gira para selecionar uma opção aleatória.

Configurar o contexto do produto

Crie e mude para um novo diretório de projeto.Agora trabalhamos em um projeto em um diretório picker-wheel. Crie esse diretório e mude para ele.
```
mkdir picker-wheel
cd picker-wheel
```
Inicie a CLI do Antigravity.Inicie uma nova sessão da CLI no diretório do projeto com a CLI do Antigravity ou o Claude Code.
```
# Antigravity CLI
agy

# Claude Code
claude
```
- Quando perguntado "Você confia nos arquivos desta pasta?", selecione Confiar na pasta (picker-wheel).
Inicialize o Conductor.Execute o comando de configuração para criar o projeto e configurar o ambiente do Conductor.
```
# Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
```
Siga os prompts interativos.Os prompts interativos que você vê não correspondem exatamente a estes exemplos. Concentre-se em um design mais simples para se familiarizar com o fluxo de trabalho do Conductor.
- Meta do produto: um aplicativo da Web que mostra uma roda giratória configurável para selecionar um item aleatório de uma lista.
  - Público-alvo → Público em geral
  - Interação → Toque/clique para girar
  - Personalização → Básica
  - Plataforma → Prioridade para computador
- Diretrizes de produtos: geradas automaticamente.
- Stack de tecnologia:
  - Idiomas → TypeScript/JavaScript: ideal para Web full-stack
  - Front-end → Vue.js: interfaces da Web intuitivas
  - Back-end → Express.js: back-end rápido do Node
  - Banco de dados → Nenhum: não é necessário ter um banco de dados
- Fluxo de trabalho: padrão.
- Requisitos do produto:
  - Histórias de usuários → Opções personalizáveis, exibição clara do vencedor
  - Principais recursos → Lista de opções editável, cores aleatórias
  - Restrições → Somente do lado do cliente, alto desempenho
  - Não funcional → Alta cobertura de testes, TypeScript e Vue.js, design responsivo
O Conductor vai gerar arquivos de contexto em um diretório conductor/.

Criar uma nova faixa

Uma "faixa" no Conductor representa um recurso ou uma unidade de trabalho.

Inicie uma nova faixa usando /conductor-new-rack.O Conductor pode propor uma faixa inicial com base no contexto do produto. Como alternativa, você pode propor sua própria faixa ou pedir que o Conductor sugira uma.
Revise o plano gerado.O Conductor vai gerar um index.md, um spec.md e um plan.md dentro de conductor/tracks/{track-id}/. Leia-os. Se tudo estiver certo, o Conductor vai pedir que você salve e confirme os arquivos de configuração inicial.

Implementar a faixa

Inicie a implementação.
```
# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
```
O Conductor vai trabalhar no plano, escrevendo código para o projeto.
Dica:para evitar ficar preso em shells interativos ou processos de longa duração (como servidores de desenvolvimento ou observadores de teste), precisamos garantir que o Conductor saiba exatamente como lidar com esses comandos específicos. Ferramentas como Vite (npm run dev) e Vitest (npm run test) geralmente são executadas no "modo de observação" por padrão, o que mantém o processo aberto indefinidamente. Você pode instruir o Conductor a desativar o modo de observação ou usar is_background: true ao executar comandos atualizando workflow.md.
Verifique o aplicativo.Durante a fase de implementação, o Conductor vai pedir que você teste o aplicativo manualmente. Por exemplo, ele vai pedir que você abra o servidor da Web local, visualize o aplicativo no navegador e verifique as mudanças. Quando a implementação estiver concluída, você verá uma roda de seleção funcional.
Solução de problemas:se o código gerado se comportar de maneira inesperada, verifique o conductor/tracks/.../plan.md para conferir se há etapas ou erros ignorados.
Revise a implementação.Como última etapa, você pode pedir que o Conductor revise a implementação. Ele vai revisar o código-fonte, sincronizar a documentação do projeto e arquivar a faixa.
```
# Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review
```

6. Iteração brownfield: adicionar personalização

Agora você vai mudar para o desenvolvimento "brownfield". Você vai melhorar o aplicativo da Web da roda de seleção da seção anterior para que os usuários conectados possam salvar e restaurar as configurações da roda de seleção.

Criar uma faixa de personalização

No exemplo "brownfield" a seguir, vamos usar o Firebase para autenticação e armazenamento. Instale as habilidades do Firebase para que o Conductor possa usá-lo.
Inicie o agente da CLI.Inicie uma nova sessão da CLI.
```
# Antigravity CLI
/new

# Claude Code
/new
```

Inicie uma nova faixa.

# Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."

Siga os prompts interativos.Os prompts interativos que você vê não correspondem exatamente a estes exemplos. Concentre-se em um design mais simples para se familiarizar com o fluxo de trabalho do Conductor.
- Meta do objetivo:
  - Provedor de autenticação → Firebase Auth
  - Configurações salvas → Opções de roda
  - Armazenamento de dados → Firestore
  - Interface de login do Firestore → Sobreposição modal
O Conductor vai gerar arquivos de contexto para uma nova faixa dentro de conductor/tracks/{track-id}.
Revise o plano gerado.Leia um index.md, um spec.md e um plan.md dentro de conductor/tracks/{track-id}/.

Implemente.Se tudo estiver certo, você poderá iniciar a implementação.

# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement

Verifique.Recarregue o aplicativo. Você verá um aplicativo atualizado.
Caso a IA fique presa ao testar a implementação da autenticação, lembre-se de ativar o login do Google no console do Firebase em Autenticação > Método de login.

Confira o código dourado para uma implementação de referência. Você precisa fornecer seu projeto do Firebase em .firebaserc e suas configurações do Firebase em firebase.ts para iniciar o aplicativo corretamente.

7. Limpar

Para evitar cobranças contínuas na sua conta do Google Cloud, exclua os recursos criados durante este codelab.

Excluir o projeto do Firebase e do Google Cloud

A maneira mais fácil de fazer a limpeza é excluir o projeto inteiro.

No console do Google Cloud, selecione o projeto criado.
Clique em EXCLUIR.

Como alternativa, se você quiser manter o projeto, mas excluir recursos:

Excluir o banco de dados do Firestore: acesse o console do Firebase > Firestore e exclua o banco de dados.
Excluir a autenticação: acesse o console do Firebase > AutenticaçãoMétodo de login, desative o Google.

8. Parabéns

Parabéns! Você usou o plug-in Conductor no agente de programação escolhido (CLI do Antigravity ou Claude Code) para criar um aplicativo da Web do zero e, em seguida, iterar nele com recursos complexos, como autenticação e integração de banco de dados.

Próximas etapas

Consulte a documentação dos plug-ins da CLI do Antigravity
Consulte a documentação dos plug-ins do Claude Code