O GitHub Copilot é a mais nova ferramenta desenvolvida pelo GitHub para preencher automaticamente o código com a ajuda do OpenAI.
O Copilot gera sugestões inteligentes de código com contexto, como como docstrings, comentários de código, nomes de função ou até mesmo nomes de arquivo. Em seguida, ele usa todas essas informações para sugerir trechos de código que os desenvolvedores podem aceitar facilmente pressionando a tecla Tab em um teclado.
Ele entende Python, JavaScript, TypeScript, Ruby e Go, bem como dezenas de outros idiomas porque é “treinado em bilhões de linhas de código público”, de acordo com o site do Copilot. E embora ainda esteja em sua visualização técnica limitada, os interessados podem se inscrever para entrar em uma lista de espera para experimentá-lo.
Neste artigo, exploraremos as principais funcionalidades do Copilot, como construir um aplicativo simples usando apenas o Copilot, e seus prós e contras.
Principais recursos do Copilot
O principal recurso do Copilot é a função de preenchimento automático. Ao digitar uma descrição de função, por exemplo, o Copilot completa a função inteira antes que o usuário termine. Embora esse preenchimento automático seja semelhante a outras funcionalidades gerais de preenchimento automático, o Copilot vai um passo além.
Ao continuar a escrever código e adicionar mais comentários, o Copilot começa a entender todo o contexto do código por meio de seus recursos de IA. Com o contexto, ele autocompleta comentários no meio da frase.
Por exemplo, ao adicionar uma função, ele gera um comentário inteiro e uma função; neste caso, descobriu que a última função deveria ser uma função de multiplicação, conforme visto abaixo.
Outro recurso interessante do Copilot é a capacidade de ver 10 sugestões de página inteira, em vez de uma única-sugestão do liner e escolhendo o que melhor se adapta ao código.
Para fazer isso, pressione ^ + Return no teclado do Mac ou Ctrl + Enter no Windows para abrir uma lista de sugestões, conforme mostrado abaixo.
Você pode construir um aplicativo apenas com o GitHub Copilot?
Com os recursos do Copilot, eu queria me desafiar a construir um pequeno aplicativo usando apenas o Copilot. Para este desafio, eu queria criar um aplicativo de cotação aleatória simples que também exibisse o sentimento da cotação.
Para fazer isso, eu tinha algumas regras a seguir para ver quanto benefício eu poderia receber do Copilot.
Primeiro, não consegui pesquisar na internet se encontrasse um problema, incluindo o uso de Stack Overflow ou documentação. Isso me permitiu ver se era possível confiar exclusivamente nas sugestões do Copilot para criar um código funcional.
A segunda regra era que eu não poderia escrever nenhum código novo sozinho. Eu poderia, no entanto, escrever comentários, variáveis, nomes e nomes de funções para acionar as sugestões do Copiloto. Da mesma forma, eu também poderia fazer pequenas edições no código sugerido.
E, finalmente, poderia acionar a lista de sugestões do Copilot e aceitar uma, já que esse é um recurso integrado.
Configurando o projeto
Eu escolhi Next.js e React para construir este projeto , pois são as ferramentas com as quais estou mais familiarizado para me ajudar a avaliar melhor o desempenho do Copilot.
Já que o React torna bastante fácil para os desenvolvedores construir aplicativos, eu queria ver como o Copilot gerenciaria os componentes do React.
Para Next.js, ele fornece um bom ponto de partida onde não preciso gastar muito tempo configurando tudo e tem funções de back-end integradas, tornando útil chamar diferentes endpoints de API sem acionar erros de CORS.
Embora Next.js possa parecer muito poderoso para este pequeno projeto, não há necessidade de instalar outras dependências de antemão e seu sistema integrado e fácil de usar API divertido opções o tornam uma boa escolha para este desafio.
Desenvolvendo os endpoints de API
Começando com o desenvolvimento de endpoints de API, eu queria um gerador de cotações que retornasse uma cotação aleatória em uma solicitação GET e um endpoint de análise de sentimento. O endpoint de análise de sentimento precisava receber uma string como um parâmetro de consulta e retornar um sentimento.
Como eu não sabia qual seria o formato do valor de retorno, deixei o Copilot escrevê-lo e ver o que ele poderia retornar.
/api/get_quote endpoint de solicitação GET
Para criar dois endpoints usando Next.js, criei dois arquivos na pasta api: get_quote.js e get_sentiment.js. Next.js pode então criar esses terminais com base nos nomes dos arquivos. Tudo o que restou foi definir as funções do manipulador dentro desses arquivos, e deixei o Copilot fazer isso para mim.
Para o endpoint get_quote, escrevi um comentário e escolhi uma boa sugestão:
//obter citação aleatória de API aleatória
Clicando no comentário, o Copilot responde com uma lista de opções diferentes para escolher.
A sugestão que selecionei foi a seguinte:
const getQuote=async ()=> {const response=await fetch (‘https://quotes.rest/qod.json’) const quote=await response.json () return quote.contents.quotes [0].quote}
Essa sugestão funcionou. Quase todas as outras sugestões que verifiquei estavam quebradas ou exigiam uma chave de API que eu não tinha. Isso pode ser porque o Copilot foi treinado no código GitHub de código aberto e alguns endpoints podem já estar desatualizados, o que pode ser frustrante.
Além disso, este endpoint retorna a cotação do dia, o que significa que para cada chamada, Recebo a mesma cotação para o dia atual, que não era o que eu esperava. Em vez disso, para cada chamada de endpoint, eu queria receber uma cotação aleatória diferente.
Para a segunda parte deste endpoint, eu precisava criar um manipulador para o endpoint que chama a função já gerada pelo Copilot. O manipulador é a função que Next.js chama quando o cliente solicita o endpoint.
Para fazer isso, declarei a função com seu nome para ver se o Copilot sugeriria a implementação correta ou não.
E o Copilot me surpreendeu novamente. Tudo parecia correto.
Primeiro, ele chamou a função getQuote e retornou a citação recebida do serviço da web. Em seguida, salvou a cotação na constante e retornou JSON ao cliente com a cotação recuperada. A única coisa que tive que adicionar foi.status (200) para enviar o código de status 200 para o cliente.
/api/get_sentiment GET request endpoint
Para a função get_sentiment, eu escolhi a sugestão do Copilot e não precisou alterar nada.
Eu insiro o seguinte:
//determino se o texto é positivo ou negativo
Então, o Copilot sugeriu o seguinte código, que Eu usei:
função assíncrona getSentiment (text) {const response=await fetch (`http://text-processing.com/api/sentiment/`, {method:”POST”, body: `text=$ {text} `, headers: {“Content-Type”:”application/x-www-form-urlencoded”,},}) const json=await response.json () return json.label}
No entanto, para a parte do endpoint, eu tive que adicionar.status (200), semelhante ao endpoint get_quote.
Aqui está o que eu forneci ao Copilot:
exportar o manipulador de função assíncrona padrão (req
E então, o Copilot sugeriu o seguinte, que eu selecionei:
export default asyn manipulador de função c (req, res) {const sentiment=await getSentiment (req.query.text) res.json ({sentiment})}
O copiloto conseguiu nos fornecer uma solução de trabalho novamente, sugerindo o manipulador certo e calculando o que a função de manipulação get_sentiment precisava retornar. Esta sugestão é semelhante à que tínhamos anteriormente.
Vamos ver como o Copilot lidou com a geração do componente React a seguir.
Componentes do React
Para o front-end, eu precisava alguns componentes React especificados e um componente controlador React com um botão. Os dois componentes especificados necessários para exibir o texto: um para texto de citação e outro para texto de sentimento.
Vamos ver como o Copilot tratou da criação desses componentes React.
QuoteTextBox
Comecei com o componente QuoteTextBox que mostraria uma citação simples; Eu adicionei o seguinte comentário para ver o que o Copilot sugeriria:
//Componente React para mostrar uma citação dentro de uma div const
O Copilot sugeriu um componente de função simples, que eu não tive que alterar.
const QuoteTextBox=(props)=> {const {quote}=props return (
{quote}
)} exportar QuoteTextBox padrão
SentimentTextBox
Para construir a caixa de texto de sentimento, adicionei o seguinte comentário:
//Componente React para mostrar o texto de sentimento dentro de uma div const
Para este texto caixa, foi um pouco mais complicado encontrar as sugestões certas e tive que percorrer a maioria delas até encontrar uma que funcionasse com meu código:
const SentimentTextBox=(props)=> {//Get sentiment texto dos adereços const sentimentText=props.sentimentText//Retorna componentes t return (
)}//Padrão de exportação do componente de exportação SentimentTextBox
É importante entender claramente o que esperar do Copilot porque ele é apenas uma ferramenta , e os desenvolvedores não podem simplesmente confiar na primeira sugestão que ela dá.
Eu ainda precisava voltar a este componente para mapear o que a API retorna como texto legível. Por exemplo, se o serviço da web retornar neg, eu preciso mapeá-lo para Negativo.
Componente controlador com botão
Eu também precisava de um componente controlador para gerenciar toda a lógica. Os dois primeiros componentes React que criei apenas recebiam dados e os renderizavam na tela, mas o componente controlador precisava gerenciar as chamadas de API.
Comecei inserindo o seguinte:
//Componente React que usa QuiteTextBox e SentimentTextBox e APIs para mostrar citações e sentimentos com um botão para gerar novas citações. const
Então, o Copilot trouxe esta sugestão:
const QuoteGenerator=({quote, sentiment, onClick})=> {return (
)} exportar padrão QuoteGenerator
O componente controlador sugerido pelo Copilot parecia ser bem básico; faltava as chamadas de API e não usava adereços corretos para SentimentTextBox. No entanto, o Copilot forneceu a estrutura correta, ele só precisou de alguns ajustes para finalizá-la.
Então, eu só precisei adicionar funções ao componente do controlador. Em vez de passar cotação, sentimento e onClick, pedi ao Copilot para gerá-los. Eu também precisava de alguns ganchos para armazenar os dados de opinião e cotação recebidos ao chamar as APIs.
Para os ganchos, o Copilot descobriu imediatamente o que eu precisava. Para acionar a sugestão para o primeiro Hook, comecei a digitar um comentário e o Copiloto sugeriu o Hook correto.
No entanto, para o segundo Hook, eu nem precisei digitar um comentário. Aceitei a primeira sugestão do Hook, passei para a próxima linha e o Copilot sugeriu o segundo Hook imediatamente.
Embora os endpoints estivessem corretos, eu ainda precisava fazer algumas alterações para fazê-los funcionar. Tive que perguntar muito especificamente o que eu queria, caso contrário, o Copilot começou a sugerir diferentes serviços da Web.
Eu queria que ele chamasse apenas terminais que já foram criados. Além disso, preciso chamar especificamente o endpoint getSentiment quando recebo uma citação e mapear o sentimento em um texto legível.
E esta é minha versão final depois de algumas pequenas mudanças de minha parte:
const QuoteGenerator=()=> {//Gancho para armazenar texto no estado const [quoteText, setQuoteText]=React.useState (”) const [sentimentText, setSentimentText]=React.useState (”)//Função para obter cotações de API/api/get-quote const getQuote=()=> {fetch (‘/api/get-quote’).then (response=> response.json ()).then (json=> {setQuoteText ( json.quote) getSentiment (json.quote)})}//Função para obter o sentimento da API/api/get-sentiment \ const getSentiment=(text)=> {fetch (‘/api/get-sentiment? text=’+ texto).então (resposta e=> response.json ()).then (json=> {setSentimentText (json.sentiment)})}//Função a ser chamada quando o usuário clica no botão para gerar nova cotação const onClick=()=> {getQuote ( )} const mapSentimentToText={‘neg’:’Negativo’,’pos’:’Positivo’,’neutro’:’Neutro’} return (
)} exportar QuoteGenerator padrão
O aplicativo final
Depois de experimentar minha cotação simples-ao gerar aplicativo, descobri que o Copilot oferece ajuda suficiente para criar um aplicativo simples.
Eu não tinha grandes expectativas e inicialmente eu pensei que precisaria alterar muitos códigos para fazer o aplicativo funcionar.
No entanto, o Copilot me surpreendeu. Em alguns lugares, ele me deu sugestões sem sentido, mas em outros, as sugestões eram tão boas que não consigo acreditar que o Copilot as fez.
Prós e contras do copiloto
Para recapitular minha experiência com o Copilot, compilei os prós e os contras de trabalhar com ele para que você possa decidir se o Copilot é algo que você pode usar diariamente ou não.
Copilot pros
O principal A vantagem de usar o Copilot é que ele fornece preenchimento automático com esteróides. Como ferramenta de preenchimento automático, acredito que seja atualmente a melhor do mercado; não há nada nem perto de ser tão útil quanto o Copilot.
O Copilot também mostra aos desenvolvedores várias maneiras de resolver diferentes problemas que podem não ser tão óbvios. Quando você precisa de um snippet de código, a funcionalidade de 10 sugestões é excelente e geralmente pode ser usada no lugar do Stack Overflow para eficiência.
Ao todo, o Copilot é divertido de usar. Para todos os geeks de tecnologia, é algo novo para brincar e torna o trabalho diário um pouco mais interessante.
Copilot contras
Embora sua funcionalidade ofereça maior eficiência, os usuários devem se lembrar é uma ferramenta, não um substituto do desenvolvedor humano. Como o Copilot não é uma panacéia, os usuários não podem confiar apenas nele para todo o seu código. A maioria de suas sugestões requerem alterações para atender a necessidades específicas.
E, finalmente, percebi que o Copilot estava sugerindo o uso de classes React para pequenos componentes com pouca lógica em vez de componentes funcionais com ganchos. Por ter sido treinado em código disponível abertamente no GitHub, o Copilot pode fornecer algumas sugestões depreciadas para codificação.
Conclusão
O GitHub Copilot não é algo que pode apenas ouvir uma ideia de projeto e código tudo por você. Também não está assumindo empregos de desenvolvedor. Mas é algo que pode tornar a codificação mais fácil.
O GitHub Copilot é bom com pequenas tarefas; quando você começa a perguntar algo mais complexo, geralmente recebe um disparate. No entanto, é uma ferramenta muito boa para desenvolvedores iniciantes e experientes.
