Tutorial precedente: Developing Discourse Plugins - Part 4 - Setup git
A volte le impostazioni del sito non sono sufficienti per fornire un’interfaccia di amministrazione che permetta al tuo plugin di funzionare come desideri. 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 della rotta 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 una rotta 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 dice 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à alla rotta purple-tentacle.
Le righe seguenti configurano il mapping delle rotte lato server per il nostro plugin. Un’assunzione che Discourse fa è che quasi ogni rotta lato frontend abbia una rotta lato server che fornisce i dati. Per questo plugin di esempio non abbiamo effettivamente bisogno di dati dal backend, 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 ti sembra confuso, non preoccuparti troppo, ne parleremo di nuovo in un futuro tutorial 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 del tentacolo viola quando l’utente clicca 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 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 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 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: "Mostra 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 il pulsante, non succede nulla 
Se guardi la console degli 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 modello dipendiamo da un paio di cose:
- Che quando l’utente clicca il pulsante,
showTentacleverrà chiamato sul controller. showTentacledovrebbe impostare la proprietàtentacleVisiblesutruein modo che l’immagine venga mostrata.
Se non hai letto le Guide Ember sui Controller, questo è 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 pagina, cliccando il 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 pubblicato su github.
Più 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 è sotto controllo di versione - suggerisci modifiche su github.
