Tutorial precedente: Developing Discourse Plugins - Part 4 - Setup git
A volte le impostazioni del sito non sono sufficienti come interfaccia di amministrazione per far funzionare il tuo plugin nel modo desiderato. Ad esempio, se installi il plugin discourse-akismet, potresti aver notato che aggiunge una voce di navigazione alla sezione dei plugin nell’area di amministrazione del tuo Discourse:
In questo tutorial ti mostreremo come aggiungere un’interfaccia di amministrazione per il tuo plugin. Chiamerò il mio plugin purple-tentacle, in onore di uno dei miei videogiochi preferiti. Davvero, adoro quel gioco!
Configurazione della rotta di amministrazione
Iniziamo aggiungendo un file plugin.rb, come abbiamo fatto nelle parti precedenti del tutorial.
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 riga add_admin_route comunica a Discourse che questo plugin richiederà un link nella pagina /admin/plugins. Il titolo sarà purple_tentacle.title, preso dal nostro file di traduzioni i18n, e punterà alla rotta purple-tentacle.
Le righe successive configurano il mapping lato server delle rotte per il nostro plugin. Discourse assume che quasi ogni rotta sul frontend abbia una corrispondente rotta lato server che fornisce i dati. Per questo plugin di esempio, in realtà non abbiamo bisogno di dati dal backend, ma dobbiamo indicare a Discourse di servire qualcosa nel caso in cui l’utente visiti direttamente /admin/plugins/purple-tentacle. Questa riga dice semplicemente: “ehi, se l’utente visita quell’URL direttamente lato server, servi il contenuto predefinito dei plugin!”
(Se questo è confuso, non preoccuparti troppo; torneremo su questo in un futuro tutorial quando gestiremo le azioni lato server.)
Successivamente, aggiungeremo un template che verrà visualizzato quando l’utente visita il percorso /admin/plugins/purple-tentacle. Sarà semplicemente un pulsante che mostra un’immagine GIF animata di un tentacolo viola quando l’utente clicca sul pulsante:
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>
Se hai appreso le basi di Handlebars, il template dovrebbe essere abbastanza semplice da comprendere. Il componente <DButton /> è un componente di Discourse che utilizziamo per mostrare un pulsante con un’etichetta e un’icona.
Per collegare il nostro nuovo template, dobbiamo creare una mappa di rotte:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Una mappa di rotte è qualcosa che abbiamo aggiunto a Discourse per consentire ai plugin di aggiungere rotte all’applicazione Ember. La sintassi all’interno di map() è molto simile a quella del router di Ember. In questo caso, la nostra mappa di rotte è molto semplice: dichiara semplicemente una rotta chiamata purple-tentacle sotto /admin/plugins.
Infine, aggiungiamo le nostre stringhe di traduzione:
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
Se riavvii il tuo server di sviluppo, dovresti essere in grado di visitare /admin/plugins e vedrai il nostro link! Se ci clicchi sopra, vedrai il pulsante per mostrare il nostro tentacolo viola:
Purtroppo, quando clicchi sul pulsante, non succede nulla 
Se guardi la console per sviluppatori, dovresti vedere un errore che fornisce un indizio sul motivo:
Uncaught Error: Nothing handled the action 'showTentacle'`
Ah sì, il motivo è che nel nostro template dipendiamo da alcune cose:
- Che quando l’utente clicca sul pulsante,
showTentaclevenga chiamato sul controller. - Che
showTentacleimposti la proprietàtentacleVisiblesutruein modo che l’immagine venga visualizzata.
Se non hai ancora letto le Guide di Ember sui Controller, ora è un buon momento per farlo, perché implementeremo un controller per il nostro template purple-tentacle che gestirà questa logica.
Crea il seguente file:
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;
}
}
E ora, quando aggiorniamo la pagina, cliccando sul pulsante viene visualizzato il nostro personaggio animato!
Lascio come esercizio extra al lettore aggiungere un pulsante che nasconde il tentacolo quando viene cliccato 
Se hai difficoltà a far funzionare la tua versione di questo plugin, l’ho caricato su GitHub.
Altri articoli della serie
Parte 1: Basi dei plugin
Parte 2: Plugin Outlets
Parte 3: Impostazioni del sito
Parte 4: Configurazione git
Parte 5: Questo argomento
Parte 6: Test di accettazione
Parte 7: Pubblica il tuo plugin
Questo documento è sottoposto a controllo versione: suggerisci modifiche su GitHub.
