Filament 被低估的5個特性

Marden發表於2023-02-28

1.簡單的圖表生成

在 Laravel 上使用後臺管理皮膚多年中,構建圖表成了我最頻繁使用的需求之一。資料會影響企業的決策過程,能夠以人類可理解的方式檢視資料有助於使用者快速做出明智的決策。

值得慶幸的是,在過去幾年中,隨著圖表庫的引入,建立圖表變得越來越容易。然而,要使用這些包,您仍然需要安裝和配置它們,為它們設定樣式,然後將所有資料推送到其中,以便它們能夠正確顯示。然而,如果您使用的是Filament,現在有一種更簡單的方法!

Filament允許您透過幾個預構建和可擴充套件的Chart小部件(Widget)類,使用Chart.js庫快速輕鬆地生成圖表。我個人最喜歡的一些是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',
            ],
        ];
    }
}

一旦完成了chart外掛的構建,您就可以在專案中的儀表盤上使用它了!

為系統構建大量圖表和圖形能為你節省大量時間,不過透過整合一個有趣的包: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堆疊程式碼。

Filament 中文文件

本作品採用《CC 協議》,轉載必須註明作者和本文連結
Laravel Filament 中文站站長

相關文章