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 @diegoccastano! 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. 🧐