Tutorial precedente: Developing Discourse Plugins - Part 4 - Setup git
A volte le impostazioni del sito non sono sufficienti come interfaccia di amministrazione affinché il tuo plugin funzioni come desideri. Ad esempio, se installi il plugin discourse-akismet, potresti aver notato che aggiunge una voce di navigazione alla sezione plugin di amministrazione di 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 giochi per computer preferiti. Seriamente, adoro quel gioco!
Impostazione della rotta di amministrazione
Iniziamo aggiungendo un plugin.rb come abbiamo fatto nelle parti precedenti del tutorial.
plugin.rb
# name: purple-tentacle
# about: Un plugin di esempio che mostra come aggiungere una rotta di 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 riga add_admin_route dice a Discourse che questo plugin avrà bisogno di un link sulla pagina /admin/plugins. Il suo titolo sarà purple_tentacle.title dal nostro file di traduzioni i18n e si collegherà alla rotta purple-tentacle.
Le righe sottostanti impostano la mappatura lato server delle rotte per il nostro plugin. Un’ipotesi che Discourse fa è che quasi ogni rotta sul frontend abbia una rotta lato server che fornisce dati. Per questo plugin di esempio in realtà non abbiamo bisogno di dati dal backend, ma dobbiamo dire a Discourse di servire qualcosa nel caso in cui l’utente visiti /admin/plugins/purple-tentacle direttamente. Questa riga gli dice semplicemente: “ehi, se l’utente visita quell’URL direttamente sul lato server, servi il contenuto predefinito dei plugin!”
(Se questo è confuso, non preoccuparti troppo, ci torneremo in un tutorial futuro quando gestiremo le azioni lato server.)
Successivamente, aggiungeremo un template che verrà visualizzato quando l’utente visita il percorso /admin/plugins/purple-tentacle. Sarà solo un pulsante che mostra una gif animata di un tentacolo viola quando l’utente fa clic su un pulsante:
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>
Se hai imparato le basi di handlebars, il template dovrebbe essere piuttosto semplice da capire. Il <DButton /> è un componente in Discourse che usiamo per mostrare un pulsante con un’etichetta e un’icona.
Per collegare il nostro nuovo template dobbiamo creare una mappa delle rotte:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Una mappa delle 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 al router di Ember. In questo caso la nostra mappa delle rotte è molto semplice, dichiara solo 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 fai clic, vedrai il pulsante per mostrare il nostro tentacolo viola:
Sfortunatamente, quando fai clic sul pulsante, non succede nulla 
Se guardi nella console degli sviluppatori, dovresti vedere un errore che fornisce un indizio sul perché:
Uncaught Error: Nothing handled the action 'showTentacle'
Ah sì, la ragione è nel nostro template handlebars stiamo dipendendo da un paio di cose:
- Che quando l’utente fa clic sul pulsante, venga chiamata
showTentacle. showTentacledovrebbe impostare la proprietàtentacleVisiblesutruein modo che l’immagine venga visualizzata.
Se non hai letto le Guide 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 nostra pagina, facendo clic sul pulsante viene visualizzato il nostro personaggio animato!
Lascerò come esercizio extra al lettore aggiungere un pulsante che nasconda il tentacolo quando viene cliccato 
Se hai problemi a far funzionare la tua versione di questo plugin, l’ho caricata su github.
Altro nella 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 è controllato in versione - suggerisci modifiche su github.
