Introducción a Laravel Filament

• 10/09/2023

Guía de Introducción a Laravel Filament

Bienvenido a esta guía completa sobre Laravel Filament. En este artículo aprenderás qué es Laravel Filament, cómo instalarlo y configurarlo, y cómo sacarle el máximo partido a esta potente herramienta para crear paneles de administración en Laravel. ¡Vamos a ello!

¿Qué es Laravel Filament?

Laravel Filament es un paquete de código abierto desarrollado por el equipo de Laravel Beyond para facilitar la creación de impresionantes paneles de administración en aplicaciones Laravel.

Filament proporciona una sólida capa de abstracción que te permite generar backends completos sin tener que programar interfaces tediosas. Ofrece componentes listos para usar como tablas, formularios, páginas y más.

Principales características de Laravel Filament

Algunas de las principales características que ofrece Filament son:

• Recursos - Abstrae los modelos Eloquent en recursos fáciles de gestionar.

• Páginas - Crea páginas con componentes reutilizables.

• Formularios - Construye formularios con validación integrada.

• Tablas - Muestra, filtra y gestiona registros fácilmente.

• Autenticación - Cuenta con un sistema de usuarios, roles y permisos.

• Temas - Personaliza la interfaz con diferentes temas.

• Traducciones - Admite múltiples idiomas.

Ventajas de Laravel Filament

Algunas de las principales ventajas que ofrece Laravel Filament son:

• - Acelera el desarrollo de backends.

• - Interfaz de usuario limpia y consistente.

• - Abstrae la complejidad de Laravel.

• - Componentes reutilizables.

• - Curva de aprendizaje corta.

• - Documentación excelente.

• - Comunidad activa.

• - Código abierto y gratuito.

Casos de uso

Laravel Filament es ideal para desarrollar rápidamente:

• - Paneles de administración para gestionar contenido.

• - Backend de aplicaciones web.

• - Dashboards y reporting.

• - CRUDs y aplicaciones data-intensive.

• - Interfaces de admin para clientes.

---

Instalación y configuración inicial

Instalar Laravel Filament es muy sencillo gracias a Composer. Vamos a ver los pasos necesarios:

Requisitos Laravel Filament

Antes de instalar Filament, tu proyecto Laravel debe cumplir los siguientes requisitos:

• - Laravel 8.0 o superior.

• - PHP 7.3 o superior.

Instalación vía Composer

Ejecuta el siguiente comando en la raíz de tu proyecto para instalar la última versión estable de Filament:

composer require filament/filament

Esto instalará Filament y sus dependencias.

Configuración básica

Una vez instalado, debes publicar los recursos de Filament con:

php artisan vendor:publish --tag=filament-config

Esto publicará la configuración y recursos en config/filament.php.

Creación del Panel

Con todo instalado y configurado tenemos que instalar el Panel que nos ofrece Filament:

php artisan filament:install --panels

Con esto tenemos ya el Panel creado y configurado.

Creación de Usuario Administrador

Cuando tenemos todo instalado junto con el panel creado podemos crear nuestro primer usuario superadministrador:

php artisan make:filament-user

Esto nos crea el administrador para acceder al panel que hemos instalado.

Acceder al Panel de Administración

Con el usuario superadministrador creado ya podemos acceder al panel de administración. Primero ejecutamos nuestra aplicación con el siguiente comando:

php artisan serve

Mientras se ejecuta nuestra aplicación (con la url de nuestro sitio que nos devuelve el php artisan serve) nos dirigimos a la ruta /admin, en micaso será http://127.0.0.1:8000/admin

Ponemos nuestro usuario administrador creado en el paso anterior y veremos nuestro panel creado:

---

Recursos en Laravel Filament

Los recursos son la forma en que Filament representa los modelos Eloquent. Permiten crear, leer, actualizar y eliminar registros fácilmente.

Creación de recursos

Podemos generar un recurso con el comando make:filament-resource:

php artisan make:filament-resource

Esto generará un recurso en app/Filament/Resources/PostResource.php.

	/**
	 * Función para ver la tabla con la información
	 * @param  Table  $table [description]
	 * @return [type]        [description]
	 */
	public static function table(Table $table): Table {
		return $table
		// Columnas
			->columns([
				TextColumn::make('titulo'),
				TextColumn::make('contenido'),
			])
			//Filtros
			->filters([
				//
			])
			->actions([
				Tables\Actions\EditAction::make(),
			])
			->bulkActions([
				Tables\Actions\BulkActionGroup::make([
					Tables\Actions\DeleteBulkAction::make(),
				]),
			])
			->emptyStateActions([
				Tables\Actions\CreateAction::make(),
			]);
	}

El recurso expone el modelo Post y permite gestionar sus registros. De forma predeterminada incluye CRUD básico.

Es importante que crees el Modelo que usará el recurso en este caso el modelo se llama Post ademas que hay que crear la tabla Posts con los campos siguientes: titulo, contenido

Si volvemos a nuestro panel podemos ver que tenemos el nuevo recurso Post en la barra lateral y podemos acceder

Formulario

La función Form nos permite configurar nuestro formulario del CRUD

	public static function form(Form $form): Form {
		return $form
			->schema([
				TextInput::make('titulo'),
				TextInput::make('contenido'),
			]);
	}

Podemos configurar el tipo de input, las validaciones etc

Columnas

Las columnas definen qué campos se muestran en las tablas de recursos:

->columns([
TextColumn::make('titulo'),
TextColumn::make('contenido'),
])

Hay columnas para texto, números, fechas, booleanos, relaciones, y más.

Relaciones

Las acciones permiten añadir botones para ejecutar comportamiento:

->actions([
Tables\Actions\EditAction::make(),
])

Algunas acciones comunes son Edit, Delete, View, etc.

Relaciones

Es sencillo gestionar relaciones con otros modelos:

	public static function getRelations(): array {
		return [
			//
		];
	}

Así se pueden anidar recursos y gestionar relaciones uno a muchos o muchos a muchos.

Filtros

Podemos crear filtros facilmente para nuestra tabla que muestra los datos, los filtros permiten segmentar los datos mostrados::

use Filament\Tables\Filters\Filter;

//Filtros
->filters([
	Filter::make('activo')->boolean(),
])

Se pueden crear filtros booleanos, de texto, numéricos, selects y más.

---

Páginas en Laravel Filament

Las páginas permiten diseñar interfaces de usuario avanzadas para tus usuarios.

Creación de Páginas

Podemos generar una página con el comando make:filament-page:

php artisan make:filament-page

Esto generará una página en app/Filament/Pages/Dashboard.php y su vista en resources/views/filament/pages/dashboard.blade.php.

Ejemplo Páginas de dashboard

Podemos crear una página DashboardPage para mostrar estadísticas:

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Dashboard extends Page {

	protected static ?string $navigationIcon = 'heroicon-o-document-text';

	protected static string $view = 'filament.pages.dashboard';

	protected function getHeaderWidgets(): array {
		return [
			Widgets\AccountWidget::class,
			Widgets\UserProfileWidget::class,
		];
	}
}

IMPORTANTE -> Como no tenemos Widgets no nos va a funcionar pero es para hacerse una idea de lo que se puede hacer

Luego en la vista pueden incluirse componentes como tablas, charts, etc.

---

Autenticación en Laravel Filament

Filament dispone de un sistema de autenticación y autorización listo para usar.

Usuarios

Por defecto, Filament incluye un modelo User y una interfaz para gestionarlos:

use Filament\Models\User;
use Filament\Resources\UserResource;

Desde aquí puedes crear, actualizar y eliminar usuarios.

Roles

Los roles permiten agrupar permisos. Podemos crearlos con:

use Filament\Models\Role;

Role::create([
    'name' => 'Admin',
]);

Luego asignar roles a usuarios con:

$user->assignRole('Admin');

Permisos

También se pueden definir permisos de acceso granular:

use Filament\Models\Permission;

Permission::create([
    'name' => 'edit posts'
]);

Middleware

El middleware filament.auth protege rutas de acceso no autorizado:

Route::group(['middleware' => ['filament.auth']], function () {
    // Rutas protegidas
});

La autenticación de Filament permite controlar el acceso de forma sólida.

---

Personalización de la interfaz

Filament está diseñado para ser personalizado fácilmente.

Cambiar Tema Laravel Filament

Puedes cambiar el tema global con:

// config/filament.php

'register_theme' => Filament\Themes\Uni::class,

También se pueden construir temas personalizados.

Traducciones

Filament soporta múltiples idiomas. Puedes publicar archivos de traducción con:

php artisan vendor:publish --tag=filament-translations

Luego editar los archivos YAML en lang/vendor/filament.

Configuración avanzada

Opciones como el título, logotipo, favicon y más se pueden personalizar en config/filament.php.

Filament da rienda suelta a la personalización para que puedas construir el backend de tus sueños.

---

Componentes en Laravel Filament

Filament incluye una amplia variedad de componentes frontend para agilizar el desarrollo.

Tablas

Ya hemos visto cómo mostrar datos en tablas con columnas y acciones. Opciones adicionales incluyen:

• - Filtros de búsqueda y selección

• - Paginación

• - Reordenación arrastrando filas

• - Exportación a CSV/XLSX

• - Modos lista y tarjeta

• - Carga diferida (lazy loading)

Charts

Para visualizar datos, Filament incluye componentes de gráficos, así creamos el chart

php artisan make:filament-widget BlogPostsChart --chart

La configuración de los Charts se hacen de la siguiente forma:

• 1º Vamos a nuestro Chart creado, en este caso a app/Filament/Resources/PostResource/Widgets/BlogPostsChart.php y lo abrimos

• 2º En este caso queremos mostrar datos estáticos(sin cargarlos desde la base de datos)

  <?php
  
  namespace App\Filament\Resources\PostResource\Widgets;
  
  use Filament\Widgets\ChartWidget;
  
  class BlogPostsChart extends ChartWidget
  {
      protected static ?string $heading = 'Blog Post Chart';
  
      protected function getData(): array
      {
          return [
              'datasets' => [
                  [
                      'label' => 'Blog posts created',
                      'data' => [0, 10, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
                  ],
              ],
              'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          ];
      }
  
      protected function getType(): string
      {
          return 'bar';
      }
  }
  

• 3º Vamos a nuestro resource donde se va mostrar nuestro chart es decir en app/Filament/Resources/PostResource.php y añadimos el Widget y Creamos la funcion getWidget()

  use App\Filament\Resources\PostResource\Widgets\BlogPostsChart;
  

  	/**
  	 * Función que contiene los Widgets
  	 */
  	public static function getWidgets(): array
  	{
  		return [
  			BlogPostsChart::class,
  		];
  	}

• 4º Por último lo agregamos a la página que muestra los datos en nuestro caso app/Filament/Resources/PostResource/Pages/ListPosts.php, importamos el widget y creamos la funcion getHeaderWidgets y podremos ver que tenemos la gráfica ya creada

use App\Filament\Resources\PostResource\Widgets\BlogPostsChart;

protected function getHeaderWidgets() : array
    {
        return [
			BlogPostsChart::class,
		];
    }

Los tipos de gráficos incluyen líneas, barras, tartas y dispersión.

Widgets

Los widgets permiten mostrar pequeñas piezas de información, podemos crear un widget de la siguiente forma:

php artisan make:filament-widget LastPosts --table

Podemos configurar este Widget para que muestre El último Post creado:

• 1º Accedemos al Widget creado en app/Filament/Resources/PostResource/Widgets/LastPosts.php y lo configuramos:

  <?php
  
  namespace App\Filament\Resources\PostResource\Widgets;
  
  use App\Models\Post;
  use Filament\Tables;
  use Filament\Tables\Table;
  use Filament\Widgets\TableWidget as BaseWidget;
  use Filament\Tables\Columns\TextColumn;
  use Filament\Forms\Components\DatePicker;
  
  use Filament\Tables\Filters\Filter;
  use Illuminate\Database\Eloquent\Builder;
  
  class LastPosts extends BaseWidget
  {
  
      /**
       * Query -> SQL  ejecutar
       * Columns -> Columnas a mostrar
       */
      public function table(Table $table): Table
      {
          return $table
              ->query(
                  Post::query()->latest()
              )
              ->columns([
                  TextColumn::make('titulo'),
  				TextColumn::make('contenido'),
              ]);
      }
  
      /**
       * Filtros aplicados a la nueva tabla que nos va generar el widget
       */
      protected function getTableFilters(): array 
      {
          return [
              Filter::make('created_at')
                  ->form([
                      DatePicker::make('created_from'),
                      DatePicker::make('created_until'),
                  ])
                  ->query(function (Builder $query, array $data): Builder {
                      return $query
                          ->when(
                              $data['created_from'],
                              fn(Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
                          )
                          ->when(
                              $data['created_until'],
                              fn(Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
                          );
                  })
          ];
      } 
  }
  

• Lo agregamos a nuestra vista del resource y lo tendríamos:

  use App\Filament\Resources\PostResource\Widgets\LastPosts;
  

  protected function getHeaderWidgets() : array
      {
          return [
  			BlogPostsChart::class,
              LastPosts::class
  		];
      }

  

Existen widgets de resumen estadístico, usuario, indicador clave y más.

---

Conclusión

Llegamos al final de esta introducción a Laravel Filament.

Hemos explorado sus potentes recursos para la creación de backends y paneles de administración: recursos, páginas, formularios, tablas, widgets y más.

Filament hará que desarrollar aplicaciones Laravel sea más rápido y agradable.

Te animo a que le des un vistazo a la excelente documentación oficial para continuar aprendiendo.