Créer une Story dans Storybook
Devin a accès à un navigateur intégré et peut prendre des captures d’écran de ses projets et applications. Pour ce tutoriel, nous travaillons avec un simple dashboard open source basé sur Next.js. Devin va nous aider à prendre certains des composants existants de notre application et à les ajouter à notre atelier Storybook. Si vous ne connaissez pas encore cet outil, Storybook est un « atelier » frontend open source qui vous aide à visualiser, catégoriser et tester vos composants d’interface utilisateur dans un espace centralisé.Invite initiale
Notre invite pour cette session est relativement simple, car nous nous attendons à ce que Devin effectue lui-même quelques recherches préliminaires en arrière-plan afin d’obtenir le contexte pertinent sur Storybook et sur notre application elle-même.
Installation et exécution de Storybook
Devin commence par examiner le composant Card de notre application pour en comprendre le contexte, puis installe et exécute le package storybook dans son espace de travail. L’une des grandes capacités de Devin est qu’il peut installer, configurer et exécuter lui-même des applications et réagir aux sorties dans son Shell intégré. Devin met en place un fichier de configuration Storybook, puis lance l’application. L’exécution de storybook dans ce cas génère quelques erreurs de build.
Débogage
Nous pouvons également voir, dans le navigateur de Devin, que l’erreur de build rencontrée lors de l’exécution de Storybook a également provoqué une erreur front-end lorsque Devin a essayé de charger le composant Card. Lorsque vous travaillez avec des sessions de Devin qui impliquent des tâches front-end, il peut être très utile de pouvoir revenir en arrière pour examiner ce que Devin a « vu » dans son navigateur à chaque étape du processus de développement :
Implémentation de la story Card
Devin passe maintenant à la correction des erreurs afin que notre composant de story Card s’affiche correctement dans Storybook. Après quelques itérations, Devin parvient à construire l’application correctement et nous envoie une capture d’écran du rendu correct de Storybook dans notre session. Lui demander d’envoyer des captures d’écran précises au fur et à mesure de son travail peut vous aider à vérifier ce qui se passe et ce qui est effectivement rendu dans l’interface utilisateur de votre application.