Español
English
Français
Deutsch
Italiano
Português
日本語
한국어
Русский
Hogar
May 24, 2023
Aprenda Livewire 3, Volt y Folio creando un reproductor de podcasts
Ayer, el equipo de Laravel lanzó Laravel Folio, un potente enrutador basado en páginas diseñado para simplificar el enrutamiento en aplicaciones Laravel. Hoy lanzaron Volt, una API funcional elegantemente diseñada.
Ayer, el equipo de Laravel lanzó Laravel Folio, un potente enrutador basado en páginas diseñado para simplificar el enrutamiento en aplicaciones Laravel. Hoy, lanzaron Volt, una API funcional elegantemente diseñada para Livewire, que permite que la lógica PHP de un componente y las plantillas Blade coexistan en el mismo archivo con un texto estándar reducido.
Aunque se pueden usar por separado, creo que usarlos juntos es una forma nueva e increíblemente productiva de crear aplicaciones Laravel.
En este artículo, le enseñaré cómo crear una aplicación sencilla que enumere los episodios del podcast de Laravel News y permita a los usuarios reproducirlos, con un reproductor que puede continuar reproduciendo sin problemas a través de cargas de páginas.
Para comenzar, necesitamos crear una nueva aplicación Laravel e instalar Livewire, Volt, Folio y Sushi (para crear algunos datos ficticios).
Livewire v3, Volt y Folio todavía están en versión beta. Deberían ser bastante estables, pero úsalos bajo tu propia responsabilidad.
Después de solicitar los paquetes, necesitamos ejecutar php artisan volt:install y php artisan folio:install. Esto creará algunas carpetas y proveedores de servicios que Volt y Folio necesitan.
Para obtener datos ficticios, crearé un modelo de Sushi. Sushi es un paquete escrito por Caleb Pozio que le permite crear modelos Eloquent que consultan sus datos desde una matriz escrita directamente en el archivo del modelo. Esto funciona muy bien cuando estás creando aplicaciones de ejemplo o tienes datos que no necesitan cambiar con mucha frecuencia.
Cree un modelo, luego elimine el rasgo HasFactory y reemplácelo con el rasgo Sushi. Agregué los detalles de los 4 últimos episodios de Laravel News Podcast como datos para este ejemplo.
No entraré en detalles sobre cómo funciona todo esto ya que este no es el objetivo del artículo, y probablemente usarás un modelo Eloquent real si construyeras tu propio reproductor de podcasts.
Necesitaremos un archivo de diseño para cargar Tailwind, agregar un logotipo y agregar algunos estilos básicos. Dado que Livewire y Alpine ahora inyectan automáticamente sus scripts y estilos, ¡ni siquiera necesitamos cargarlos en el diseño! Crearemos el diseño como un componente Blade anónimo en resources/views/components/layout.blade.php.
Primero, necesitamos una página para mostrar todos los episodios del podcast.
Usando Folio, podemos crear fácilmente una nueva página en el directorio recursos/vistas/páginas, y Laravel creará automáticamente una ruta para esa página. Queremos que nuestra ruta sea /episodios, para poder ejecutar php artisan make:folio episodios/index. Eso creará una vista en blanco en resources/views/pages/episodes/index.blade.php.
En esta página, insertaremos el componente de diseño y luego recorreremos todos los episodios del podcast. Volt proporciona funciones con espacios de nombres para la mayoría de las funciones de Livewire. Aquí, abriremos las etiquetas de apertura y cierre normales. Dentro de ellos, usaremos la función calculada para crear una variable $episodes que ejecuta una consulta para obtener todos los modelos de Episodios ($episodios = computed(fn () => Episodio::get());). Podemos acceder a la propiedad calculada en la plantilla usando $this->episodes.
También creé una variable $formatDuration que es una función para formatear la propiedad duración_en_segundos de cada episodio en un formato legible. Podemos llamar a esa función en la plantilla usando $this->formatDuration($episode->duration_in_segundos).
También necesitamos incluir la funcionalidad dinámica de la página en la directiva @volt para registrarla como un "componente Livewire anónimo" dentro de la página Folio.
A partir de ahí, necesitamos agregar algo de interactividad. Quiero agregar un reproductor de episodios para que podamos escuchar los episodios de la lista de episodios. Este puede ser un componente Blade normal que representamos en el archivo de diseño.
Podemos crear ese componente agregando un archivo resources/views/components/episode-player.blade.php. Dentro del componente, agregaremos un elemento
Si recargamos la página, no vemos ningún cambio. Esto se debe a que no hemos agregado una forma de reproducir episodios. Usaremos eventos para comunicarnos desde nuestros componentes Livewire con el reproductor. Primero, en el reproductor, agregaremos x-on:play-episode.window="play($event.detail)" para escuchar el evento de reproducción del episodio en la ventana, luego llamaremos a la función de reproducción.
A continuación, de vuelta en la página de episodios/índice, agregaremos un oyente de clic en los botones de reproducción para cada episodio. Los botones enviarán el evento de reproducción del episodio, que será recibido por el reproductor del episodio y manejado allí.
A continuación, me gustaría agregar una página de detalles del episodio para mostrar las notas del programa de cada episodio y otros detalles.
Folio tiene algunas convenciones bastante interesantes para vincular modelos de ruta en sus nombres de archivos. Para crear una ruta equivalente para /episodes/{episode:id}, cree una página en resources/views/pages/episodes/[Episode].blade.php. Para usar un parámetro de ruta que no sea la clave principal, puede usar la sintaxis [Modelo:alguna_otra_clave].blade.php en su nombre de archivo. Quiero usar el número de episodio en la URL, así que crearemos un archivo en resources/views/pages/episodes/[Episode:number].blade.php.
Folio consultará automáticamente los modelos de Episodio para un episodio con el número que pasamos en la URL y lo pondrá a disposición como una variable $episode en nuestro código . Luego podemos convertir eso en una propiedad Livewire usando la función de estado de Volt.
También incluiremos un botón de reproducción en esta página para que los usuarios puedan reproducir un episodio mientras ven sus detalles.
Ahora, necesitamos vincularnos a la página de detalles desde la página de índice. De vuelta en la página de episodios/índice, envuelva el
de cada episodio en una etiqueta de anclaje.
Casi estámos allí. La aplicación se ve bastante bien y funciona bien, pero hay un problema. Si un usuario está escuchando un episodio y navega a una página diferente, el reproductor de episodios pierde su estado de episodio activo y desaparece.
¡Afortunadamente, Livewire tiene las directivas wire:navigate y @persist para ayudar con estos problemas ahora!
En nuestro archivo de diseño, envuelva el logotipo y el reproductor de episodios en bloques @persist. Livewire detectará esto y omitirá volver a renderizar esos bloques cuando cambiemos de página.
Finalmente, necesitamos agregar el atributo wire:navigate a todos los enlaces a través de la aplicación. Por ejemplo:
Cuando usa el atributo wire:navigate, detrás de escena, Livewire buscará el contenido de la nueva página usando AJAX, luego mágicamente intercambiará el contenido en su navegador sin tener que recargar la página completa. ¡Esto hace que la carga de la página se sienta increíblemente rápida y permite que funciones como persistir funcionen! Permite funciones que antes solo se podían lograr mediante la creación de un SPA.
Esta fue una aplicación de demostración realmente divertida de construir mientras se aprende Volt y Folio. Subí la aplicación de demostración aquí y @bosunski creó un phpsandbox si quieres ver el código fuente completo o probarlo tú mismo.
¿Qué opinas? ¿Es Livewire v3 + Volt + Folio la pila más simple para crear aplicaciones Laravel ahora? Creo que es realmente genial y puede resultar más familiar para las personas que están acostumbradas a crear aplicaciones en marcos de JavaScript como Next.js y Nuxt.js. También es bueno tener todo el código de una página colocado: estilo (a través de Tailwind), JS (a través de Alpine) y código de backend, todo en un solo archivo. ¡Envíame tus pensamientos en Twitter!
Archivado en:
Jason Beggs
Consultor de TALL stack (Tailwind CSS, Alpine.js, Laravel y Livewire) y propietario de roasted.dev.