Da issue ao pull request com GitHub Copilot no IntelliJ

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: From issue to pull request with GitHub Copilot in IntelliJ · Canal: GitHub · 06:30 · Assistir no YouTube

Tópicos: Agentes de IA, Engenharia de software com IA, Ferramentas de desenvolvimento com IA

Resumo

A demonstração mostra como usar o plugin GitHub Copilot no IntelliJ para partir de uma issue de acessibilidade no Spring PetClinic e chegar a uma implementação revisada. O Copilot lê a issue, elabora um plano e, no agent mode, altera os arquivos e executa testes com automação de navegador. Em Ask mode, o apresentador tira dúvidas sobre as mudanças e verifica o comportamento com VoiceOver no Safari. Ao final, a implementação é transformada em pull request no GitHub.

Pontos-chave

O plugin GitHub Copilot para IntelliJ permite trabalhar com issues do GitHub diretamente na IDE.
O GitHub CLI é usado para ler as issues do repositório, com opções para aprovar comandos.
O plano limita o escopo à correção de acessibilidade da navbar do Thymeleaf.
O Copilot oferece diferentes agent harness: local, Copilot e cloud.
O agent mode modifica os arquivos e pode usar automação de navegador para testar o comportamento.
O Ask mode permite entender as alterações sem modificar o projeto.
A validação inclui testar a aplicação no Safari com VoiceOver.
O fluxo termina com a criação de um pull request no GitHub.

Capítulos

Início	Capítulo	Resumo
00:00	Apresentação do fluxo e instalação do plugin	O apresentador introduz a demonstração no Spring PetClinic e instala o plugin GitHub Copilot no IntelliJ.
01:08	Consulta à issue e planejamento da correção	O Copilot consulta a issue pelo GitHub CLI, pede aprovação de comandos e propõe um plano com escopo limitado.
02:16	Seleção do agent harness e implementação	O apresentador explora as opções de agent harness e modelos enquanto o Copilot altera a navbar e testa a aplicação.
04:23	Revisão e validação da acessibilidade	Em Ask mode, o apresentador entende as mudanças e verifica a aplicação com VoiceOver no Safari.
05:59	Pull request e conclusão	O vídeo mostra o pull request no GitHub e resume o fluxo da issue à implementação revisada.

Citações

Encontre a issue aberta no GitHub e vamos planejar como resolvê-la. — 01:08

Quero apenas corrigir a issue; não queremos ir longe demais. — 02:16

No Ask mode, não estamos mudando nada. — 04:23

Em apenas alguns minutos, fomos de uma issue relatada a uma implementação revisada. — 05:59

Conceitos e entidades

GitHub Copilot (ferramenta): Ferramenta de assistência à programação usada para planejar, implementar e revisar a correção na IDE.
IntelliJ (ferramenta): IDE em que o apresentador instala e usa o plugin GitHub Copilot.
Spring PetClinic (repo): Aplicação de exemplo usada para demonstrar o fluxo de correção de uma issue.
GitHub CLI (ferramenta): Ferramenta de linha de comando usada pelo Copilot para consultar as issues do repositório.
agent harness (conceito): Configuração de execução do agent, com opções local, Copilot e cloud apresentadas na demonstração.
agent mode (conceito): Modo usado para planejar e implementar a correção, incluindo alterações nos arquivos e testes.
Ask mode (conceito): Modo de consulta que permite fazer perguntas sobre o projeto e as alterações sem modificar arquivos.
VoiceOver (ferramenta): Leitor de tela usado com Safari para verificar a acessibilidade da aplicação.
Safari (ferramenta): Navegador usado para abrir a aplicação local e testar a navegação com VoiceOver.
GitHub (empresa): Plataforma onde está hospedado o repositório e onde o apresentador mostra o pull request.

Tradução completa (pt-BR)

00:00 Olá, pessoal! Nesta demonstração, vou mostrar como usar o plugin GitHub Copilot no IntelliJ para passar de uma issue do GitHub a uma implementação funcional. Vamos começar com o famoso aplicativo Spring PetClinic, analisar uma issue, dar uma olhada rápida no agent harness e na seleção de modelos e, em seguida, usar o modo agent para planejar e implementar uma solução. Por fim, vamos analisar e validar os resultados diretamente na IDE usando o modo Ask. Vamos começar! Ótimo! Estou aqui no IntelliJ com o famoso Spring PetClinic aberto. Este é um fork.

00:35 Me disseram que há uma issue do GitHub sobre acessibilidade que realmente precisa ser corrigida. Primeiro, quero aproveitar o poder da IA. Então, vou começar instalando o plugin GitHub Copilot para IntelliJ, já que ele ainda não está instalado. Vou acessar File, Plugins, pesquisar Copilot no marketplace e, aqui, vejo o GitHub Copilot. Clico em Install e, depois que a instalação terminar, preciso reiniciar minha IDE. Certo! Depois de reiniciá-la, já consigo ver o ícone do GitHub Copilot aqui.

01:08 Posso simplesmente clicar nele e, aqui, vejo minha janela de chat com o plano. Agora posso dizer: encontre a issue aberta do GitHub e vamos planejar como resolvê-la. O Copilot está usando o GitHub CLI para ler as issues do repo. Com as aprovações padrão, posso revisar o comando antes de autorizá-lo. E, como estou começando agora, tudo bem para mim ele me perguntar novamente a cada vez. Eu também poderia ter escolhido confiar nesses comandos ou em todos os comandos, mas isso fica totalmente a seu critério.

01:44 Com certeza, é algo que vou fazer com mais tempo. E, como já estou trabalhando com isso há algum tempo, vou permitir todos os comandos nesta sessão também, para acelerar as coisas. Posso sempre ver o que ele está fazendo. Temos testes, mas não automação de navegador. Por isso, ele quer que eu escolha se desejo usar automação de navegador, o que é recomendado. Assim, posso verificar o comportamento real e a acessibilidade responsiva, algo que talvez eu use neste caso.

02:16 Ah, ótimo. Agora tenho o plano. Ele quer corrigir o link do logotipo sem nome e o botão de alternância para dispositivos móveis da barra de navegação do Thymeleaf. Adicionar automação de navegador. Manter o escopo limitado. Sim, porque só quero corrigir a issue, certo? Não queremos ir longe demais. Agora clico em Implement plan. O que você vai notar é que ele mudou automaticamente para o modo agent. Vamos dar uma olhada rápida em todas as opções que vêm com o GitHub Copilot. Primeiro, posso clicar aqui para selecionar o agent harness.

02:48 Temos Local, Copilot ou Cloud. Local é o agent clássico no IntelliJ. Copilot é a opção padrão aqui. É um agent com tecnologia de SDK que usa o mesmo mecanismo do Copilot CLI. Cloud me permite delegar tarefas ao agent na nuvem do GitHub. Também é possível configurar outros provedores de agent. Vamos escolher Copilot aqui. Depois, posso selecionar os modelos. Temos vários, de Claude a GPT, Grok, Microsoft e MAI. Há muitas opções.

03:18 E aqui estão os modos que estamos descobrindo agora. Enquanto ele corrige minha issue, está adicionando os atributos de acessibilidade localizados à barra de navegação. Posso sempre ver quais arquivos estão sendo alterados. Fico muito feliz em ver que tudo isso também está sendo integrado em japonês. Então, não estamos disponíveis apenas em inglês, mas também em japonês, coreano e russo. E aqui está também o Playwright, necessário para fazer os testes.

03:49 E agora já estamos testando se o aplicativo está funcionando corretamente. Ele me diz que terminou de adicionar todas as alterações. Diz que implementamos a correção da issue número um. Agora, a barra de navegação compartilhada tem nomes de acessibilidade localizados. Assim, ela deve ser legível para leitores de tela. Sim. Também incluímos o alemão, o que me deixa muito feliz. Aqui, ele diz que não consegue fazer a verificação com leitor de tela, o que, imagino, está tudo bem.

04:23 Antes de transformar isso em um PR, preciso admitir que não sou desenvolvedor frontend e tenho algumas perguntas. Então, por que não mudo agora para o modo Ask? No modo Ask, não alteramos nada. Ele serve para entender melhor o projeto e, basicamente, fazer perguntas. Vou pedir ao Copilot que me explique as alterações feitas. Aqui, ele diz que os controles são mais fáceis de usar com leitores de tela e teclados.

04:55 O link do logotipo agora tem um nome de acessibilidade localizado, que o identifica como o link para a página inicial da clínica veterinária. Parece bom. Certo. Não consegui verificar isso. O que podemos verificar nos anúncios usando o VoiceOver ou o NVDA? Agora quero realmente conferir, de ponta a ponta, se a issue foi resolvida. Certo. VoiceOver com Safari. Posso abrir isso agora no Safari. Ele quer que eu execute o aplicativo.

05:27 Basicamente, é só copiar o comando aqui. Ótimo. Acabamos de iniciá-lo e agora estou abrindo localhost 8080. E lá está o aplicativo Spring. Agora vamos voltar ao que ele quer que eu faça. Command F5. E então devo ouvir o VoiceOver. Visitado. Link. Página inicial do PetClinic. Lista com quatro itens. Alternar navegação. Expandido. Botão. Alternar navegação. Recolhido. Usei o Copilot no IntelliJ para criar o pull request.

05:59 Aqui está no GitHub. Conseguimos alterar todos os arquivos e incluir todos os idiomas. É fácil fazer isso. Em apenas alguns minutos, passamos de uma issue reportada a uma implementação revisada usando o GitHub Copilot no IntelliJ. Ao combinar workflows agênticos, o agent harness e modelos de base poderosos, os desenvolvedores podem passar menos tempo em tarefas repetitivas e mais tempo criando ótimos softwares prontos para produção.

06:30 Para saber mais sobre o GitHub Copilot nas IDEs da JetBrains, incluindo documentação, orientações de configuração e recursos adicionais, acesse gh.io/copilotinjetbrains. Muito obrigado por assistir.

Transcrição original

[00:00] Hi everyone! In this demo, I show you how to use the GitHub Copilot plugin in IntelliJ to go from a GitHub issue to a working implementation. We’ll start with the famous Spring PetClinic application, review an issue, take a quick look at the agent harness and model selection, and then use the agent mode to plan and implement a solution. Finally, we’ll review and validate the results directly in the IDE using the Ask mode. Let’s get started! Great! So here I am in IntelliJ with the famous Spring PetClinic open. This is a fork.

[00:35] I got told that there is a GitHub issue for accessibility and it really needs a fix. I will first want to make use of the power of AI. So let me start by installing the GitHub Copilot plugin for IntelliJ since it’s not here yet. So I will go on File, Plugins, search for Copilot in the marketplace, and I can see here GitHub Copilot. I hit Install and once it’s installed, I will have to restart my IDE. Alright! Once I restart it, I can now see here the GitHub Copilot icon.

[01:08] So I can just click on it and here can now see my chat window with the plan. So now I can say find the open GitHub issue and let’s plan to resolve it. Copilot is using the GitHub CLI to read the repository’s issues. With default approvals, I can review the command before allowing it. And since I’m just starting here, I’m okay with this asking me every time again. I could also have chosen that I trust those commands or like all commands, but that’s totally up to you.

[01:44] So it’s definitely something that will go with more time. And since I’m working with this for quite some time, I will allow all commands in this session also to speed things up. I can always see what it’s doing. So we do have tests but no browser automation. So that’s why it wants me to choose if I want to use browser automation, which is recommended. So I actually can check for real behavior and responsive accessibility, what I actually might use in this one here.

[02:16] Oh, great. So now I have the plan. So it wants me to fix the Thymeleaf navbar’s unnamed logo link and mobile toggle. Add browser automation. Keep scope limited. Yes, because I only want to fix the issue, right? We don’t want to go too far. So I go now on implement plan. What you realize now is that it switched to agent mode automatically. Let’s have a quick look at all the options that GitHub Copilot comes with. So first off, I can click here to select the agent harness.

[02:48] So there’s local, copilot or cloud. Local is the classic agent in IntelliJ. Copilot is the default here. The SDK powered agent using the same engine as Copilot CLI. Cloud lets me delegate tasks to GitHub’s cloud agent. Additional agent providers can also be configured. Let’s go with Copilot here. Then I can select the models where we do have a bunch from Claude to GPT, Grok, Microsoft, MAI. So there are plenty.

[03:18] And here are the modes that we are just discovering. While it’s fixing my issue for me is adding the localized navbar accessibility attributes. I can always see what files are being changed. I’m super happy to see this all being integrated in Japanese now as well. So we are not only accessible in English, but also in Japanese or Korean, Russian language. And here’s also the playwright that was needed to actually test it.

[03:49] And now we are already testing if the app is running correctly now. So now it tells me that it’s done with adding all the changes. It says that we implemented the fix for issue number one. The shared navbar now has localized accessibility names. So it should be readable for accessibility. Yeah. Also, we included German now, which is what I’m very happy about. So here it says that it can’t perform the screen reader check, which is, I guess, okay.

[04:23] Before I put this in as a PR, and I must admit that I’m not a front-end developer, I do have questions. So why don’t I switch now to Ask mode? In Ask mode, we are not changing anything. This is to understand the project better and to ask things basically. I will ask Copilot to explain the changes that have been done to me. So here it says that the controls are easier to use with screen readers and keyboards.

[04:55] The logo link now has localized accessibility name, identifying it as the pet clinic home link. That sounds good. Okay. I couldn’t verify it. What can we verify in the announcements with VoiceOver or NVDA? Because now I want to actually see like end to end if it resolved the issue. Okay. VoiceOver with Safari. So I can open this now in Safari. It wants me to run the app.

[05:27] Basically copy the command here. Great. So we just started it and now I’m opening localhost 8080. And there we have the spring app. And now let’s get back to what it wants me to do. Command F5. And then I should get the VoiceOver. Visited. Link. PetClinic home. List for items. Toggle navigation. Expanded. Button. Toggle navigation. Collapsed. I use Copilot in IntelliJ to create the pull request.

[05:59] Here it is on GitHub. We have been able to change all the files, include all the languages. You can get that done easily. In just a few minutes, we went from a reported issue to reviewed implementation using GitHub Copilot in IntelliJ. By combining agentic workflows, the agent harness and powerful foundation models, developers can spend less time on repetitive tasks and more time building great software towards production.

[06:30] To learn more about GitHub Copilot in JetBrains IDEs, including documentation, setup guidance, and additional resources, visit gh.io/copilotinjetbrains. Thank you so much for watching.