Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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 permite 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, você vai tratá-lo como um projeto "brownfield", iterando nele para adicionar autenticação e armazenamento.

Atividades deste laboratório

Instale 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
Adicione personalização ao aplicativo com 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 do Google Cloud com o faturamento ativado.
Node.js instalado (recomendamos a versão 18 ou mais recente)
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 do seletor de projetos, selecione ou crie um projeto na nuvem do Google Cloud.
Verifique se o faturamento está ativado para seu projeto do Cloud. Saiba como verificar se o faturamento está ativado em um projeto.

Iniciar o Cloud Shell

O Cloud Shell é um ambiente de linha de comando executado 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, faça o seguinte:

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 já vem 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 comando a seguir para adicionar o Firebase ao 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 PATH.
Verifique se a instalação instalou a versão mais recente.
```
agy --version
```
Faça a autenticação usando suas credenciais do Google Cloud.
- Inicie a CLI do Antigravity.
```
agy
```
- Quando for solicitado a Selecionar método de login, escolha 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 mostra como trabalhar com um projeto do Google Cloud.
Saia da CLI do Antigravity.Digite /exit no terminal da CLI para encerrar a sessão ativa da CLI do Antigravity antes de continuar.

Instalar e autenticar o código do Claude

Como alternativa, use 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.
Faça a autenticação 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 Google Vertex AI, escolha Application Default Credentials (autenticação do Google) e conclua a configuração conforme solicitado.
Você também pode escolher outros métodos de login. Este codelab mostra 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 permite 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 para 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 ativa antes de continuar.

Instalar no Claude Code

Registre o repositório do marketplace e instale o plug-in Conductor diretamente na sua sessão do Claude Code.
```
/plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
```
Verifique a instalação.
- Digite /conductor para 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 ativa antes de continuar.

5. Desenvolvimento de novos projetos: a roda seletora

Agora que o ambiente está configurado, você vai criar um novo aplicativo do zero. Você vai criar uma "roda seletora", um web app simples que gira para selecionar uma opção aleatória.

Configurar contexto do produto

Crie e mude para um novo diretório de projeto.Agora vamos trabalhar em um projeto em um diretório picker-wheel. Crie e acesse esse diretório.
```
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 a mensagem "Você confia nos arquivos desta pasta?" aparecer, selecione Confiar na pasta (seletor de roda).
Inicialize o Conductor.Execute o comando de configuração para criar a estrutura do projeto e configurar o ambiente do Conductor.
```
# Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
```
Siga os comandos interativos.Os comandos interativos que aparecem não correspondem exatamente a estes exemplos. Foque em um design mais simples para se familiarizar com o fluxo de trabalho do Conductor.
- Objetivo do produto: um aplicativo da Web que mostra uma roleta configurável para selecionar um item aleatório de uma lista.
  - Público-alvo → Público em geral
  - Interação → Tocar/clicar para girar
  - Personalização → Básico
  - Plataforma → Desktop-First
- Diretrizes de produtos: geração automática.
- Pacote de tecnologia:
  - Linguagens → TypeScript/JavaScript: ideal para Web full-stack
  - Front-end → Vue.js: interfaces da Web intuitivas
  - Back-end → Express.js: back-end Node rápido
  - Banco de dados → Nenhum: não é necessário ter um banco de dados
- Fluxo de trabalho: padrão.
- Requisitos de produtos:
  - Histórias dos usuários → Opções personalizáveis, exibição clara do vencedor
  - Principais recursos → Lista de opções editáveis, 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 sugerir uma faixa inicial com base no contexto do produto. Se preferir, você pode propor uma música ou pedir para o maestro sugerir uma.
Revise o plano gerado.O Conductor vai gerar um index.md, um spec.md e um plan.md em conductor/tracks/{track-id}/. Leia com atenção. Se tudo estiver certo, o Conductor vai pedir para você salvar e confirmar os arquivos de configuração inicial.

Implementar a faixa

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

# Claude Code
/conductor-implement
```
O Conductor vai trabalhar no plano, escrevendo o código do 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. É possível 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 for concluída, você verá uma roda seletora 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 ignoradas ou erros.
Revise a implementação.Como última etapa, você pode pedir que o Conductor revise a implementação. Ele deve 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 de roda seletora da seção anterior para que os usuários conectados possam salvar e restaurar as configurações da roda seletora.

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á-las.
Inicie seu agente de CLI.Inicie uma nova sessão da CLI.
```
# Antigravity CLI
/new

# Claude Code
/new
```

Comece 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 comandos interativos.Os comandos interativos que aparecem não correspondem exatamente a estes exemplos. Foque em um design mais simples para se familiarizar com o fluxo de trabalho do Conductor.
- Meta de acompanhamento:
  - Provedor de autenticação → Firebase Authentication
  - 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 em conductor/tracks/{track-id}.
Revise o plano gerado.Leia um index.md, um spec.md e um plan.md em conductor/tracks/{track-id}/.

Implemente.Se tudo estiver certo, comece a implementação.

# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement

Verifique.Recarregue o aplicativo. Você vai ver um aplicativo atualizado.
Caso a IA fique presa no teste da implementação de autenticação, não se esqueça de ativar o Login do Google no console do Firebase em Autenticação > Método de login.

Confira o código de ouro para uma implementação de referência. Você precisa fornecer seu projeto do Firebase em .firebaserc e as 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 todo o projeto.

No Console do Google Cloud, selecione o projeto que você criou.
Clique em EXCLUIR.

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

Excluir banco de dados do Firestore: acesse Console do Firebase > Firestore e exclua o banco de dados.
Excluir a autenticação: acesse Console do Firebase > AutenticaçãoMétodo de login e 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 iterar nele com recursos complexos, como autenticação e integração de banco de dados.

Próximas etapas

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