Maîtriser le développement de plugins Strapi : Guide complet pour créer, étendre et personnaliser des plugins pour le backend et le panneau d'administration

Bienvenue, passionnés de Strapi ! Si vous cherchez à élever votre expérience Strapi v4 et étendre ses fonctionnalités, créer et personnaliser des plugins est la voie à suivre. Dans ce guide complet, nous vous guiderons à travers les étapes pour maîtriser le développement de plugins Strapi, vous assurant de créer, étendre et adapter parfaitement les plugins pour le backend et le panneau d'administration. Que vous soyez un développeur Strapi chevronné ou que vous débutiez, lisez la suite pour débloquer le plein potentiel des plugins Strapi.

Introduction

Strapi est un CMS headless open-source qui gagne rapidement en popularité. Sa flexibilité permet aux développeurs de créer des plugins personnalisés, améliorant à la fois la logique backend et les aspects visuels du panneau d'administration. Ce guide est idéal pour ceux ayant une compréhension intermédiaire de Strapi.

Création d'un plugin

Strapi simplifie la création de plugins avec son CLI robuste. Plongeons dans le processus étape par étape.

Étape 1 : Générer le plugin

D'abord, naviguez vers la racine de votre projet et exécutez la commande suivante :

yarn strapi generate
// OU
npm run strapi generate

Sélectionnez "plugin" dans la liste et fournissez un nom pour votre plugin en kebab-case (par exemple, my-plugin). Choisissez entre JavaScript ou TypeScript.

Étape 2 : Configurer le plugin

Créez ou mettez à jour votre fichier de configuration des plugins :

JavaScript

// ./config/plugins.js
module.exports = {
  // ...
  'my-plugin': {
    enabled: true,
    resolve: './src/plugins/my-plugin' // path to plugin folder
  },
  // ...
}

TypeScript

// ./config/plugins.ts
export default {
  // ...
  'my-plugin': {
    enabled: true,
    resolve: './src/plugins/my-plugin' // path to plugin folder
  },
  // ...
}

Exécutez npm install ou yarn dans le répertoire de votre plugin, puis construisez le plugin :

yarn build
// OU
npm run build

Enfin, construisez et démarrez le projet Strapi :

yarn build && yarn develop
// OU
npm run build && npm run develop

Extension des fonctionnalités du plugin

Maintenant que le squelette de votre plugin est configuré, il est temps d'ajouter des fonctionnalités personnalisées.

Personnalisations côté serveur

Créez un fichier strapi-server.js à la racine du dossier de votre package de plugin pour utiliser l'API Server.

Fonction de cycle de vie Register

module.exports = () => ({
  register({ strapi }) {
    // Custom registration logic here
    console.log("My Plugin has been registered.");
  },
});

Personnalisations du panneau d'administration

L'API du panneau d'administration permet d'intégrer l'interface utilisateur de votre plugin personnalisé dans le panneau d'administration basé sur React de Strapi. Créez un fichier strapi-admin.js ou admin/src/index.js pour l'API du panneau d'administration.

Enregistrement du plugin dans le panneau d'administration

import pluginId from './pluginId';
 
export default {
  register(app) {
    app.registerPlugin({
      id: pluginId,
      name: 'My Plugin',
      isReady: false,
      initializer: () => app.setPrefs(() => ({ app: 'my plugin' })),
    });
  },
};

Ajout de fonctionnalités

Vous pouvez ajouter des fonctionnalités plus complètes en utilisant les APIs prédéfinies pour les types de contenu, routes, contrôleurs, services, politiques et middlewares.

Ajout d'une route

// ./server/routes/index.js
module.exports = [
  {
    method: 'GET',
    path: '/hello',
    handler: 'myController.sayHello',
    config: {
      policies: [],
    },
  },
];

Création du contrôleur

// ./server/controllers/myController.js
module.exports = {
  async sayHello(ctx) {
    ctx.body = 'Hello, World!';
  }
};

Ajout d'un service

// ./server/services/myService.js
module.exports = () => ({
  getGreeting() {
    return 'Hello from Service';
  },
});

Personnalisations avancées

La flexibilité de Strapi brille avec des personnalisations plus complexes comme les champs personnalisés, les tâches cron et les interventions sur les hooks de cycle de vie.

Ajout d'une tâche cron

// ./server/strapi-server.js
module.exports = () => ({
  bootstrap({ strapi }) {
    strapi.cron.add({
      // Runs every minute
      myJob: {
        task: async () => {
          console.log("Running cron job every minute");
        },
        options: {
          rule: '* * * * *',
        },
      },
    });
  },
});

Zones d'injection du panneau d'administration

Vous pouvez injecter des composants dans les vues existantes du panneau d'administration Strapi.

import { InjectionZone } from '@strapi/helper-plugin';
 
export default {
  bootstrap(app) {
    app.injectContentManagerComponent('editView', 'right-links', {
      name: 'custom-component',
      Component: () => <div>Custom Component</div>,
    });
  },
};

Conclusion

Félicitations ! Vous avez appris comment créer, étendre et personnaliser les plugins Strapi v4 pour le backend et le panneau d'administration. La flexibilité et la puissance des plugins Strapi vous permettent d'adapter votre projet Strapi à tous les besoins métier.

Restez à l'écoute pour des tutoriels plus avancés et explorez le vaste monde du développement Strapi. Pour plus d'informations et une documentation détaillée, visitez la documentation officielle sur le développement de plugins Strapi.

Source : Documentation Strapi : Plugins Development.