Notícias

May 24, 2023

Aprenda Livewire 3, Volt e Folio criando um reprodutor de podcast

Ontem, a equipe do Laravel lançou o Laravel Folio – um poderoso roteador baseado em páginas projetado para simplificar o roteamento em aplicações Laravel. Hoje, eles lançaram o Volt - uma API funcional elegantemente elaborada

Ontem, a equipe do Laravel lançou o Laravel Folio – um poderoso roteador baseado em páginas projetado para simplificar o roteamento em aplicações Laravel. Hoje, eles lançaram o Volt - uma API funcional elegantemente elaborada para Livewire, permitindo que a lógica PHP de um componente e os modelos Blade coexistam no mesmo arquivo com clichê reduzido.

Embora possam ser usados ​​separadamente, acho que usá-los juntos é uma maneira nova e incrivelmente produtiva de construir aplicativos Laravel.

Neste artigo, vou te ensinar como construir um aplicativo simples que lista episódios do podcast Laravel News e permite que os usuários os reproduzam, com um player que pode continuar reproduzindo perfeitamente durante o carregamento da página.

Para começar, precisamos criar um novo aplicativo Laravel e instalar Livewire, Volt, Folio e Sushi (para criar alguns dados fictícios).

Livewire v3, Volt e Folio ainda estão em beta. Eles devem ser bastante estáveis, mas use-os por sua própria conta e risco.

Depois de solicitar os pacotes, precisamos executar php artesão volt:install e php artesão folio:install. Isso irá estruturar algumas pastas e provedores de serviços de que o Volt e o Folio precisam.

Para dados fictícios, vou criar um modelo Sushi. Sushi é um pacote escrito por Caleb Pozio que permite criar modelos Eloquent que consultam seus dados a partir de um array escrito diretamente no arquivo de modelo. Isso funciona muito bem quando você está criando aplicativos de exemplo ou tem dados que não precisam ser alterados com muita frequência.

Crie um modelo, remova a característica HasFactory e substitua-a pela característica Sushi. Adicionei os detalhes dos 4 episódios mais recentes do Laravel News Podcast como dados para este exemplo.

Não entrarei em detalhes sobre como tudo isso funciona, pois esse não é o objetivo do artigo, e você provavelmente usará um modelo real do Eloquent se construir seu próprio reprodutor de podcast.

Precisaremos de um arquivo de layout para carregar o Tailwind, adicionar um logotipo e adicionar alguns estilos básicos. Como o Livewire e o Alpine injetam automaticamente seus scripts e estilos agora, nem precisamos carregá-los no layout! Criaremos o layout como um componente Blade anônimo em resources/views/components/layout.blade.php.

Primeiro, precisamos de uma página para exibir todos os episódios do podcast.

Usando o Folio, podemos facilmente criar uma nova página no diretório resources/views/pages, e o Laravel criará automaticamente uma rota para essa página. Queremos que nossa rota seja /episodes, para que possamos executar php artesão make:folio Episodes/index. Isso criará uma visualização em branco em resources/views/pages/episodes/index.blade.php.

Nesta página, inseriremos o componente de layout e, em seguida, percorreremos todos os episódios do podcast. O Volt fornece funções com namespace para a maioria dos recursos do Livewire. Aqui, abriremos tags normais de abertura e fechamento . Dentro deles, usaremos a função computada para criar uma variável $episodes que executa uma consulta para obter todos os modelos de Episódio ($episodes = computado(fn () => Episódio::get());). Podemos acessar a propriedade computada no modelo usando $this->episodes.

Também criei uma variável $formatDuration que é uma função para formatar a propriedade length_in_seconds de cada episódio para um formato legível. Podemos chamar essa função no modelo usando $this->formatDuration($episode->duration_in_seconds).

Também precisamos agrupar a funcionalidade dinâmica da página na diretiva @volt para registrá-la como um "componente Livewire anônimo" na página Folio.

A partir daí, precisamos adicionar alguma interatividade. Quero adicionar um reprodutor de episódios para que possamos ouvir os episódios da lista de episódios. Este pode ser um componente Blade normal que renderizamos no arquivo de layout.

Podemos criar esse componente adicionando um arquivo resources/views/components/episode-player.blade.php. Dentro do componente, adicionaremos um elemento