Nachricht

May 24, 2023

Lernen Sie Livewire 3, Volt und Folio, indem Sie einen Podcast-Player erstellen

Gestern veröffentlichte das Laravel-Team Laravel Folio – einen leistungsstarken seitenbasierten Router, der das Routing in Laravel-Anwendungen vereinfachen soll. Heute haben sie Volt veröffentlicht – eine elegant gestaltete funktionale API

Gestern veröffentlichte das Laravel-Team Laravel Folio – einen leistungsstarken seitenbasierten Router, der das Routing in Laravel-Anwendungen vereinfachen soll. Heute haben sie Volt veröffentlicht – eine elegant gestaltete funktionale API für Livewire, die es ermöglicht, dass die PHP-Logik und Blade-Vorlagen einer Komponente in derselben Datei mit reduziertem Boilerplate koexistieren.

Obwohl sie separat verwendet werden können, denke ich, dass ihre gemeinsame Verwendung eine neue, unglaublich produktive Möglichkeit ist, Laravel-Apps zu erstellen.

In diesem Artikel zeige ich Ihnen, wie Sie eine einfache App erstellen, die Episoden des Laravel News-Podcasts auflistet und es Benutzern ermöglicht, sie abzuspielen, mit einem Player, der die Wiedergabe über mehrere Seiten hinweg nahtlos fortsetzen kann.

Um zu beginnen, müssen wir eine neue Laravel-App erstellen und Livewire, Volt, Folio und Sushi installieren (um einige Dummy-Daten zu erstellen).

Livewire v3, Volt und Folio befinden sich alle noch in der Betaphase. Sie sollten ziemlich stabil sein, aber die Verwendung erfolgt auf eigene Gefahr.

Nachdem wir die Pakete benötigt haben, müssen wir php artisan volt:install und php artisan folio:install ausführen. Dadurch werden einige Ordner und Dienstanbieter entlastet, die Volt und Folio benötigen.

Für Dummy-Daten werde ich ein Sushi-Modell erstellen. Sushi ist ein von Caleb Pozio geschriebenes Paket, mit dem Sie Eloquent-Modelle erstellen können, die ihre Daten aus einem direkt in die Modelldatei geschriebenen Array abfragen. Dies funktioniert hervorragend, wenn Sie Beispiel-Apps erstellen oder Daten haben, die nicht sehr oft geändert werden müssen.

Erstellen Sie ein Modell, entfernen Sie dann das HasFactory-Merkmal und ersetzen Sie es durch das Sushi-Merkmal. Als Daten für dieses Beispiel habe ich die Details der vier neuesten Episoden des Laravel News Podcasts hinzugefügt.

Ich werde nicht im Detail darauf eingehen, wie das alles funktioniert, da dies nicht der Punkt des Artikels ist und Sie wahrscheinlich ein echtes Eloquent-Modell verwenden werden, wenn Sie Ihren eigenen Podcast-Player bauen würden.

Wir benötigen eine Layoutdatei, um Tailwind zu laden, ein Logo hinzuzufügen und einige grundlegende Stile hinzuzufügen. Da Livewire und Alpine ihre Skripte und Stile jetzt automatisch einfügen, müssen wir diese nicht einmal in das Layout laden! Wir erstellen das Layout als anonyme Blade-Komponente unter resources/views/components/layout.blade.php.

Zunächst benötigen wir eine Seite, auf der alle Episoden des Podcasts angezeigt werden.

Mit Folio können wir ganz einfach eine neue Seite im Verzeichnis resources/views/pages erstellen und Laravel erstellt automatisch eine Route für diese Seite. Wir möchten, dass unsere Route /episodes lautet, damit wir PHP Artisan Make:Folio Episoden/Index ausführen können. Dadurch wird eine leere Ansicht unter resources/views/pages/episodes/index.blade.php erstellt.

Auf dieser Seite fügen wir die Layoutkomponente ein und durchlaufen dann alle Podcast-Episoden. Volt bietet Namespace-Funktionen für die meisten Livewire-Funktionen. Hier öffnen wir reguläre -Tags zum Öffnen und Schließen. Darin verwenden wir die berechnete Funktion, um eine $episodes-Variable zu erstellen, die eine Abfrage ausführt, um alle Episodenmodelle abzurufen ($episodes = berechnet(fn () => Episode::get());). Wir können über $this->episodes auf die berechnete Eigenschaft in der Vorlage zugreifen.

Ich habe außerdem eine Variable „$formatDuration“ erstellt, die eine Funktion ist, um die Eigenschaft „duration_in_seconds“ jeder Episode in ein lesbares Format zu formatieren. Wir können diese Funktion in der Vorlage mit $this->formatDuration($episode->duration_in_seconds) aufrufen.

Wir müssen auch die dynamische Funktionalität auf der Seite in die @volt-Direktive einschließen, um sie als „anonyme Livewire-Komponente“ innerhalb der Folio-Seite zu registrieren.

Von dort aus müssen wir etwas Interaktivität hinzufügen. Ich möchte einen Episodenplayer hinzufügen, damit wir die Episoden aus der Episodenliste anhören können. Dies kann eine reguläre Blade-Komponente sein, die wir in der Layoutdatei rendern.

Wir können diese Komponente erstellen, indem wir eine Datei resources/views/components/episode-player.blade.php hinzufügen. Innerhalb der Komponente fügen wir ein

Wenn wir die Seite neu laden, sehen wir keine Änderungen. Das liegt daran, dass wir keine Möglichkeit zum Abspielen von Episoden hinzugefügt haben. Wir verwenden Ereignisse, um von unseren Livewire-Komponenten mit dem Player zu kommunizieren. Zuerst fügen wir im Player x-on:play-episode.window="play($event.detail)" hinzu, um auf das Ereignis „play-episode“ im Fenster zu warten, und rufen dann die Play-Funktion auf.

Als Nächstes fügen wir auf der Seite „Episoden/Index“ einen Klick-Listener auf den Wiedergabeschaltflächen für jede Episode hinzu. Die Schaltflächen lösen das Ereignis „Episode abspielen“ aus, das vom Episodenplayer empfangen und dort verarbeitet wird.

Als Nächstes möchte ich eine Episodendetailseite hinzufügen, um die Shownotizen und andere Details jeder Episode anzuzeigen.

Folio hat einige ziemlich coole Konventionen für die Routenmodellbindung in Ihren Dateinamen. Um eine entsprechende Route für /episodes/{episode:id} zu erstellen, erstellen Sie eine Seite unter resources/views/pages/episodes/[Episode].blade.php. Um einen anderen Routenparameter als den Primärschlüssel zu verwenden, können Sie die Syntax [Model:some_other_key].blade.php in Ihrem Dateinamen verwenden. Ich möchte die Episodennummer in der URL verwenden, also erstellen wir eine Datei unter resources/views/pages/episodes/[Episode:number].blade.php.

Folio fragt die Episodenmodelle automatisch nach einer Episode mit der Nummer ab, die wir in der URL übergeben, und stellt diese als $episode-Variable in unserem -Code zur Verfügung. Wir können dies dann mithilfe der Zustandsfunktion von Volt in eine Livewire-Eigenschaft umwandeln.

Wir werden auf dieser Seite auch eine Wiedergabeschaltfläche einfügen, damit Benutzer eine Episode abspielen und gleichzeitig deren Details anzeigen können.

Jetzt müssen wir von der Indexseite aus auf die Detailseite verlinken. Zurück auf der Episoden-/Indexseite packen wir das

jeder Episode in ein Anker-Tag.

Wir sind fast da. Die App sieht ziemlich gut aus und funktioniert gut, aber es gibt ein Problem. Wenn ein Benutzer eine Episode anhört und zu einer anderen Seite navigiert, verliert der Episodenplayer seinen aktiven Episodenstatus und verschwindet.

Zum Glück verfügt Livewire jetzt über die Direktive „wire:navigate“ und „@persist“, die bei diesen Problemen hilft!

In unserer Layoutdatei packen wir das Logo und den Episodenplayer in @persist-Blöcke ein. Livewire erkennt dies und überspringt das erneute Rendern dieser Blöcke, wenn wir die Seite wechseln.

Schließlich müssen wir allen Links in der App das Attribut „wire:navigate“ hinzufügen. Zum Beispiel:

Wenn Sie das Attribut „wire:navigate“ verwenden, ruft Livewire im Hintergrund den Inhalt der neuen Seite mithilfe von AJAX ab und tauscht den Inhalt dann auf magische Weise in Ihrem Browser aus, ohne dass die gesamte Seite neu geladen werden muss. Dadurch wird das Laden von Seiten unglaublich schnell und Funktionen wie Persistenz funktionieren! Es ermöglicht Funktionen, die Sie bisher nur durch den Aufbau eines SPA erreichen konnten.

Es hat wirklich Spaß gemacht, diese Demo-App zu erstellen und gleichzeitig Volt und Folio zu lernen. Ich habe die Demo-App hier hochgeladen und @bosunski hat eine PHPSandbox erstellt, falls Sie den vollständigen Quellcode sehen oder ihn selbst ausprobieren möchten!

Was denken Sie? Ist Livewire v3 + Volt + Folio derzeit der einfachste Stack zum Erstellen von Laravel-Apps? Ich finde es wirklich cool und kommt Leuten, die es gewohnt sind, Apps in JavaScript-Frameworks wie Next.js und Nuxt.js zu erstellen, vielleicht vertrauter vor. Es ist auch schön, den gesamten Code für eine Seite zusammengefasst zu haben – Styling (über Tailwind), JS (über Alpine) und Backend-Code – alles in einer Datei. Schicken Sie mir Ihre Gedanken auf Twitter!

Abgelegt in:

Jason Beggs

TALL-Stack-Berater (Tailwind CSS, Alpine.js, Laravel und Livewire) und Inhaber von toasted.dev.

10 Dinge über die Karrieren der Road Warriors, die keinen Sinn ergeben

Flint sagt, dass die erforderlichen Arbeiten an der Servicelinie vor Ablauf der Frist am 1. August abgeschlossen sind