Tutorial anterior: Developing Discourse Plugins - Part 4 - Setup git
A veces, la configuración del sitio no es suficiente como interfaz de administración para que tu plugin funcione como deseas. Por ejemplo, si instalas el plugin discourse-akismet, habrás 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 juegos de computadora favoritos. En serio, ¡¡realmente amo ese juego!![https://twitter.com/eviltrout/status/627119973773746176]
Configurando la ruta de administración
Comencemos añadiendo un archivo plugin.rb como hemos hecho en las partes anteriores del tutorial.
plugin.rb
# name: purple-tentacle
# about: Un plugin de ejemplo que muestra cómo añadir una ruta de 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 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 desde nuestro archivo de traducciones i18n y enlazará a la ruta purple-tentacle.
Las líneas siguientes configuran el mapeo de rutas del lado del servidor para nuestro plugin. Un supuesto que hace Discourse es que casi cada ruta en el lado del cliente tiene una ruta del lado del servidor que proporciona datos. Para este plugin de ejemplo, en realidad no necesitamos ningún dato del backend, 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 del 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 morado cuando el usuario hace clic en él:
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 lo básico de Handlebars, la plantilla debería ser bastante fácil de entender. El <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 que los plugins pudieran añadir rutas a la aplicación Ember. La sintaxis dentro de map() es muy similar a el enrutador de Ember. En este caso, nuestro mapa de rutas es muy simple, simplemente 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 morado:
Desafortunadamente, cuando haces clic en el botón, no pasa nada 
Si miras tu consola de desarrollador, deberías ver un error que proporciona una pista sobre por qué sucede esto:
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 llamará a
showTentacleen el controlador. showTentacledebe establecer la propiedadtentacleVisibleentruepara que la imagen aparezca.
Si no has leído las Guías de Ember sobre Controladores, este es un buen momento para hacerlo, porque 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, cuando actualizamos nuestra página, hacer clic en el botón muestra nuestro personaje animado.
Dejaré como ejercicio adicional para el lector añadir un botón que oculte el tentáculo cuando se haga clic en él 
Si tienes problemas para que tu versión de este plugin funcione, lo he subido a github.
Más en la serie
Parte 1: Conceptos básicos de plugins
Parte 2: Enclaves de plugins
Parte 3: Configuración 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.
