Uso prático de ferramentas de codificação de IA para o desenvolvedor responsável – Smashing Magazine

PUBLICIDADE

Uso prático de ferramentas de codificação de IA para o desenvolvedor responsável - Smashing Magazine

Nos últimos dois anos, minha equipe na Work & Co e eu testamos e integramos gradualmente ferramentas de codificação de IA como Copilot, Cursor, Claude e ChatGPT para nos ajudar a fornecer experiências web que são usadas pelas massas. É certo que, depois de algum ceticismo inicial e alguns momentos de aha, várias ferramentas de IA chegaram ao meu uso diário. Com o tempo, a lista de aplicativos onde achamos que fazia sentido deixar a IA assumir o controle começou a crescer, então decidi compartilhar alguns casos de uso prático para ferramentas de IA para o que chamo de “desenvolvedor responsável”.

O que quero dizer com um desenvolvedor responsável?

Temos que ter certeza de que entregamos código de qualidade conforme esperado por nossas partes interessadas e clientes. Nossas contribuições (ou seja, solicitações pull) não devem se tornar um fardo para nossos colegas, que terão de revisar e testar nosso trabalho. Além disso, caso você trabalhe para uma empresa: As ferramentas que utilizamos precisam ser aprovadas pelo nosso empregador. Aspectos sensíveis como segurança e privacidade precisam ser tratados adequadamente: não cole segredos, dados de clientes (PII) ou código proprietário em ferramentas sem a aprovação da política. Trate-o como um código de um estranho na internet. Sempre teste e verifique.

Observação: Este artigo pressupõe alguma familiaridade básica com ferramentas de codificação de IA, como Copilot dentro de VSCode ou Cursor. Se tudo isso parece totalmente novo e desconhecido para você, os tutoriais em vídeo do Github Copilot podem ser um ponto de partida fantástico para você.

Visualização do VSCode com Copilot Chat aberta no painel direito. (Visualização grande)

Observação: Os exemplos a seguir se concentrarão principalmente no trabalho em aplicativos da web baseados em JavaScript, como React, Vue, Svelte ou Angular.

Obtendo uma compreensão de uma base de código desconhecida

Não é incomum trabalhar em bases de código estabelecidas, e ingressar em uma grande base de código legada pode ser intimidante. Basta abrir seu projeto e seu agente de IA (no meu caso, Copilot Chat no VSCode) e começar a fazer perguntas como faria a um colega. Em geral, gosto de falar com qualquer agente de IA da mesma forma que faria com qualquer outro ser humano.

Aqui está um exemplo de prompt mais refinado:

“Dê-me uma visão geral da arquitetura de alto nível: pontos de entrada, roteamento, autenticação, camada de dados, ferramentas de construção. Em seguida, liste cinco arquivos para ler em ordem. Trate as explicações como hipóteses e confirme saltando para os arquivos referenciados.”

Você pode continuar fazendo perguntas de acompanhamento, como “Como funciona o roteamento em detalhes?” ou “Fale-me sobre o processo e métodos de autenticação” e isso o levará a instruções úteis para iluminar a escuridão de uma base de código desconhecida.

Triagem de alterações significativas ao atualizar dependências

Atualizar pacotes npm, especialmente quando eles vêm com alterações significativas, pode ser um trabalho tedioso e demorado, além de fazer com que você depure uma boa quantidade de regressões. Recentemente, tive que atualizar a biblioteca de visualização de dados plotly.js para uma versão principal da versão 2 para 3 e, como resultado disso, a rotulagem dos eixos em alguns dos gráficos parou de funcionar.

Perguntei ao ChatGPT:

“Atualizei meu projeto Angular que usa Plotly. Atualizei o plotly.js — pacote dist da versão 2.35.2 para 3.1.0 — e agora os rótulos nos eixos x e y desapareceram. O que aconteceu?”

O agente voltou com uma solução prontamente (veja você mesmo abaixo).

Observação: Ainda verifiquei a explicação no guia oficial de migração antes de enviar a correção.

(Visualização grande)

Replicando refatoradores com segurança em arquivos

Bases de código crescentes certamente revelam oportunidades para consolidação de código. Por exemplo, você percebe duplicação de código em arquivos que podem ser extraídos em uma única função ou componente. Como resultado, você decide criar um componente compartilhado que pode ser incluído e executar essa refatoração em um arquivo. Agora, em vez de realizar manualmente essas alterações nos arquivos restantes, você pede ao seu agente para implementar a refatoração para você.

Os agentes permitem selecionar vários arquivos como contexto. Depois que a refatoração de um arquivo estiver concluída, posso adicionar os arquivos refatorados e não alterados ao contexto e solicitar ao agente que implemente as alterações em outros arquivos como este: “Replicar as alterações que fiz no arquivo A para o arquivo B também”.

Implementando recursos em tecnologias desconhecidas

Um dos meus momentos favoritos usando ferramentas de codificação de IA foi quando elas me ajudaram a criar uma animação gradiente animada bastante complexa em GLSL, uma linguagem com a qual não estou familiarizado. Em um projeto recente, nossos designers criaram um gradiente animado como estado de carregamento em um objeto 3D. Gostei muito do conceito e queria entregar algo único e emocionante aos nossos clientes. O problema: eu só tive dois dias para implementá-lo, e o GLSL tem uma curva de aprendizado bastante acentuada.

Novamente, uma ferramenta de IA (neste caso, ChatGPT) foi útil, e comecei simplesmente solicitando que ela criasse um arquivo HTML independente para mim que renderizasse uma tela e um gradiente de cores animado muito simples. Passo após passo, solicitei à IA que adicionasse mais sutileza até chegar a um resultado decente para poder começar a integrar o shader em minha base de código real.

O resultado final: nossos clientes ficaram super satisfeitos e entregamos um recurso complexo em pouco tempo graças à IA.

Escrevendo testes

Na minha experiência, raramente há tempo suficiente nos projetos para escrever e manter continuamente um conjunto adequado de testes unitários e de integração e, além disso, muitos desenvolvedores não gostam muito da tarefa de escrever testes. Solicitar ao seu ajudante de IA que configure e escreva testes para você é totalmente possível e pode ser feito em um curto espaço de tempo. Claro, você, como desenvolvedor, ainda deve garantir que seus testes realmente analisem as partes críticas do seu aplicativo e sigam princípios de teste sensatos, mas você pode “terceirizar” a escrita dos testes para nosso ajudante de IA.

Exemplo de solicitação:

“Escreva testes de unidade para esta função usando Jest. Cubra o caminho feliz, casos extremos e modos de falha. Explique por que cada teste existe.”

Você pode até repassar as práticas recomendadas de teste do guru de testes Kent C. Dodds como diretrizes para seu agente, como abaixo:

Fonte da imagem: x.com/kentcdodds. (Visualização grande)

Ferramentas Internas

Um pouco semelhante ao exemplo do shader mencionado anteriormente, recentemente fui encarregado de analisar a duplicação de código em uma base de código e comparar antes e depois de uma refatoração. Certamente não é uma tarefa trivial se você não quiser seguir o caminho demorado de comparar arquivos manualmente. Com a ajuda do Copilot, criei um script que analisava a duplicação de código para mim, organizava e ordenava a saída em uma tabela e exportava para Excel. Então dei um passo adiante. Quando nossa refatoração de código foi concluída, solicitei ao agente que tomasse minha planilha Excel existente como linha de base, adicionasse o estado atual de duplicação em colunas separadas e calculasse o delta.

Atualizando código escrito há muito tempo

Recentemente, um antigo cliente meu me contatou, pois com o tempo alguns recursos não funcionavam mais corretamente em seu site.

O problema: o site foi construído há quase dez anos, e o JavaScript e o SCSS usavam ferramentas de compilação bastante antigas, como requireJS, e a configuração exigia uma versão mais antiga do Node.js que nem funcionaria no meu MacBook 2025.

Atualizar todo o processo de construção manualmente levaria dias, então decidi avisar o agente de IA, “Você pode atualizar o processo de construção JS e SCSS para uma pilha 2025 enxuta como o Vite?” Com certeza sim, e depois de cerca de uma hora de refinamento com o agente, mudei minha versão SCSS e JS para Vite e pude me concentrar na correção de bugs real. Apenas certifique-se de validar adequadamente a saída e os arquivos compilados ao fazer essas alterações integrais em seu processo de construção.

Resumindo e rascunhando

Você gostaria de resumir todas as suas alterações recentes no código em uma frase para uma mensagem de commit ou tem uma longa lista de commits e gostaria de resumi-las em três marcadores? Não tem problema, deixe a IA cuidar disso, mas certifique-se de revisá-lo.

Um exemplo de prompt é tão simples quanto enviar uma mensagem para outro ser humano: “Por favor, resuma minhas mudanças recentes em marcadores concisos”.

Meu conselho aqui seria usar GPT para escrever com cautela e, assim como acontece com o código, verifique a saída antes de enviar ou enviar.

Recomendações e melhores práticas

Solicitando

Um dos benefícios não tão óbvios do uso de IA é que quanto mais específicos e personalizados forem seus prompts, melhor será o resultado. O processo de alertar um agente de IA nos obriga a formular nossos requisitos tão especificamente quanto possível antes de escrevermos e codificarmos. É por isso que, como regra geral, recomendo fortemente que você seja o mais específico possível em suas sugestões.

Ryan Florence, coautor de Remix, sugere uma maneira simples, mas poderosa, de melhorar esse processo, finalizando sua solicitação inicial com a frase:

“Antes de começarmos, você tem alguma pergunta para mim?”

Neste ponto, a IA geralmente retorna com perguntas úteis onde você pode esclarecer sua intenção específica, orientando o agente a lhe fornecer uma resposta abordagem mais personalizada para sua tarefa.

Fonte da imagem: x.com/ryanflorence. (Visualização grande)

Use o controle de versão e trabalhe em pedaços digeríveis

Usar o controle de versão como o git não só é útil ao colaborar em equipe em uma única base de código, mas também para fornecer a você, como colaborador individual, pontos estáveis ​​para os quais reverter em caso de emergência. Devido à sua natureza não determinística, a IA às vezes pode se tornar desonesta e fazer alterações que simplesmente não são úteis para o que você está tentando alcançar e, eventualmente, quebrar as coisas de forma irreparável.

Dividindo seu trabalho em múltiplas confirmações irá ajudá-lo a criar pontos estáveis ​​​​aos quais você pode reverter caso as coisas dêem errado. E seus colegas de equipe também agradecerão, pois terão mais facilidade para revisar seu código quando ele estiver dividido em partes semanticamente bem estruturadas.

Revise completamente

Esta é mais uma prática recomendada geral, mas, na minha opinião, torna-se ainda mais importante ao usar ferramentas de IA para trabalho de desenvolvimento: Seja o primeiro revisor crítico do seu código. Reserve algum tempo para revisar suas alterações linha por linha, assim como você revisaria o código de outra pessoa, e somente envie seu trabalho depois que ele passar na sua própria auto-revisão.

“Duas coisas são verdadeiras para mim neste momento: os agentes de IA são incríveis e proporcionam um enorme aumento de produtividade. Eles também são enormes máquinas de desperdício se você desligar o cérebro e deixá-lo ir completamente.”

– Armin Ronacher em sua postagem no blog Agent Psychosis: Are We Going Insane?

Conclusão e pensamentos críticos

Na minha opinião, as ferramentas de codificação de IA podem melhorar nossa produtividade diária como desenvolvedores e liberar capacidade mental para mais planejamento e pensamento de alto nível. Eles nos forçam a articular o resultado desejado com detalhes meticulosos.

Qualquer IA pode, às vezes, ter alucinações, o que basicamente significa que ela apresenta um tom confiante. Portanto, certifique-se de verificar e testar, especialmente quando estiver em dúvida. IA não é uma solução mágica e acredito que a excelência e a capacidade de resolver problemas como desenvolvedor nunca sairão de moda.

Para desenvolvedores que estão apenas começando em suas carreiras, essas ferramentas podem ser altamente tentadoras para fazer a maior parte do trabalho por eles. O que pode se perder aqui é o trabalho muitas vezes cansativo e doloroso através de bugs e problemas que são difíceis de depurar e resolver, também conhecidos como “o grind”. Até mesmo Lee Robinson, do Cursor AI, questiona isso em uma de suas postagens:

Fonte da imagem: x.com/leerob. (Visualização grande)

As ferramentas de codificação de IA estão evoluindo em ritmo acelerado e estou animado com o que virá a seguir. Espero que você tenha achado este artigo e suas dicas úteis e esteja animado para experimentar alguns deles você mesmo.

(sim)

Fonte: Tecmundo, Olhar Digital, MeioBit

Mais recentes

PUBLICIDADE

WP Twitter Auto Publish Powered By : XYZScripts.com