Tutoriel précédent : Developing Discourse Plugins - Part 4 - Setup git
Parfois, les paramètres du site ne constituent pas une interface d’administration suffisante pour que votre plugin fonctionne comme vous le souhaitez. Par exemple, si vous installez le plugin discourse-akismet, vous avez peut-être remarqué qu’il ajoute un élément de navigation à la section des plugins de l’administration de votre Discourse :
Dans ce tutoriel, nous allons vous montrer comment ajouter une interface d’administration pour votre plugin. Je vais appeler mon plugin purple-tentacle, en l’honneur de l’un de mes jeux vidéo préférés. Sérieusement, j’adore vraiment ce jeu !
Configuration de la route d’administration
Commençons par ajouter un fichier plugin.rb comme nous l’avons fait dans les parties précédentes du tutoriel.
plugin.rb
# name: purple-tentacle
# about: Un plugin d'exemple montrant comment ajouter une route de plugin
# version: 0.1
# authors: Robin Ward
# url: https://github.com/discourse/purple-tentacle
add_admin_route 'purple_tentacle.title', 'purple-tentacle'
Discourse::Application.routes.append do
get '/admin/plugins/purple-tentacle' => 'admin/plugins#index', constraints: StaffConstraint.new
end
La ligne add_admin_route indique à Discourse que ce plugin aura besoin d’un lien sur la page /admin/plugins. Son titre sera purple_tentacle.title provenant de notre fichier de traductions i18n et il pointera vers la route purple-tentacle.
Les lignes ci-dessous configurent la correspondance des routes côté serveur pour notre plugin. Discourse part du principe que presque chaque route côté client a une route côté serveur qui fournit des données. Pour ce plugin d’exemple, nous n’avons pas réellement besoin de données provenant du backend, mais nous devons indiquer à Discourse de servir quelque chose au cas où l’utilisateur visiterait /admin/plugins/purple-tentacle directement. Cette ligne indique simplement : « hé, si l’utilisateur visite cette URL directement côté serveur, sert le contenu par défaut des plugins ! »
(Si cela semble confus, ne vous inquiétez pas, nous y reviendrons dans un futur tutoriel lorsque nous traiterons des actions côté serveur.)
Ensuite, nous allons ajouter un modèle qui sera affiché lorsque l’utilisateur visite le chemin /admin/plugins/purple-tentacle. Ce sera simplement un bouton qui affiche une image animée (gif) de tentacule violette lorsque l’utilisateur clique sur un bouton :
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.gjs
import DButton from "discourse/components/d-button";
<template>
{{#if @controller.tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{@controller.showTentacle}}
@icon="eye"
@id="show-tentacle"
/>
</div>
</template>
Si vous avez appris les bases de Handlebars, le modèle devrait être assez simple à comprendre. Le <DButton /> est un composant Discourse que nous utilisons pour afficher un bouton avec une étiquette et une icône.
Pour connecter notre nouveau modèle, nous devons créer une carte de routes :
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Une carte de routes est une fonctionnalité que nous avons ajoutée à Discourse pour permettre aux plugins d’ajouter des routes à l’application Ember. La syntaxe dans map() est très similaire à celle du routeur Ember. Dans ce cas, notre carte de routes est très simple, elle déclare simplement une route appelée purple-tentacle sous /admin/plugins.
Enfin, ajoutons nos chaînes de traduction :
config/locales/client.fr.yml
fr:
js:
purple_tentacle:
title: "Tentacule Violette"
show: "Afficher la Tentacule Violette"
Si vous redémarrez votre serveur de développement, vous devriez pouvoir visiter /admin/plugins et vous verrez notre lien ! Si vous cliquez dessus, vous verrez le bouton pour afficher notre tentacule violette :
Malheureusement, lorsque vous cliquez sur le bouton, rien ne se passe 
Si vous regardez votre console de développement, vous devriez voir une erreur qui donne un indice sur la raison de cela :
Uncaught Error: Nothing handled the action 'showTentacle'
Ah oui, la raison est que dans notre modèle, nous dépendons de quelques éléments :
- Que lorsque l’utilisateur clique sur le bouton,
showTentaclesera appelé sur le contrôleur. showTentacledoit définir la propriététentacleVisibleàtrueafin que l’image s’affiche.
Si vous n’avez pas lu le Guide Ember sur les Contrôleurs, c’est un bon moment pour le faire, car nous allons implémenter un contrôleur pour notre modèle purple-tentacle qui gérera cette logique.
Créez le fichier suivant :
assets/javascripts/discourse/controllers/admin-plugins-purple-tentacle.js
import Controller from "@ember/controller";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
export default class AdminPluginsPurpleTentacleController extends Controller {
@tracked tentacleVisible = false;
@action
showTentacle() {
this.tentacleVisible = true;
}
}
Et maintenant, lorsque nous rafraîchissons notre page, cliquer sur le bouton affiche notre personnage animé !
Je laisse en exercice supplémentaire au lecteur l’ajout d’un bouton qui masque la tentacule lorsqu’on clique dessus 
Si vous avez des difficultés à faire fonctionner votre version de ce plugin, je l’ai poussé sur github.
Plus dans la série
Partie 1 : Bases des plugins
Partie 2 : Points de sortie de plugin
Partie 3 : Paramètres du site
Partie 4 : Configuration git
Partie 5 : Ce sujet
Partie 6 : Tests d’acceptation
Partie 7 : Publier votre plugin
Ce document est sous contrôle de version - suggérez des modifications sur github.
