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 de la manera que 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 agregar 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, me encanta ese juego.
Configuración de la ruta de administración
Comencemos agregando un plugin.rb como lo hicimos en las 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 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 todas las rutas del lado del cliente tienen una ruta del lado del servidor que proporciona datos. Para este plugin de ejemplo, en realidad no necesitamos ningún dato del backend, pero necesitamos decirle a Discourse que sirva algo en caso de que el usuario visite /admin/plugins/purple-tentacle directamente. Esta línea simplemente le dice: «oigan, si el usuario visita esa URL directamente en el lado del servidor, ¡sirvan el contenido predeterminado de plugins!».
(Si esto es confuso, no te preocupes demasiado, volveremos a ello en un tutorial futuro cuando manejemos acciones del lado del servidor.)
A continuación, agregaremos 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 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 las bases de Handlebars, la plantilla debería ser bastante simple de entender. El <DButton /> es un componente de Discourse que usamos para mostrar un botón con una etiqueta e 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 agregamos a Discourse para permitir que los plugins agreguen rutas a la aplicación Ember. La sintaxis dentro de map() es muy similar a la del router de Ember. En este caso, nuestro mapa de rutas es muy simple, solo declara una ruta llamada purple-tentacle bajo /admin/plugins.
Finalmente, agreguemos 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:
Por desgracia, cuando haces clic en el botón, no sucede nada 
Si miras tu consola de desarrollador, deberías ver un error que proporciona una pista sobre la razón:
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. showTentacledebería establecer la propiedadtentacleVisibleentruepara que la imagen aparezca.
Si no has leído las Guías de Ember sobre Controladores, ahora 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 a nuestro personaje animado.
Dejaré como ejercicio extra para el lector agregar 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: Básicos de plugins
Parte 2: Outlets 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.
