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 in cui desideri. Ad esempio, se installi il plugin discourse-akismet, potresti aver notato che aggiunge un elemento di navigazione alla sezione dei plugin 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 giochi per computer preferiti. Seriamente, mi piace davvero 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 informa 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 seguenti configurano la mappatura lato server delle rotte per il nostro plugin. Un’assunzione che Discourse fa è che quasi ogni rotta sul front end ha una rotta lato server che fornisce dati. Per questo plugin di esempio, in realtà non abbiamo bisogno di alcun dato dal back end, ma dobbiamo dire 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, ci torneremo in un tutorial futuro quando gestiremo le azioni lato server.)
Successivamente, aggiungeremo un modello che verrà visualizzato quando l’utente visita il percorso /admin/plugins/purple-tentacle. Sarà semplicemente un pulsante che mostra un gif animato di purple tentacle quando l’utente fa clic su un 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 imparato le basi di handlebars, il modello dovrebbe essere abbastanza 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 modello, 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 riavii 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 purple tentacle:
Sfortunatamente, quando fai clic sul pulsante, non succede nulla 
Se guardi la tua console di sviluppo, dovresti vedere un errore che fornisce un indizio sul motivo:
Uncaught Error: Nothing handled the action 'showTentacle'`
Ah sì, il motivo è che nel nostro modello dipendiamo da un paio di cose:
- Che quando l’utente fa clic sul pulsante,
showTentacleverrà chiamato sul controller. showTentacledovrebbe impostare la proprietàtentacleVisiblesutruein modo che l’immagine venga visualizzata.
Se non hai letto le Guide di Ember sui Controller, ora è un buon momento per farlo, perché implementeremo un controller per il nostro modello 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 mostrato il nostro personaggio animato!
Lascio come esercizio extra al lettore l’aggiunta di un pulsante che nasconde il tentacolo quando viene fatto clic 
Se stai avendo problemi a far funzionare la tua versione di questo plugin, l’ho caricato su github.
Altri nella serie
Parte 1: Plugin Basics
Parte 2: Plugin Outlets
Parte 3: Site Settings
Parte 4: git setup
Parte 5: Questo argomento
Parte 6: Acceptance tests
Parte 7: Publish your plugin
Questo documento è versionato - suggerisci modifiche su github.
