​

Creare una story in Storybook

Devin ha accesso a un browser integrato e può catturare schermate dei propri progetti e applicazioni. Per questo tutorial, lavoreremo con una semplice dashboard open source basata su Next.js. Devin ci aiuterà a prendere alcuni dei componenti esistenti nella nostra applicazione e ad aggiungerli al nostro Storybook. Se non ne hai mai sentito parlare, Storybook è un «laboratorio» frontend open source che ti aiuta a visualizzare, categorizzare e testare i tuoi componenti dell’interfaccia utente in un unico punto centralizzato.

​

Prompt iniziale

Il nostro prompt per questa sessione è piuttosto semplice, perché ci aspettiamo che Devin esegua in autonomia parte della ricerca preliminare per ottenere il contesto rilevante su Storybook e sulla nostra applicazione.

​

Installazione ed esecuzione di Storybook

Per iniziare, Devin esamina il componente Card della nostra applicazione per contestualizzare, quindi installa ed esegue il pacchetto Storybook nel proprio workspace. Una delle potenti capacità di Devin è che può installare, configurare ed eseguire applicazioni autonomamente e rispondere ai relativi output tramite la sua Shell integrata. Devin crea un file di configurazione di Storybook e poi esegue l’applicazione. In questo caso, l’esecuzione di Storybook genera alcuni errori di build.

​

Debugging

Possiamo anche vedere, nel browser di Devin, che l’errore di build che abbiamo riscontrato eseguendo Storybook si è tradotto in un errore nel frontend quando Devin ha provato a caricare il componente Card. Quando lavori con sessioni di Devin che coinvolgono attività di frontend, può essere molto utile poter ripercorrere ciò che Devin ha “visto” nel suo browser in ogni fase del processo di sviluppo:

​

Implementazione della Card Story

Devin passa ora a correggere gli errori affinché il nostro componente Card story venga renderizzato correttamente in Storybook. Dopo alcune brevi iterazioni, Devin riesce a far compilare correttamente l’app e ci invia una schermata dell’output corretto di Storybook nella nostra sessione. Chiedere a Devin di inviare schermate specifiche mentre lavora può aiutarti a verificare cosa sta succedendo e cosa viene renderizzato nell’interfaccia utente della tua applicazione. Quando confrontiamo l’implementazione di Storybook realizzata da Devin, e in particolare la Card story, con quella dell’applicazione principale, notiamo alcuni miglioramenti rispetto all’implementazione open source. In particolare, Devin ha aggiunto ulteriori esempi del componente Card con una documentazione più dettagliata e dimostrazioni nella relativa story. Ha anche aggiunto a Storybook il supporto di configurazione per i temi chiaro/scuro. Ti invitiamo a provare alcune attività orientate al frontend con Devin, sia che si tratti di aiutare il tuo team ad avere un inventario migliore dei componenti in uno strumento come Storybook, sia di testare i flussi UI/UX nel suo Browser integrato. Richiedi l’accesso al nostro piano Teams oggi stesso per provarlo in prima persona.