Nouvelles

May 24, 2023

Apprenez Livewire 3, Volt et Folio en créant un lecteur de podcast

Hier, l'équipe Laravel a publié Laravel Folio - un puissant routeur basé sur des pages conçu pour simplifier le routage dans les applications Laravel. Aujourd'hui, ils ont publié Volt, une API fonctionnelle élégamment conçue

Hier, l'équipe Laravel a publié Laravel Folio - un puissant routeur basé sur des pages conçu pour simplifier le routage dans les applications Laravel. Aujourd'hui, ils ont publié Volt, une API fonctionnelle élégamment conçue pour Livewire, permettant à la logique PHP d'un composant et aux modèles Blade de coexister dans le même fichier avec un passe-partout réduit.

Bien qu'ils puissent être utilisés séparément, je pense que les utiliser ensemble est une nouvelle manière incroyablement productive de créer des applications Laravel.

Dans cet article, je vais vous apprendre à créer une application simple qui répertorie les épisodes du podcast Laravel News et permet aux utilisateurs de les lire, avec un lecteur qui peut continuer à jouer de manière transparente lors du chargement des pages.

Pour commencer, nous devons créer une nouvelle application Laravel et installer Livewire, Volt, Folio et Sushi (pour créer des données factices).

Livewire v3, Volt et Folio sont tous encore en version bêta. Ils devraient être assez stables, mais utilisez-les à vos risques et périls.

Après avoir demandé les packages, nous devons exécuter php artisan volt:install et php artisan folio:install. Cela permettra de gérer certains dossiers et fournisseurs de services dont Volt et Folio ont besoin.

Pour les données factices, je vais créer un modèle Sushi. Sushi est un package écrit par Caleb Pozio qui vous permet de créer des modèles Eloquent qui interrogent leurs données à partir d'un tableau écrit directement dans le fichier modèle. Cela fonctionne très bien lorsque vous créez des exemples d'applications ou que vous disposez de données qui n'ont pas besoin d'être modifiées très souvent.

Créez un modèle, puis supprimez le trait HasFactory et remplacez-le par le trait Sushi. J'ai ajouté les détails des 4 derniers épisodes du podcast Laravel News comme données pour cet exemple.

Je n'entrerai pas dans les détails de la façon dont tout cela fonctionne puisque ce n'est pas le but de l'article, et vous utiliserez probablement un véritable modèle Eloquent si vous deviez créer votre propre lecteur de podcast.

Nous aurons besoin d'un fichier de mise en page pour charger Tailwind, ajouter un logo et ajouter un style de base. Puisque Livewire et Alpine injectent désormais automatiquement leurs scripts et styles, nous n'avons même pas besoin de les charger dans la mise en page ! Nous allons créer la mise en page en tant que composant Blade anonyme dans resources/views/components/layout.blade.php.

Tout d’abord, nous avons besoin d’une page pour afficher tous les épisodes du podcast.

En utilisant Folio, nous pouvons facilement créer une nouvelle page dans le répertoire resources/views/pages, et Laravel créera automatiquement un itinéraire pour cette page. Nous voulons que notre itinéraire soit /episodes, afin que nous puissions exécuter php artisan make:folio Episodes/index. Cela créera une vue vide sur resources/views/pages/episodes/index.blade.php.

Sur cette page, nous allons insérer le composant de mise en page, puis parcourir en boucle tous les épisodes du podcast. Volt fournit des fonctions d'espace de noms pour la plupart des fonctionnalités Livewire. Ici, nous allons ouvrir les balises d'ouverture et de fermeture normales. À l'intérieur de ceux-ci, nous utiliserons la fonction calculée pour créer une variable $episodes qui exécute une requête pour obtenir tous les modèles d'épisode ($episodes = calculated(fn () => Episode::get());). Nous pouvons accéder à la propriété calculée dans le modèle en utilisant $this->episodes.

J'ai également créé une variable $formatDuration qui est une fonction permettant de formater la propriété duration_in_seconds de chaque épisode dans un format lisible. Nous pouvons appeler cette fonction dans le modèle en utilisant $this->formatDuration($episode->duration_in_seconds).

Nous devons également envelopper la fonctionnalité dynamique de la page dans la directive @volt pour l'enregistrer en tant que « composant Livewire anonyme » dans la page Folio.

À partir de là, il faut ajouter un peu d'interactivité. Je souhaite ajouter un lecteur d'épisodes afin que nous puissions écouter les épisodes de la liste des épisodes. Il peut s'agir d'un composant Blade standard que nous restituons dans le fichier de mise en page.

Nous pouvons créer ce composant en ajoutant un fichier resources/views/components/episode-player.blade.php. À l'intérieur du composant, nous ajouterons un élément