팟캐스트 플레이어를 구축하여 Livewire 3, Volt 및 Folio를 알아보세요.

어제 Laravel 팀은 Laravel 애플리케이션의 라우팅을 단순화하도록 설계된 강력한 페이지 기반 라우터인 Laravel Folio를 출시했습니다. 오늘 그들은 Livewire용으로 우아하게 제작된 기능적 API인 Volt를 출시했습니다. 이를 통해 구성 요소의 PHP 로직과 블레이드 템플릿이 상용구를 줄인 동일한 파일에 공존할 수 있습니다.

비록 별도로 사용될 수도 있지만 함께 사용하는 것은 Laravel 앱을 구축하는 새롭고 믿을 수 없을 만큼 생산적인 방법이라고 생각합니다.

이 기사에서는 Laravel News 팟캐스트의 에피소드를 나열하고 사용자가 페이지 로드 전반에 걸쳐 원활하게 계속 재생할 수 있는 플레이어를 사용하여 재생할 수 있는 간단한 앱을 구축하는 방법을 설명하겠습니다.

시작하려면 새로운 Laravel 앱을 만들고 Livewire, Volt, Folio 및 Sushi(일부 더미 데이터를 만들기 위해)를 설치해야 합니다.

Livewire v3, Volt 및 Folio는 모두 아직 베타 버전입니다. 꽤 안정적이어야 하지만 사용에 따른 위험은 사용자 본인의 책임입니다.

패키지를 요청한 후 php artisan volt:install 및 php artisan folio:install을 실행해야 합니다. 이는 Volt와 Folio에 필요한 일부 폴더와 서비스 제공업체를 비계로 삼을 것입니다.

더미 데이터로는 Sushi 모델을 생성하겠습니다. Sushi는 Caleb Pozio가 작성한 패키지로, 모델 파일에 직접 작성된 배열에서 데이터를 쿼리하는 Eloquent 모델을 만들 수 있습니다. 이는 예제 앱을 구축하거나 자주 변경할 필요가 없는 데이터가 있는 경우에 유용합니다.

모델을 생성한 다음 HasFactory 특성을 제거하고 Sushi 특성으로 대체합니다. 이 예제의 데이터로 최신 Laravel News Podcast 에피소드 4개에 대한 세부 정보를 추가했습니다.

이것이 기사의 요점이 아니기 때문에 이 모든 것이 어떻게 작동하는지 자세히 설명하지 않을 것이며, 자신만의 팟캐스트 플레이어를 구축하려는 경우 실제 Eloquent 모델을 사용하게 될 것입니다.

Tailwind를 로드하고, 로고를 추가하고, 몇 가지 기본 스타일을 추가하려면 레이아웃 파일이 필요합니다. Livewire와 Alpine은 이제 스크립트와 스타일을 자동으로 삽입하므로 레이아웃에 이를 로드할 필요도 없습니다! resources/views/comComponents/layout.blade.php에서 익명 블레이드 구성 요소로 레이아웃을 생성하겠습니다.

먼저, 팟캐스트의 모든 에피소드를 표시할 페이지가 필요합니다.

Folio를 사용하면 resources/views/pages 디렉토리에 새 페이지를 쉽게 생성할 수 있으며, Laravel은 자동으로 해당 페이지에 대한 경로를 생성합니다. 우리는 경로를 /episodes로 지정하여 php artisan make:folioepisodes/index를 실행할 수 있습니다. 그러면 resources/views/pages/episodes/index.blade.php에 빈 보기가 생성됩니다.

이 페이지에서는 레이아웃 구성 요소를 삽입한 다음 모든 팟캐스트 에피소드를 반복합니다. Volt는 대부분의 Livewire 기능에 대해 네임스페이스 기능을 제공합니다. 여기서는 일반 열기 및 닫기 태그를 열겠습니다. 그 안에서 계산된 함수를 사용하여 모든 에피소드 모델을 가져오기 위한 쿼리를 실행하는 $episodes 변수를 생성합니다($episodes = 계산(fn () => Episode::get());). $this->episodes를 사용하여 템플릿의 계산된 속성에 액세스할 수 있습니다.

또한 각 에피소드의 Duration_in_seconds 속성을 읽을 수 있는 형식으로 지정하는 함수인 $formatDuration 변수를 만들었습니다. $this->formatDuration($episode->duration_in_seconds)을 사용하여 템플릿에서 해당 함수를 호출할 수 있습니다.

또한 Folio 페이지 내에서 "익명 Livewire 구성 요소"로 등록하려면 @volt 지시문으로 페이지의 동적 기능을 래핑해야 합니다.

여기에서 상호작용성을 추가해야 합니다. 에피소드 목록에서 에피소드를 들을 수 있도록 에피소드 플레이어를 추가하고 싶습니다. 이는 레이아웃 파일에서 렌더링하는 일반 블레이드 구성 요소일 수 있습니다.

resources/views/comComponents/episode-player.blade.php 파일을 추가하여 해당 구성 요소를 생성할 수 있습니다. 구성 요소 내부에는 활성 에피소드를 저장하기 위한 일부 Alpine 코드와 활성 에피소드를 업데이트하고 오디오를 시작하는 기능이 포함된