Aula 06O fluxo Explorar → Planejar → Fazer → Guardar

Objetivos

Ao final desta aula você vai saber:

• Usar as quatro etapas do fluxo numa mudança grande: explorar, planejar, fazer e guardar
• Saber quando dá para pular o plano e pedir direto
• Preparar o Git na pasta da sua página e guardar uma versão dela
• Deixar o arquivo de senhas de fora das versões
• Dar ao Claude um critério de pronto que se vê na tela

Se você levar uma única coisa deste curso, que seja este fluxo: Explorar, Planejar, Fazer e Guardar.

Sem ele, a maioria das pessoas pula direto para o "faz aí", e acaba corrigindo a rota muitas vezes depois.

 🔍 Explorar  →  🗺️ Planejar  →  🛠️ Fazer  →  💾 Guardar
 (entender a     (o plano e o     (mudança por    (uma versão
  página)         critério)        mudança)        para voltar)

💡 Quando pular o plano: se você consegue descrever a mudança em uma frase (trocar um texto, mudar uma cor, corrigir um erro de digitação), peça direto. O plano vale a pena quando a mudança mexe em várias partes da página, quando você não tem certeza de como fazer ou quando não conhece bem aquela parte.

Nesta aula, você passa pelas quatro etapas numa mudança de verdade: o cardápio com filtro. Os três doces da sua página viram seis, e quatro botões (Todos, Bolos, Docinhos e Tortas) mostram só os doces de cada tipo. Antes, você prepara a última etapa, guardar, que precisa de um programa novo: o Git.

Antes de começar: o Git, para guardar versões

O Git é um programa que guarda as versões dos seus arquivos. Cada vez que você pede, ele tira uma foto da pasta inteira, com uma frase dizendo o que mudou, e você pode voltar a essa foto quando quiser. É como o histórico de versões de um documento na nuvem, só que é você quem decide quando tirar a foto.

Guardar uma versão (o Git chama de commit) fica no seu computador. Nada vai para a internet: publicar é outra coisa, que a Aula 19 mostra.

Você prepara o Git uma vez, em quatro passos. Depois, guardar uma versão vira um pedido de uma linha.

1. Confira se o Git está instalado

No terminal, digite este comando e aperte Enter:

git --version

Se aparecer algo como git version 2.47.1, o Git já está instalado: pule para o passo 2. Se o Claude Code já estiver aberto, digite ! git --version na caixa de texto, com o ! da Aula 04.

Se aparecer um erro dizendo que o comando não existe, instale:

• Mac: o próprio Mac abre uma janela oferecendo instalar as ferramentas de linha de comando (as command line developer tools, que trazem o Git). Clique em Instalar e espere terminar. Se a janela não abrir, digite xcode-select --install, que abre a mesma janela.
• Windows: instale o Git for Windows, o mesmo da Aula 03. Na Aula 03, ele era recomendado; a partir desta aula, você precisa dele. Baixe pelo link, vá avançando com as opções que já vêm marcadas e abra uma janela nova do terminal, porque a antiga ainda não sabe que o Git foi instalado.
• Linux: digite sudo apt install git (no Ubuntu e no Debian) ou sudo dnf install git (no Fedora). O sudo pede a senha do seu usuário, e é normal nada aparecer na tela enquanto você digita.

Depois, rode git --version de novo para conferir.

2. Diga ao Git quem assina as versões

O Git assina cada versão com um nome e um e-mail. Isso se faz uma vez só por computador, e vale para todos os seus projetos. Peça ao Claude, com os seus dados:

Configure o Git com o meu nome, Fulana de Tal, e o e-mail fulana@exemplo.com, para assinar as versões.

⚠️ O nome e o e-mail ficam gravados em cada versão, para sempre. Se um dia você publicar o projeto na internet, como na Aula 19, qualquer pessoa vai poder ver. Por isso, use o seu nome e um e-mail que você não se importe de mostrar.

3. Transforme a pasta num repositório

Um repositório é a pasta que o Git acompanha. Para isso, o Git cria dentro dela uma pasta escondida, a .git, onde guarda todas as versões. Não mexa nela e nunca apague: é ali que fica o histórico. Como o nome começa com ponto, ela fica escondida, como o .env (Aula 00).

As versões seguem uma linha principal. Peça que ela se chame main: é o nome que o curso usa daqui em diante, e o mesmo que o GitHub usa como padrão.

4. Deixe as senhas de fora, antes da primeira versão

Lembra do .env, o arquivo da senha falsa da Aula 05? Ele não pode entrar nas versões. Para isso existe o .gitignore: um arquivo com a lista do que o Git não guarda.

Ele precisa existir antes da primeira versão. O que já entrou numa versão continua lá, mesmo que você ponha o nome no .gitignore depois.

💡 Duas travas, duas portas. A regra deny da Aula 05 impede o Claude de ler o .env. O .gitignore impede o .env de entrar nas versões e, um dia, de ir para a internet junto com elas. Uma não substitui a outra.

Agora, um pedido só faz os passos 3 e 4 e guarda a primeira versão, a página como está hoje:

Transforme esta pasta num repositório do Git, com a linha principal
chamada main. Antes de guardar qualquer coisa, crie um .gitignore que
deixe o .env de fora. Depois, guarde a primeira versão, com a mensagem
"Página antes do cardápio". Explique cada comando antes de rodar.

No Manual, cada comando espera a sua aprovação, menos os que só olham. Não entendeu algum? Recuse com Tab e peça a explicação em português simples, como na Aula 05. Quando ele terminar, confira: "confira se o .env ficou de fora da versão guardada".

💡 Com versões guardadas, você não precisa mais fazer cópias de arquivo para se proteger, como o index-copia.html da Aula 05. Se quiser, apague a cópia; se preferir, deixe.

1. Explorar: entender antes de mexer

O jeito mais rápido de fazer as duas primeiras etapas é no Plan Mode (Aula 04): nele, o Claude lê os arquivos e pensa no caminho, sem mudar nada. Aperte Shift + Tab até aparecer plan mode on e peça:

Leia os arquivos da página e me explique, em português simples, como ela está organizada. Não mude nada.

Ele conta, por exemplo, que o cardápio fica no index.html, que as cores ficam no estilo.css e que o botão do modo escuro troca as cores da página inteira. Explorar serve aos dois: o Claude junta o que precisa saber, e você descobre onde a mudança vai mexer.

2. Planejar: o plano e o critério

Ainda no Plan Mode, faça o pedido com as cinco partes da Aula 04:

Quero um cardápio com filtro na página da confeitaria. Troque os três
doces por seis: dois bolos, dois docinhos e duas tortas, cada um com
nome e preço. Em cima do cardápio, coloque quatro botões: Todos, Bolos,
Docinhos e Tortas. Ao clicar num botão, só os doces daquele tipo
aparecem; em Todos, os seis voltam. O modo escuro tem de continuar
funcionando, com os botões fáceis de ler nos dois modos. Quando
terminar, me diga como testar no navegador. Depois eu te mando um
print para você conferir.

O critério de pronto é o que se vê na tela. "Funcionar direito" não serve, porque não dá para conferir. "Ao clicar em Bolos, só os bolos aparecem" serve: você clica e vê. E repare na parte do modo escuro: uma mudança nova pode estragar algo que já funcionava, então o critério também confere o que já existia.

O Claude devolve um plano de ação. Revise. Ele atende ao que você pediu? Se não, escolha No, keep planning (não, continuar planejando) e diga o que mudar, por exemplo: "Deixe destacado o botão escolhido, para eu saber qual filtro está ligado."

🎯 Este é o melhor momento para corrigir o rumo, porque nada na página mudou ainda.

3. Fazer: mudança por mudança

Quando o plano estiver bom, escolha Yes, manually approve edits (sim, aprovar as edições uma a uma). O Claude segue o plano e, a cada mudança, mostra o que vai mudar no arquivo e pergunta se pode. Aceite as que fizerem sentido.

Quando ele terminar, confira com os próprios olhos, como na Aula 04: abra a página no navegador (ou atualize, se ela já estava aberta) e clique em cada um dos quatro botões. Depois, ligue o modo escuro e clique de novo. Tire um print, cole na caixa de texto (Ctrl + V, ou Alt + V no Windows) e peça para ele conferir o critério.

O Claude vai fazer o possível para deixar tudo certo antes de dizer que terminou, mas às vezes você precisa entrar em cena: viu algo errado no print, peça o ajuste. Com o plano, você também tem o histórico de como chegou ao resultado, o que ajuda nos próximos pedidos.

4. Guardar: uma versão para voltar

Ficou bom? Guarde uma versão:

Guarde uma versão com uma mensagem em português explicando o que mudou.

O Claude escreve a mensagem, como "Cardápio com filtro por tipo de doce", e roda os comandos do Git. No Manual, eles esperam a sua aprovação, como antes. Para ver o resultado, peça: "me mostre as versões guardadas". A sua pasta agora tem duas: a página antes do cardápio e o cardápio com filtro.

Guarde uma versão sempre que algo funcionar e antes de começar uma mudança grande. A versão de hoje é o ponto de volta da próxima mudança: se der errado, você volta. A Aula 10 mostra como.

E repita o ciclo na próxima tarefa.

Para ir além (opcional): o mesmo fluxo num projeto de programação

🔧 Para ir além (para quem já programa; pode pular): esta parte mostra o fluxo como ele costuma ser usado num projeto de código, com testes, subagentes e mensagens de commit no padrão do time. Se você nunca programou, pule direto para o Na prática.

Explorar e planejar. No Plan Mode, o Claude lê os arquivos e roda comandos para explorar o projeto, até entender como vai atacar a implementação. Um pedido típico:

Preciso adicionar conversão para WebP no nosso pipeline de upload de
imagens. Descubra em que ponto do pipeline isso deve acontecer, se
precisamos de novas dependências e como abordar a implementação.

Ele lê os arquivos relevantes, faz algumas buscas na web e entrega o plano. Para editar o plano você mesmo, aperte Ctrl + G: ele abre no seu editor de texto padrão. Se você só quer um resumo geral da base de código, sem intenção de mudar nada, peça ao subagente de exploração (Aula 12), mesmo fora do Plan Mode.

Um critério de sucesso com testes. Num projeto de código, o critério costuma incluir os testes:

Critério de sucesso: todo upload de JPG ou PNG deve ser salvo como .webp,
com qualidade 80, e os testes de upload existentes devem continuar
passando.

Dê ao Claude uma suíte de testes que ele possa rodar continuamente para se validar. Ele pode até escrever os testes, mas, antes de confiar neles, garanta que são uma fonte confiável da verdade, para evitar falsos positivos.

Ferramentas. Se você constrói interfaces web, instale a extensão Claude in Chrome e abra o Claude Code com claude --chrome (ou ligue com /chrome dentro da sessão). Assim ele controla uma aba do navegador e testa a interface ele mesmo. A integração exige login com uma assinatura Claude (Pro, Max, Team ou Enterprise) e não funciona no WSL. Mais na Aula 22.

Revisão com olhos frescos. Antes de commitar, peça um subagente revisor de código. Um subagente começa com o contexto limpo, sem o viés que a sessão acumulou. Peça um subagente novo, e não um fork: o fork herda a conversa inteira, com o viés junto. Na Aula 09, o /code-review faz essa revisão por você.

Mensagem no padrão do time. Peça a mensagem de commit no padrão que o projeto usa:

Gere uma mensagem de commit para essas mudanças seguindo o padrão
Conventional Commits, em português, e faça o commit.

Na prática

Use a pasta da página que você criou na Aula 03 (a confeitaria, ou a da sua ideia).

1. Abra o terminal e digite git --version. Se o Git não estiver instalado, instale como mostrado acima e confira de novo.
2. Entre na pasta e abra o Claude Code: cd Documents/confeitaria, com o nome da sua pasta, e depois claude. Aperte Shift + Tab uma vez e confira se aparece manual mode on.
3. Peça: "Configure o Git com o meu nome, Fulana de Tal, e o e-mail fulana@exemplo.com, para assinar as versões", com o seu nome e um e-mail que você não se importe de mostrar. Não sabe se o seu Git já tem isso? Pergunte antes: "o Git já tem um nome e um e-mail configurados?"
4. Faça o pedido do repositório, do .gitignore e da primeira versão, como no exemplo acima. Aprove cada comando com Yes; se não entender algum, recuse com Tab e peça a explicação.
5. Peça: "confira se o .env ficou de fora da versão guardada".
6. Aperte Shift + Tab até aparecer plan mode on e peça: "Leia os arquivos da página e me explique, em português simples, como ela está organizada. Não mude nada."
7. Ainda no Plan Mode, faça o pedido do cardápio com filtro, com as cinco partes. Leia o plano, escolha No, keep planning e peça um ajuste, como destacar o botão escolhido.
8. Quando o plano estiver bom, escolha Yes, manually approve edits e aceite as mudanças que fizerem sentido.
9. Abra a página no navegador, clique nos quatro botões, ligue o modo escuro e clique de novo. Tire um print, cole na caixa de texto e peça: "Confira se, ao clicar em Bolos, só os bolos aparecem, e se os botões estão fáceis de ler no modo escuro."
10. Peça: "Liste os arquivos que você mudou e explique, em português simples, o que mudou em cada um." Depois: "Guarde uma versão com uma mensagem em português explicando o que mudou" e, no fim, "me mostre as versões guardadas".

Resumo

• Explorar é entender antes de mexer: o Claude lê a página e explica como ela está organizada, sem mudar nada.
• Planejar é o pedido com as cinco partes e um critério que se vê na tela. É o melhor momento para corrigir o rumo.
• Fazer é aprovar mudança por mudança e conferir com os próprios olhos, no navegador e por print.
• Guardar é pedir ao Git uma versão, com uma frase do que mudou: um ponto para onde dá para voltar. Guardar não envia nada para a internet.
• O .gitignore deixa o .env de fora das versões, e precisa existir antes da primeira.
• O nome e o e-mail que assinam as versões ficam gravados nelas: use um e-mail que você não se importe de mostrar.
• Mudança que cabe numa frase dispensa o plano: peça direto.

Na próxima aula, você conhece a memória de trabalho do Claude, o contexto, e aprende a cuidar dela numa conversa longa.