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 agrega un elemento de navegación en 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 videojuegos favoritos. En serio, realmente amo ese juego.
Configurando la ruta de administración
Comencemos agregando un archivo 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 desde nuestro archivo de traducciones i18n y se vinculará a la ruta purple-tentacle.
Las líneas siguientes configuran la asignación del lado del servidor de las rutas para nuestro plugin. Discourse asume que casi todas las rutas en el frontend 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 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 te confunde, no te preocupes demasiado; volveremos sobre esto 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á solo 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 fácil de entender. El componente <DButton /> es un componente en Discourse que usamos para mostrar un botón con una etiqueta y un ícono.
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 ruta 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 púrpura:
Desafortunadamente, 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 por qué ocurre 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 llame a
showTentacleen el controlador. - Que
showTentacleestablezca la propiedadtentacleVisibleentruepara que aparezca la imagen.
Si aún 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, cuando refrescamos nuestra página, al hacer clic en el botón se muestra nuestro personaje animado.
Dejo como un ejercicio adicional para el lector agregar un botón que oculte el tentáculo cuando se haga clic en él 
Si tienes problemas para hacer funcionar tu versión de este plugin, lo he subido a GitHub.
Más en la serie
Parte 1: Conceptos básicos 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.
