Strapi : Comment créer une collection de plugin et une API interne pour le gérer ?

Créer une collection personnalisée

La nouvelle collection sera nommée : help (super nom !).

Ouvrez un terminal dans le dossier "api" et utilisez la commande generate de Strapi.

yarn strapi generate

Cette fois-ci, sélectionne Content-Type.

1. Pour "Content-Type display name", saisis : help
2. Pour "Content-Type singular name and plural", sélectionne l'option par défaut avec la touche enter
3. Pour "Choose the module type", sélectionne Collection Type
4. Pour "Use draft and publish", sélectionne No
5. Pour "Do you want to add attributes", sélectionne Y
6. Pour "Name of attribute", saisis : "key" et sélectionne un type string
7. Pour "Do you want to add another attribute", sélectionne No
8. Pour "Where do you want to add this model", sélectionne "Add model to existing plugin" et choisis "awesome-help"
9. Pour "Bootstrap API related files", sélectionne Yes.

Strapi génère tous les fichiers nécessaires pour implémenter la collection personnalisée "help".

Pour notre Content-Type personnalisé, vous remarquerez que Strapi génère tous les fichiers dans le dossier "api/src/plugins/awesome-help/server".

Allons dans "api/src/plugins/awesome-help/server/content-types/help", vous y trouverez un fichier "schema.json".

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

Parfois, vous souhaitez masquer votre collection personnalisée dans Content Manager et Content Builder parce qu'il s'agit d'une collection que vous utilisez pour stocker des données logiques internes du plugin. Dans le fichier "schema.json", vous pouvez ajouter certaines options avec l'objet "pluginOptions".

Les sections "content-manager" et "content-type-builder" incluent une propriété visible qui vous permet de masquer ou d'afficher la collection.

Parfait pour déboguer la collection interne du plugin !

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

Ce fichier contient la structure de la collection personnalisée. Les noms des propriétés des objets dans le schéma sont suffisants pour comprendre leurs significations. En plus du fichier de schéma, Strapi génère pour vous une route, un contrôleur et un service pour la collection "help" à l'intérieur de ces dossiers :

• "api/src/plugins/awesome-help/server/routes/help.js"
• "api/src/plugins/awesome-help/server/controllers/help.js"
• "api/src/plugins/awesome-help/server/services/help.js"

Mais, si vous lancez le site web Strapi Admin, la collection personnalisée n'est pas présente dans le Content Manager. Vous devez effectuer quelques modifications.

Dans le dossier "api/src/plugins/awesome-help/server/content-types/help", créez un nouveau fichier "index.js". Ouvrez-le et modifiez-le :

Revenez à l'intérieur de "api/src/plugins/awesome-help/server/content-types" et ouvre le fichier "index.js" puis modifiez-le :

Strapi a accès au schéma de la collection personnalisée et peut l'utiliser.

Lancez le site d'administration de Strapi, dans "Content Manager" vous trouverez la collection help !

Cliquez sur Help dans le menu de gauche au milieu, la vue par défaut de la liste d'aide est maintenant ouverte. Veuillez regarder la barre d'adresse et vous remarquerez que le lien inclut "collectionType/plugin::awesome-help.help".

Oui, vous avez définitivement ajouté une collection de plugins custom !

Créez quelques entrées pour tester votre collection. Strapi génère automatiquement le champ texte que nous avons défini dans la structure du fichier schema.json (section attributs).

Créer une API personnalisée

Maintenant que la collection est créée, nous voulons interagir avec elle.

Comme nous l'avons dit précédemment, Strapi génère une route, un contrôleur et un service.

Définition de la route

Ouvrez le fichier "api/src/plugins/awesome-help/server/routes/help.js" et mettez à jour le code avec :

Explication du code : nous créons une nouvelle route avec le chemin "/helps" sur une requête GET, et cette route cible le "helpController" et utilise la fonction "findMany".

Remarque le type en haut du fichier. Cette propriété est TRÈS importante car elle détermine le comportement de ton API. Deux valeurs sont disponibles pour le type :

• content-api
• admin

Le premier détermine que l'API peut être accessible à partir d'appels externes, comme une classique API REST. Vous devez définir certaines permissions pour y accéder dans les paramètres de rôle depuis le site administrateur de Strapi.

Le second détermine que cette API est interne et ne peut être accessible que par la partie admin (partie front-end) du plugin. Vous pouvez appeler directement votre API depuis le code front-end, sans besoin de définir des permissions supplémentaires.

Dans un premier temps, nous utilisons l'API en mode "content-api" pour tester l'API via des appels externes. Plus tard, nous activerons le type "admin" pour utiliser l'API depuis le côté administrateur.

Ouvrez le fichier "api/src/plugins/awesome-help/server/routes/index.js" et édite-le :

Tu définis une route vers le helpController, mais celle-ci n'est pas fonctionnelle, nous devons mettre à jour d'autres fichiers !

Définition du Controller

Ouvrez le fichier "api/src/plugins/awesome-help/server/controllers/help.js" et met à jour le code avec :

Explication du code :

• helpService est une constante qui fait référence à l'instance de helpService (que nous définirons plus tard :D).
• La fonction findMany est une fonction asynchrone qui appelle le helpService pour demander les entités d'aide.

En ce qui concerne la route, nous devons faire référence au controller. Ouvre le fichier "api/src/plugins/awesome-help/server/controllers/index.js" et mets à jour le code avec :

Strapi reconnaît maintenant le contrôleur !

Une dernière étape et nous pouvons utiliser l'API. Nous devons créer la partie service de l'API.

Définition de service

Ouvre le fichier "api/src/plugins/awesome-help/server/services/help.js" et mets à jour le code avec :

Explications du code :

• query est une constante qui fait référence à l'instance du service Strapi.db.query. Comme vous le voyez, ce service est très utile pour interroger le référentiel des objets strapi.
• La fonction async findMany renvoie les entités help depuis la collection help.

Pour ce qui est de la route et du contrôleur, nous devons notifier Strapi que le service existe :

Et c'est tout !

Tester l'API

L'API est maintenant fonctionnelle, nous devons la tester.

Ouvrez le site Strapi Admin et cliquez sur settings/roles/public/Awesome-Help, puis activez la fonction findMany. Votre API est désormais accessible depuis une source externe.

Pour tester l'API, nous allons utiliser le fantastique POSTMAN.

Créez une nouvelle requête (appel GET) sur le chemin suivant :

http://localhost:1337/api/awesome-help/helps

Si vous ajoutez des entités help, l'API les renvoie toutes sous la forme d'un magnifique tableau JSON. Merci à l'équipe Strapi !

Mission accomplie !

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

À bientôt !