Ludzie, którzy spędzili trochę czasu w moim strumieniu < href="https://twitch.tv/alexandersix_">Twitch, wiedzą, że naprawdę, NAPRAWDĘ uwielbiam jeden konkretny pakiet Laravel: Filament. Jest to niezwykle potężna grupa pakietów, które pomagają budować wspólne funkcje w aplikacjach TALL-stack. Używałem każdego z pakietów osobno, ale moim najczęściej używanym pakietem jest ten, który łączy je wszystkie: Admin Panel.
Podczas mojego korzystania z filamentu, po początkowym szoku, jak łatwe w użyciu były podstawowe elementy funkcjonalności, zauważyłem, że istnieje kilka funkcji, które, choć nie spędzają najwięcej czasu w świetle reflektorów, są niesamowicie dobrze dopracowane. Te funkcje nie są dokładnie wstrząsające dla wielu ludzi, ale jeśli wpadniesz na sytuację, w której potrzebujesz jednego z nich, wszystko jest o wiele, wiele łatwiejsze.
Przejdźmy od razu: oto moje pięć najbardziej niedocenianych funkcji Filament.
1. Proste generowanie
wykresów Wykresy, wykresy i dane, o rany!
Po latach pracy nad aplikacjami Laravel, które korzystają z paneli administracyjnych, budowanie wykresów i wykresów z danych aplikacji znajduje się na samym szczycie mojej listy najczęściej żądanych funkcji. Rozumiem jednak dlaczego – dane informują o procesie decyzyjnym firmy, a możliwość zobaczenia danych w sposób zrozumiały dla człowieka pomaga użytkownikom podejmować szybkie, świadome decyzje na pierwszy rzut oka.
Na szczęście w ciągu ostatnich kilku lat tworzenie wykresów i wykresów stało się coraz łatwiejsze wraz z wprowadzeniem bibliotek wykresów. Jednak aby korzystać z tych pakietów, nadal trzeba je zainstalować i skonfigurować, skonfigurować dla nich styl, a następnie wypchnąć do nich wszystkie dane, aby mogły być poprawnie wyświetlane. Jeśli jednak używasz filamentu, jest teraz łatwiejszy sposób!
Filament umożliwia szybkie i łatwe generowanie wykresów za pomocą biblioteki < href="https://www.chartjs.org/>Chart.js za pomocą kilku wstępnie wbudowanych i rozszerzalnych klas widżetów wykresów. Niektóre z moich ulubionych to LineChartWidget, BarChartWidget i zawsze zabawny DoughChartWidget! Wystarczy utworzyć nową klasę widżetu, rozszerzyć widżet wykresu, którego chcesz użyć, i nadać nowej klasie nagłówek i niektóre dane. Na przykład:
<?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',
],
];
}
}Po utworzeniu widżetu wykresu możesz go używać na dowolnych pulpitach nawigacyjnych w swoim projekcie!
Jest to ogromna oszczędność czasu, jeśli budujesz wiele wykresów i wykresów dla swojego systemu, ale Filament idzie o krok dalej, integrując interesujący pakiet: pakiet flowframe / laravel-trend. Ten pakiet pozwala tworzyć trendy danych z modeli przy użyciu składni Eloquent, którą znasz i kochasz! Na przykład powyższy kod można zapisać jako:
<?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),
];
}
}Powyższy przykład jest prosty, ale ponieważ laravel-trends jest tak mocno wspierany przez Eloquent, możesz tworzyć potężne, rozbudowane zapytania do zbierania danych. Aby uzyskać więcej informacji na temat pakietu laravel-trends, sprawdź dokumentację
2. Powiadomienia w czasie rzeczywistym
Powiadomienia są podstawą większości nowoczesnych aplikacji internetowych. W takiej czy innej formie pomagają ostrzec użytkownika o ważnych zdarzeniach zachodzących w systemie, jego koncie lub danych. Ponieważ są one tak ważną częścią każdej aplikacji, opiekunowie Filamentu zrobili wszystko, aby stworzyć solidny i łatwy w użyciu pakiet powiadomień, który jest używany w panelu administracyjnym.
Powiadomienia filamentowe są niezwykle proste do utworzenia. Gdziekolwiek chcesz uruchomić powiadomienie w kodzie filamentu, możesz użyć płynnego interfejsu API obiektu Powiadomienia (podobnego do Eloquent, jeśli nie znasz terminu "płynny interfejs API"), aby zbudować i wysłać powiadomienie do użytkownika. W gruncie rzeczy wystrzelenie powiadomienia w Filament wygląda następująco:
<?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();
}
}Trudno byłoby ci uzyskać prostsze niż to!
Jest jednak inny aspekt, który podnosi powiadomienia Filament ze świetnego pakietu do niezbędnego pakietu, a to jest możliwość wysyłania powiadomień w czasie rzeczywistym.
Zazwyczaj bez powiadomień w czasie rzeczywistym, jeśli użytkownik chce zaktualizować użytkownika po zakończeniu przetwarzania długotrwałego zadania (takiego jak zadanie w kolejce), konieczne jest ciągłe sondowanie punktu końcowego w tle, który ostatecznie informuje o zakończeniu zadania. Jest to z pewnością realna metoda robienia tego, ale w zależności od przypadku użycia może to być duże obciążenie dla serwera, w którym setki lub tysiące użytkowników odpytuje ten sam punkt końcowy w kółko, czekając na zakończenie swoich zadań. Jeśli znajdziesz się w takiej sytuacji, pakiet Filament Notifications natywnie integruje się z Laravel Echo, biblioteką JavaScript, która pozwala subskrybować kanały i słuchać wydarzeń nadawanych przez serwer. Dzięki tej integracji (a także pewnego rodzaju implementacji websockets zainstalowanej na serwerze, np. Pusher), możemy zaktualizować poprzedni kod powiadomienia, aby emitować powiadomienie w czasie rzeczywistym, zamiast wysyłać je bezpośrednio po podjęciu działania.
Filament daje nam kilka różnych sposobów wysyłania powiadomień w czasie rzeczywistym, ale moją preferowaną opcją jest użycie klasy powiadomień Laravel, tak jak wszystkie inne powiadomienia w moim systemie. W ten sposób wszystkie moje powiadomienia są pisane podobnie, niezależnie od tego, czy dotyczą Filamentu, czy jakiejkolwiek innej części aplikacji. Jedyna różnica polega na tym, że będziemy musieli nadać naszej klasie powiadomień metodę toBroadcast, która uruchamia powiadomienie Filament, w następujący sposób:
<?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();
}
}Budując nasz kod powiadomienia Filament w powiadomienie Laravel, otwieramy możliwość korzystania z tego samego powiadomienia w innych formatach, takich jak e-mail, SMS itp. Nawet jeśli używamy tej klasy powiadomień Laravel tylko do wysyłania naszego powiadomienia Filament, nadal uzyskujemy korzyści z posiadania dedykowanej klasy dla tego powiadomienia, która znajduje się w tej samej (lub podobnej) lokalizacji, co pozostałe nasze powiadomienia dla naszej aplikacji.
Jeśli tworzenie całej klasy nie jest twoją szybkością, Filament zapewnia również płynne API do wysyłania powiadomień w znacznie bardziej podobny sposób do naszego oryginalnego, synchronicznego kodu powiadomień Filament. Wybierz swój ulubiony i użyj tego, co pasuje do Twojego projektu i przypadku użycia!
3. Natywne wyszukiwanie globalne
Prawie każdy projekt z panelem administracyjnym w końcu potrzebuje sposobu na szybkie sortowanie wszystkich danych w systemie. Niektórzy mogą powiedzieć, że gdy potrzebujesz globalnego wyszukiwania w swojej aplikacji, musisz zaktualizować interfejs użytkownika / UX, ale nawet w projektach z nienagannymi, użytecznymi interfejsami użytkownika, globalny pasek wyszukiwania może być przydatnym narzędziem dla użytkowników, którzy dokładnie wiedzą, czego chcą, nie pamiętając, gdzie to znaleźć.
Tworzenie globalnej implementacji wyszukiwania może być żmudnym i czasochłonnym procesem. Upewnienie się, że zbudujesz wydajną i przyjazną dla użytkownika opcję, wymaga przyzwoitej wiedzy, aby zrobić to dobrze. Na szczęście Filament udostępnił znaczącą globalną funkcję wyszukiwania w panelu administracyjnym, która wykonuje wiele ciężkich zadań dla nas, programistów. Na poziomie podstawowym wszystko, czego potrzeba, aby dodać określone zasoby do funkcji wyszukiwania globalnego, to dodać chroniony statyczny $recordTitleAttribute ciągu ? do klasy zasobów. Ten atrybut title informuje Filament, aby przeszukał określoną właściwość (czyli kolumnę) z zasobu, gdy użytkownik próbuje użyć wyszukiwania globalnego. Na przykład ustawienie $recordTitleAttribute zasobu użytkownika na last_name spowoduje, że filament porówna wyszukiwany ciąg z właściwością last_name wszystkich użytkowników w systemie.
Ten sposób informowania Filament, jakie właściwości mają wyszukiwać w określonych zasobach, działa w wielu przypadkach, ale są chwile, kiedy możesz chcieć przeszukiwać filament w wielu kolumnach. Globalne wyszukiwanie filamentu pozwala nam nadpisać metodę getGloballySearchableAttributes() w celu zwrócenia tablicy kolumn (w tym relacji przy użyciu notacji kropkowej standardu Laravela), które będą przeszukiwane przez Filament!
Jest jeszcze kilka gadżetów, które Filament dodał do funkcji wyszukiwania globalnego, ale zostawię cię, abyś sprawdził stronę dokumentacji (jest łatwy do odczytania) i sam odkrył niektóre z zabawnych elementów!
4. Nie tylko panel administracyjny
Wspomniałem o tym na początku tego postu, ale jedną z moich ulubionych części na temat filamentu i jednym z powodów, dla których reklamuję go jako jeden z najlepszych pakietów w całym ekosystemie Laravel, jest to, że wszystkie główne części pakietu panelu administracyjnego, o których mówiliśmy przez cały czas (tabele, formularze i powiadomienia) są dostępne jako samodzielne pakiety do wykorzystania w naszych aplikacjach stosu TALL. Potrzebujesz łatwego sposobu tworzenia formularzy w aplikacji stosu TALL? Dołącz pakiet Filament Forms. Chcesz ładnie wyglądających powiadomień w czasie rzeczywistym (patrz punkt #2)? Pop pakiet powiadomień filamentu w swoim projekcie!
Twórcy i opiekunowie Filament wiedzą, jak dobre jest ich oprogramowanie, i nie tylko pakują je i rozdają za darmo w pakiecie panelu administracyjnego, ale także poświęcają czas na utrzymanie każdej z tych części jako własnego, samodzielnego pakietu. Co za prezent dla społeczności Laravel & Livewire! Więc następnym razem, gdy budujesz aplikację TALL i chcesz korzystać z niektórych fajnych funkcji z panelu administracyjnego bez konieczności dołączania całego pakietu, wybierz to, co lubisz najbardziej z trzech podstawowych wtyczek i zbuduj swoją aplikację z jednych z najlepiej przygotowanych pakietów TALL w społeczności.
5. Strony niestandardowe
Ostatnią, ale z pewnością nie mniej ważną funkcją panelu administracyjnego filamentu: strony niestandardowe. Istnieje wiele oprogramowania panelu administracyjnego opartego na CRUD, a Filament nie jest wyjątkiem. Chlebem powszednim Filamentu jest ich przepływ pracy oparty na CRUD. Jednak podczas tworzenia "prawdziwych" aplikacji zawsze pojawia się coś, czego nie można łatwo (lub wcale) obsłużyć wygenerowanymi widokami CRUD, które oferuje większość paneli administracyjnych. Niezależnie od tego, czy jest to strona, która łączy wiele zasobów, czy bardzo wyspecjalizowany widok, który nie odpowiada typowej mentalności "CRUD-for-a-specific-resource", więcej niż raz musiałem wykraczać poza granice panelu administracyjnego, aby to osiągnąć.
Dzięki Filamentowi mogę tworzyć dowolne niestandardowe strony, bez konieczności opuszczania panelu administracyjnego.
Niestandardowe strony filamentu są dostępne w dwóch smakach: oparte na zasobach i ogólne. Strony niestandardowe oparte na zasobach są dodawane do metody getPages() w klasie Resource w taki sam sposób, w jaki dodawane są strony List, Create, View i Edit. Te strony zazwyczaj najlepiej nadają się do przepływów pracy i przypadków użycia, które odpowiadają tylko określonemu zasobowi, ale pasują nieco poza normalnymi stronami CRUD.
Bardziej interesujące strony (dla mnie) to ogólne strony niestandardowe. Te strony są po prostu całostronicowymi komponentami Livewire, ze wszystkimi funkcjami i funkcjonalnościami Livewire udostępnionymi Tobie, programiście. Utworzenie jednej z tych stron jest tak proste, jak użycie Artisan (php artisan make:filament-page YourPage), a gdy masz już pliki przed sobą, możesz napisać dowolny kod TALL-stack, którego potrzebujesz. Porozmawiaj o możliwości dostosowania!
Podekscytowany jeszcze?
Wiem, że jestem.
Te pięć funkcji ledwie zarysowuje powierzchnię kopalni złota funkcjonalności, którą opiekunowie filamentu włożyli w ten pakiet. Już samo pisanie o nich sprawia, że jestem podekscytowany możliwością ich wdrożenia i zanurzenia się w każdym z nich w moich projektach Filament! Ale co o tym sądzisz? Czy wypróbowałeś którąś z tych funkcji w swoich aplikacjach Filament? Czy są jakieś niedoceniane cechy filamentu, które twoim zdaniem przegapiłem? Skontaktuj się ze mną na Twitter lub Mastodon i daj mi znać, co myślisz!
