Создаем плагин для административной панели Strapi | Блог Work Solutions
Создаем плагин для административной панели Strapi
ГлавнаяБлогРазработчикамСоздаем плагин для административной панели Strapi
Разработчикам14 марта 2023

Создаем плагин для административной панели Strapi

Евгений ЖиленкоФронтенд-разработчик

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

Если вы хотите создать отдельную страницу в административной панели с новым функционалом, этот материал будет полезен — на примере из практики рассмотрим, как создать плагин. 
Все нижеописанное разрабатывалось на Strapi v4.5.0. 

Создание плагина:

  1. В корне проекта выполняем команду npm run strapi generate или yarn run strapi generate.
  2. Выбираем plugin
  3. Указываем имя в стиле kebab-case
  4. Выбираем язык JavaScript или TypeScript
  5. Strapi создаст всю необходимую структуру для frontend и backend
  6. Создаем файл конфигурации плагинов, если его еще нет, ./config/plugins.js или ./config/plugins.ts, в зависимости от выбранного ранее языка
  7. В нем подключаем наш плагин, указываем его имя и путь к папке с ним.
    Изображение статьи

Структура

Strapi создает очень понятную и прозрачную структуру. 

В папке admin находится весь фронт нашего плагина. Компоненты в components, главная страница в pages/HomePage, файлы переводов в  translations и т.д.

Изображение статьи

В папке server находится вся серверная часть плагина. Конфигурация в config, контроллеры в controllers, роуты в routes, сервисы в  services и т.д.

Изображение статьи

Сборка плагина

Если при генерации мы в качестве языка выбрали TypeScript, то идем в папку с плагином и выполняем там команды npm i, затем npm run build, чтобы собрать его. Если мы что-то меняем в серверной части, то в папке плагина выполняем команду npm run build, чтобы скомпилировать наши ts файлы в js и поместить их в папку dist. 
Теперь можно возвращаться в корневую директорию проекта и запускать приложение командой strapi develop --watch-admin. С флагом --watch-admin у нас будет происходить автоматический перезапуск сервера, если мы будем вносить какие-то изменения в код. Помним, что нужно пересобрать плагин командой npm run build, если мы используем TypeScript. Теперь у нас в административной панели появится пункт с нашим плагином. Если мы туда зайдем, то обнаружим заглушку.

Frontend

В папке с нашим плагином есть папка admin/src. Тут лежит фронтенд административной панели.

Нас интересует папка /pages/HomePage.

Изображение статьи

Тут лежит главная страница нашего плагина.

Я создал компоненты для каждого вида отчетов и поместил их в папку components.

Изображение статьи

 Для создания компонентов я использовал встроенные компоненты, которые являются частью дизайн-системы Strapi. 

Изображение статьи

Их Storybook можно посмотреть здесь: https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-components-accordion--base

Для базовых задач подходит хорошо. Я сверстал компоненты, которые состоят из полей ввода и кнопки, отвечающей за генерацию. Связал поля ввода с useState.


Изображение статьи
 

Далее создал API для запросов на наш сервер Strapi. 

Методы getWeekReport, getMonthReport, getQuarterReport получают готовые html страницы отчетов.

Методы addWeekReport, addMontgReport, addQuarterReport создают новый отчет соответствующего типа, добавляют к нему файл html с отчетом и добавляют в административную панель.
Изображение статьи

Backend

Логика у нас будет такая:

  1. Мы отправляем запрос на получение json.
  2. Затем мы отправляем полученный json и получаем готовый html
  3. Затем создаем новый отчет соответствующего типа и привязываем к нему полученный файл.

Рассмотрим самые базовые вещи. А именно роутинг, контроллеры и сервисы.

Роутинг

Переходим в папку с роутами:

Изображение статьи

Тут мы описываем API, указываем метод запроса, путь, обработчик, т.е. контроллер и конфигурацию.

Я создал 3 роута, каждый отвечает за получение отчета соответствующего типа. В качестве обработчика каждому роуту указал соответствующий метод контроллера reportsController. Обработчики, т.е. контроллеры,  указываются в формате: название контроллера.метод

Контроллеры

Теперь переходим в папку с контроллерами:

Изображение статьи

Контроллеры импортируются в корневой файл index.js и экспортируются из него.
Изображение статьи

Здесь мы описываем все методы, которые находятся в нашем контроллере. Каждый метод в качестве аргумента получает контекст (ctx), в котором находятся объекты response и request. Здесь под капотом используется библиотека koa.js 

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

В данном случае я добавил три метода, каждый возвращает код html страницы  для каждого из видов отчетов.

Я деструктурирую тело запроса, достаю нужные мне данные и передаю их в методы сервисов. 

Сервисы

Переходим в папку с сервисами:

Изображение статьи

Сервисы импортируются в корневой файл index.js и так же экспортируются из него.

Здесь мы описываем повторяющуюся логику, которую будут использовать наши контроллеры или другие сервисы. Каждый сервис так же в качестве аргумента получает контейнер strapi, который мы можем использовать, чтобы получить доступ к другим контроллерам или сервисам.

В данном сервисе находятся методы, которые получают json для формирования отчета соответствующего типа:

Изображение статьи
В данном сервисе находятся методы, которые получают код готовой html страницы с отчетом соответствующего типа:
Изображение статьи

Итог

С помощью плагинов в Strapi довольно легко можно расширить функционал административной панели. Это поможет решать задачи, выходящие за рамки штатного функционала HeadlessCMS, что дает большую гибкость в развитии проекта и открывает новые возможности.

1.8к
204

Другие статьи

Ко всем статьям
Фоновое изображение: четверть круга закрыват часть круга

Интересные статьи и кейсы
от Work Solutions

Нажимая кнопку «Подписаться», я даю согласие на обработку персональных данных

Спасибо за подписку!

Фоновое изображение: верхний полукруг