4.5 KiB
Parte 1: Configuração & Engenharia de Contexto
Nesta seção, você vai configurar seu ambiente de desenvolvimento e ensinar o GitHub Copilot sobre seu codebase.
🎮 Jogue o Bingo Mixer — Veja o que você vai construir!
🔧 Configuração Inicial
Passo 1: Crie Seu Repositório (Obrigatório)
- Abra github.com/copilot-dev-days/agent-lab-typescript
- Clique em Use this template → Create a new repository
- Nome:
my-bingo-mixer - Visibilidade: Public
- Nome:
- ✅ Seu próprio repo do Bingo Mixer está pronto!
Passo 2: Habilite o GitHub Pages
- Vá em Settings → Pages do seu repo
- Em "Build and deployment", mude Deploy from a branch para GitHub Actions
- ✅ Qualquer commit agora vai publicar em:
https://{username}.github.io/{repo-name}
Passo 3: Escolha Como Vai Desenvolver
Opção A: Clone localmente no VS Code
- Abra o VS Code
- Execute o comando:
Git: Clone→Clone from GitHub - Selecione seu novo repositório
- Instale as extensões recomendadas (notificação ou
Extensions: Show Recommended Extensions)
Opção B: Crie um Codespace para seu repo
- Abra seu repositório no GitHub
- Clique em Code → Codespaces → Create codespace on main
- ✅ O Codespace inicia com seu repo e devcontainer.
Passo 4: Execute o Agente de Setup
No painel de Chat:
/setup
O agente vai identificar quaisquer passos de instalação necessários.
Na primeira ferramenta de terminal, habilite Auto-Approve.
Deixe o agente identificar quaisquer passos de instalação necessários.
✅ Sucesso: O app está rodando e aberto no navegador!
Mantenha este guia do workshop/ aberto (📌 Fixar).
📚 Entendendo Engenharia de Contexto
Engenharia de contexto é como você ensina a IA sobre seu codebase específico. Isso torna as sugestões do Copilot mais precisas e relevantes.
Tarefa 1: Instruções Auto-geradas
Instruções orientam todas as interações agênticas com o codebase, tornando-as mais eficientes e confiáveis. Adicione-as cedo, mas mantenha-as atualizadas e concisas.
Passos:
- Execute o prompt:
/initcom Autopilot habilitado- Enquanto o agente analisa o codebase, opcionalmente comece a próxima tarefa
- Abra um novo chat para a próxima tarefa, pois o init pode demorar e podemos revisar depois.
- Revise os resultados — não está longo e detalhado demais?
- Follow-up opcional: "Comprima e adicione uma checklist de desenvolvimento obrigatória [ ] (lint, build, test) no topo"
- Aplique e faça commit
✅ Resultado: Todas as futuras solicitações terão um mapa básico do workspace.
Tarefa 2: Dogfooding & Skills Personalizadas
Passos:
- Prompt: "Teste o app como um dogfooder crítico, dando feedback crítico sobre o quão divertido ele é"
- Observe como o agente abre o navegador integrado, interage com o app e escreve um relatório
/create-skillpara dogfooding — ou: "Salve isso como uma skill de dogfooding"
✅ Resultado: O agente usou o navegador para realmente jogar o app e produziu um relatório crítico. Você então salvou essa abordagem de teste como uma skill reutilizável de dogfooding.
💡 Insight de engenharia de contexto: O agente precisa de contexto prático — executar o app, ver a UI, clicar pelos fluxos — para realmente entender como funciona e validar a funcionalidade. Só o código não basta; interagir com o produto em execução fecha a lacuna entre ler código e entender a experiência do usuário.
Tarefa 3: Modal de Customização
Explore as customizações do repo para entender como a engenharia de contexto funciona na prática.
Passos:
- Abra o painel de Customização, Comando:
Chat: Open Customizations (Preview) - Navegue pelas customizações do repo — instruções, skills e agentes
- Veja a skill de design frontend e as instruções de Tailwind 4
💡 Pense sobre: Quais convenções ou padrões dos seus próprios projetos poderiam se tornar instruções ou skills?
✅ Parte 1 Completa!
Você aprendeu como:
- Configurar seu ambiente de desenvolvimento
- Gerar e refinar instruções do workspace
- Testar seu app com o navegador integrado do agente
- Criar e salvar skills personalizadas
- Explorar customizações do repo (instruções, skills, agentes)