Cutcode 12 сен 2023 в 19:26

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

3 мин

5.9K

Обзор

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