Passer au contenu principal

​
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.
Devin

​
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.
Devin

​
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 :
Devin

​
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.
Devin
Lorsque nous comparons l’implémentation de Storybook réalisée par Devin, et plus précisément la story Card, à ce que l’application principale propose, on constate quelques améliorations apportées par rapport à l’implémentation open source. Notamment, Devin a ajouté des exemples supplémentaires du composant Card avec une documentation plus détaillée et des démonstrations plus complètes dans sa story. Il a également ajouté une prise en charge de configuration dans Storybook pour les thèmes clair/sombre. Nous vous encourageons à essayer quelques tâches orientées frontend avec Devin, qu’il s’agisse d’aider votre équipe à mieux inventorier ses composants dans un outil comme Storybook ou même de tester des parcours UI/UX dans son navigateur intégré. Demandez l’accès à notre offre Teams dès aujourd’hui pour l’essayer vous-même.