Люди, які провели будь-яку кількість часу в моєму Twitch stream, знають, що я дійсно, ДІЙСНО люблю один конкретний пакет Laravel: Filament. Це надзвичайно потужна група пакетів, які допомагають створити загальну функціональність у додатках TALL-stack. Я використовував кожен з пакетів самостійно, але мій найбільш часто використовуваний пакет - це той, який об'єднує їх усі: Адміністративна панель.
Під час використання Filament, після початкового шоку від того, наскільки простими були основні частини функціональності, я помітив, що є кілька функцій, які, хоча і не проводять найбільше часу в центрі уваги, неймовірно добре відшліфовані. Ці функції не зовсім руйнівні для багатьох людей, але якщо ви натрапите на ситуацію, коли вам потрібен один з них, це робить все набагато, набагато простіше.
Давайте відразу перейдемо: ось моя п'ятірка найбільш недооцінених особливостей Filament.
1. Просте генерування діаграм,
графіків та даних, о мій!
Після багатьох років роботи над додатками Laravel, які використовують адміністративні панелі, побудова діаграм і графіків з даних додатків знаходиться прямо у верхній частині мого списку найбільш часто запитуваних функцій. Однак я розумію, чому дані інформують про процес прийняття рішень бізнесом, а можливість бачити дані зрозумілим для людини способом допомагає користувачам приймати швидкі, обґрунтовані рішення з першого погляду.
На щастя, за останні кілька років створення діаграм і графіків стало простіше і простіше з впровадженням бібліотек діаграм. Однак, щоб використовувати ці пакети, вам все одно доведеться встановити та налаштувати їх, налаштувати для них стилізацію, а потім перемістити в них усі дані, щоб вони могли правильно відображатися. Однак, якщо ви використовуєте нитку розжарювання, тепер є простіший спосіб!
Нитка розжарювання дозволяє швидко і легко генерувати діаграми за допомогою бібліотеки Chart.js за допомогою декількох попередньо побудованих і розширюваних класів віджетів діаграм. Деякі з моїх особистих улюблених - це LineChartWidget, BarChartWidget та завжди веселий DoughnutChartWidget! Це так само просто, як створити новий клас віджетів, розширити віджет діаграми, який ви хочете використовувати, і дати своєму новому класу заголовок і деякі дані. Наприклад:Після того, як ви
<?php
namespace App\Filament\Widgets;
use Filament\Widgets\BarChartWidget;
class LikesPerDay extends BarChartWidget
{
protected function getHeading(): string
{
return 'Blog Post Likes per Day';
}
protected function getData(): array
{
return [
'datasets' => [
[
'label' => 'Number of Likes',
'data' => [12, 32, 12, 35, 22],
],
],
'labels' => [
'2022-01-01',
'2022-01-09',
'2022-01-12',
'2022-01-22',
'2022-01-23',
],
];
}
}створили свій віджет діаграми, ви можете використовувати його на будь-яких інформаційних панелях у вашому проекті!
Це значно заощаджує час, якщо ви створюєте багато діаграм і графіків для своєї системи, але Filament робить цей крок далі, інтегруючи цікавий пакет: пакет flowframe/laravel-trend. Цей пакет дозволяє створювати тенденції даних з ваших Моделей, використовуючи красномовний синтаксис, який ви знаєте і любите! Наприклад, наведений вище код можна переписати як:
<?php
namespace App\Filament\Widgets;
use App\Models\Like;
use Filament\Widgets\BarChartWidget;
use Flowframe\Trend\Trend;
use Flowframe\Trend\TrendValue;
class LikesPerDay extends BarChartWidget
{
protected function getHeading(): string
{
return 'Blog Post Likes per Day';
}
protected function getData(): array
{
$data = Trend::model(Like::class)
->between(
start: now()->subDays(5),
end: now()
)
->perDay()
->count();
return [
'datasets' => [
[
'label' => 'Number of Likes',
'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
],
],
'labels' => $data->map(fn (TrendValue $value) => $value->date),
];
}
}Наведений вище приклад простий, але оскільки laravel-trends так сильно підтримується Eloquent, ви можете створювати потужні, великі запити для збору даних. Для отримання додаткової інформації про пакет laravel-trends перегляньте документацію
2. Сповіщення в режимі реального часу
Сповіщення є основним продуктом у більшості сучасних веб-додатків. У тій чи іншій формі вони допомагають попередити користувача про важливі події, що відбуваються в системі, його обліковому записі або його даних. Оскільки вони є такою важливою частиною будь-якої програми, супроводжувачі Filament намагалися створити надійний і простий у використанні пакет сповіщень, який використовується на панелі адміністратора.
Сповіщення про нитку неймовірно просто створювати. У будь-якому місці, де ви хотіли б вимкнути сповіщення у своєму коді нитки, ви можете використовувати вільний API об'єкта сповіщень (подібно до Eloquent, якщо ви не знайомі з терміном "fluent API"), щоб створити та надіслати сповіщення користувачеві. За своєю суттю, стрілянина сповіщення в Filament виглядає так:
<?php
namespace App\Http\Livewire;
use Filament\Notifications\Notifications;
use Livewire\Component;
class LikePost extends Component
{
public function storeLike(): void
{
// Like creation & storage code
Notification::make()
->title('Your Images have been Processed Successfully')
->success()
->send();
}
}Вам було б важко натиснути на це, щоб стати простішим, ніж це!
Однак у цьому є ще одна грань, яка піднімає сповіщення Filament з чудового пакета в незамінний пакет, і це можливість робити сповіщення в режимі реального часу.
Як правило, без сповіщень у режимі реального часу, якщо ви хочете оновити свого користувача, коли довгострокове завдання (наприклад, завдання в черзі) було закінчено, вам доведеться постійно опитувати кінцеву точку у фоновому режимі, яка в кінцевому підсумку дасть вам знати, що робота завершена. Це, безумовно, життєздатний метод зробити це, але залежно від вашого випадку використання, це може бути важким навантаженням на ваш сервер, коли сотні або тисячі користувачів знову і знову опитують одну і ту ж кінцеву точку, чекаючи завершення своїх завдань. Якщо ви опинитеся в такій ситуації, пакет Filament Notifications спочатку інтегрується з Laravel Echo, бібліотекою JavaScript, яка дозволяє підписуватися на канали та слухати події, що транслюються вашим сервером. За допомогою цієї інтеграції (а також певної реалізації вебсокетів, встановленої на вашому сервері, тобто Pusher), ми можемо оновити попередній код сповіщення для трансляції сповіщення в режимі реального часу, а не надсилати його безпосередньо після виконання дії.
Filament дає нам кілька різних способів надсилати сповіщення в режимі реального часу, але мій кращий варіант - використовувати клас сповіщень Laravel, як і всі інші сповіщення в моїй системі. Таким чином, усі мої сповіщення пишуться однаково, незалежно від того, чи стосуються вони Filament чи будь-якої іншої частини програми. Єдина відмінність полягає в тому, що нам потрібно буде надати нашому класу сповіщень метод toBroadcast, який запускає сповіщення Filament, наприклад:
<?php
namespace App\Notifications;
use App\Models\User;
use Filament\Notifications\Notification as FilamentNotification;
use Illuminate\Notifications\Notification;
use Illuminate\Notifications\Messages\BroadcastMessage;
class ImagesOptimized extends Notification
{
public function toBroadcast(User $notifiable): BroadcastMessage
{
return FilamentNotification::make()
->title('Your Images have been Optimized Successfully')
->getBroadcastMessage();
}
}Створюючи наш код сповіщення Filament у сповіщення Laravel, ми відкриваємо можливість використовувати це саме сповіщення в інших форматах, таких як електронна пошта, SMS тощо. Навіть якщо ми використовуємо цей клас сповіщень Laravel лише для надсилання нашого сповіщення про нитку, ми все одно отримуємо переваги від наявності спеціального класу для цього сповіщення, яке знаходиться в тому самому (або подібному) місці, що й решта наших сповіщень для нашого додатка.
Якщо створення цілого класу - це не ваша швидкість, Filament також надає вільний API для трансляції сповіщень набагато більш схожим на наш оригінальний, синхронний код сповіщення Filament. Виберіть свого улюбленого і використовуйте те, що підходить для вашого проекту і вашого варіанту використання!
3. Нативний глобальний пошук
Майже кожен проект з адміністративною панеллю в кінцевому підсумку потребує способу швидкого сортування всіх даних в системі. Хтось може сказати, що як тільки вам потрібен глобальний пошук у вашому додатку, вам потрібно оновити UI/UX, але навіть у проектах з бездоганними, зручними для використання користувальницькими інтерфейсами глобальний рядок пошуку може стати корисним інструментом для користувачів, які точно знають, чого хочуть, не пам'ятаючи, де його знайти.
Побудова глобальної реалізації пошуку може бути виснажливим, трудомістким процесом. Щоб переконатися, що ви створюєте продуктивний і зручний варіант, потрібно пристойне ноу-хау, щоб зробити його правильним. На щастя, Filament надав значну функцію глобального пошуку на своїй панелі адміністратора, яка виконує велику роботу для нас, розробників. На базовому рівні все, що потрібно для додавання конкретних ресурсів до глобальної функції пошуку, - це додати захищений статичний ?рядковий $recordTitleAttribute до вашого класу ресурсів. Цей атрибут заголовка вказує Filament шукати певну властивість (він же стовпець) з вашого ресурсу, коли користувач намагається використовувати глобальний пошук. Наприклад, встановлення $recordTitleAttribute Користувацького ресурсу на last_name призведе до того, що Filament порівняє рядок пошуку з властивістю last_name усіх користувачів системи.
Цей спосіб повідомити Filament, які властивості шукати на конкретних ресурсах, працює в багатьох випадках, але бувають випадки, коли ви, можливо, захочете здійснити пошук нитки за кількома стовпцями. Глобальний пошук нитки дозволяє нам замінити метод getGlobalSearchableAttributes() для повернення масиву стовпців (включаючи зв'язки за допомогою стандартної точкової нотації Laravel), які буде шукати Filament!
Є ще кілька смаколиків, які Filament додав до глобальної функції пошуку, але я залишу вас перевірити сторінку документації (це легко читається) і самостійно відкрити для себе деякі цікаві фрагменти!
4. Не просто адміністративна панель
, про яку я згадав це на початку цієї публікації, але одна з моїх улюблених частин про Filament, і одна з причин того, що я рекламую її як один з найкращих пакетів у всій екосистемі Laravel, полягає в тому, що всі основні частини пакету адмін-панелі, про які ми говорили весь цей час (таблиці, форми та сповіщення) доступні як окремі пакети, які ми можемо використовувати в наших програмах TALL stack. Потрібен простий спосіб створення форм у вашому додатку TALL stack? Додайте пакет "Форми розжарювання". Хочете отримати приємні сповіщення та сповіщення в режимі реального часу (див. пункт #2)? Помістіть пакет сповіщень про нитку розжарювання у своєму проекті!
Творці та супроводжувачі Filament знають, наскільки гарне їхнє програмне забезпечення, і вони не тільки об'єднують його та безкоштовно роздають у своєму пакеті панелі адміністратора, але й витрачають час, щоб підтримувати кожну з цих частин як свій власний, автономний пакет. Який подарунок спільноті Laravel & Livewire! Тож наступного разу, коли ви створюєте програму TALL і хочете отримати приємну функціональність від панелі адміністратора без необхідності включати весь пакет, виберіть і виберіть те, що вам найбільше подобається, із трьох основних плагінів і створіть свій додаток з деяких із найкращих пакетів TALL у спільноті.
5. Користувацькі сторінки
Останнє, але, звичайно, не менш важливе, є моєю улюбленою функцією адміністративної панелі Filament: Користувацькі сторінки. Існує багато програмного забезпечення для адміністративних панелей на основі CRUD, і Filament не є винятком. Хліб і масло Filament - це їх робочий процес на основі CRUD. Однак при створенні «реальних» додатків завжди є щось, з чим не можна легко (або взагалі) впоратися за допомогою згенерованих переглядів CRUD, які пропонують більшість адміністративних панелей. Незалежно від того, чи це сторінка, яка об'єднує кілька ресурсів, чи дуже спеціалізований вигляд, який не відповідає типовому менталітету «CRUD-for-a-specific-resource», мені не раз доводилося виходити за межі адміністративної панелі, щоб досягти цього.
За допомогою Filament я можу створювати будь-які користувацькі сторінки, які я коли-небудь хотів, без необхідності залишати панель адміністратора.
Користувацькі сторінки Filament мають два варіанти: ресурсний та загальний. Користувацькі сторінки на основі ресурсів додаються до методу getPages() у вашому класі ресурсів так само, як додаються сторінки списку, створення, перегляду та редагування. Ці сторінки, як правило, найкраще підходять для робочих процесів і випадків використання, які відповідають лише певному ресурсу, але трохи вписуються за межі звичайних сторінок CRUD.
Більш цікавими сторінками (як на мене) є загальні призначені для користувача сторінки. Ці сторінки є просто повносторінковими компонентами Livewire, з усіма функціями та функціональністю Livewire, які вам піддає розробник. Створити одну з цих сторінок так само просто, як і за допомогою Artisan (php artisan make:filament-page YourPage), і як тільки у вас є файли перед собою, ви можете написати будь-який код TALL-stack, який вам потрібен. Поговоріть про можливість налаштування!
Схвильовані ще?
Я знаю, що я є.
Ці п'ять функцій ледь дряпають поверхню золотої жила функціональності, яку супроводжувачі Filament вклали в цей пакет. Навіть просто написання про них викликає у мене захоплення піти і реалізувати їх і глибше зануритися в кожен з них у своїх проектах Filament! Але що ви думаєте? Ви випробували будь-яку з цих функцій у своїх програмах Filament? Чи є якісь недооцінені особливості Filament, які, на вашу думку, я пропустив? Зв'яжіться зі мною на Twitter або Mastodon і дайте мені знати, що ви думаєте!
