Люди, которые провели какое-то количество времени в моей Twitch stream, знают, что я очень, ОЧЕНЬ люблю один конкретный пакет Laravel: Filament. Это чрезвычайно мощная группа пакетов, помогающих создавать общие функциональные возможности в приложениях TALL-stack. Я использовал каждый из пакетов сам по себе, но мой наиболее часто используемый пакет - это тот, который объединяет их все: Admin Panel.
Во время моего использования Filament, после первоначального шока от того, насколько легко использовать основные функциональные возможности, я заметил, что есть несколько функций, которые, хотя и не проводят больше всего времени в центре внимания, невероятно хорошо отполированы. Эти функции не совсем потрясающие для многих людей, но если вы столкнетесь с ситуацией, когда вам нужен один из них, это сделает все намного, намного проще.
Давайте сразу перейдем к делу: вот моя пятерка самых недооцененных функций Filament.
1. Простая генерация диаграмм
Диаграммы, графики и данные, о, мои!
После многих лет работы над приложениями Laravel, которые используют панели администратора, построение диаграмм и графиков из данных приложений находится в верхней части моего списка наиболее часто запрашиваемых функций. Я понимаю, почему данные информируют процесс принятия решений в бизнесе, а возможность видеть данные понятным человеком способом помогает пользователям принимать быстрые, обоснованные решения с первого взгляда.
К счастью, за последние несколько лет создание диаграмм и графиков стало проще и проще с введением библиотек диаграмм. Однако для использования этих пакетов вам все равно придется установить и настроить их, настроить для них стили, а затем отправить в них все данные, чтобы они могли правильно отображаться. Однако, если вы используете нить, теперь есть более простой способ!
Filament позволяет быстро и легко генерировать графики с помощью библиотеки Chart.js с помощью нескольких готовых и расширяемых классов виджетов Chart. Некоторые из моих личных фаворитов - LineChartWidget, BarChartWidget и всегда веселый DoughnutChartWidget! Это так же просто, как создать новый класс Widget, расширить виджет диаграммы, который вы хотите использовать, и придать новому классу заголовок и некоторые данные. Например:
<?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. Этот пакет позволяет создавать тенденции данных из ваших моделей, используя синтаксис Eloquent, который вы знаете и любите! Например, приведенный выше код может быть переписан следующим образом:
<?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 сделали все возможное, чтобы создать надежный и простой в использовании пакет уведомлений, который используется в панели администратора.
Уведомления о нити невероятно просты в создании. Везде, где вы хотите запустить уведомление в коде нити накаливания, вы можете использовать FLUENT API объекта Notification (аналогично 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, которая позволяет подписываться на каналы и слушать события, транслируемые вашим сервером. Благодаря этой интеграции (а также какой-то реализации websockets, установленной на вашем сервере, т.е. 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();
}
}Встроив наш код уведомления Нити в уведомление Laravel, мы открываем возможность использовать это же уведомление в других форматах, таких как электронная почта, SMS и т. Д. Даже если мы используем этот класс уведомлений Laravel только для отправки нашего уведомления Filament, мы все равно получаем преимущество наличия выделенного класса для этого уведомления, который находится в том же (или аналогичном) месте, что и остальные наши уведомления для нашего приложения.
Если создание целого класса не соответствует вашей скорости, Filament также предоставляет свободный API для широковещательных уведомлений гораздо более похожим способом на наш оригинальный синхронный код уведомлений Filament. Выберите свой любимый и используйте то, что подходит вашему проекту и вашему варианту использования!
3. Нативный
глобальный поиск Почти каждому проекту с панелью администратора в конечном итоге нужен способ быстрой сортировки всех данных в системе. Некоторые могут сказать, что как только вам понадобится глобальный поиск в вашем приложении, вам нужно обновить свой UI / UX, но даже в проектах с безупречными, удобными пользовательскими интерфейсами глобальная панель поиска может быть полезным инструментом для пользователей, которые точно знают, что они хотят, не помня, где это найти.
Создание глобальной реализации поиска может быть утомительным, трудоемким процессом. Чтобы убедиться, что вы создаете производительный и удобный для пользователя вариант, требуется приличное количество ноу-хау, чтобы сделать это правильно. К счастью, Filament предоставил существенную функцию глобального поиска в своей панели администратора, которая делает большую часть тяжелой работы для нас, разработчиков. На базовом уровне все, что нужно для добавления определенных ресурсов в функцию глобального поиска, — это добавить защищенную статическую строку $recordTitleAttribute в класс Resource. Этот атрибут title указывает Filament выполнить поиск определенного свойства (столбца) в ресурсе, когда пользователь пытается использовать глобальный поиск. Например, установка $recordTitleAttribute пользовательского ресурса на last_name приведет к тому, что Filament сравнит строку поиска со свойством last_name всех пользователей в системе.
Этот способ сообщить Filament, какие свойства искать на определенных ресурсах, работает во многих случаях, но бывают случаи, когда вы можете захотеть выполнить поиск по нескольким столбцам. Глобальный поиск Filament позволяет нам переопределить метод getGloballySearchableAttributes() для возврата массива столбцов (включая отношения с использованием стандартной точечной нотации Laravel), которые будут искать Filament!
Есть еще несколько вкусностей, которые Filament добавил в функцию глобального поиска, но я оставлю вас проверить страницу документации (ее легко читать) и открыть для себя некоторые из забавных частей самостоятельно!
4. Не только панель администратора
, о которой я упоминал в начале этого поста, но и одна из моих любимых частей о Filament, и одна из причин, по которой я рекламирую его как один из лучших пакетов во всей экосистеме Laravel, заключается в том, что все основные части пакета Admin Panel, о которых мы говорили все это время (таблицы, формы и уведомления) доступны в виде автономных пакетов для использования в наших приложениях стека TALL. Нужен простой способ создания форм в приложении стека TALL? Включите пакет Нитевидных форм. Хотите красиво выглядящие уведомления в режиме реального времени (см. пункт No 2)? Откройте пакет уведомлений о нити в своем проекте!
Создатели и сопровождающие Filament знают, насколько хорошо их программное обеспечение, и они не только объединяют его и раздают бесплатно в своем пакете admin Panel, но они также тратят время на поддержание каждой из этих частей как своего собственного, автономного пакета. Какой подарок сообществу Laravel & Livewire! Поэтому в следующий раз, когда вы создаете приложение TALL и хотите получить некоторые из приятных функций из панели администратора без необходимости включать весь пакет, выберите то, что вам больше всего нравится из трех основных плагинов, и создайте свое приложение из некоторых из лучших пакетов TALL в сообществе.
5. Пользовательские страницы
Последнее, но не менее важное, это моя любимая функция панели администратора Filament: Пользовательские страницы. Существует множество программного обеспечения панели администратора на основе CRUD, и Filament не является исключением. Хлеб с маслом Нити - это их рабочий процесс на основе CRUD. Однако при создании «реальных» приложений всегда есть что-то, что не может быть легко обработано (или вообще) сгенерированными представлениями CRUD, которые предлагает большинство панелей администратора. Будь то страница, которая объединяет несколько ресурсов вместе, или очень специализированное представление, которое не соответствует типичному менталитету «CRUD-for-a-specific-resource», мне не раз приходилось выходить за пределы панели администратора, чтобы достичь этого.
С Помощью Filament я могу создавать любые пользовательские страницы, которые я когда-либо хотел, не покидая панель администратора.
Пользовательские страницы Filament бывают двух видов: ресурсные и общие. Настраиваемые страницы на основе ресурсов добавляются в метод getPages() класса Resource так же, как добавляются страницы List, Create, View и Edit. Эти страницы, как правило, лучше всего подходят для рабочих процессов и вариантов использования, которые соответствуют только определенному ресурсу, но немного выходят за рамки обычных страниц CRUD.
Более интересными страницами (для меня) являются общие пользовательские страницы. Эти страницы являются просто полностраничными компонентами Livewire, со всеми функциями и возможностями Livewire, предоставленными вам, разработчику. Создать одну из этих страниц так же просто, как использовать Artisan (php artisan make: filament-page YourPage), и как только у вас есть файлы перед вами, вы можете написать любой код TALL-стека, который вам нужен. Поговорите о настраиваемости!
Еще не в восторге?
Я знаю, что я есть.
Эти пять функций едва царапают поверхность золотой жилы функциональности, которую сопровождающие нити вложили в этот пакет. Даже просто написав о них, я взволнован тем, чтобы пойти и реализовать их и глубже погрузиться в каждый из них в моих проектах Filament! Но что ВЫ думаете? Пробовали ли вы какие-либо из этих функций в своих приложениях Filament? Есть ли какие-то недооцененные особенности Нити, которые, как вы думаете, я пропустил? Свяжитесь со мной по Twitter или Mastodon и дайте мне знать, что вы думаете!
