Laravel es un potente marco PHP que proporciona una base sólida para desarrollar aplicaciones web. Filament es un elegante panel de administración y creador de formularios de código abierto para Laravel que simplifica la creación de interfaces de administración. Esta guía lo guiará en la creación de un panel de administración sólido utilizando las últimas versiones de Filament y Laravel.

Laravel SaaS Starter: comience su próximo Saas en un día, no en semanas
¡Inicia tu próximo proyecto de Laravel Saas en solo un día, no en semanas! Con funciones ya creadas que todo saas necesita
www.laravelsaas.tienda

Requisitos previos
Antes de comenzar, asegúrese de tener lo siguiente instalado en su máquina de desarrollo:

PHP >= 8.0
Compositor
Node.js y NPM
MySQL o cualquier otra base de datos soportada por Laravel

Paso 1: Configurar un nuevo proyecto de Laravel

Primero, crea un nuevo proyecto de Laravel usando Composer:

composer create-project --prefer-dist laravel/laravel filament-admin
cd filament-admin

A continuación, configure las variables de entorno. Cambie el nombre del archivo .env.example a .env y actualice la configuración de la base de datos con sus credenciales:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=filament_db
DB_USERNAME=root
DB_PASSWORD=your_password

Ejecute el siguiente comando para generar una clave de aplicación y migrar las tablas predeterminadas de Laravel:

php artisan key:generate
php artisan migrate

Paso 2: Instalación del filamento

Para instalar Filament, use Composer:

composer require filament/filament

A continuación, publique los activos y la configuración del filamento:

php artisan filament:install

Paso 3: Configurar la autenticación

Filament requiere autenticación para administrar el acceso al panel de administración. Laravel proporciona un andamiaje de autenticación integrado. Usemos Laravel Breeze para simplificar:

composer require laravel/breeze --dev
php artisan breeze:install

Sigue las indicaciones para seleccionar tu opción de interfaz preferida (Blade, Vue, React). Para este ejemplo, usaremos Blade:

php artisan migrate
npm install
npm run dev

Asegúrate de tener un usuario con el que iniciar sesión. Puedes usar Laravel Tinker para crear uno:

php artisan tinker

>>> \App\Models\User::factory()->create(['email' => '[email protected]']);

Paso 4: Configurar Filamento

Actualice el modelo de Usuario para implementar el contrato Filament HasFilamentRoles si está utilizando roles o permisos. Por ahora, nos aseguraremos de que cualquier usuario autenticado pueda acceder a Filament.

In app/Providers/FilamentServiceProvider.php, define the authorization logic:

use Filament\Facades\Filament;

public function boot()
{
    Filament::serving(function () {
        Filament::registerUserMenuItems([
            'account' => MenuItem::make()
                ->label('My Account')
                ->url(route('filament.resources.users.edit', ['record' => auth()->user()]))
                ->icon('heroicon-o-user'),
        ]);
    });

    Filament::registerPages([
        // Register your custom pages here
    ]);

    Filament::registerResources([
        // Register your custom resources here
    ]);
}

protected function gate()
{
    Gate::define('viewFilament', function ($user) {
        return in_array($user->email, [
            '[email protected]',
        ]);
    });
}

Paso 5: Crear recursos

Los recursos de filamentos son modelos Eloquent con interfaces CRUD. Creemos un recurso para administrar un modelo de publicación.

Generar el modelo, migración y fábrica:

php artisan make:model Post -mf

Definir los campos en el archivo de migración:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

Ejecutar la migración:

php artisan migrate

A continuación, genere un recurso de filamento:

php artisan make:filament-resource Post

Este comando crea los archivos necesarios para el recurso. Abra app/Filament/Resources/PostResource.php y defina los campos de recursos:

use Filament\Resources\Pages\Page;
use Filament\Resources\Pages\CreateRecord;
use Filament\Resources\Pages\EditRecord;
use Filament\Resources\Pages\ListRecords;
use Filament\Resources\Forms;
use Filament\Resources\Tables;
use Filament\Resources\Forms\Components\TextInput;
use Filament\Resources\Forms\Components\Textarea;
use Filament\Resources\Tables\Columns\TextColumn;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

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

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->required()
                    ->maxLength(255),
                Textarea::make('content')
                    ->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title'),
                TextColumn::make('content')
                    ->limit(50),
                TextColumn::make('created_at')
                    ->dateTime(),
            ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListRecords::route('/'),
            'create' => Pages\CreateRecord::route('/create'),
            'edit' => Pages\EditRecord::route('/{record}/edit'),
        ];
    }
}

Paso 6: Agregar navegación

Agregue el recurso a la barra lateral de Filament. Abra app/Providers/FilamentServiceProvider.php y registre el recurso:

use App\Filament\Resources\PostResource;

public function register()
{
    Filament::registerResources([
        PostResource::class,
    ]);
}

Paso 7: Personalización del filamento

El filamento es altamente personalizable. Puede cambiar el tema, los componentes y más. Por ejemplo, para personalizar el color primario, actualice el archivo config/filament.php:

'brand' => [
    'primary' => '#1d4ed8',
],

También puedes crear páginas, widgets y componentes de formulario personalizados siguiendo la documentación: Filament Documentation.

Laravel SaaS Starter: comience su próximo Saas en un día, no en semanas
¡Inicia tu próximo proyecto de Laravel Saas en solo un día, no en semanas! Con funciones ya creadas que todo saas necesita
www.laravelsaas.tienda

Conclusión

En esta guía, explicamos cómo configurar un nuevo proyecto de Laravel, instalar Filament, configurar la autenticación, crear recursos y personalizar el panel de administración de Filament. Esto debería brindarle una base sólida para crear paneles de administración sólidos utilizando Filament y Laravel. Para funciones y personalizaciones más avanzadas, consulte la documentación oficial y explore las capacidades de Filament.

¡Feliz codificación!