Первый взгляд на MoonShine

Меня зовут Данил Щуцкий, я автор проекта CutCode. В этой статье я хотел рассказать вам о MoonShine — панели для администрирования для ваших проектов на Laravel.

Над MoonShine я работаю с участниками комьюнити CutCode. Это open‑source проект, основная задача которого — сделать админ‑панель максимально простую (для начинающих разработчиков) и в тоже время функциональную и кастомизируемую (для опытных).

На мой взгляд, для новичков очень непросто освоить другие, уже набравшие популярность панели администрирования, и дать им инструмент с невысоким порогом вхождения по знаниям. В то же время для бывалых разработчиков архитектура MoonShine позволяет создавать очень функциональные вещи.

В качестве стека был выбран TAL (Tailwindcss, Alpine.js, Laravel), на мой взгляд и функционально и перспективно.

На момент написания статьи актуальная версия MoonShine 1.62. Для работы MoonShine необходимо:

php >= 8.0
laravel >= 9.0

Для комфортного применения MoonShine написана документация, а также снят подробный видеогайд.

Расскажу и покажу что из себя представляет MoonShine

После установки админ-панели Вас встретит страница авторизации:

Попадаем внутрь и пробежимся вкратце по функционалу.

Так выглядит раздел со стандартным CRUD:

Фильтры и декорации

Для различных случаев создано много возможностей для фильтрации данных.

Для любителей кастомизации — декорации, сервис Heroicons, UI компоненты, бейджи и куча других фишек.

На форму для удобства можно добавить вкладки и сгруппировать поля:

use MoonShine\Decorations\Block; use MoonShine\Decorations\Tabs; use MoonShine\Decorations\Tab; use MoonShine\Fields\Text;  //...  public function fields(): array {    return [        Block::make('Основное', [            Tabs::make([                Tab::make('Seo', [                    Text::make('Seo title')                        ->fieldContainer(false),                    //...                ]),                Tab::make('Categories', [                    //...                ])            ])        ]),    ]; } //...

Сетка с колонками

use MoonShine\Decorations\Column;  //... public function fields(): array {    return [        Grid::make([            Column::make([                Block::make('Main information', [                    // Fields here                ])            ])->columnSpan(6), // 6 из 12 - половина экрана             Column::make([                Block::make('Contact information', [                    // Fields here                ])            ])->columnSpan(6), // 6 из 12 - половина экрана        ])    ]; } //...

Создание дашбордов

Для графического оформления главной страницы админ панели создано несколько инструментов.

Отобразить в виде прогресса достижения цели

namespace MoonShine\Resources; use MoonShine\Metrics\ValueMetric;  class PostResource extends Resource {    //...     public function metrics(): array    {        return [            ValueMetric::make('Open tasks')                ->value(Task::opened()->count())                ->progress(200) // Конечная цель        ];    }    //... }

Нарисовать график

namespace MoonShine\Resources; use MoonShine\Metrics\LineChartMetric;  class PostResource extends Resource {    //...     public function metrics(): array    {        return [            LineChartMetric::make('Orders')                ->line([                    'Profit' => Order::query()                        ->selectRaw('SUM(price) as sum, DATE_FORMAT(created_at, "%d.%m.%Y") as date')                        ->groupBy('date')                        ->pluck('sum','date')                        ->toArray(),                    'Avg' => Order::query()                        ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')                        ->groupBy('date')                        ->pluck('avg','date')                        ->toArray()                ],[                    'red', 'blue'                ])        ];    }    //... }

Поиск по админ панели

Для организации глобального поиска в MoonShine можно воспользоваться пакетом Algolia search for MoonShine

Данный пакет использует поисковый движок Algolia, который учитывает контекст и тип запроса, возможные опечатки, синонимы и словоформы, ввод запроса на разных языках и многое другое.