Curso
Acho que todos nós já ouvimos falar do Devin, o "engenheiro de software júnior de IA" que supostamente clona seu repositório, adiciona novos recursos, executa os testes e abre uma solicitação pull antes de você terminar seu café da manhã.
Como todas as coisas de IA hoje em dia, é muito difícil saber se é bom sem experimentar você mesmo, então decidi fazer exatamente isso. Eu conduzi o Devin por todos os estágios do ciclo de vida completo de desenvolvimento de software e escrevi uma série de quatro tutoriais na esperança de ajudar outros desenvolvedores a tirar o máximo proveito dele.
Você pode acessar todos os tutoriais da série Devin aqui:
- Configuração e primeira solicitação pull (parte 1)
- Enviando uma fatia vertical com Devin (Parte 2)
- Integrações, testes e CI/CD (Parte 3)
- Segurança, implementação e manutenção (Parte 4)
Agora, se o seu perfil do GitHub for um "cemitério" de repositórios esquecidos, você está em boa companhia. O meu está cheio de experimentos incompletos. Nos próximos quatro tutoriais, colocaremos Devin para trabalhar no meu repositório de exercícios fp-ts abandonado, transformando os exercícios clone-and-run do ano passado em uma plataforma de aprendizado moderna e baseada em navegador.
Permita-me explicar rapidamente meu plano para os quatro tutoriais e, em seguida, passaremos à parte prática do restante da série.
O que abordaremos nesta série de tutoriais
Vamos ressuscitar um projeto paralelo do meu próprio cemitério do GitHub, porque o Devin tem um desempenho melhor quando tem código real, testes reais e um pouco de história para raciocinar, e não um repositório vazio.
O projeto é fp-ts-exercisesuma coleção de pequenos desafios destinados a ensinar conceitos de programação funcional (como Option, Either, etc.) em TypeScript. No momento, é um repositório de clonagem e execução: os alunos o baixam, editam os arquivos localmente e executam os testes em seu próprio terminal.
Meu objetivo é transformar esses exercícios em um playground interativo baseado em navegador, em que as pessoas possam ler uma explicação, ajustar o código em um editor na página e ver os testes serem aprovados (ou reprovados) instantaneamente. Os alunos também terão a oportunidade de fazer login para salvar seu progresso.
Observação: Eu atualizei o repositório com o Devin quando escrevi esses tutoriais. O link acima mostra o estado do código em abril de 2023, antes de eu abandonar o projeto. O código atualizado pode ser encontrado aqui.
Aqui está o plano para nossas quatro partes:
- Parte 1 - Configuração e primeira solicitação pull
- Inscreva-se no Devin, conecte o GitHub.
- Permita que Devin limpe o repositório: adicione dependências, crie novas regras e scripts de lint e abra seu primeiro PR.
- Parte 2 - Recursos de remessa
- Use o Devin para planejar a nova interface do usuário e a API do navegador.
- Crie páginas, configure um banco de dados, segredos e peça a Devin que abra PRs de recursos.
- Parte 3 - Integrações, testes e CI/CD
- Introduzir testes de Vitest/Playwright e deixar que Devin os mantenha verdes.
- Gerar um pipeline do GitHub Actions, conectar tíquetes ao Jira e conectar o Devin ao Slack.
- Explore o recurso Wiki.
- Parte 4 - Segurança, implantação e manutenção
- Adicione autenticação, implemente nosso aplicativo e conecte o Sentry para monitorar erros.
No final, o antigo repositório da CLI deverá ser um aplicativo da Web sofisticado!
Antes de começarmos a parte prática, vamos fazer uma apresentação geral do Devin. Sinta-se à vontade para pular para a seção de configuração se você já sabe o que é o Devin e como ele funciona.
O que é Devin?
O Devin é um agente de codificação totalmente autônomo, hospedado em nuvem, desenvolvido pela Cognition. Se você o inserir em um repositório, ele abrirá um shell, um editor e um navegador em sandbox e, em seguida, planejará e executará tarefas de ponta a ponta sem tocar no computador local.
Ele foi lançado em março de 2024, com a publicação no blog da Cognition publicação no blog afirmando que Devin fechou 13,86% dos problemas reais do GitHub no benchmark SWE-bench, superando em muito o SOTA anterior de 1,96%. Na prática, isso significa que, em um subconjunto cuidadosamente escolhido (570 problemas), ele corrigiu 79 bugs de projetos populares como Django e scikit-learn sem ajuda humana.
Isso é impressionante, mas é um código de benchmark (que consiste em bugs bem definidos e rigorosos com conjuntos de testes), portanto, a quilometragem no mundo real varia. De qualquer forma, alguns dizem que ele funciona tão bem quanto um desenvolvedor júnior.
Casos de uso do Devin
Devin é um ótimo parceiro se você quiser implementar:
- Atualizações incrementais do repositório: Ele pode executar os testes, aumentar as dependências e corrigir interrupções de forma iterativa, o que é ótimo para tarefas do tipo "trazer este projeto do Node 14 para o Node 20".
- Tickets de recursos bem dimensionados: Com um problema do GitHub ou um tíquete do Jira com critérios de aceitação claros, o ciclo de planejamento-edição-teste do Devin é muito bom.
- Tarefas não codificantes: Regenerar documentos, conectar modelos de CI ou formatar arquivos em massa podem ser entediantes para os seres humanos, mas são perfeitos para um agente.
No entanto, Devin não é muito adequado para isso:
- Arquitetura de campo verde: É difícil se você simplesmente disser "crie uma plataforma SaaS do zero". Ele precisa de andaimes e se sai melhor quando recebe mais contexto.
- Decisões ambíguas sobre produtos: Peça a ele para escolher entre Stripe e Stripe. Reme para pagamentos e você poderá escolher aleatoriamente.
- Monorepos maciços: Os limites de contexto significam que ele precisa paginar os arquivos que entram e saem, e o desempenho cai em espaços de trabalho de 100 mil linhas.
Como o Devin funciona?
Todos os agentes de codificação modernos, inclusive Devin, executam um loop que espelha umciclo de controle robótico:
Estágio |
O que Devin "vê" |
Tecnologia-chave |
Perceber |
Lê arquivos de código, registros de teste, saída do terminal, DOM do navegador |
Indexador de código, analisadores de registro |
Conhecer / Planejar |
Divide o prompt do usuário em uma lista de tarefas, motivos sobre o pedido e ferramentas |
Planejador baseado em LLM com memória aumentada por recuperação |
Lei |
Executa comandos do shell, edita arquivos, clica em UIs da Web |
Caixa de areia segura (Docker/VM) expondo ferramentas de shell/editor/navegador |
Refletir / Aprender |
Executa novamente os testes, inspeciona as diferenças, atualiza o plano (ou pergunta a você) |
Solicitação de autocrítica + memória de armazenamento de vetores |
Persistir |
Salva a linha do tempo e os artefatos para reprodução ou transferência |
Armazenamento de objetos em nuvem + UI de linha do tempo |
O Devin é construído como uma pilha em camadas de módulos que cooperam entre si:
- Tudo começa com a interface de bate-papo ou com o bot do Slack/ticket do Jira, onde você declara a meta na forma de um prompt.
- O prompt é entregue a um LLM planejador que expande a meta em um plano passo a passo e faz uma autocrítica de cada etapa antes da execução.
- Em seguida, um executor leve seleciona a ferramenta certa para cada etapa (shell, editor de código ou navegador sem cabeça), tudo executado em um espaço de trabalho com sandbox fechado.
- Essa sandbox é efetivamente um laptop em nuvem e isola as credenciais, fornece ao Devin um prompt Bash, um editor no estilo VS-Code e uma instância do Chrome na qual você pode clicar.
- Abaixo do espaço de trabalho, há uma camada de memória que armazena instantâneos vetorizados da base de código, além de uma linha do tempo de reprodução completa de cada comando, comparação de arquivos e guia do navegador em que Devin toca.
Por que essa arquitetura é tão boa? Primeiro, o ciclo de feedback estreito: assim que os testes falham ou os lints reclamam, o Devin pode iterar de forma autônoma até que a compilação fique verde.
Em segundo lugar, o design da sandbox torna trivial o paralelismo de pequenas tarefas, porque várias sandboxes podem ser executadas lado a lado sem interferir umas nas outras.
Em terceiro lugar, a memória persistente permite que o Devin lide com migrações de longa duração: o agente pode manter uma lista de subtarefas em execução e trabalhar nelas durante horas ou dias, o que significa que ele termina as refatorações em massa várias vezes mais rápido do que um ser humano faria manualmente.
Primeiros passos com Devin
Antes de mais nada, vamos configurar uma conta.
Inscreva-se e escolha um plano
Vamos até devin.ai e clicar em "Get Started".
As primeiras etapas do assistente são muito fáceis de seguir. Pediram-me para responder a algumas perguntas sobre mim, a empresa e o nome da minha equipe. Se você é um desenvolvedor solo como eu, isso não é problema, pois o assistente atende a isso.
Então, é hora de escolher um plano. Há duas opções:
- Núcleo (pago conforme o uso): Para a maioria dos desenvolvedores individuais, o plano Core é o mais barato - você paga US$ 20 adiantados, o que compra 9 Unidades de computação de agente (ACUs).
- Equipes: O plano Teams oferece a você 250 ACUs/mês. Esta página de documentação oficial fornece informações detalhadas sobre as ACUs e o modelo de faturamento do Devin.
O plano Core é uma maneira barata de testar o Devin, então decidi pagar US$ 20 e ver até onde isso me levaria.
Inseri meus dados de pagamento e tive a opção de definir um limite de recarga automática para que Devin possa recarregar ACUs automaticamente em vez de parar no meio da tarefa. Eu não habilitei esse recurso e provavelmente não recomendaria que você o fizesse naquele momento. No entanto, a opção está disponível posteriormente nas configurações, portanto, você pode tentar uma tarefa primeiro e ver como é o seu uso. Você também pode definir limites de ACU por sessão, o que é útil para evitar ultrapassar o orçamento.
Matemática rápida: $20 / 9 ACUs ≈ $2,25 por ACU. A assinatura do Teams (US$ 500/mês) reduz esse valor para US$ 2,00 e pré-carrega 250 ACUs, mas você só economizará dinheiro se esperar que o Devin funcione por mais de 30 horas por mês.
Conectando-se ao Github (e, opcionalmente, ao Jira e ao Slack)
Agora, a próxima coisa que você precisa fazer é conectar uma conta do GitHub e dar ao Devin acesso aos repositórios.
Optei por conceder ao Devin acesso apenas ao nosso repositório de exercícios fp-ts, pois é o único que ele precisa conhecer, e você provavelmente deve fazer o mesmo para evitar qualquer modificação não intencional no código.
Uma vez feito isso, tive a opção de conectar um sistema de gerenciamento de projetos. O Devin parece oferecer suporte à integração com o Jira, o GitHub Issues e o Linear.
Clicar na opção Jira abre este modal, e as linhas em amarelo especificam que é melhor para o Devin usar uma conta de serviço específica e ter acesso a apenas um espaço de trabalho, mesmo que isso signifique que você tenha que criar uma conta Jira dedicada para isso.
Observe que é possível adicionar a integração com o Jira posteriormente nas configurações, portanto, você não precisa fazer isso nesta etapa.
Você também tem a opção de integração com o Slack, mas eu a ignorei por enquanto.
Sistemas multiagentes com LangGraph
Primeira tarefa: Atualização de um repositório desatualizado
Agora que você já está preparado, vamos passar para a parte divertida. É hora de você ver como o Devin é bom!
Prompting
Depois que a configuração inicial estiver concluída, esta é a página em que você chegará:
Não é de surpreender que tudo comece com um prompt. Passei o mouse sobre todos os pequenos ícones para entender os recursos disponíveis e, em seguida, escrevi meu prompt.
Sugestão: Há alguns anos, criei um repositório chamado fp-ts-exercises, com o objetivo de ajudar os desenvolvedores a aprender programação funcional em TypeScript usando a biblioteca fp-ts. Ele contém uma série de exercícios locais que abrangem conceitos como Option, Either, etc. Os alunos clonariam o repositório, resolveriam os exercícios e executariam testes para verificar suas soluções.
Gostaria de modernizar e relançar este projeto com os seguintes objetivos:
Atualizar e refatorar a base de código existente
- Atualize todas as dependências e garanta a compatibilidade com a versão mais recente do fp-ts
- Melhorar a estrutura, a legibilidade e a experiência do desenvolvedor
- Substitua qualquer ferramenta ou padrão desatualizado (por exemplo, migre do Mocha para o Vitest ou similar, se for o caso)
Você não estava muito bem preparado, mas esse era o objetivo. A saída de um agente de IA só pode ser tão boa quanto a entrada que ele recebe, e um alvo vago pode ser interpretado de várias maneiras. No caso de Devin, o custo de uma falha de comunicação é significativo. Se os limites das execuções e o resultado esperado não estiverem claramente definidos e você os definir em uma tarefa semicomplexa, desperdiçará muitas ACUs.
O que eu queria testar aqui era o pequeno ícone de "caneta mágica" ao lado do botão "Enviar". Esse é um recurso "Analisar prompt" que está convenientemente disponível para ajudar você a refinar seu prompt antes de enviá-lo e, assim, aproveitar ao máximo os recursos do Devin.
Quando cliquei nele, ele reformulou partes do meu prompt, mas também me informou que havia oportunidades de melhoria.
Esse foi um ótimo feedback e, por isso, modifiquei um pouco meu prompt para fornecer requisitos adicionais. Eu não tinha nenhum teste unitário ou de linting configurado naquele momento, então especifiquei que ele deveria executar os testes dos alunos na solução do primeiro problema para garantir que o aplicativo se comportasse conforme o esperado.
Sugestão: Quero modernizar e relançar meu repositório fp-ts-exercises, que ajuda os desenvolvedores a aprender programação funcional em TypeScript usando a biblioteca fp-ts. O repositório contém exercícios locais que abrangem conceitos como Option e Either. Os alunos clonam o repositório, resolvem os exercícios e executam testes para verificar suas soluções. O objetivo é atualizar o projeto e melhorar a experiência do desenvolvedor. Faça o seguinte:
- Atualize todas as dependências para as versões mais recentes e garanta a compatibilidade com a versão mais recente do fp-ts.
- Refatorar a base de código existente para melhorar a estrutura, a legibilidade e a experiência geral do desenvolvedor.
- Substitua todas as ferramentas ou padrões desatualizados. Por exemplo, migrar do Mocha para o Vitest ou sugerir outras atualizações de ferramentas apropriadas. Forneça uma justificativa para as alterações de ferramentas que você propõe.
- Certifique-se de que todos os exercícios e testes existentes continuem funcionando corretamente após as atualizações e a refatoração.
Você pode executar npm run solution -- opção 01 para garantir que os testes sejam aprovados e que tudo funcione conforme o esperado.
Especifique quais etapas você seguirá para realizar as atualizações e a refatoração. Antes de fazer mudanças significativas, proponha sua abordagem e obtenha feedback.
Você pode enviar suas alterações para revisão em uma Pull Request.
Com certeza, ao analisar meu prompt dessa vez, você recebeu um brinde "Prompt looks good!".
A interface
Enviei minha solicitação, e Devin imediatamente começou a pensar.
A interface do usuário é um pouco confusa à primeira vista, mas é bastante fácil de navegar quando você sabe o que cada coisa faz. Vamos detalhar isso.
O painel com as sessões ativas à esquerda pode ser recolhido, se você preferir mergulhar em uma sessão de cada vez.
Há uma interface semelhante a um bate-papo, na qual você pode acompanhar o raciocínio de Devin e interagir com ele.
O lado direito da tela é ocupado por um painel com várias guias: Progress, Shell, Browser e Editor. Essas guias mostram o raciocínio e as etapas exatas que o Devin executa nos diferentes ambientes.
Ao clicar em cada um deles, você pode ver as etapas realizadas no shell (por exemplo, clonar o repositório), no navegador (navegar até a página do repositório do github) e no Editor, que é um editor semelhante ao VSCode com todos os arquivos do repositório (que é onde ele modificará nosso código posteriormente). A guia de progresso destaca as etapas executadas à medida que você as executa.
No canto superior direito da tela, há outro conjunto de guias: Timelapse, IDE e Navegador. Essas são as exibições que você pode navegar e usar. A guia Timelapse atualmente selecionada mostra o progresso e as ações de Devin, conforme explicamos acima. O recurso de lapso de tempo interativo (você pode ver o "Live" e a barra de progresso na parte inferior) permite que você reproduza uma sessão. A guia IDE abre um IDE on-line semelhante ao VSCode, no qual você pode modificar seu código e até mesmo confirmá-lo no GitHub.
Planejamento e raciocínio de Devin
Devin pensou por alguns minutos, analisou todo o repositório e explicou suas ações em cada etapa. Observe a mensagem destacada "Devin clonou o repositório, considere a possibilidade de configurar um espaço de trabalho Devin". Voltaremos a esse assunto mais tarde.
Em seguida, propôs um plano, disse-me que sua confiança era alta e pediu-me que confirmasse:
Fiquei muito satisfeito com esse plano, então cliquei em Confirmar. Devin começou a fazer seu trabalho imediatamente.
Você consegue ver o pequeno menu suspenso "Agente" na parte inferior da interface de bate-papo? A outra opção no menu é "Perguntar". Essa funcionalidade não interrompe o trabalho do Devin, mas permite que você interaja com ele. Decidi testá-lo solicitando que você adicionasse scripts de verificação de compilação de linting e TypeScript.
O trabalho já havia começado, mas ele me disse que se certificaria de adicionar esses scripts (e o fez!).
A solicitação pull
Não cronometrei exatamente o tempo, mas depois de alguns minutos, ele tinha uma solicitação pull pronta, e a descrição era completa e precisa.
Foi uma surpresa agradável o fato de a empresa ter usado sua iniciativa para fazer mais do que garantir que os testes da primeira solução fossem aprovados. Ele testou a terceira solução, mas também o primeiro exercício, e verificou que os testes falharam (como esperado, já que nenhum aluno concluiu o exercício).
Analisei o PR e suspeitei que meus scripts de compilação de linting e TypeScript falhariam. Por exemplo, faltava um "type":"module"
em meu package.json
.
Não sei por que Devin não executou esses scripts depois de escrevê-los para ter certeza de que funcionavam. Porque eu não pedi explicitamente que você fizesse isso? Ou porque eu adicionei esses requisitos depois que ele começou a trabalhar?
Decidi usar o editor de código on-line para corrigir o descuido de Devin, o que levou cerca de 5 minutos. Executei todos os comandos no terminal e todos pareceram se comportar como esperado após a minha correção.
Eu poderia ter delegado o conserto a Devin, mas foi mais rápido fazer isso sozinho. Em cerca de cinco minutos, executei os scripts, confirmei as falhas de lint e compilação e identifiquei a causa. Mais dois minutos depois, o patch estava no lugar e todas as verificações foram aprovadas. A elaboração de um prompt detalhado, a espera pela execução do Devin e a revisão do resultado teriam levado mais tempo.
Encontrar o ponto ideal entre o esforço humano e o da IA é uma arte sutil: quando um ajuste é obviamente uma fruta fácil de ser colhida, prefiro fazê-lo do que digitar "por favor, conserte isso" e esperar. No entanto, todos têm preferências pessoais, e seu próprio limite varia de acordo com sua experiência, a tarefa e - vamos ser honestos - seu humor no dia.
Encerrar a sessão
Naquele momento, eu havia terminado a modernização do repositório e tudo funcionava como esperado. Mas e agora? Como encerro uma sessão e ainda sou cobrado por esse tempo ocioso?
Nesse ponto, a interface ficou um pouco confusa. No lado direito, no menu da sessão, eu tinha duas opções: colocar o Devin para dormir ou encerrar a sessão.
Eu consultei a a documentaçãoe aqui está o que encontrei: O Devin não usa ACUs enquanto está dormindo e dormirá automaticamente após ~0,1 ACUs de inatividade.
Também perguntei ao bot de IA dos médicos qual era a diferença entre sono e terminação:
A resposta foi bem clara. Nosso trabalho aqui estava concluído, então encerrei a sessão.
Configurando nosso repositório no espaço de trabalho de Devin
Você se lembra da mensagem em destaque que recebemos no bate-papo enquanto Devin planejava seu trabalho? Ele nos pediu para configurar o repositório no computador de Devin, para que não precisássemos cloná-lo sempre que quiséssemos trabalhar nele. Mas por que queremos fazer isso?Cada nova sessão começa com uma máquina virtual nova, portanto, sem configuração, Devin precisa fazer isso:
- Descobrir nossa base de código do zero
- Instale todas as dependências e ferramentas
- Conheça a estrutura e as convenções do nosso projeto
- Desperdiçar tempo valioso com a configuração do ambiente em vez do trabalho real
Portanto, a configuração do nosso repositório é uma abordagem mais eficiente em termos de custo e tempo. Também é mais consistente, pois todas as sessões começam com a mesma configuração, e Devin sabe exatamente como executar, testar e aplicar lint em nosso código.
Esse recurso pode ser encontrado no painel de navegação da sua equipe e as etapas são, mais uma vez, bastante simples de seguir.
Começamos especificando os comandos para obter a versão mais recente do repositório:
Você pode inserir comandos personalizados e, ao clicar no botão "Verify Command", eles serão executados automaticamente no terminal à sua frente. Você pode ver se eles são bem-sucedidos ou não em segundos.
Pulei a etapa de configuração dos segredos, pois não temos nenhum por enquanto. A instalação e a manutenção das dependências funcionam da mesma forma e, quando o comando é bem-sucedido, a etapa é marcada como concluída.
O restante das etapas funciona de forma semelhante e, quando todas elas forem concluídas (ou ignoradas, se não forem aplicáveis), sua configuração será salva.
Uso e revisão da sessão
Até agora, concluímos uma tarefa simples com Devin, criamos uma solicitação pull, fizemos o merge e configuramos nosso repositório para sessões futuras. Vamos dar uma olhada em alguns dos dados da nossa sessão. Ao clicar no pequeno ícone na parte superior da sessão, você abre um modal com informações sobre a sessão:
Nosso tamanho de sessão é XS, o que, de acordo com o guia de tamanhos da Devins, foi muito bom.
Se você clicar no botão "Generate Insights" (Gerar insights) e aguardar alguns segundos, poderá ver algumas informações gerais sobre sua sessão, as etapas específicas que Devin realizou e onde ele teve dificuldades.
Eu também estava interessado em ver quantas ACUs havíamos usado. Uma coisa estranha que notei foi que a página de planos mostrava que eu tinha 8,73 ACUs restantes, apesar de já ter usado 1,7 ACUs do total de 9 (veja o destaque azul dentro da seção Core ).
A página Usage & Limits, no entanto, mostrou corretamente que usamos 1,7 ACUs e ainda restavam 7,3 ACUs.
Voltei a verificar 18 horas depois, e a página Planos mostrava 7,3 ACUs restantes, portanto, há um pequeno atraso na atualização dessas informações. Certifique-se de que você use a página Usage & Limits (Uso e limites) como sua fonte de verdade para evitar surpresas!
Valeu a pena?
Vamos analisar os números.
Portanto, 1,7 ACU a US$ 2,25/ACU = US$ 3,83 para essa sessão.
Passei cerca de 20 minutos no site solicitando e revisando. Fazer tudo manualmente teria se estendido bem além disso, e eu teria procrastinado cada etapa, pois esse é o tipo de tarefa que considero particularmente entediante. Pelo preço de um cappuccino, Devin tirou o trabalho do meu prato. Eu faria essa troca a qualquer momento.
O que vem a seguir?
Certo, então temos:
- Criamos nossa conta
- Você se conectou ao nosso repositório do GitHub
- Configure o repositório para sessões futuras no computador de Devin
- Executamos nossa primeira tarefa de atualização de dependência
- Analisou as métricas e o uso de nossa sessão
Você começou muito bem! No próximo tutorial, vamos nos aprofundar e ampliar os recursos do Devin, solicitando que ele planeje e implemente recursos completos, com integrações de API e banco de dados.
Se você estiver pronto para continuar, clique no segundo item da lista abaixo para ir para o segundo tutorial:
- Configuração e primeira solicitação de pull
- Enviando uma fatia vertical com Devin (Parte 2)
- Integrações, testes e CI/CD (Parte 3)
- Segurança, implementação e manutenção (Parte 4)