Tutorial anterior: Developing Discourse Plugins - Part 4 - Setup git
A veces, los ajustes del sitio no son suficientes como interfaz de administración para que tu plugin funcione como deseas. Por ejemplo, si instalas el plugin discourse-akismet, es posible que hayas notado que añade un elemento de navegación a la sección de plugins de administración de tu Discourse:
En este tutorial te mostraremos cómo añadir una interfaz de administración para tu plugin. Voy a llamar a mi plugin purple-tentacle, en honor a uno de mis videojuegos favoritos. En serio, ¡realmente me encanta ese juego! (https://twitter.com/eviltrout/status/627119973773746176).
Configurando la ruta de administración
Comencemos añadiendo un plugin.rb como hemos hecho en partes anteriores 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 línea add_admin_route le indica a Discourse que este plugin necesitará un enlace en la página /admin/plugins. Su título será purple_tentacle.title de nuestro archivo de traducciones i18n y enlazará a la ruta purple-tentacle.
Las líneas siguientes configuran la asignación de rutas en el lado del servidor para nuestro plugin. Una suposición que hace Discourse es que casi cada ruta en el front-end tiene una ruta en el lado del servidor que proporciona datos. Para este plugin de ejemplo, en realidad no necesitamos ningún dato del back-end, pero debemos decirle a Discourse que sirva algo en caso de que el usuario visite /admin/plugins/purple-tentacle directamente. Esta línea simplemente le dice: «¡oye, si el usuario visita esa URL directamente en el lado del servidor, sirve el contenido predeterminado de plugins!».
(Si esto es confuso, no te preocupes demasiado; volveremos a ello en un futuro tutorial cuando manejemos acciones en el lado del servidor).
A continuación, añadiremos una plantilla que se mostrará cuando el usuario visite la ruta /admin/plugins/purple-tentacle. Será simplemente un botón que muestra un GIF animado de un tentáculo púrpura cuando el usuario hace clic en el botón:
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>
Si has aprendido los fundamentos de Handlebars, la plantilla debería ser bastante sencilla de entender. <DButton /> es un componente en Discourse que usamos para mostrar un botón con una etiqueta y un icono.
Para conectar nuestra nueva plantilla, necesitamos crear un mapa de rutas:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Un mapa de rutas es algo que añadimos a Discourse para permitir que los plugins agreguen rutas a la aplicación Ember. La sintaxis dentro de map() es muy similar a la ruta de Ember. En este caso, nuestro mapa de rutas es muy simple; solo declara una ruta llamada purple-tentacle bajo /admin/plugins.
Finalmente, añadamos nuestras cadenas de traducción:
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
Si reinicias tu servidor de desarrollo, deberías poder visitar /admin/plugins y verás nuestro enlace. Si haces clic en él, verás el botón para mostrar nuestro tentáculo púrpura:
Desafortunadamente, cuando haces clic en el botón, no sucede nada 
Si revisas la consola de desarrollador, deberías ver un error que proporciona una pista sobre la causa:
Uncaught Error: Nothing handled the action 'showTentacle'
Ah, sí, la razón es que en nuestra plantilla dependemos de un par de cosas:
- Que cuando el usuario haga clic en el botón, se llame a
showTentacleen el controlador. - Que
showTentacleestablezca la propiedadtentacleVisibleentruepara que aparezca la imagen.
Si no has leído las Guías de Ember sobre controladores, ahora es un buen momento para hacerlo, ya que implementaremos un controlador para nuestra plantilla purple-tentacle que manejará esta lógica.
Crea el siguiente archivo:
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;
}
}
Y ahora, al refrescar nuestra página, hacer clic en el botón muestra nuestro personaje animado.
Dejo como ejercicio adicional para el lector añadir un botón que oculte el tentáculo cuando se hace clic en él 
Si tienes problemas para que funcione tu versión de este plugin, lo he subido a GitHub.
Más en la serie
Parte 1: Fundamentos de plugins
Parte 2: Salidas de plugins
Parte 3: Ajustes del sitio
Parte 4: Configuración de git
Parte 5: Este tema
Parte 6: Pruebas de aceptación
Parte 7: Publica tu plugin
Este documento está controlado por versiones; sugiere cambios en GitHub.
