Strapi : Comment installer Strapi et créer un nouveau plugin ?

Plongeons dans les concepts principaux de Strapi

Structure des dossiers des plugins :

Regardons à la racine du dossier plugin. Vous y trouverez 2 fichiers :

• strapi-admin.js => point d'entrée pour "Admin panel API".
• strapi-server.js => point d'entrée pour le "Server API".
• Dossier admin : contient la partie frontend du plugin, c'est l'interface utilisateur React que vous voyez lorsque vous cliquez sur votre plugin dans le menu de gauche du site d'administration de Strapi. À l'intérieur, vous pouvez définir des composants, des pages et tout ce dont vous avez besoin pour créer une interface utilisateur de plugin incroyable.
• Dossier server : contient la partie backend de votre plugin. Types de contenu spécifiques, route, contrôleur, service, etc.

Le "Admin panel API" est la personnalisation de la partie front-end, tandis que le "Server API" est la personnalisation de la partie back-end.

Souvent, vous avez besoin des deux parties pour créer une expérience de plugin complète, mais vous pouvez également créer un plugin avec une seule API, cela dépend de vos besoins.

Qu'est-ce que "Content-Type" ou les "Documents" ?

Allez sur votre site administrateur Strapi et dans le menu de gauche ouvrez le module "Content-Type Builder".

Vous y trouverez 3 catégories :

1. Single Content-Type: Type de contenu pour un document unique, par exemple, une page simple ou le modèle d'une page.
2. Collection Content-Type: Créer un type de contenu pour générer une collection de documents, par exemple une liste de produits ou une liste d'articles de blog.
3. Components: Comme indiqué par son nom, les composants sont de petites unités de type de contenu qui peuvent être partagées dans plusieurs types uniques ou de collection.

Lorsque vous utilisez le "Content-Type builder" et créez un type unique ou une collection, vous définissez un modèle structurel pour organiser un ensemble de données : le type de contenu.

Lorsque vous créez un document qui utilise un type de contenu unique ou une collection, vous instanciez le modèle du type de contenu sous forme d'objet : le document.

En résumé, un document est une instance d'un type de contenu, de la même manière qu'un objet est l'instance d'une classe.

Installation

Pour ce projet, nous allons utiliser un modèle de projet Strapi, car Strapi propose un excellent modèle de projet et c'est une bonne base pour commencer.

Allez sur https://github.com/strapi/foodadvisor et téléchargez le fichier Zip ou clonez le projet.

Installez-le ou décompressez-le. Dans votre dossier racine, vous avez 2 dossiers :

• api (application basée sur Strapi),
• client (application basée sur NextJS).

Ouvrez un terminal dans le dossier "api" et utilisez ces commandes :

yarn && yarn seed && yarn develop

Explications :

• yarn : installe les dépendances du projet
• yarn seed : installe un ensemble de données utiles dans la base de données Strapi (dans notre cas : base de données Sqlite)
• yarn develop : construit le site d'administration de Strapi et le lance dans votre navigateur par défaut.

Une fois terminé, votre navigateur par défaut ouvrira le site d'administration de Strapi. Remplissez le formulaire d'administration pour compléter l'inscription de l'administrateur. Vous serez ensuite redirigé vers la page principale du site d'administration de Strapi.

/*************************** DÉBUT DES CONSEILS ! ***********************/

Pour suivre en temps réel le développement

Allez dans "api/package.json"

Dans la section scripts, ajoutez cette ligne :

"admin": "strapi develop - watch-admin"

Lancez votre site d'administration Strapi avec la commande suivante :

yarn admin

Désormais, à chaque mise à jour de votre code, le site d'administration Strapi se rafraîchira.

/*************************** FIN DES CONSEILS ! ***********************/

Création du plugin

Dans votre dossier "api", ouvrez un terminal et exécutez cette commande :

yarn strapi generate

Cette commande utilise le générateur Strapi, qui peut générer beaucoup de choses pour Strapi :

Dans la liste des choix, sélectionnez plugin et remplissez le nom de votre plugin.

Dans notre cas : awesome-help

Lorsque la commande est terminée, vous trouverez un nouveau dossier "plugins" à l'intérieur de "api/src". Cependant, si vous actualisez le site web d'administration de Strapi, le plugin n'apparaît pas dans le menu. Pour résoudre ce problème, vous devez activer le plugin dans la configuration de Strapi.

Allez dans le dossier "api/config" et créez un nouveau fichier : plugins.js ou ouvrez-le s'il existe déjà.

Mettez le code ci-dessous à l'intérieur ou ajoutez-le si vous avez déjà d'autres plugins.

Maintenant, dans votre menu de gauche, vous trouverez votre plugin !

Mettons à jour certaines informations :

Allez dans le fichier "api/src/plugins/awesome-help/package.json".

Recherchez la section Strapi et mettez à jour les propriétés de nom et de description :

"strapi": {
  "name": "Awesome Help",
  "description": "This plugin enable to create a contextual help for all fields in your documents!",
  "kind": "plugin"
}

Retournez sur le site d'administration et attendez que la page se rafraîchisse. Le nom de votre plugin est maintenant mis à jour ! Enfin, allez dans la section Plugins et vous découvrirez votre plugin avec le bon champ de description.

Mission accomplie !

Et n'oubliez pas notre GIT pour obtenir le code : https://github.com/ExFabrica/strapi-stories/tree/develop/part-1

À bientôt !