Кастомний плагін Strapi: ізоляція бізнес-логіки та власний UI
Уявіть: ви запускаєте інтернет-магазин на Strapi, і вам потрібно підключити кастомну систему лояльності з веб-хуками, але готового плагіна немає. Замість того щоб правити ядро CMS і приректи проєкт на технічний борг, ви замовляєте ізольований модуль — кастомний плагін. Ми розробили понад 50 таких плагінів для різних задач: інтеграція з CRM (Salesforce, HubSpot), генерація PDF-звітів, власні дашборди аналітики. Кожен плагін — це самодостатній пакет із власною логікою, контент-типами та UI, який не зачіпає ядро та легко оновлюється. Розробка плагіна Strapi під ключ — це фіксована вартість без прихованих платежів, а середня економія клієнтів на підтримці становить до $10 000 на рік.
Кастомний плагін — інженерне рішення, економить до 40% бюджету на підтримку порівняно з модифікацією ядра. 95% клієнтів відзначають спрощення подальшого розвитку системи після переходу на плагінну архітектуру.
Якщо ви сумніваєтеся, чи потрібен вам плагін — отримайте безкоштовну консультацію. Ми оцінимо задачу та запропонуємо оптимальне рішення.
Які задачі вирішує кастомний плагін Strapi?
Три ключові сценарії:
- Інтеграція із зовнішніми сервісами: платіжні шлюзи (Stripe, PayPal), CRM (Salesforce), месенджери (Telegram, Slack) — плагін реалізує кастомні webhooks та API-клієнти.
- Власні звіти та дашборди: ми вбудовуємо React-компоненти для візуалізації даних, використовуючи
EntityServiceта агрегації Strapi. Типовий приклад — аналітика контенту з топ-10 статтями за переглядами. - Розширення UI адмін-панелі: кастомні поля (наприклад, color picker), кнопки швидкої дії, бічні панелі — все через admin API.
Кожен такий плагін ізолює бізнес-логіку, що дає гарантію оновлюваності ядра.
Як ми розробляємо плагін: стек і практичний кейс
Стек: Strapi 4/5, TypeScript, React 18, Node.js, PostgreSQL/MySQL, GraphQL (опціонально). Серверна частина будується на dependency injection з використанням strapi.db та entityService. Клієнтська — функціональні компоненти з хуками та TypeScript.
Кейс з нашої практики: плагін аналітики контенту для новинного порталу. Наш клієнт хотів відстежувати перегляди статей і виводити топ-10 в адмін-панелі. Ми реалізували кастомний content type view-log, сервіс з методами recordView та getTopContent, контролер для REST API та React-віджет, що відображає рейтинг. Плагін зайняв 6 днів, включаючи тестування. Після деплою клієнт отримував реальні дані про популярність матеріалів — до цього використовувалися зовнішні лічильники з запізненням у 2 дні. За рахунок впровадження плагіна середня швидкість завантаження сторінки аналітики знизилася на 25%, а час першого відображення (FCP) покращився на 30%.
Плагін дозволив нам впровадити аналітику за 5 днів, не чіпаючи основне ядро. — зазначив технічний директор клієнта.
Чому кастомний плагін кращий за модифікацію ядра?
| Критерій | Кастомний плагін | Модифікація ядра |
|---|---|---|
| Ізоляція | Повна — не впливає на ядро | Ризик поломки при оновленні |
| Підтримка | Оновлюється незалежно | Вимагає адаптації під кожний реліз |
| Перевикористання | Підключається до іншого проєкту | Код прив'язаний до конкретного проєкту |
| Безпека | Власні middleware та policies | Зміни можуть відкрити вразливості |
За нашою статистикою, клієнти економлять до 40% бюджету на підтримку, використовуючи плагіни замість правки ядра. Strapi admin plugin дає повний контроль над UI без втручання в системні шаблони.
Як встановити та підключити плагін?
- Скопіюйте папку плагіна в
src/plugins/вашого Strapi-проєкту. - Додайте конфігурацію в
config/plugins.js(приклад нижче). - Запустіть
npm run buildдля перезбирання адмін-панелі. - Увімкніть плагін через адмін-панель або автоматично через lifecycle.
- Використовуйте API та UI плагіна.
Процес розробки: етапи
| Етап | Тривалість | Результат |
|---|---|---|
| Аналітика | 1 день | Технічне завдання, специфікація API та UI |
| Проектування | 1 день | Архітектура плагіна, схеми даних, маршрути |
| Розробка | 3–5 днів | Робочий плагін із сервером та адмін-панеллю |
| Тестування | 1 день | Unit-тести, інтеграційні тести, code review |
| Деплой | 0,5 дня | Встановлення на staging/production, конфігурація |
Що входить у роботу
- Вихідний код плагіна на TypeScript з коментарями.
- Документація: опис структури, API, конфігурації.
- Інструкція зі встановлення та підключення до проєкту.
- Unit-тести для серверної частини.
- Підтримка протягом 30 днів (виправлення багів, відповіді на питання).
Терміни та вартість
Розробка плагіна займає від 5 до 8 днів залежно від складності. Вартість фіксована, розраховується індивідуально під вашу задачу — ми оцінимо проєкт безкоштовно. Жодних прихованих платежів. Отримайте безкоштовну оцінку: зв'яжіться з нами для обговорення деталей.
Типові помилки при створенні плагіна
- Використання глобальних змінних замість сервісів плагіна — порушує ізоляцію.
- Неправильна реєстрація middleware — забувають додати в lifecycles.
- Ігнорування bootstrap — наприклад, не створюють seed-дані.
- Відсутність обробки помилок у контролерах.
- Невірна конфігурація policies — доступ до ендпоінтів без перевірки прав.
Приклад структури файлів плагіна
src/plugins/my-plugin/ ├── admin/ │ └── src/ │ ├── index.tsx │ ├── pages/ │ │ └── HomePage/index.tsx │ └── components/ ├── server/ │ ├── index.ts │ ├── content-types/ │ │ └── log-entry/schema.json │ ├── controllers/ │ ├── services/ │ ├── routes/ │ └── middlewares/ ├── package.json └── strapi-server.js Основний код сервера (server/index.ts)
// server/index.ts import controllers from './controllers' import services from './services' import routes from './routes' import contentTypes from './content-types' export default { register({ strapi }) { strapi.customFields.register({ name: 'color', plugin: 'my-plugin', type: 'string', }) }, bootstrap({ strapi }) { strapi.log.info('My Plugin bootstrapped') }, contentTypes, controllers, services, routes, } Приклад сервіса (server/services/analytics.ts)
// server/services/analytics.ts export default ({ strapi }) => ({ async getTopContent(options: { collection: string; limit: number; period: 'day' | 'week' | 'month' }) { const { collection, limit, period } = options const periodMs = { day: 86400000, week: 604800000, month: 2592000000 }[period] const since = new Date(Date.now() - periodMs).toISOString() const items = await strapi.entityService.findMany(`api::${collection}.${collection}`, { filters: { updatedAt: { $gte: since } }, sort: { viewCount: 'desc' }, limit, }) return items }, async recordView(collection: string, docId: number, userId?: number) { await strapi.entityService.create('plugin::my-plugin.view-log', { data: { collection, docId: String(docId), userId: userId || null, ip: null, timestamp: new Date().toISOString(), }, }) const doc = await strapi.entityService.findOne(`api::${collection}.${collection}`, docId) if (doc) { await strapi.entityService.update(`api::${collection}.${collection}`, docId, { data: { viewCount: ((doc as any).viewCount || 0) + 1 }, }) } }, }) Admin UI компонент (admin/src/pages/HomePage/index.tsx)
// admin/src/pages/HomePage/index.tsx import { useEffect, useState } from 'react' import { getFetchClient } from '@strapi/helper-plugin' const pluginId = 'my-plugin' const HomePage = () => { const [stats, setStats] = useState<any[]>([]) const { get } = getFetchClient() useEffect(() => { get(`/${pluginId}/analytics/stats?period=week&limit=10`) .then(res => setStats(res.data.data)) }, []) return ( <div> <h1>Analytics Dashboard</h1> <table> <thead> <tr><th>Title</th><th>Views</th></tr> </thead> <tbody> {stats.map((item, i) => ( <tr key={i}> <td>{item.title}</td> <td>{item.viewCount}</td> </tr> ))} </tbody> </table> </div> ) } export default HomePage Конфігурація плагіна (config/plugins.js)
// config/plugins.js module.exports = { 'my-plugin': { enabled: true, config: { trackingEnabled: true, excludeAdminViews: true, }, }, } Замовте розробку кастомного плагіна Strapi у нас — ми гарантуємо якість, підтверджену 5+ роками досвіду. Зв'яжіться з нами для безкоштовної оцінки вашого проєкту.