Strapi предоставляет отличные возможности, но не всегда штатного функционала хватает для выполнения необходимых задач. Для этого на помощь приходят плагины и расширения. Но и их может быть недостаточно, поэтому приходится разрабатывать собственное решение.
Если вы хотите создать отдельную страницу в административной панели с новым функционалом, этот материал будет полезен — на примере из практики рассмотрим, как создать плагин.
Все нижеописанное разрабатывалось на Strapi v4.5.0.
Создание плагина:
- В корне проекта выполняем команду npm run strapi generate или yarn run strapi generate.
- Выбираем plugin
- Указываем имя в стиле kebab-case
- Выбираем язык JavaScript или TypeScript
- Strapi создаст всю необходимую структуру для frontend и backend
- Создаем файл конфигурации плагинов, если его еще нет, ./config/plugins.js или ./config/plugins.ts, в зависимости от выбранного ранее языка
- В нем подключаем наш плагин, указываем его имя и путь к папке с ним.
Структура
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
Логика у нас будет такая:
- Мы отправляем запрос на получение json.
- Затем мы отправляем полученный json и получаем готовый html
- Затем создаем новый отчет соответствующего типа и привязываем к нему полученный файл.
Рассмотрим самые базовые вещи. А именно роутинг, контроллеры и сервисы.
Роутинг
Переходим в папку с роутами:
Тут мы описываем API, указываем метод запроса, путь, обработчик, т.е. контроллер и конфигурацию.
Я создал 3 роута, каждый отвечает за получение отчета соответствующего типа. В качестве обработчика каждому роуту указал соответствующий метод контроллера reportsController. Обработчики, т.е. контроллеры, указываются в формате: название контроллера.метод
Контроллеры
Теперь переходим в папку с контроллерами:
Контроллеры импортируются в корневой файл index.js и экспортируются из него.
Здесь мы описываем все методы, которые находятся в нашем контроллере. Каждый метод в качестве аргумента получает контекст (ctx), в котором находятся объекты response и request. Здесь под капотом используется библиотека koa.js
Также каждый контроллер получает контейнер Strapi, который предоставляет доступ к широкому набору полезных функций. Здесь мы можем обратиться к нашему плагину и его сервисам, и вызвать нужные методы.
В данном случае я добавил три метода, каждый возвращает код html страницы для каждого из видов отчетов.
Я деструктурирую тело запроса, достаю нужные мне данные и передаю их в методы сервисов.
Сервисы
Переходим в папку с сервисами:
Сервисы импортируются в корневой файл index.js и так же экспортируются из него.
Здесь мы описываем повторяющуюся логику, которую будут использовать наши контроллеры или другие сервисы. Каждый сервис так же в качестве аргумента получает контейнер strapi, который мы можем использовать, чтобы получить доступ к другим контроллерам или сервисам.
В данном сервисе находятся методы, которые получают json для формирования отчета соответствующего типа:
В данном сервисе находятся методы, которые получают код готовой html страницы с отчетом соответствующего типа:
Итог
С помощью плагинов в Strapi довольно легко можно расширить функционал административной панели. Это поможет решать задачи, выходящие за рамки штатного функционала HeadlessCMS, что дает большую гибкость в развитии проекта и открывает новые возможности.
