O poder do FilamentPHP

Adryanne Kelly - Feb 6 - - Dev Community

Neste artigo vou apresentar uma ferramenta poderosa, incrivelmente fácil de usar e como ela pode deixar seu desenvolvimento web muito mais rápido e eficiente com apenas alguns comandos. Com ela, você consegue montar seu projeto completo, com uma interface linda e intuitiva dentro de pouquíssimo tempo. Vamos lá?
 

Tópicos

 

O que é o FilamentPHP?

Página principal do FilamentPHP

O FilamentPHP é uma ferramenta para desenvolvimento web full-stack, também chamada de TALLkit, pois reúne os 4 cavaleiros da TALLStack (Tailwind, Alpine.js, Laravel, Livewire).

Com uma documentação rica e clara, usar os recursos do Filament não tem nenhum segredo, você consegue implementar cada um deles no seu projeto sem muito esforço, sendo assim, um grande aliado da produtividade, tudo isso com uma interface bonita e intuitiva que você pode moldar da forma como preferir.

O Filament na versão atual (v3.2) conta com 8 módulos pra você usar, são eles: Panel Builder, Form Builder, Table Builder, Notifications, Actions, Widgets, Infolist Builder e Core Concepts, cada um deles com suas respectivas funcionalidades.
 

Quais as vantagens de usar FilamentPHP?

Página inicial da documentação do FilamentPHP

Facilidade: Usando o FilamentPHP você vê várias linhas de código se tornarem uma só. Você consegue implementar facilmente recursos como filtros e campos de buscas em segundos. Basta um comando e o Filament consegue montar seu formulário prontinho só pra você moldar como quiser.

Desacoplamento: Os módulos do Filament também podem ser utilizados de forma independente, sem a necessidade da instalação de todo seu ecossistema. Então, se você quiser usar só o Form Builder ou o Table Builder, você pode instalá-los sem precisar instalar todo o restante.

Produtividade: Com as várias facilidades que essa ferramenta oferece, o seu desenvolvimento fica muito mais rápido, uma função que você normalmente demoraria umas horas pra fazer pode durar apenas minutos.

Customizável: Afinal, quem tem limite é estado, não é mesmo? Apesar de o foco do Filament ser em painéis administrativos, você pode utilizá-lo também para criar sites por exemplo, com ele você é livre pra usar sua imaginação.

Open-source: Isso mesmo, lá no Github você pode clonar o repositório do Filament e adicionar sua contribuição. No próprio readme do projeto você encontra orientações de como rodar o projeto na sua máquina.

Gratuito: Não podemos esquecer o melhor de tudo né? O FilamentPHP é totalmente gratuito.
 

O que preciso para usar FilamentPHP?

Para usar FilamentPHP você precisa ter os seguintes requisitos :

  • PHP 8.1+
  • Laravel v10.0+
  • Livewire v3.0+

Esses requisitos valem para o FilamentPHP v3.2, você pode ver os requisitos para as outras versões visitando a aba de Instalação lá dentro da documentação. É recomendado o uso da versão mais atual, pois ela veio com muito mais recursos que as anteriores e de forma ainda mais simplificada, porém, se você optar por uma versão mais baixa, saiba que alguns recursos podem não estar presentes ou mudaram a forma de implementação.

Para o desenvolvimento em Filament, é muito importante que você tenha uma boa noção de PHP + Laravel, pois assim além de a ferramenta ser melhor aproveitada, entendendo isso, você pode desacoplar as funcionalidades com mais facilidade, assim usufruindo de todas as vantagens de utilizá-lo.
 

Instalando o Filament

Para instalar o FilamentPHP, dentro do seu projeto Laravel rode o seguinte comando:

composer require filament/filament:"^3.2" -W 
Enter fullscreen mode Exit fullscreen mode

Depois disso, rode o comando a seguir. Este vai instalar o Painel:

php artisan filament:install --panels
Enter fullscreen mode Exit fullscreen mode

E por último, para criar seu usuário do painel, utilize o comando:

php artisan make:filament-user
Enter fullscreen mode Exit fullscreen mode

E pronto, agora você já pode acessar seu painel Filament, basta rodar um php artisan serve e acessar a URL localhost:8000/admin e logar com o e-mail e senha do usuário que você criou.
 

Demonstração de uso do FilamentPHP na prática

No vídeo acima, eu demonstro a criação de uma resource utilizando Filament. A resource já vem com o CRUD completo e funcional, com seu formulário e sua tabela já montados.

Para criar essa resource eu sigo os seguintes passos:

Primeiro, antes de criar a resource você precisará somente de 3 coisas

  • A sua tabela no banco de dados do seu projeto Laravel deve estar criada.
  • No seu Model, a sua variavel $fillable deve conter todos os campos existentes na sua tabela.
  • E obviamente, ter o FilamentPHP instalado no seu projeto. (Passo a passo no tópico anterior).

Você pode facilmente fazer isso da seguinte forma:

Use o comando abaixo com o nome do Model que você desejar (no caso o nome do meu Model é Product) com a flag -m para que a migration já seja criada junto:

php artisan make:model Product -m
Enter fullscreen mode Exit fullscreen mode

Na Migration que você acabou de criar, coloque os campos que você desejar adicionar na sua tabela, ela deve ficar mais ou menos assim:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
    * Run the migrations.
    */
    public function up(): void 
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->longText('description');
            $table->decimal('price', 8, 2);
            $table->timestamps();
        });
    }

    /**
    * Reverse the migrations.
    */
    public function down(): void 
    {
        Schema::dropIfExists('products');
    }
};
Enter fullscreen mode Exit fullscreen mode

Depois de adicionar seus campos, rode um php artisan migrate para que seja criada a tabela no seu banco de dados.

Após criada a tabela, declare os campos da sua tabela na variável $fillable dentro do seu Model como no exemplo abaixo:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;

    protected $fillable = [
        'name',
        'description',
        'price',

    ];
}
Enter fullscreen mode Exit fullscreen mode

E pronto, agora é só correr pro abraço! Para criar sua resource, você só vai precisar do seguinte comando (onde Product é o nome do seu Model):

php artisan make:filament-resource Product --generate --view

// A flag --generate vai gerar seu formulário
// A flag --view vai criar a página de visualização
// Você pode ainda utilizar a flag --simple para que sua 
// resource seja baseada em modais, isso tudo ta explicado 
// direitinho na documentação
Enter fullscreen mode Exit fullscreen mode

 

Conclusão

Você pode ter um gostinho das funcionalidades do FilamentPHP visitando a demo, lá mostra de forma prática um exemplo de como os componentes podem ser utilizados e organizados em tela no seu projeto. O Filament também tem uma comunidade no Discord que está sempre pronta pra te ajudar e tirar suas dúvidas.

Além disso, reza a lenda que a versão 4 vem ainda esse ano com ainda mais novidades.

"Ah mas você ta fazendo propaganda do negócio", acho que o que é bom tem ser mostrado né pessoal.
Eai, vamos pro Filament?

 

Referências

 

Meus agradecimentos a @cherryramatis,@clintonrocha98 e @redrodrigoc pelas dicas e sugestões para este artigo, vocês são demais 💜

. . . . .