Изучите Livewire 3, Volt и Folio, создав проигрыватель подкастов.

Вчера команда Laravel выпустила Laravel Folio — мощный страничный маршрутизатор, предназначенный для упрощения маршрутизации в приложениях Laravel. Сегодня они выпустили Volt — элегантно созданный функциональный API для Livewire, позволяющий логике PHP компонента и шаблонам Blade сосуществовать в одном файле с уменьшенным шаблоном.

Хотя их можно использовать по отдельности, я думаю, что их совместное использование — это новый, невероятно продуктивный способ создания приложений Laravel.

В этой статье я научу вас, как создать простое приложение, которое перечисляет эпизоды подкаста Laravel News и позволяет пользователям воспроизводить их, с помощью проигрывателя, который может плавно продолжать воспроизведение при загрузке страницы.

Для начала нам нужно создать новое приложение Laravel и установить Livewire, Volt, Folio и Sushi (чтобы создать фиктивные данные).

Livewire v3, Volt и Folio все еще находятся в стадии бета-тестирования. Они должны быть довольно стабильными, но используйте их на свой страх и риск.

После запроса пакетов нам нужно запустить php artisan volt:install и php artisan folio:install. Это позволит создать некоторые папки и поставщики услуг, необходимые Volt и Folio.

Для фиктивных данных я собираюсь создать модель суши. Sushi — это пакет, написанный Калебом Позио, который позволяет создавать модели Eloquent, запрашивающие данные из массива, записанного непосредственно в файле модели. Это отлично работает, когда вы создаете примеры приложений или имеете данные, которые не нужно менять очень часто.

Создайте модель, затем удалите признак HasFactory и замените его признаком Sushi. В качестве данных для этого примера я добавил подробную информацию о 4 последних эпизодах подкаста Laravel News.

Я не буду вдаваться в подробности того, как все это работает, поскольку это не является целью статьи, и вы, скорее всего, будете использовать настоящую модель Eloquent, если захотите создать свой собственный проигрыватель подкастов.

Нам понадобится файл макета для загрузки Tailwind, добавления логотипа и некоторых базовых стилей. Поскольку Livewire и Alpine теперь автоматически внедряют свои скрипты и стили, нам даже не нужно загружать их в макет! Мы создадим макет как анонимный компонент Blade по адресу resources/views/comComponents/layout.blade.php.

Во-первых, нам нужна страница для отображения всех выпусков подкаста.

Используя Folio, мы можем легко создать новую страницу в каталоге resources/views/pages, и Laravel автоматически создаст маршрут для этой страницы. Мы хотим, чтобы наш маршрут был /episodes, чтобы мы могли запустить php artisan make:folio Episodes/index. Это создаст пустое представление в resources/views/pages/episodes/index.blade.php.

На этой странице мы вставим компонент макета, а затем пройдемся по всем эпизодам подкаста. Volt предоставляет функции пространства имен для большинства функций Livewire. Здесь мы откроем обычные открывающие и закрывающие теги . Внутри них мы воспользуемся вычисляемой функцией для создания переменной $episodes, которая выполняет запрос для получения всех моделей Episode ($episodes = Computed(fn () => Episode::get());). Мы можем получить доступ к вычисленному свойству в шаблоне, используя $this->episodes.

Я также создал переменную $formatDuration, которая представляет собой функцию форматирования свойства period_in_секунды каждого эпизода в читаемый формат. Мы можем вызвать эту функцию в шаблоне, используя $this->formatDuration($episode->duration_in_секунды).

Нам также необходимо обернуть динамическую функциональность страницы в директиву @volt, чтобы зарегистрировать ее как «анонимный компонент Livewire» на странице Folio.

Далее нам нужно добавить немного интерактивности. Я хочу добавить проигрыватель эпизодов, чтобы мы могли слушать эпизоды из списка эпизодов. Это может быть обычный компонент Blade, который мы отображаем в файле макета.

Мы можем создать этот компонент, добавив файл resources/views/comComponents/episode-player.blade.php. Внутри компонента мы добавим элемент