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

Привет поклонники Laravel!

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

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

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

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

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

php >=8.0

laravel >= 9.0

Для комфортного применения 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, который учитывает контекст и тип запроса, возможные опечатки, синонимы и словоформы, ввод запроса на разных языках и многое другое.

для работы с правами доступа используется Laravel policy
центр уведомлений в который можно настроить свои события
для упрощения процесса аутентификации Laravel Socialite
локализация
кастомные поля - для тех случаев, когда стандартные поля не справляются

Для быстрого добавления функционала разработчиками создано уже 15 пакетов, дополняющих возможности MoonShine.

Попробуйте MoonShine - возможно именно эта админ-панель Вам понравится, делали для своих).

Документация - https://moonshine-laravel.com/

Документация - https://moonshine-laravel.com/docs

GitHub - https://github.com/moonshine-software/moonshine

Чат в Telegram - https://t.me/laravel_chat/24568

Tips & Tricks - https://cutcode.dev/articles/moonshine-tips-tricks

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

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

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

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

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

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

И еще несколько особенностей MoonShine:

Дополнения