编程

Filament 被低估的 5 个特性

1324 2023-03-16 18:12:13

1.简单的图表生成

在 Laravel 上使用后台管理面板多年中,构建图表成了我最频繁使用的需求之一。数据会影响企业的决策过程,能够以人类可理解的方式查看数据有助于用户快速做出明智的决策。

值得庆幸的是,在过去几年中,随着图表库的引入,创建图表变得越来越容易。然而,要使用这些包,您仍然需要安装和配置它们,为它们设置样式,然后将所有数据推送到其中,以便它们能够正确显示。然而,如果你使用的是 Filament,现在有一种更简单的方法!

Filament 允许你通过几个预构建和可扩展的 Chart 小部件(Widget)类,使用 Chart.js库快速轻松地生成图表。我个人最喜欢的一些是LineChartWidgetBarChartWidgetDoughnutChartWidget!这很简单,只需创建一个新的 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',
            ],
        ];
    }
}

一旦构建了chart widget,您就可以在项目中的仪表盘上使用它了!

为系统构建大量图表和图形将节省大量时间,但 Filament 通过集成一个有趣的包:flowframe/laravel-trends 包,我们还能更进一步。此软件包允许你使用您熟悉和喜爱的 Elquent 语法从模型中创建数据趋势!例如,上述代码可以改写为:

<?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 的强力支持,您可以创建强大的、广泛的查询来收集数据。

2.实时通知

通知是大多数现代 web 应用的主要内容。以某种形式,它们帮助提醒用户系统、帐户或数据中发生的重要事件。因为它们是任何应用的重要组成部分,所以 Filament 维护人员已经竭尽全力创建了一个健壮且易于使用的通知包,并在 Admin Panel 后台管理面板中使用。

Filament 通知的创建非常简单。在 Filament 代码的任何位置中,你都可以使用 Notification 对象的 fluent API(类似于 Elquent,如果你不熟悉术语 “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 还是应用的任何其他部分。唯一的区别是,我们需要给 Notification 类一个 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 通知系统后,我们可以在电子邮件、短信等其他格式中使用相同的通知。即使我们只用这个 Laravel 通知类来发送 Filament 通知,我们仍然可以为该通知设置一个专用类,将该类与应用程序的其他通知置于相同(或类似)的位置。

如果创建整个类不是你的速度,那么 Filament 还提供了一个流畅的 API 来广播通知,其方式与我们最初的同步 Filament 通知代码非常相似。选择你最喜欢的,使用适合你的项目和用例的!

如果创建整个类不是很快,那么 Filament 还提供了一个 fluent API 方式来广播通知,其方式与我们最初的同步 Filament 通知代码非常相似。选择你最喜欢的,使用适合你的项目和用例的方式!

3. 原生全局搜索

几乎每个带有 Admin Panel 后台面板的项目最终都需要一种快速排序系统中所有数据的方法。有些人可能会说,一旦你需要在应用程序中进行全局搜索,你就需要更新你的 UI/UX,但即使在具有无可挑剔、可用的用户界面的项目中,全局搜索栏也可以成为一个有用的工具,让用户知道自己想要什么,而不用记住要在哪里才能找到它。

构建全局搜索实现可能是一个冗长、耗时的过程。确保您构建一个性能卓越、用户友好的选项需要一点专业知识才能正确实现。值得庆幸的是,Filament 在其后台管理面板中提供了大量的全局搜索功能,这为我们的开发人员减少了很多负担。基本上,只需在相应 Resource 类中添加一个protected static ?string $recordTitleAttribute 就能在为特定资源上加上全局搜索功能,这个 title 属性告诉 Filament ,当用户尝试全局搜索时,要搜索的是资源的指定属性(也称为列)。例如,将用户资源 UserResource$recordTitleAttribute 设置为 last_name,将使得 Filament 将搜索字符串与系统中所有用户的 last_name 属性进行比较。

这种告诉 Filament 在特定资源上搜索哪些属性的方法在许多情况下都有效,但有时你可能希望 Filament 搜索多个列。Filament 的全局搜索允许我们重写 getGloballySearchableAttributes() 方法,以返回 Filament 将搜索的列数组!

Filament 在全局搜索功能中还添加了一些好东西,但我会让你查看文档页面(很容易阅读),并自己发现一些有趣的东西!

4. 不仅仅是后台面板

我们一直在讨论的管理面板 admin panel 包的所有主要部分(表格、表单和通知)都可以作为独立的包提供,供我们在 TALL 堆栈应用中使用。需要一种在 TALL 堆栈应用中构建表单的简单方法吗?请引入 Filament Forms 包。想要一些好看的实时(见第 2 点)通知吗?请在项目中使用 Filament Notification 包!

Filament 的创建者和维护者知道他们的软件有多好,他们不仅将其打包并在管理面板包中免费提供,而且还花时间将这些部分作为自己的独立包进行维护。这是给 Laravel&Livewire 社区的礼物!因此,下次你在构建一个 TALL 应用时,想要从管理面板中获得一些不错的功能,而不需要包含整个软件包,请从三个核心插件中选择你最喜欢的,并从社区中制作最好的 TALL 软件包中构建你的应用。(注:下一个版本 Filament V3 中将会从后台面板中拆分更多独立包出来)

5. 自定义页面

另一个我最喜欢的 Filament 后台面板的特性是:自定义页面。

有很多基于 CRUD 的管理面板软件,Filament 也不例外。Filament 主要依靠的是基于 CRUD 的工作流程。然而,在构建“现实生活”应用程序时,管理面板生成的 CRUD 视图往往无法轻松(或根本无法)处理某些问题。无论是将多个资源组装在一起的页面,还是与典型的 “CRUD-for-a-specific-resources” 不符的非常专业的视图,我都不止一次不得不突破管理面板的界限来实现这一点。

使用 Filament,我可以创建任何我想要的自定义页面,而无需离开后台管理面板。

Filament 的自定义页面有两种风格:基于资源的和通用型。基于资源的自定义页面被添加到 Resource 类的 getPages() 方法中,与添加 List、Create、View 和 Edit 页面的方式相同。这些页面通常最适合仅对应于特定资源的工作流和用例,但稍微超出了常规 CRUD 页面。

对我来说,更有趣的页面是通用自定义页面。这些页面仅仅是完整的 Livewire 组件,Livewire 的所有特性和功能都向开发人员展示。创建其中一个页面就像使用 Artisan(php artisan make:filament-page YourPage)一样简单,一旦您面前有了文件,就可以编写所需的任何 TALL 堆栈代码。