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 nella sezione dei plugin dell’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. Sul serio, adoro 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 richiederà un link nella pagina /admin/plugins. Il suo titolo sarà purple_tentacle.title, preso dal nostro file di traduzioni i18n, e punterà alla rotta purple-tentacle.
Le righe successive impostano la mappatura lato server delle rotte per il nostro plugin. Discourse assume che quasi ogni rotta sul front-end abbia una corrispondente rotta lato server che fornisce i dati. Per questo plugin di esempio in realtà non abbiamo bisogno di dati 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, mostra 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 del 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 capire. Il componente <DButton /> è un componente di 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 permettere 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 delle 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 vedere 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 degli sviluppatori, dovresti vedere un errore che fornisce un indizio sul perché:
Uncaught Error: Nothing handled the action 'showTentacle'`
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 appaia.
Se non hai ancora letto le Guide di Ember sui Controller, è 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 vediamo apparire il nostro personaggio animato!
Lascio come esercizio aggiuntivo per il 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: Nozioni di base sui 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 di versione: suggerisci modifiche su GitHub.
