Exercise: Expanda sua equipe com o agente de codificação Copilot

[github-actions]

Expanda sua equipe com o agente de codificação Copilot

👋 Hey there @iddasantos! Welcome to your Skills exercise!

Neste exercício, você desbloqueará o próximo nível do seu assistente de codificação com IA favorito. Vamos aprender como atribuir tarefas de codificação do Copilot diretamente no GitHub! 💻✨

---

✨ This is an interactive, hands-on GitHub Skills exercise!

As you complete each step, I’ll leave updates in the comments:

• ✅ Check your work and guide you forward
• 💡 Share helpful tips and resources
• 🚀 Celebrate your progress and completion

Let’s get started - good luck and have fun!

_{— Mona}

[github-actions]

Etapa 1: Habilite o agente de código Copilot

No exercício Primeiros Passos com o GitHub Copilot, aprendemos como usar o Copilot no editor de código para fazer grandes melhorias no site de Atividades Extracurriculares da Escola Mergington. 🎻 ⚽️ ♟️

Na verdade, o site se tornou uma ferramenta regular da escola. E, embora você goste dessa atenção, percebeu um problema! Você está prestes a sair de licença no próximo semestre!

Após conversar com a direção, eles aceitaram que novas funcionalidades podem esperar, mas... ficaram preocupados. É preciso ter algo para lidar com pequenas mudanças enquanto você estiver ausente.

Vamos preparar os professores para o sucesso, cadastrando o Copilot (na nossa escola) para cuidar das atualizações enquanto estivermos fora.

O Copilot agora é seu agente de código!

Em exercícios anteriores, usamos o Copilot em chat, edições e modo agente. Embora esses modos sejam úteis, o agente de código Copilot leva isso a outro nível, operando totalmente pelo GitHub. Não precisa de editor de código! 😎

Recurso	Copilot no editor	Agente de código Copilot
Interface	Seu editor de código	Issues e Pull Requests
Escopo	Arquivos locais	Repositório
Ativação	Sugestões inline, chat	Atribuição de issue
Customização	Instruções personalizadas	Instruções personalizadas
Suporte MCP	Sim	Sim
Vibe Coding	😎	😎

Como funciona?

Do ponto de vista do colaborador, o fluxo é muito parecido com o de um projeto normal.

1. Um colaborador com acesso de escrita seleciona uma issue e a atribui ao Copilot (em vez de si mesmo).
2. O Copilot cria um branch e um pull request.
3. O Copilot trabalha no branch em um workflow do Actions e fornece atualizações na aba de conversas do pull request.
4. Quando o Copilot termina a issue, quem atribuiu é solicitado a revisar.
5. O responsável faz a revisão, adiciona comentários ou aprova.
6. Se houver feedback, o Copilot continua trabalhando para implementar as sugestões.
7. O solicitante repete os passos acima até ficar satisfeito e então faz o merge.

flowchart LR

    contributor((Colaborador))
    copilot((Copilot))
    reviewer((Revisor))

    issue@{ shape: notch-rect, label: "Issue" }
    repo@{ shape: cyl, label: "Repositório" }
    branch@{ shape: subproc, label: "Branch" }
    review@{ shape: diamond, label: "Revisão" }


    subgraph PR[Pull Request]
        direction TB
        branch
        review
        reviewer
    end


    %% Atribuir
    contributor gl1@-->|Seleciona| issue
    issue gl2@-->|Atribui para| copilot

    %% Trabalhar
    copilot pl1@-->|Cria| branch
    branch pl3@-->|Inicia| review

    %% Revisar
    reviewer gl3@-->|Fornece feedback| review
    review pl4@--> |Implementa feedback| branch

    %% Aprovado
    review gl4@-->|Aprova e faz merge| repo


    classDef users fill:#08872B,stroke:#5FED83,color:#fff
    classDef repo fill:#08872B,stroke:#5FED83,color:#fff
    classDef agent fill:#501DAF,stroke:#C06EFF,color:#fff
    classDef pr fill:#0969DA,stroke:#0349B4,color:#fff

    classDef green-line stroke:#08872B, stroke-width:4px;
    classDef purple-line stroke:#501DAF, stroke-width:4px;

    class contributor,reviewer users
    class copilot agent
    class repo repo

    class gl1,gl2,gl3,gl4 green-line
    class pl1,pl2,pl3,pl4 purple-line

Loading

Isso é seguro?

Várias precauções de segurança foram implementadas para ajudar a reduzir preocupações. Aqui estão algumas limitações que você deve considerar ao pedir para o Copilot trabalhar em uma issue.

• O Copilot só pode fazer alterações no branch que ele criou e nos recursos fornecidos pelo repositório.
• O Copilot possui um firewall configurável que restringe o acesso à internet.
• Apenas usuários com acesso de escrita podem atribuir uma issue ao Copilot.
• Conteúdo oculto em issues (como código comentado) é ignorado.

Important

A lista completa de mitigações e configurações pode ser encontrada na documentação Riscos e Mitigações.

⌨️ Atividade: (opcional) Conheça o site de atividades extracurriculares

Note

Abrir um ambiente de desenvolvimento e rodar a aplicação não é necessário para completar este exercício. Você pode pular esta atividade se desejar.

Mostrar passos

Em outros exercícios, temos desenvolvido o site de Atividades Extracurriculares. Você pode seguir estes passos para iniciar o ambiente de desenvolvimento e experimentá-lo.

1. Clique com o botão direito do mouse no botão abaixo para abrir a página Criar Codespace em uma nova aba. Use a configuração padrão.

   

2. Aguarde um tempo para o ambiente ser preparado. Ele instalará automaticamente todos os requisitos e serviços.

3. Valide se as extensões GitHub Copilot e Java estão instaladas e habilitadas.

   
   

4. Tente executar a aplicação. Na barra lateral esquerda, selecione a aba Run and Debug e clique no ícone Iniciar Depuração.

   📸 Mostrar captura de tela

   
   
   🤷 Tendo problemas?

   
   

   Se a área Run and Debug estiver vazia, tente recarregar o VS Code: Abra a paleta de comandos (Ctrl+Shift+P) e procure por Developer: Reload Window.

   

5. Use a aba Ports para encontrar o endereço da página da web, abri-la e verificar se está em execução.

   📸 Mostrar captura de tela

   
   

⌨️ Atividade: Habilite o agente de codificação Copilot em seu repositório

Antes de começarmos a delegar solicitações dos professores para o Copilot, precisamos conceder acesso ao nosso repositório.

1. No canto superior direito, clique em seu ícone de usuário e selecione Configurações.

   
   
   

2. Na navegação à esquerda, expanda a seção Copilot e selecione Agente de codificação.

   

3. Altere o campo Acesso ao repositório para Apenas repositórios selecionados.

   

4. Clique no botão Selecionar repositórios e verifique se este exercício está selecionado.

   

⌨️ Atividade: Atribua uma issue ao Copilot

Existem várias issues importantes para serem resolvidas antes de sairmos, mas vamos fazer um teste em uma das opções mais simples primeiro. Isso nos permitirá ver como funcionam as interações e a colaboração, para que possamos atualizar nossa documentação para orientar os outros professores. A maioria não sabe como usar um editor de código tradicional!

Tip

Tente deixar o objetivo e os critérios de aceitação de uma issue claros. Além disso, dividir tarefas grandes em tarefas menores oferece mais oportunidades de feedback!

1. Volte para o repositório do exercício.

2. Na navegação superior, selecione a aba Issues.

3. Acima da lista, no canto superior direito, clique no botão Nova Issue.

4. Defina o Título como:

   Atividade Ausente: Manga Maniacs

   Insira o texto abaixo como descrição e clique no botão Criar.

   O clube de mangá foi recentemente anunciado e, naturalmente, está faltando no site. Por favor, adicione-o.
   
   Aqui estão os detalhes:
   
   Descrição: Explore as histórias fantásticas dos personagens mais interessantes dos Mangás japoneses (romances gráficos).
   
   Horário: Terças-feiras às 19h
   Máximo de participantes: 15 pessoas

5. No canto superior direito, clique na área Atribuídos a e selecione Copilot.

   

6. Na parte inferior, clique no botão Criar. Após um momento, você notará:

   • A issue terá uma reação 👀 para mostrar que o Copilot está lendo a issue.
   • O registro de atividades mostra que você atribuiu a issue ao Copilot.
   • O registro de issues inclui um pull request vinculado.
   

7. Com a issue atribuída, Mona deve estar ocupada verificando seu trabalho. Dê a ela um momento para compartilhar os próximos passos.

Tendo problemas? 🤷

Se você não receber feedback, aqui estão algumas coisas para verificar:

• Certifique-se de que você atribuiu a issue correta. Se você praticar em outras issues, elas serão ignoradas.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Etapa 2: Colabore com o Copilot

Quando o Copilot cria um pull request, você encontrará:

• Descrição do Pull Request – O Copilot mantém um resumo conciso do objetivo e da implementação.
• Linha do tempo – O Copilot fornece notas de alto nível sobre sessões de trabalho e commits.
• Histórico de Sessões – Um registro detalhado dos passos que o Copilot seguiu para implementar a issue.

Você pode dar feedback ao Copilot da mesma forma que faria com um colega. Essas ações fazem o Copilot iniciar uma nova sessão de trabalho.

• Comentários – Adicione um comentário na conversa do pull request.
• Revisões – Combine vários comentários em uma revisão de pull request.
• @ menções – Você pode marcar o Copilot em um comentário como faria com um colega.

Considerações importantes

• O trabalho do Copilot é feito em um branch com o padrão copilot/* e ele não tem acesso a outros branches.
• O Copilot não pode acionar workflows do Actions.
  • Workflows disparados em pull requests precisam de aprovação humana para rodar.
• Regras e proteções do repositório continuam valendo normalmente.

Tip

Todo trabalho criado pelo Copilot é commitado com o responsável como co-contribuidor (mantendo seu gráfico de contribuições seguro). 💕

⌨️ Atividade: Veja o progresso do Copilot

1. Na issue, clique no link de referência para o pull request. Alternativamente, use a aba Pull Requests no topo.

2. Veja em tempo real o Copilot atualizando a descrição do pull request. Ele passa por 3 fases:

   1. Ao iniciar, o Copilot copia a issue inicial. [mostrar imagem]

   
   2. Após o planejamento, o Copilot fornece uma lista de ações. [mostrar imagem]

   
   3. Ao finalizar, o Copilot fornece um resumo. [mostrar imagem]

   

3. Role a página para ver a linha do tempo e as notas do Copilot. Clique no botão View session.

   

4. A nova página mostra um diário do trabalho do Copilot. A navegação à esquerda lista cada sessão de trabalho.

   

5. Se necessário, aguarde o Copilot terminar as alterações.

Tip

Você pode usar o menu edited para ver o histórico de alterações da descrição do pull request.

Mostrar imagem

⌨️ Atividade: Dê feedback ao Copilot

1. De volta ao pull request, clique no botão Adicionar sua revisão.

   

2. Encontre a nova entrada criada pelo Copilot. Passe o mouse sobre uma linha para mostrar o sinal de mais. Clique para abrir a caixa de diálogo de comentário.

   

3. Lendo a descrição, achamos que ela deveria ser mais interessante para combinar com o espírito dos Mangás. Vamos pedir ao Copilot para melhorar isso. Insira o texto abaixo e clique em Iniciar revisão.

   Por favor, altere esta descrição para ser inspirada nos Mangás japoneses.
   Precisa de mais personalidade para atrair os estudantes.

   

4. No topo da lista de alterações, clique no botão Finalizar sua revisão e selecione Enviar revisão.

5. Após alguns instantes, o Copilot adicionará uma nova entrada de sessão e indicará o progresso na linha do tempo.

6. Aguarde o Copilot terminar a alteração e então clique no botão Ver alterações para ver a descrição da atividade atualizada.

   

7. Ative os pull requests clicando no botão Pronto para Revisão e depois clique no botão Fazer merge.

8. Com nossa revisão enviada e o pull request mesclado, Mona deve estar verificando nosso trabalho. Dê a ela um momento para responder com a próxima lição.

Tendo problemas? 🤷

Se você não receber feedback, aqui estão algumas coisas para verificar:

• Certifique-se de que você fez commit das alterações no diretório src/static/ para o branch accelerate-with-copilot e fez push/sincronizou com o GitHub.
• Se a Mona encontrou um erro, basta corrigir e enviar suas alterações novamente. A Mona verificará seu trabalho quantas vezes for necessário.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 3! One moment... 🤓

[github-actions]

Etapa 3: Preparando o ambiente do GitHub Copilot Coding Agent

O GitHub Copilot Coding Agent é um assistente de IA avançado que pode executar tarefas complexas de desenvolvimento automaticamente. Para maximizar sua eficácia, precisamos configurar dois arquivos essenciais que personalizam seu comportamento e ambiente de trabalho.

Configuração do GitHub Copilot Coding Agent

O GitHub Copilot Coding Agent funciona diferente do Copilot tradicional - ele não apenas sugere código, mas pode:

• Executar comandos e workflows completos de desenvolvimento
• Analisar e modificar múltiplos arquivos simultaneamente
• Executar testes e validações automaticamente
• Interagir com APIs e serviços externos conforme necessário
• Criar documentação e relatórios detalhados sobre as mudanças

Para que o agent funcione eficientemente, precisamos configurar:

1. Instruções do Copilot (.github/copilot-instructions.md)

Este arquivo fornece contexto específico do projeto para orientar o comportamento do agent:

• Contexto de negócio: Informações sobre a escola, usuários e objetivos
• Padrões arquiteturais: Como o código deve ser estruturado (Clean Architecture)
• Convenções de desenvolvimento: Padrões de nomenclatura, validação e testes
• Comandos úteis: Scripts e workflows comuns do projeto

2. Passos de Configuração (.github/workflows/copilot-setup-steps.yml)

Este workflow GitHub Actions pré-configura o ambiente de desenvolvimento:

• Pré-instala dependências: Java 21, Maven, MongoDB
• Configura cache: Para acelerar compilações futuras
• Define variáveis de ambiente: Profiles e configurações necessárias
• Valida o ambiente: Garante que tudo está funcionando antes do agent iniciar

Benefícios desta Configuração

• Velocidade: Agent não perde tempo instalando ferramentas básicas
• Consistência: Ambiente padronizado evita erros de configuração
• Contexto: Agent entende melhor o projeto e toma decisões mais precisas
• Eficiência: Reduz uso de minutos do GitHub Actions e melhora performance

Tip

Você também pode habilitar um servidor Model Context Protocol (MCP) para dar ainda mais funcionalidades ao Copilot!

📚 Documentação Oficial e Links Úteis

Para aprofundar seu conhecimento sobre o GitHub Copilot Coding Agent, consulte estes recursos oficiais:

📖 Documentação Principal

• Sobre o GitHub Copilot Coding Agent - Visão geral completa, benefícios, segurança e limitações
• Como usar o Copilot para trabalhar em issues - Guia passo a passo para atribuir issues ao Copilot
• Personalizando o ambiente de desenvolvimento - Como configurar dependências e variáveis de ambiente

🏆 Melhores Práticas

• Boas práticas para usar o Copilot em tarefas - Como escrever issues eficazes e escolher tarefas adequadas
• Uso responsável do Copilot Coding Agent - Diretrizes de segurança e ética

🔧 Configuração e Personalização

• Adicionando instruções personalizadas - Como criar arquivos .github/copilot-instructions.md
• Habilitando o Copilot Coding Agent - Requisitos e processo de ativação
• Estendendo com Model Context Protocol (MCP) - Funcionalidades avançadas

🎯 Hands-on e Prática

• Exercício: Expand your team with Copilot - Prática guiada oficial do GitHub Skills
• Monitorando sessões do Copilot - Como acompanhar o progresso em tempo real

🏢 Para Organizações

• Pilotando o Copilot Coding Agent na organização - Guia para implantação empresarial
• Usando efetivamente na organização - Estratégias de adoção

⚙️ Referências Técnicas

• Sintaxe de workflows do GitHub Actions - Para customizar copilot-setup-steps.yml
• Permissões do GITHUB_TOKEN - Configuração de segurança
• GitHub Copilot Trust Center - Informações sobre privacidade e segurança

💡 Dica: Marque estes links como favoritos! Eles serão úteis durante toda sua jornada com o GitHub Copilot Coding Agent.

⌨️ Atividade: Configure as instruções do GitHub Copilot Agent

O arquivo .github/copilot-instructions.md já existe no repositório e contém as diretrizes arquiteturais do projeto. Você precisa estudar e marcar que entendeu o conteúdo.

1. No menu superior, selecione a aba Code.

2. Crie um novo branch chamado prepare-environment.

   

3. Navegue até o arquivo .github/copilot-instructions.md e estude seu conteúdo.

4. Leia atentamente todas as seções do arquivo, especialmente:

   • Architecture Overview: Como o projeto usa Clean Architecture
   • Critical Development Patterns: Padrões de validação, repositórios e casos de uso
   • Essential Commands & Workflows: Comandos Maven e configuração do ambiente
   • Key Technical Decisions: Decisões sobre segurança, testes e integração

5. Marque a caixa de seleção no início do arquivo para confirmar que entendeu:

   [X] - Aprendi sobre como configurar o copilot-instructions.

   ⚠️ Importante: Troque [ ] por [X] para marcar a caixa como concluída.

6. Opcional: Se desejar, pode adicionar informações extras sobre interação com usuários:

   ### Interação com Usuários
   
   Considere o seguinte ao se comunicar com a equipe:
   
   - Os professores não são técnicos. Explique de forma simples e evite jargões de software.
   - Qualquer novo código deve ser fácil de manter e entender, mesmo sem experiência em programação.
   
   ## Arquitetura do Programa
   
   - Os usuários do site são alunos e professores. Garanta uma experiência simples.
   - Não crie apps ou serviços adicionais.
   - Não crie ferramentas de linha de comando.
   - Não faça uma aplicação longa em um único arquivo. Sempre use uma estrutura de diretórios fácil de entender.
   - Use apenas HTML, CSS, Javascript e Java. Não utilize outras linguagens.

7. Faça commit das alterações no branch prepare-environment.

⌨️ Atividade: Configure o ambiente de desenvolvimento para o GitHub Copilot Agent

O arquivo copilot-setup-steps.yml já existe e contém a configuração do ambiente. Você precisa estudar e marcar que entendeu como configurá-lo.

Como funciona: Este workflow GitHub Actions é executado antes do Copilot Agent iniciar, preparando um ambiente completo com Java 21, Maven e MongoDB. Isso economiza tempo e garante consistência.

1. Certifique-se de que você ainda está no branch prepare-environment.

2. Navegue até o arquivo .github/workflows/copilot-setup-steps.yml e estude seu conteúdo detalhadamente.

3. Analise cada seção do workflow:

   • Nome e trigger: Como o workflow é identificado e quando executa
   • Job obrigatório: Por que o job deve se chamar copilot-setup-steps
   • Permissões: Quais acessos o workflow precisa
   • Steps de configuração: Como Java, MongoDB e dependências são instaladas
   • Verificações: Como o ambiente é validado antes do Agent iniciar

4. Marque a caixa de seleção no início do arquivo para confirmar que entendeu:

   # [X] - Aprendi sobre como configurar o copilot-setup-steps.

   ⚠️ Importante: Troque [ ] por [X] para marcar a caixa como concluída.

5. Teste o workflow (opcional):

   • Vá para a aba Actions do repositório
   • Clique em "Copilot Setup Steps"
   • Clique em "Run workflow" para executar manualmente
   • Observe como o ambiente é configurado

6. Faça commit das alterações no branch prepare-environment.

Por que essa configuração é importante?

• Performance: Agent não precisa instalar Java/Maven a cada execução
• Reliability: Versões específicas garantem comportamento consistente
• Cost-efficiency: Reduz uso de minutos do GitHub Actions
• Developer Experience: Agent pode focar no código, não na infraestrutura

Elementos-chave do workflow:

Elemento	Propósito
workflow_dispatch	Permite execução manual para testes
copilot-setup-steps	Nome obrigatório do job
contents: read	Permissão mínima necessária
setup-java@v4	Instala Java 21 com cache Maven
mongodb-github-action	Configura MongoDB para desenvolvimento
continue-on-error: true	Evita falhas em steps não-críticos

🎯 Finalizando a Etapa 3

1. Crie um pull request do branch prepare-environment para main, mas NÃO faça o merge ainda.

2. O workflow de validação irá verificar se:

   • Você marcou a caixa de entendimento no arquivo copilot-instructions.md
   • Você marcou a caixa de entendimento no arquivo copilot-setup-steps.yml

3. Aguarde a Mona verificar seus arquivos e fornecer feedback.

4. Depois que a Mona confirmar que tudo está correto, você pode fazer o merge do pull request.

🤔 Reflexão

Pergunta: Como foi o processo de configuração manual comparado a deixar o GitHub Copilot Agent fazer a maior parte do trabalho automaticamente?

Benefícios da configuração prévia:

• ✅ Controle total sobre o ambiente e dependências
• ✅ Documentação clara dos requisitos do projeto
• ✅ Reutilização da configuração em diferentes sessões
• ✅ Redução de erros por configuração inconsistente

Próximos passos: Na etapa 4, você verá o GitHub Copilot Agent em ação usando essas configurações!

---

🤷 Está com problemas?

Se você acidentalmente fez o merge do pull request antes da Mona fornecer feedback, tudo bem! Você pode:

1. Recriar o branch prepare-environment
2. Fazer as correções necessárias
3. Criar um novo pull request

O importante é garantir que ambas as caixas de seleção estejam marcadas nos arquivos corretos.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐