Dev Days · Taboão da Serra · 17 de outubro de 2026

Primeiros passos com GitHub Copilot

Aprenda a usar o GitHub Copilot app e o Copilot CLI construindo dois quizzes do zero. Em 70 minutos, você vai criar uma aplicação, conferir o código, implementar uma melhoria e planejar sua publicação.

Escolha uma trilha para começar

Você pode seguir as duas trilhas em sequência ou acompanhar somente a ferramenta que quer conhecer. Use os botões de anterior/próxima no fim de cada lição; o menu lateral permite pular diretamente para uma etapa.

Seu roteiro de 70 minutos

Como ler os prints

Os números amarelos nas capturas indicam os controles descritos na legenda. Clique na imagem para ampliá-la. As telas mostram o app no Linux; os nomes e a posição de alguns controles podem variar conforme o sistema e a versão instalada.

Antes de começar

• Conta GitHub e acesso ao Copilot ou configuração de provedor compatível com sua instalação.
• Git disponível para versionar e publicar. Para criar repositórios e issues, uma conta com as permissões necessárias.
• Uma pasta de teste sem segredos. Crie os repositórios na sua própria conta GitHub, com nomes disponíveis.
• Modelo disponível no seu plano; nenhum modelo específico é obrigatório. Revise permissões e consumo de créditos.

Material de apoio

• Repositório do evento: código do guia, slides e materiais complementares.
• Workshop de Copilot app e workshop de Copilot CLI: referência de organização e fluxo.
• Quickstart do app, quickstart da CLI e comandos da CLI: requisitos e controles documentados.

Para criar issues e publicar no GitHub Pages, você precisa das permissões correspondentes no repositório. Se não tiver acesso, continue com o quiz local e registre o que falta para publicar.

Copilot app · 5 minutos · lição 1 de 5

Preparar e se localizar no app

Você vai criar um quiz da Copa do Mundo masculina de 2022. Primeiro, conheça as três áreas principais do app: navegação, conversa e superfície de trabalho.

Instalar e conectar a pasta

1. Baixe o app em gh.io/app, instale e entre com sua conta. Confira os requisitos oficiais.
2. Crie uma pasta vazia chamada quizz-copas.
3. Na lateral, ao lado de Projects, clique em + e escolha Local folder or repository. Se sua instalação usar outro nome, procure a opção de adicionar uma pasta local.
4. Ao lado do projeto conectado, use + para iniciar uma sessão. Escolha Interactive no seletor abaixo do prompt, se disponível.

chmod +x ./GitHub-Copilot-linux-x64.AppImage
./GitHub-Copilot-linux-x64.AppImage

Onde ficam as partes do app

1234

1. New e navegação: novas sessões e áreas do produto. Dependendo da versão, issues e PRs aparecem separados ou reunidos em My work.
2. Conversa: aqui você envia prompts, acompanha alterações e aprova ações.
3. Abas de trabalho: superfícies como navegador, terminal e editor. Use-as para alternar entre código e resultado.
4. Pick & Polish: seleção de elementos do navegador nesta captura. Vamos usar na lição 3.

Copilot app · 9 minutos · lição 2 de 5

Criar o quiz da Copa de 2022

Comece criando e testando o quiz na sua máquina. Você vai revisar os arquivos antes de enviá-los ao GitHub.

Envie o primeiro prompt

Crie nesta pasta um quiz em português sobre a Copa do Mundo
de futebol masculino de 2022, com 10 perguntas e uma única
resposta correta por questão.
Use um único index.html, com HTML, CSS e JavaScript no arquivo,
sem bibliotecas, fontes externas ou servidor.

Inclua progresso, pontuação, feedback de acerto/erro e resultado final
com opção de jogar novamente. Use um layout responsivo e acessível,
com foco visível, navegação por teclado e texto além das cores.
Por enquanto use apenas um tema claro; vamos adicionar a troca
de tema em uma issue depois.

Crie um README.md explicando a estrutura e como abrir o arquivo.
Não inicialize Git, crie repositório, faça commit ou push ainda.
Abra o index.html no navegador integrado, se disponível.

Revise as solicitações do agente. Se ele apresentar um plano, leia e autorize a execução pelo controle da sua instalação ou pela conversa. O resultado não precisa ter a mesma aparência da captura.

Encontre a prévia e teste

No print da lição anterior, a prévia fica na aba com o ícone de globo, à direita. Peça para abrir index.html como arquivo local, sem iniciar servidor. Se o navegador integrado não estiver disponível, abra o HTML no navegador do sistema.

1. Escolha uma resposta correta e uma errada; confira a explicação e a pontuação.
2. Tente responder duas vezes à mesma pergunta. A pontuação não deve duplicar.
3. Complete as 10 perguntas e reinicie. Progresso e pontos devem voltar ao início.
4. Use Tab e Enter para operar o quiz e confira se o foco é visível. Passe o mouse sobre os botões de avançar e reiniciar e confirme que o texto continua legível.

Reserve um minuto para um caso extremo: reinicie e erre todas as respostas. Confira se o resultado fica em zero e se a mensagem final continua fazendo sentido.

Copilot app · 6 minutos · lição 3 de 5

Inspecionar o código e apontar uma mudança

Abra o código, não apenas a página

Abra index.html no editor integrado, se disponível.
Sem alterar o arquivo, mostre onde estão a estrutura HTML,
os estilos CSS, as perguntas e as funções de pontuação e reinício.
Use os nomes reais dos elementos e funções deste arquivo.

Alterne entre a aba de código e a aba do navegador para comparar o arquivo com a página. Fora do app, use Abrir com → seu editor no arquivo. Duplo clique normalmente mostra o quiz, não o código.

Use Pick & Polish na prévia

12

1. Na aba do navegador, procure Pick & Polish, como no print, ou a ferramenta equivalente de selecionar elemento.
2. Ative a seleção e clique no cartão da pergunta. Confira se o chat recebeu o contexto do elemento antes de enviar o pedido abaixo.

Melhore apenas o elemento selecionado: destaque a pergunta,
organize o espaçamento e deixe as opções mais fáceis de tocar.
Preserve o quiz, o tema claro e a acessibilidade.
Não adicione funcionalidades ou dependências.

Reserve um minuto para conferir o escopo: compare o antes e o depois, localize no código os estilos alterados e confirme que perguntas e pontuação não mudaram.

Copilot app · 8 minutos · lição 4 de 5

Do pedido de melhoria à issue

Adicione uma alternância entre tema claro e escuro. Você vai registrar a melhoria como uma issue, uma tarefa no GitHub com critérios de aceite. Primeiro, coloque o quiz em um repositório de teste seu.

Conecte um repositório seu

Confira se esta pasta já é um repositório Git e se há um remoto.
Quero versionar o quiz em um repositório de teste na MINHA conta,
com nome disponível baseado em quizz-copas.
Mostre quais arquivos serão enviados, a visibilidade proposta,
a branch e os passos de criação e envio.
Não substitua repositórios existentes nem exponha segredos.
Espere minha confirmação antes de inicializar Git, criar o repo,
fazer commit ou push.

Confira sua conta, a visibilidade e os arquivos. Depois autorize explicitamente o plano. Conecte o repositório ao projeto no app se necessário; uma sessão baseada em pasta pode não ganhar automaticamente os controles Git.

Crie a issue de tema

No repositório de teste que acabamos de confirmar, crie uma issue
para alternar entre tema claro e escuro.
Critérios de aceite: botão acessível pelo teclado, rótulo claro,
contraste legível nos dois temas e preferência inicial do sistema.
Mantenha o index.html único e não use dependências.
Não implemente ainda. Informe o link da issue criada.

Abra My work para encontrar issues e PRs. Se sua versão mostrar essas áreas separadas, use Issues, como na captura. Localize a tarefa pelo número e pelo repositório correto, não apenas pelo título. Consulte o guia de issues e PRs se necessário.

Implemente e confira o diff

Se a interface oferecer “trabalhar na issue” ou iniciar sessão, use essa opção. Caso contrário, continue na sessão do repositório com o número/link explícito.

Implemente somente a issue #NUMERO que acabamos de criar.
Leia os critérios de aceite e preserve as perguntas e a pontuação.
Verifique o botão por teclado e os dois temas.
Mostre o diff e o que foi realmente testado.
Não faça commit, push ou merge sem minha aprovação.

Em sessões Git, a documentação indica Changes acima do campo de prompt para conferir alterações. Sem esse controle, peça o diff ao agente. Leia antes de autorizar o envio.

Reserve um minuto para revisar os critérios: confira o botão com Tab, alterne os dois temas e verifique que o texto continua legível. Relacione cada teste a um critério da issue.

Copilot app · 7 minutos · lição 5 de 5

Planejar o deploy no GitHub Pages

Prepare a publicação do quiz no GitHub Pages. Comece por um plano e confira as alterações necessárias antes de executá-las. A publicação depende do tempo e das permissões do seu repositório.

Planeje antes de editar

Escolha Plan no seletor de modo da sessão, se disponível. Não confunda com o seletor de modelo. Se não encontrar esse controle, o prompt abaixo pede explicitamente uma pausa antes de executar.

Planeje o deployment deste quiz no GitHub Pages via GitHub Actions.
Confira a branch padrão, o index.html, os arquivos a publicar,
a configuração existente de Pages e as permissões disponíveis.
Não substitua um site ou workflow já existente.
Quero publicar só os arquivos do quiz e documentar no README.
Explique o workflow, a URL esperada e como verificar o deploy.
Não edite, envie ou publique nada antes da minha aprovação.

Se houver tempo, publique

1. Revise e autorize a implementação. Confira o workflow e o README antes de permitir commit, push ou PR.
2. No GitHub do seu repositório, vá a Settings → Pages → Build and deployment → Source → GitHub Actions. Você precisa de permissão para configurar.
3. Depois que o workflow chegar à branch correta, acompanhe a execução em Actions.
4. Abra a URL informada pelo deploy, teste a página e o tema. Um link previsto não comprova publicação.

Reserve um minuto para revisar o plano: identifique quais arquivos serão publicados, como reconhecer um deploy bem-sucedido e qual será o próximo passo se uma etapa falhar.

Copilot CLI · 5 minutos · lição 1 de 5

Preparar o Copilot no terminal

Você vai criar um quiz de capitais com 6 perguntas. No Copilot CLI, a conversa com o agente e as aprovações de ações acontecem no terminal.

Instale a CLI e faça login

Instale o pacote estável seguindo o quickstart oficial. A instalação por npm requer Node.js 22 ou posterior. Se já tiver a CLI, não é necessário reinstalar.

npm install -g @github/copilot
copilot version
mkdir cidades-quizz
cd cidades-quizz
copilot

Use uma pasta nova; se cidades-quizz já existir, escolha outro nome e não sobrescreva. Ao abrir o Copilot, confira o diretório e a solicitação de confiança. Para autenticar, digite /login dentro da sessão e siga as instruções.

Reconheça a interface no terminal

123

1. Histórico e operações: o agente mostra ações de shell e resultados. Leia antes de aprovar novas operações.
2. Entrada: aqui você escreve prompts e comandos da sessão, como /help.
3. Rodapé: a captura indica Interactive · Manual Approval. Não habilite execução irrestrita para seguir este laboratório.

/help mostra os comandos disponíveis na sua versão. Esc cancela a operação atual. gh, quando necessário para repositórios e issues, é o GitHub CLI, uma ferramenta separada.

Explore por um minuto: abra /help, localize os comandos de contexto e planejamento e confirme como sair da ajuda para voltar ao prompt.

Copilot CLI · 9 minutos · lição 2 de 5

Criar o quiz de capitais

Envie o prompt no Copilot

Crie nesta pasta um quiz em português com 6 perguntas
sobre capitais de países, com uma única resposta correta por questão.
Use um único index.html com HTML, CSS e JavaScript,
sem dependências, fontes externas ou servidor.
Inclua pontuação, feedback em texto e cores, resultado final
e botão para jogar novamente. Garanta teclado e foco visível.
Comece com um tema claro; a troca de tema será uma melhoria depois.
Crie um README.md explicando a estrutura e como abrir o HTML.
Não inicialize Git, crie repositório, faça commit ou push ainda.
Informe o caminho do index.html para eu testar no navegador.

Autorize somente ações que façam sentido para a pasta de teste. Ao contrário da trilha App, não presuma que exista uma prévia integrada no terminal.

Abra no navegador do sistema

Abra a pasta pelo gerenciador de arquivos e dê duplo clique em index.html. Se preferir, use apenas o comando do seu sistema em outro terminal, dentro da pasta do quiz:

open index.html

Em Windows/PowerShell: Start-Process .\index.html. Em Linux com ambiente gráfico: xdg-open index.html. Isso abre o arquivo local, sem instalar servidor.

Faça uma partida completa

1. Responda uma pergunta corretamente e outra incorretamente.
2. Confira que clicar novamente não muda a pontuação.
3. Complete as 6 perguntas e reinicie. Verifique pontuação e resultado.
4. Teste Tab e Enter e passe o mouse sobre os botões de avançar e reiniciar para conferir a legibilidade. Volte à CLI e descreva qualquer falha com passos para reproduzir.

Reserve um minuto para um caso extremo: reinicie e erre todas as respostas. Confira o resultado zero e tente acionar uma opção novamente para verificar que a pontuação não muda.

Copilot CLI · 6 minutos · lição 3 de 5

Conferir antes de autorizar

Use o arquivo como contexto

Na CLI, você pode mencionar arquivos com @. Digite @index.html e selecione o arquivo se aparecer uma lista. Peça uma explicação que use os nomes reais do seu código.

Leia @index.html sem editar.
Explique onde estão o HTML, o CSS, a lista das perguntas,
os eventos de resposta, a pontuação e o reinício.
Aponte como você verificaria que uma pergunta só pontua uma vez.

Faça uma mudança pequena

Melhore somente o espaçamento e o tamanho de toque dos botões.
Preserve o tema claro, as 6 perguntas e a pontuação.
Não adicione dependências ou funcionalidades.
Ao terminar, mostre quais trechos mudou e separe
o que foi testado do que foi apenas revisado no código.

Recarregue o navegador e compare. Não há seleção de elemento do navegador nesse fluxo: o equivalente é fornecer arquivo, seletor real e descrição precisa do resultado esperado.

Confira o diff quando houver Git

Use /diff para revisar alterações, se disponível em /help. Se a pasta ainda não é um repositório ou não há uma base versionada, peça os trechos antes/depois; a etapa seguinte cria o contexto Git. Um diff vazio não significa que não existem arquivos novos.

Reserve um minuto para explorar o contexto: se disponível em /help, use /context para visualizar o consumo da janela de contexto e o espaço disponível. Esse comando não é uma lista dos arquivos lidos. Para direcionar a análise de um arquivo, mencione @index.html no pedido.

Copilot CLI · 8 minutos · lição 4 de 5

Criar uma issue e implementar no terminal

Adicione a alternância entre tema claro e escuro. Registre os critérios em uma issue e use a conversa no terminal para orientar, aprovar e conferir a implementação.

Publique o código na sua conta

Confira o estado Git desta pasta e a conta GitHub autenticada.
Quero criar um repositório de teste na MINHA conta com nome disponível
baseado em cidades-quizz.
Mostre a visibilidade, os arquivos a enviar, a branch e os passos.
Não substitua repositórios existentes e confira se há segredos.
Espere minha confirmação antes de inicializar Git,
criar repositório, fazer commit ou push.

Revise e autorize o plano. O agente pode precisar do gh ou de outra integração autenticada. Se faltar alguma ferramenta, confirme a necessidade antes de instalar. Nunca cole tokens na conversa ou no código.

Crie e leia a issue

No repositório de teste confirmado, crie uma issue para alternância
entre tema claro e escuro: botão acessível por teclado,
rótulo claro, preferência inicial do sistema e contraste legível.
Mantenha o arquivo único e sem dependências.
Não implemente ainda. Informe o número e o link da issue.

Peça a implementação e revise

Leia e implemente somente a issue #NUMERO deste repositório.
Preserve as perguntas e a pontuação.
Mostre o diff e explique como verificar teclado e os dois temas.
Não faça commit, push ou merge sem minha aprovação.

Confira /diff, se disponível, ou peça o diff Git ao agente. No navegador, recarregue e teste o botão, o contraste e o foco. Depois autorize o envio se estiver satisfeito.

Reserve um minuto para revisar os critérios: compare a issue com o diff e com a página. Confirme que a mudança não alterou as 6 perguntas nem a regra de pontuação.

Copilot CLI · 7 minutos · lição 5 de 5

Planejar e acompanhar o deploy

Use Plan para discutir a abordagem

Use /plan seguido do pedido abaixo para discutir a abordagem antes de executar. Confira a disponibilidade com /help. Se o comando não existir, envie o pedido em linguagem natural, mantendo a pausa antes de editar.

/plan Planeje publicar este quiz no GitHub Pages via GitHub Actions.
Confira branch padrão, index.html, configuração existente e permissões.
Não sobrescreva workflows ou sites existentes.
Publique apenas arquivos do site, sem dependências ou build desnecessários.
Inclua instruções no README e explique como verificar a URL final.
Espere minha aprovação antes de editar, configurar o GitHub ou publicar.

Reconheça o diagnóstico e o resultado

123

1. Falha em Configure Pages: criar o workflow não basta se o Pages estiver desabilitado.
2. Causa e correção: o histórico indica habilitação de Pages com fonte GitHub Actions. Isso exige permissão; não autorize alterações fora do seu repo de teste.
3. URL e verificação: o resultado mostra a URL publicada e uma resposta HTTP 200. Confira também o quiz visualmente; HTTP 200 não testa suas regras.

Aprove e verifique, se houver tempo

1. Revise o plano e autorize a implementação. Leia o workflow antes do commit e envio.
2. Se precisar habilitar manualmente: no GitHub, Settings → Pages → Source → GitHub Actions.
3. Acompanhe a execução em Actions ou peça ao agente para mostrar o status real e o log da etapa que falhar.
4. Abra a URL produzida pelo deploy, complete o quiz e teste os temas.

Reserve um minuto para revisar o plano: confira qual repositório e branch receberão a publicação. Se já publicou, compare o quiz online com o local; se ainda não, registre a próxima ação necessária.

Para continuar depois: workshop completo de Copilot CLI, workshop completo do app e documentação de GitHub Pages.

← Voltar à visão geral das duas trilhas