​

Erstellen einer Storybook-Story

Devin hat Zugriff auf einen integrierten Browser und kann Screenshots seiner Projekte und Anwendungen erstellen. Für dieses Tutorial arbeiten wir mit einem einfachen, auf Next.js basierenden Open-Source-Dashboard. Devin hilft uns dabei, einige der bestehenden Komponenten unserer Anwendung zu übernehmen und sie in unseren Storybook-Workshop aufzunehmen. Falls Sie Storybook noch nicht kennen: Storybook ist ein Open-Source-Frontend-„Workshop“, der Ihnen dabei hilft, Ihre Frontend-UI-Komponenten an einem zentralen Ort zu visualisieren, zu kategorisieren und zu testen.

​

Ursprünglicher Prompt

Unser Prompt für diese Session ist recht einfach, da wir erwarten, dass Devin selbst etwas Hintergrundrecherche zum relevanten Kontext rund um Storybook und unsere Anwendung betreibt.

​

Storybook installieren und ausführen

Devin beginnt damit, zur Einordnung die Card-Komponente unserer Anwendung zu untersuchen und installiert und startet anschließend das Storybook-Paket in seinem Workspace. Eine von Devins leistungsstarken Fähigkeiten ist, dass es Anwendungen selbst installieren, konfigurieren und ausführen kann und dabei auf die Ausgaben in seiner integrierten Shell reagiert. Devin erstellt eine Storybook-Konfigurationsdatei und startet dann die Anwendung. Das Ausführen von Storybook führt in diesem Fall zu einigen Build-Fehlern.

​

Debugging

Wir können in Devins Browser auch sehen, dass der Build-Fehler, auf den wir beim Ausführen von Storybook gestoßen sind, ebenfalls zu einem Frontend-Fehler geführt hat, als Devin versucht hat, die Card-Komponente zu laden. Wenn du mit Devin-Sitzungen arbeitest, die Frontend-Aufgaben betreffen, kann es sehr hilfreich sein, im Laufe des Entwicklungsprozesses Schritt für Schritt zurückzugehen, um nachzuvollziehen, was Devin in seinem Browser in jeder Phase „gesehen“ hat:

​

Implementierung der Card-Story

Devin fährt nun damit fort, die Fehler zu beheben, sodass unsere Card-Story-Komponente in Storybook korrekt gerendert wird. Nach einer kurzen Iterationsphase schafft es Devin, die App erfolgreich zu bauen, und schickt uns einen Screenshot der korrekten Storybook-Ausgabe in unserer Sitzung. Devin gezielt um bestimmte Screenshots zu bitten, während es arbeitet, kann dir helfen nachzuvollziehen und zu überprüfen, was in der Benutzeroberfläche deiner Anwendung passiert und gerendert wird. Wenn wir Devins Implementierung von Storybook – und speziell der Card-Story – mit dem vergleichen, was die Kernanwendung hat, gibt es einige Verbesserungen, die Devin gegenüber der Open-Source-Implementierung vorgenommen hat. Besonders hervorzuheben ist, dass Devin zusätzliche Beispiele der Card-Komponente mit ausführlicherer Dokumentation und Demos in ihrer Story hinzugefügt hat. Außerdem wurde Storybook um einige Konfigurationsoptionen für helle und dunkle Themes erweitert. Wir empfehlen dir, einige eigene, auf das Frontend ausgerichtete Aufgaben mit Devin auszuprobieren – sei es, um deinem Team zu einer besseren Übersicht über Komponenten in einem Tool wie Storybook zu verhelfen oder um UI/UX-Flows in seinem integrierten Browser zu testen. Fordere noch heute Zugriff auf unseren Teams-Plan an, um es selbst auszuprobieren.