Tutorial precedente: Developing Discourse Plugins - Part 4 - Setup git
A volte le impostazioni del sito non costituiscono un’interfaccia di amministrazione sufficiente per far funzionare il tuo plugin nel modo desiderato. Ad esempio, se installi il plugin discourse-akismet, potresti aver notato che aggiunge un elemento di navigazione alla sezione dei plugin nell’area 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 davvero quel gioco!
Configurazione del percorso di amministrazione
Iniziamo aggiungendo un file plugin.rb come abbiamo fatto nelle parti precedenti del tutorial.
plugin.rb
# name: purple-tentacle
# about: Un plugin di esempio che mostra come aggiungere un percorso al 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 indica a Discourse che questo plugin avrà bisogno di un link nella pagina /admin/plugins. Il titolo sarà purple_tentacle.title dal nostro file di traduzioni i18n e punterà al percorso purple-tentacle.
Le righe successive configurano il mapping dei percorsi lato server per il nostro plugin. Discourse fa l’assunzione che quasi ogni percorso lato client abbia un percorso 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 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 ti confonde, non preoccuparti troppo, ne parleremo di nuovo in un futuro tutorial quando gestiremo le azioni lato server.)
Successivamente, aggiungeremo un template che verrà visualizzato quando l’utente visiterà il percorso /admin/plugins/purple-tentacle. Conterrà semplicemente un pulsante che mostra un’animazione GIF 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 imparato le basi di Handlebars, il template dovrebbe essere piuttosto semplice da capire. Il <DButton /> è un componente in Discourse che utilizziamo per mostrare un pulsante con un’etichetta e un’icona.
Per collegare il nostro nuovo template dobbiamo creare una mappa dei percorsi:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Una mappa dei percorsi è qualcosa che abbiamo aggiunto a Discourse per permettere ai plugin di aggiungere percorsi all’applicazione Ember. La sintassi all’interno di map() è molto simile a quella del router di Ember. In questo caso la nostra mappa dei percorsi è molto semplice, dichiara semplicemente un percorso chiamato 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 riavvi il 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:
Sfortunatamente, quando clicchi sul pulsante, non succede nulla 
Se guardi nella console dello sviluppatore, 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,
showTentacleverrà chiamato sul controller. showTentacledovrebbe impostare la proprietàtentacleVisiblesutruein modo che l’immagine appaia.
Se non hai letto le Guide di Ember sui Controller, questo è 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 appare il nostro personaggio animato!
Lascio come esercizio extra al lettore l’aggiunta di un pulsante che nasconde il tentacolo quando viene cliccato 
Se hai problemi 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 versione - suggerisci modifiche su github.
