​

Criando uma Story no Storybook

O Devin tem acesso a um navegador integrado e pode fazer capturas de tela de seus projetos e aplicações. Neste tutorial, estamos trabalhando com um dashboard open source simples baseado em Next.js. O Devin vai nos ajudar a pegar alguns dos componentes já existentes na nossa aplicação e adicioná-los ao nosso ambiente do Storybook. Caso você ainda não conheça, o Storybook é um “workshop” de frontend open source que ajuda você a visualizar, categorizar e testar seus componentes de UI em um único lugar centralizado.

​

Prompt inicial

Nosso prompt para esta sessão é bem simples, pois esperamos que o Devin faça por conta própria parte da pesquisa de contexto necessária sobre o Storybook e sobre o nosso próprio aplicativo.

​

Instalando e executando o Storybook

Devin começa examinando o componente Card da nossa aplicação para obter contexto e, em seguida, instala e executa o pacote Storybook em seu workspace. Uma das capacidades mais poderosas do Devin é que ele pode instalar, configurar e executar aplicações por conta própria e reagir às saídas em seu Shell integrado. Devin cria um arquivo de configuração do Storybook e então executa a aplicação. Executar o Storybook, nesse caso, gera alguns erros de compilação.

​

Depuração

Também podemos ver, no navegador do Devin, que o erro de build que encontramos ao executar o Storybook também resultou em um erro de frontend quando o Devin tentou carregar o componente Card. Quando você estiver lidando com sessões do Devin que envolvem tarefas de frontend, pode ser muito útil conseguir voltar no histórico do que o Devin “viu” em seu Browser em cada etapa do processo de desenvolvimento:

​

Implementando a story do Card

Devin agora passa a corrigir os erros para que a nossa story do componente Card seja renderizada corretamente no Storybook. Depois de algumas poucas iterações, Devin consegue gerar o build do app corretamente e nos envia uma captura de tela da saída correta do Storybook na nossa sessão. Pedir para Devin enviar capturas de tela específicas enquanto trabalha pode ajudar você a verificar o que está acontecendo e o que está sendo renderizado na interface da sua aplicação. Quando comparamos a implementação do Storybook feita por Devin — e, em específico, a story do Card — com o que a aplicação principal possui, vemos algumas melhorias que Devin fez em relação à implementação open source. Em especial, Devin adicionou exemplos adicionais do componente Card com documentação mais detalhada e demonstrações na sua story. Ele também adicionou suporte de configuração no Storybook para temas claro/escuro. Recomendamos que você experimente algumas tarefas voltadas para frontend com Devin, seja para ajudar sua equipe a ter um inventário melhor de componentes em uma ferramenta como o Storybook, seja para testar fluxos de UI/UX em seu navegador integrado. Solicite acesso ao nosso plano Teams hoje para experimentar por conta própria.