Tutoriel précédent : Developing Discourse Plugins - Part 4 - Setup git
Parfois, les paramètres du site ne suffisent pas comme interface d’administration 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 d’administration de votre Discourse :
Dans ce tutoriel, nous vous montrerons 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 ce jeu !
Configuration de la route d’administration
Commençons par ajouter un plugin.rb comme nous l’avons fait dans les parties précédentes du tutoriel.
plugin.rb
# name: purple-tentacle
# about: A sample plugin showing how to add a plugin route
# 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 à partir de notre fichier de traduction i18n et il pointera vers la route purple-tentacle.
Les lignes en dessous configurent le mappage côté serveur des routes pour notre plugin. Une hypothèse que Discourse fait est que presque toutes les routes côté client ont une route côté serveur qui fournit des données. Pour cet exemple de plugin, nous n’avons en fait pas besoin de données du backend, mais nous devons indiquer à Discourse de servir quelque chose au cas où l’utilisateur visiterait /admin/plugins/purple-tentacle directement. Cette ligne lui indique simplement : « hé, si l’utilisateur visite cette URL directement côté serveur, sers le contenu par défaut des plugins ! »
(Si c’est confus, ne vous inquiétez pas trop, 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 visitera le chemin /admin/plugins/purple-tentacle. Ce sera juste un bouton qui affichera un gif animé de tentacule violet lorsque l’utilisateur cliquera sur un bouton :
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.hbs
{{#if tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{action "showTentacle"}}
@icon="eye"
@id="show-tentacle"
/>
</div>
Si vous avez appris les bases de handlebars, le modèle devrait être assez simple à comprendre. Le <DButton /> est un composant dans 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 route :
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Une carte de route est quelque chose que nous avons ajouté à Discourse pour permettre aux plugins d’ajouter des routes à l’application ember. La syntaxe à l’intérieur de map() est très similaire au routeur d’Ember. Dans ce cas, notre carte de route est très simple, elle déclare juste une route appelée purple-tentacle sous /admin/plugins.
Enfin, ajoutons nos chaînes de traduction :
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
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 violet :
Malheureusement, lorsque vous cliquez sur le bouton, rien ne se passe 
Si vous regardez votre console de développeur, vous devriez voir une erreur qui donne un indice sur la raison :
Uncaught Error: Nothing handled the action 'showTentacle'
Ah oui, la raison se trouve dans notre modèle handlebars, nous dépendons de quelques éléments :
- Qu’au clic de l’utilisateur sur le bouton,
showTentaclesera appelé. showTentacledoit définir la propriététentacleVisibleàtrueafin que l’image s’affiche.
Si vous n’avez pas lu les Guides Ember sur les Contrôleurs, c’est le 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 actualisons notre page, cliquer sur le bouton affiche notre personnage animé !
Je laisse au lecteur l’exercice supplémentaire d’ajouter un bouton qui cache le tentacule lorsqu’il est cliqué 
Si vous avez des difficultés à faire fonctionner votre version de ce plugin, je l’ai poussée sur github.
Plus dans la série
Partie 1 : Bases des Plugins
Partie 2 : Sorties de Plugin
Partie 3 : Paramètres du Site
Partie 4 : Configuration git
Partie 5 : Ce sujet
Partie 6 : Tests d’Acceptation
Partie 7 : Publiez votre plugin
Ce document est contrôlé par version - suggérez des modifications sur github.
