​

Creación de una story en Storybook

Devin tiene acceso a un navegador integrado y puede tomar capturas de pantalla de tus proyectos y aplicaciones. Para este tutorial, trabajaremos con un sencillo dashboard de código abierto basado en Next.js. Devin nos ayudará a usar algunos de los componentes existentes de nuestra aplicación y añadirlos a nuestro taller de Storybook. Si no has oído hablar de él antes, Storybook es un taller de frontend de código abierto que te ayuda a visualizar, categorizar y probar tus componentes de UI en un único lugar centralizado.

​

Prompt inicial

Nuestro prompt para esta sesión es bastante sencillo, ya que esperamos que Devin realice por su cuenta parte de la investigación preliminar necesaria para obtener el contexto relevante sobre Storybook y nuestra propia aplicación.

​

Instalación y ejecución de Storybook

Devin comienza examinando el componente Card de nuestra aplicación para tener contexto y luego instala y ejecuta el paquete de Storybook en su espacio de trabajo. Una de las capacidades más potentes de Devin es que puede instalar, configurar y ejecutar aplicaciones por sí mismo y responder a la salida en su Shell integrado. Devin crea un archivo de configuración de Storybook y luego ejecuta la aplicación. Ejecutar Storybook en este caso nos genera algunos errores de compilación.

​

Depuración

También podemos ver en el navegador de Devin que el error de compilación que encontramos al ejecutar Storybook también provocó un error en el frontend cuando Devin intentó cargar el componente Card. Cuando trabajes con sesiones de Devin que involucren tareas de frontend, puede ser muy útil poder retroceder y revisar qué «vio» Devin en su navegador en cada etapa del proceso de desarrollo:

​

Implementación de la story de Card

Ahora Devin pasa a corregir los errores para que nuestro componente de story de Card se renderice correctamente en Storybook. Tras unas pocas iteraciones, Devin consigue que la aplicación se compile correctamente y nos envía una captura de pantalla de la salida correcta de Storybook en nuestra sesión. Pedirle a Devin que envíe capturas de pantalla específicas mientras trabaja puede ayudarte a verificar qué está ocurriendo y qué se está renderizando en la interfaz de usuario de tu aplicación. Cuando comparamos la implementación de Storybook de Devin, y específicamente la story de Card, con lo que tiene la aplicación principal, vemos que Devin introdujo algunas mejoras con respecto a la implementación open source. En particular, Devin añadió ejemplos adicionales del componente Card con documentación y demostraciones más detalladas en su story. También añadió compatibilidad de configuración en Storybook para temas claro/oscuro. Te animamos a probar algunas tareas propias orientadas al frontend con Devin, ya sea para ayudar a tu equipo a tener un mejor inventario de componentes en una herramienta como Storybook o incluso para probar flujos de UI/UX en su navegador integrado. Solicita acceso a nuestro plan Teams hoy para probarlo tú mismo.