Scopri Livewire 3, Volt e Folio creando un lettore di podcast

Ieri il team Laravel ha rilasciato Laravel Folio, un potente router basato su pagine progettato per semplificare il routing nelle applicazioni Laravel. Oggi hanno rilasciato Volt, un'API funzionale elegantemente realizzata per Livewire, che consente alla logica PHP di un componente e ai modelli Blade di coesistere nello stesso file con un boilerplate ridotto.

Sebbene possano essere utilizzati separatamente, penso che usarli insieme sia un modo nuovo e incredibilmente produttivo per creare app Laravel.

In questo articolo ti insegnerò come creare una semplice app che elenchi gli episodi del podcast Laravel News e consenta agli utenti di riprodurli, con un lettore che può continuare a riprodurre senza problemi durante il caricamento della pagina.

Per iniziare, dobbiamo creare una nuova app Laravel e installare Livewire, Volt, Folio e Sushi (per creare alcuni dati fittizi).

Livewire v3, Volt e Folio sono ancora tutti in versione beta. Dovrebbero essere abbastanza stabili, ma usali a tuo rischio e pericolo.

Dopo aver richiesto i pacchetti, dobbiamo eseguire php crafts volt:install e php crafts folio:install. Ciò supporterà alcune cartelle e fornitori di servizi di cui Volt e Folio hanno bisogno.

Per i dati fittizi, creerò un modello Sushi. Sushi è un pacchetto scritto da Caleb Pozio che consente di creare modelli Eloquent che interrogano i propri dati da un array scritto direttamente nel file del modello. Funziona benissimo quando crei app di esempio o disponi di dati che non devono essere modificati molto spesso.

Crea un modello, quindi rimuovi il tratto HasFactory e sostituiscilo con il tratto Sushi. Ho aggiunto i dettagli degli ultimi 4 episodi del podcast Laravel News come dati per questo esempio.

Non entrerò nei dettagli su come funziona tutto questo poiché non è questo lo scopo dell'articolo e probabilmente utilizzerai un vero modello Eloquent se dovessi costruire il tuo lettore di podcast.

Avremo bisogno di un file di layout per caricare Tailwind, aggiungere un logo e aggiungere alcuni stili di base. Dato che Livewire e Alpine ora inseriscono automaticamente i loro script e stili, non abbiamo nemmeno bisogno di caricarli nel layout! Creeremo il layout come componente Blade anonimo su resources/views/components/layout.blade.php.

Per prima cosa abbiamo bisogno di una pagina in cui visualizzare tutti gli episodi del podcast.

Usando Folio, possiamo facilmente creare una nuova pagina nella directory resources/views/pages e Laravel creerà automaticamente un percorso per quella pagina. Vogliamo che il nostro percorso sia /episodes, quindi possiamo eseguire php crafts make:folio Episodes/index. Ciò creerà una vista vuota in resources/views/pages/episodes/index.blade.php.

In questa pagina inseriremo il componente layout, quindi ripeteremo in loop tutti gli episodi del podcast. Volt fornisce funzioni con spazi dei nomi per la maggior parte delle funzionalità di Livewire. Qui apriremo i normali tag di apertura e chiusura . All'interno di questi, utilizzeremo la funzione calcolata per creare una variabile $episodes che esegue una query per ottenere tutti i modelli Episode ($episodes = computed(fn () => Episode::get());). Possiamo accedere alla proprietà calcolata nel modello utilizzando $this->episodes.

Ho anche creato una variabile $formatDuration che è una funzione per formattare la proprietà length_in_seconds di ogni episodio in un formato leggibile. Possiamo chiamare quella funzione nel modello usando $this->formatDuration($episode->duration_in_seconds).

Dobbiamo anche racchiudere la funzionalità dinamica sulla pagina nella direttiva @volt per registrarla come "componente Livewire anonimo" all'interno della pagina Folio.

Da lì, dobbiamo aggiungere un po' di interattività. Voglio aggiungere un riproduttore di episodi in modo da poter ascoltare gli episodi dall'elenco degli episodi. Questo può essere un normale componente Blade che renderizziamo nel file di layout.

Possiamo creare quel componente aggiungendo un file resources/views/components/episode-player.blade.php. All'interno del componente aggiungeremo un elemento