GitHub Copilot e ChatGPT: impulsionando seu desenvolvimento com IA
Iniciando o projeto com Copilot - Apresentação
Guilherme: Oi, pessoal. Meu nome é Guilherme Silveira. Serei seu instrutor nesse curso de ChatGPT e GitHub Copilot.
Eu sou uma pessoa não binária, de cabelos castanhos e encaracolados, e olhos castanhos. Estou usando uma camiseta branca com estampa de bichinhos abstratos.
Alex: Eu sou Alex Felipe, instrutor da Alura.
Sou um homem um homem negro de pele clara e com cabelos raspados. Tenho olhos castanho-escuros. Estou com uma camiseta azul que tem o logo do One Piece.
Desenvolver um jogo de Pong
Alex: Neste curso vamos desenvolver um jogo de Pong. Se você ainda não jogou esse jogo é, basicamente, um quadro no qual temos dois jogadores representados por hastes verticais. Sendo um deles nós, que somos o jogador à esquerda e o outro jogador à direita, que é a representação da máquina, nosso oponente.
O objetivo é pontuar. A bola vai se movendo na tela e sempre que ela bate em uma das hastes, que representam os jogadores, essa bola é rebatida para o outro lado. Aquele jogador que não acertar a bola, toma um ponto.
Guilherme: Essa é a ideia do projeto que vamos atacar.
A questão que queremos desenvolver neste curso é: como utilizar um copiloto que é uma inteligência artificial, como utilizar o GitHub Copilot no dia a dia ou até mesmo outras ferramentas de Inteligência Artificial que podem funcionar como copilotas na nossa IDE?
Neste curso utilizaremos o VS Code e iremos instalar o GitHub Copilot Labs
O principal neste curso não é necessariamente o jogo que vai sair, apesar de ter várias coisas legais que aprenderemos nesse processo, o principal é entender como se comunicar com a máquina.
Quando estamos desenvolvendo software em parceria com outra pessoa, temos formas de nos comunicarmos para que uma pessoa entenda o que a outra está fazendo, assim entendemos o que uma pessoa precisa e o que a outra pessoa vai desenvolver.
Quando temos alguém nos ajudando, temos o mesmo desafio, mas agora esse ajudante é uma máquina.
Bora aprender como podemos nos comunicar de diversas formas para pedir ajuda e tirar o máximo de proveito dessa Inteligência Artificial!
Bons estudos!
Iniciando o projeto com Copilot - Criando o projeto do Pong
Guilherme: Vamos começar! Usaremos o VS Code como editor de código. Podemos abrir o diretório com o qual iremos trabalhar em "File > Open Folder". No meu caso, vou selecionar o diretório pong-copilot.
Dentro desse diretório criaremos o arquivo index.html. Pois o jogo será criado dentro do JavaScript em uma página HTML.
Agora, vamos instalar o GitHub Copilot.
No painel lateral à esquerda, vamos selecionar o menu "Extensões" e buscar por "copilot". Vamos instalar as duas opções do GitHub que vão aparecer: GitHub Copilot e GitHub Copilot Labs.
Agora podemos voltar à edição do arquivo index.html.
Queremos criar uma página que roda um jogo JavaScript que usa biblioteca P5.js.
Vamos usar um index.html padrão. Sempre vai ser igual para todo mundo que vai usar P5.js. Mas eu não lembro, então vou colocar o seguinte comentário no index.html.
<!-- html que adiciona o p5js -->
Ao pressionarmos "Enter" para ir para a linha seguinte, vai aparecer uma opção de código que a IDE está tentando adivinhar que deve servir para adicionar o P5.js.
Ele está pegando do cloudflare a versão 0.5.16 do P5.js. Teoricamente está correto.
<!-- html que adiciona o p5js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
Em seguida, precisamos fazer a página HTML. Para isso, colocaremos o seguinte comentário na primeira linha do código:
<!-- pagina html basica completa -->
Após pressionar "Enter", a IDE vai sugerindo os códigos. Basta irmos pressionando "Tab" para que autocompletar os códigos.
Só pressionamos "Tabs" e "Enters" e o Copilot foi preenchendo para nós com o seguinte código:
<!-- pagina html basica completa -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Titulo da pagina</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Titulo da pagina</h1>
<p>Paragrafo</p>
<script src="js/script.js"></script>
</body>
</html>
Então, depois que instalamos o Copilot e estamos logados, podemos sair digitando em comentários do HTML o que queremos fazer.
Eu vou ser sincero, Alex. Quando eu escrevi o comentário "html que adiciona o p5js", achei que ele já colocaria tudo para nós. Mas não colocou.
Alex: Talvez precise de mais contexto para poder colocar tudo junto.
Guilherme: Podemos apagar o comentário <!-- pagina html basica completa --> porque já colocou o que queríamos.
Vamos deixar o título da página como Pong. Podemos deletar o <h1> e o <p> que ele criou dentro de body.
E passaremos o código do P5.js para o cabeçalho da página. Mas tem um detalhe, essa versão 5 não é uma versão recente. Isso eu, Guilherme, sei. O Copilot não sabe.
Agora temos duas opções. Ou trocamos e indicamos essa versão atual no código do VS Code e torcemos para estar certo. Eu não sei se esse código gerado está certo.
Alex: Aí tem que testar, não tem jeito.
Guilherme: O Copilot está ajudando, mas nós precisamos saber as coisas. Vou entrar em uma ferramenta do P5.js que chamada editor.P5js.org.
Nesse editor, ao clicar na seta do painel lateral, à esquerda, ele exibe os arquivos sketch files e um deles é um index.html. Esse é o index.html padrão do P5.js, esse é o que eu gostaria que o Copilot tivesse digitado para nós:
Guilherme: Esse do editor.p5js.org já carrega também a versão de áudio e, em vez de script.js, ele coloca sketch.js, que é um nome padrão mesmo para o desenho que vamos fazer.
Podemos colar esse bloco de código no nosso código index.html no VS Code. Vai substituir tudo o que fizemos, mas vai ficar correto.
Alex: É legal isso que você trouxe. Para entendermos que a ferramenta não vai fazer tudo sozinha. Nós temos que validar e entender se realmente chegou no resultado desejado.
Guilherme: Sim. E já vemos as vantagens e desvantagens. Foram autocompletes de blocos grandes, mas tinha uma versão errada. Então, devemos nos atentar à versão do que estamos usando.
Alex: E também teve adição de coisas que não precisamos. Então é sempre bom analisar se você vai precisar de tudo o que o Copilot inserir. No caso, nem precisávamos das tags <h1> e <p>, por exemplo.
Guilherme: Agora, no VS Code, vamos criar um novo arquivo chamado sketch.js.
Neste arquivo queremos o JavaScript básico do P5.js. Como é JavaScript, vamos comentar com // e pedir o código base do P5.js.
// codigo base do p5js
Mas ao pressionar "Enter", ele escreveu alguns links do site do P5.js. Não é isso que queremos.
Alex: Será que se começarmos com uma function ele começa a adicionar corretamente?
Guilherme: Pois é. Nós sabemos como o P5.js funciona, ele tem duas funções. Vamos colocar função setup:
//funcao setup do p5js
O Copilot vai autocompletar com:
//funcao setup do p5js
function setup() {
createCanvas(400, 400);
background(0);
}
Criou um lugar para desenharmos. E vamos usar também a função de desenho do P5.js, uma função draw():
//funcao de desenho do p5js
O Copilot vai autocompletar com:
//funcao de desenho do p5js
function draw() {
//desenha um circulo
fill(255);
ellipse(200, 200, 50, 50);
}
Alex: Ele já desenhou alguma coisa aí! Vamos descobrir o que foi.
Guilherme: Vamos salvar e verificar o que aconteceu.
Para rodar esse index.html, uma extensão do VS Code chamada Five Server. Mas tem várias que você pode usar, tem o Live Server, entre outros.
Então já estou com o Live Server instalado. No painel de estrutura de arquivos, vamos clicar com o botão direito em index.html e selecionar "Open with Five Server". Com isso, o projeto será aberto no nosso navegador.
E o que temos é um círculo branco em um fundo preto. Foi isso que o Copilot fez com a função draw(). Está funcionando.
Guilherme: De volta ao VS Code, agora queremos fazer algo mais interessante. O primeiro elemento do jogo Pong é a bolinha, ela tem que começar no meio da tela e precisa andar para a esquerda e para a direita. Então, a bolinha tem uma posição dinâmica.
Vamos colocar o seguinte comentário para ver se o Copilot completa com a posição da bola:
// posicao da bola
Ele completou com:
// posicao da bola
var x = 200;
var y = 200;
Está razoável, então desenharemos a elipse no x e no y.
//funcao de desenho do p5js
function draw() {
//desenha um circulo
fill(255);
ellipse(x, y, 50, 50);
}
E a cada frame a bolinha deve andar para a direita ou para a esquerda.
Alex: O x sendo horizontal e o y vertical.
Guilherme: Precisamos definir as velocidades da bola. O Copilot gerou velocidade em x igual a 5 e velocidade em y igual a 5:
//velocidades da bola
var vx = 5;
var vy = 5;
Vamos atualizar lá na função draw().
//funcao de desenho do p5js
function draw() {
//desenha um circulo
fill(255);
ellipse(x, y, 50, 50);
x += vx;
y += vy;
}
Vamos salvar e abrir o projeto no navegador.
Funcionou, a bolinha foi para baixo em sentido diagonal. Mas faltou limpar a tela para aparecer apenas uma bola. Vamos tirar o background(0) da função setup() e colocá-lo na função draw(). Podemos também tirar o comentário "desenha um circulo".
//funcao de desenho do p5js
function draw() {
background(0);
fill(255);
ellipse(x, y, 50, 50);
x += vx;
y += vy;
}
Vamos salvar e atualizar o navegador. Agora está correto. Temos apenas uma bola na tela movimentando-se em sentido diagonal para baixo à direita.
Faltou quicar. Quando a bola bate no canto da tela, ela deve voltar. Para isso, colocaremos uma condição.
//se tocar na borda horizontal, inverte a velocidade
O copilot já completou com a conta:
//se tocar na borda horizontal, inverte a velocidade
if (x < 25 || x > 375) {
vx *= -1;
}
Logo abaixo, faremos o mesmo para a borda vertical.
// idem para a borda vertical
if (y < 25 || y > 375) {
vy *= -1;
}
Vamos salvar e, ao atualizar o navegador, vemos que a bola está indo e voltando diagonalmente para a parte de cima à esquerda e para a parte de baixo à direita.
Seria legal começar com velocidade aleatória. No código, vamos substituir "velocidades da bola" por "velocidades da bola aleatorias".
//velocidades da bola aleatorias
O Copilot vai completar com:
//velocidades da bola aleatorias
var vx = Math.random() * 10 - 5;
var vy = Math.random() * 10 - 5;
Vamos parar para pensar o que ele está fazendo matematicamente. Está pegando um número entre 0 e 10 e tirando 5. Então, a velocidade é entre -5 e 5 tanto em x quanto em y.
Podemos salvar e atualizar o navegador. Agora a bola está se movimentando como queremos! Continuaremos no próximo vídeo.
Iniciando o projeto com Copilot - Usando o GitHub Copilot Labs
Guilherme: Vamos continuar?
Alex: Vamos lá!
Guilherme: Um detalhe que vamos modificar é, por exemplo, o tamanho do canvas. Quando jogamos o Pong, na verdade, a tela é um pouco mais esticada, certo?
Então, em vez de usar 400x400, vou alterar o createCanvas para 800x400.
function setup() {
createCanvas(800, 400);
}
Alex: Dessa forma, a tela terá o formato de um retângulo.
Guilherme: Vamos salvar, entrar no navegador, atualizar a tela, e nós temos um retângulo. Ótimo.
Outro detalhe que podemos abordar no código é, por exemplo, esse tamanho da bola do jogo.
Atualmente, o tamanho é 50, então aparecem números como 25 e 375, que já não fazem mais sentido. Dá para notar que a bola agora bate no meio da tela, parece que tem uma parede invisível.
Então, agora, esse 375 em if (x < 25 || x > 375) virou um bug. O que deveria ser? Deveria ser o tamanho, que é a largura (width) menos os 25, que é a metade da bola. E o mesmo deve ser feito na altura (height), height - 25.
//se tocar na borda horizontal, inverte a velocidade
if (x < 25 || x > width - 25) {
vx *= -1;
}
// idem para a borda vertical
if (y < 25 || y > height - 25) {
vy *= -1;
}
Vamos salvar essas mudanças e atualizar a página do nosso jogo no navegador. Nem precisa atualizar porque o Five Server percebe sozinho a atualização.
Está funcionando corretamente agora. Alguma outra sugestão do que nós deveríamos mudar?
Alex: Talvez agora possamos fazer uma refatoração para dar mais nomes aos códigos gerados.
Guilherme: A refatoração é muito diferente de completar código. Refatoração é mudar trechos de código. E é por isso que instalamos a extensão do GitHub Labs.
Refatoração
Guilherme: Na barra à esquerda, onde temos o explorer e as extensions, há uma extensão nova chamada GitHub Copilot Labs.
Atualmente, ele está no Labs. Talvez, no futuro, eles promovam isso para o GitHub Copilot oficial.
Alex: É interessante você mencionar isso porque, realmente, as ferramentas que integram tendem a mudar com o tempo. Então, hoje, temos essa visualização, mas pode ser que, no momento em que a pessoa estiver estudando, haja uma visualização um pouco diferente, com alguns comportamentos novos.
E isso não é um problema. É bom, pois mostra sinais de evolução.
Guilherme: Neste momento, temos quatro áreas no Labs:
Explain (explica um techo de código)
Language Translation (traduz de uma linguagem para outra)
Brushes
Test Generation (gera testes)
Usaremos o** Brushes**, ele faz o seguinte: vamos selecionar o código inteiro e podemos pedir que ele limpe o código selecionando a opção "Clean". Seja lá o que for esse "limpar", pode ser tirar variável não usada, simplificar o código, etc. Ele vai tentar decidir o que cabe melhor nessa limpeza.
Dentro do Brushes, temos também a opção "Make Robust", para deixar mais robusto, verificar valores nulos e outras coisas.
A opção "Chunk" serve para localizar pedaços do código que estão grandes e transformá-los em pedaços menores.
A opção "Document" serve para documentar o código e, por fim, temos a opção "Custom" para customizar.
Vamos executar o "Custom" para mostrar um exemplo direto de refatorar.
Após clicar em "Custom" vamos escrever no campo de texto que abriu: "extrair o raio da bola desenhada".
Atualmente, o raio é 50, mas queremos extrair isso numa variável. Então, vamos ver se em português vai funcionar. Tenho sempre minhas dúvidas se no português ele vai pegar ou não.
Após ser executado, ele extraiu uma variável r igual a 25:
// posicao da bola
var x = 200;
var y = 200;
var r =25;
Na hora de desenhar a elipse, usou r * 2, que é 25 vezes 2 igual a 50.
//funcao de desenho do p5js
function draw() {
//desenha um circulo
fill(255);
ellipse(x, y, r * 2, r* 2);
x += vx;
x += vy;
}
E, nas bordas, tudo r. Extraiu.
//se tocar na borda horizontal, inverte a velocidade
if (x < r || x > width - r) {
vx *= -1;
}
// idem para a borda vertical
if (y < r || y > height - r) {
vy *= -1;
}
Qual é o problema? O problema é que tivemos que selecionar o código inteiro. E existe um limite para a quantidade de código que conseguimos selecionar.
Esse código aqui, 30 linhas, ele consegue jogar. Agora, se pegássemos muitas linhas de código não seria possível refatorar. Inclusive, ele não refatora o outro arquivo. Está refatorando só esse em que selecionamos as linhas.
Alex: Isso é uma limitação interessante de saber.
Guilherme: Por enquanto, é bem limitado. Porque, lembra, ele tá pegando esse código, jogando para o GPT, junto com o nosso pedido. Ele tá falando " Pega esse pedido aqui, pega esse código, executa aí pra mim". Tem um limite pra isso. Então, está de acordo com esse limite.
Mas o legal é isso. O "Custom" manda fazer o que você quiser. Aqui nós pedimos o raio.
Outra coisa que queremos com o Custom é pedir: use const onde fizer sentido.
Então, queremos usar constantes, se tem coisas que não mudam são constantes.
Vamos executar o Custom pedindo: use const onde fizer sentido.
Funcionou, mas ele apagou todo o resto do código e deixou apenas:
//velocidades da bola aleatorias
const vx = Math.random() * 10 - 5;
const vy = Math.random() * 10 - 5;
Alex: E agora? Cadê o resto do código?
Guilherme: Vamos copiar esse código. Porque queremos esse código com as constantes. E vamos usar o atalho de refazer para voltar ao código que tínhamos. Vamos colar esse código na seção de velocidades.
Perceba que a posição da bola foi gerada com var e não com let. Eu tenho a impressão que é porque, na versão atual do Copilot, muito provavelmente, usa a versão 3.5 do GPT. A versão 4 acerta melhor esses pontos.
Inclusive esse raio. O raio é constante. Poderia ser const também.
//posicao da bola
let x = 200;
let y = 200;
const r = 25;
Alex: Talvez também, se o código começar com let, provavelmente, nas próximas gerações, ele já começa a enxergar esse padrão do let e aí vai gerando com let.
Guilherme: É aquela história, eu não ponho a mão no fogo das próximas gerações. Sei o que está acontecendo hoje e nós temos que trabalhar com a ferramenta que temos hoje. Mas pode ser que melhore, é verdade.
Outro detalhe que temos é a história dos cantos. Na verdade, quando jogamos o jogo, quando chega aqui no canto esquerdo, tem alguma coisa que deu errado. O que foi que deu errado?
A velocidade não é constante. A velocidade tem que mudar quando a bola chega no canto.
Alex: A ferramenta trouxe a possibilidade de que poderia ser const.
Guilherme: Eu caí na pegadinha e levei vocês juntos na pegadinha. A velocidade dos dois deve ser let. Quem era const era o R.
//posicao da bola
let x = 200;
let y = 200;
const r = 25;
//velocidades da bola aleatorias
let vx = Math.random() * 10 - 5;
let vy = Math.random() * 10 - 5;
Então, a ferramenta errou, ela me induziu a acreditar no erro e aí eu te induzi a acreditar no erro e todo mundo foi. Talvez vocês tenham percebido antes.
Mas, na verdade, só na borda vertical a bola deve quicar. Se tocar na borda horizontal deve resetar no meio da tela.
// se tocar na borda horizontal, reseta no meio da tela
if (x < r || x > width - r) {
x = width / 2;
y = height / 2;
}
// idem para a borda vertical
if (y < r || y > height - r){
vy *= -1;
}
Vamos salvar a verificar como está no navegador.
O único detalhe é que não está começando do meio da tela. Porque a posição da bola está começando em x = 200 e y = 200. Então, agora seria bom extrair esse código da posição da bola e da velocidade da bola em uma estrutura que faça sentido. Uma classe que faça sentido, uma classe Bola.
Vamos selecionar todo o código, clicar em "Custom" e escrever na caixa de texto: extrair uma classe chamada Bola para representar a posição e movimento e update e desenho da mesma.
O construtor inicializa em uma posição em um ponto aleatório, o que não faz sentido; deveria começar no meio. O raio é 25 e a velocidade também é aleatória.
Alex: A posição, às vezes, pode até receber via construtor também.
Guilherme: A velocidade está certa. No update, ou seja, a cada frame, ele acelera no x e no y, verifica a borda do x para jogar no meio de novo, verifica a borda do y e desenha.
Está tudo certo. Mas, de novo, ele apagou o restante do código.
Agora, o setup e o draw ficaram muito simples:
const bola = new Bola();
function setup() {
createCanvas(800, 400);
background(255);
}
function draw() {
background(255);
bola.update();
bola.desenha();
}
Vamos ver se funciona. Não funcionou, deu algo errado. No console do navegador foi exibido um erro com a seguinte mensagem sobre a linha 37: "Cannot access 'bola' before initialization", ou seja, não acessa a bola antes da inicialização.
É o seguinte: quando construímos quando construímos a Bola, estamos usando width e height, mas eles só existem depois que o canvas existe, ou seja, depois do setup. Então, não podemos construir a Bola antes.
Em vez de const bola = new Bola() deixaremos let bola.
let bola;
function setup() {
createCanvas(800, 400);
bola = new Bola ();
}
function draw() {
background(255);
bola.update();
bola.desenha();
}
Isso é um problema do P5.js. Lembrando que o Copilot é um ajudante, ele não está resolvendo esses problemas para nós. Nós sabemos sobre esses problemas.
Vamos salvar e verificar como está no navegador.
Precisamos deixar a bola com a cor preta. Usaremos color para determinar qual cor nós queremos.
O fundo é sem cor, ou seja, preto, que não emite luz. Perfeito.
Agora, temos que determinar que toda vez que a bola reseta para o meio, tem que ter uma velocidade diferente para que fique mais interessante. E ela está pegando sempre a mesma direção.
Podemos
selecionar o código, usar o "Custom" e pedir:
quando toca na borda em x reseta velocidade também atraves de funcao reset.
Vamos ver se ele vai entender que é para criar uma função reset e chamar função reset.
Criou uma função reset() que não fez sentido nenhum. Vou refazer.
Alex: E se criar uma nova instância de Bola?
Guilherme: Poderia fazer isso. Mas acho que vai ficar estranho a própria Bola criar uma instância de Bola.
Prefiro, no construtor, chamar um this.reset(). A função reset() faz:
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Iniciando o projeto com Copilot
Criando os elementos principais do jogo
Aprimorando o visual do jogo
Finalizando o jogo com sons e placar
Aprenda IA para Programação acessando integralmente esse e outros cursos, comece hoje!
Plus
De
R$ 1.800
por 12x R$ 109
Desconto Adicional: 20%
12X
R$87,20
à vistaR$1.046,40
Acesso a TODOS os cursos da Alura
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Luri, a inteligência artificial da Alura
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.
Alura Língua (incluindo curso Inglês para Devs)
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Luri, a inteligência artificial da Alura
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.
Alura Língua (incluindo curso Inglês para Devs)
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
