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 complemento funcione como deseas. Por ejemplo, si instalas el complemento discourse-akismet, es posible que hayas notado que agrega un elemento de navegación a la sección de complementos de administración en tu Discourse:
En este tutorial te mostraremos cómo agregar una interfaz de administración para tu complemento. Llamaré a mi complemento 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
Empecemos agregando un plugin.rb como lo hemos hecho en partes anteriores del tutorial.
plugin.rb
# name: purple-tentacle
# about: Un complemento de ejemplo que muestra cómo agregar una ruta de complemento
# 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 dice a Discourse que este complemento 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 debajo configuran el mapeo del lado del servidor de rutas para nuestro complemento. Una suposición que hace Discourse es que casi todas las rutas en el front end tienen una ruta del lado del servidor que proporciona datos. Para este complemento de ejemplo, en realidad no necesitamos ningún dato del back end, 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: ‘¡oye, si el usuario visita esa URL directamente en el lado del servidor, sirve el contenido predeterminado de los complementos!’.
(Si esto es confuso, no te preocupes demasiado, volveremos a ello en un tutorial futuro cuando manejemos las 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 mostrará un gif animado de un tentáculo morado cuando el usuario haga clic en un botón:
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.hbs
{{#if tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{action "showTentacle"}}
@icon="eye"
@id="show-tentacle"
/>
</div>
Si has aprendido los conceptos básicos de handlebars, la plantilla debería ser bastante sencilla de entender. El <DButton /> es un componente en 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 que los complementos pudieran agregar rutas a la aplicación ember. La sintaxis dentro de map() es muy similar al enrutador 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 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 sucede nada 
Si miras en tu consola de desarrollador, deberías ver un error que da una pista de por qué es:
Uncaught Error: Nothing handled the action 'showTentacle'
Ah, sí, la razón está en nuestra plantilla handlebars que depende de un par de cosas:
- Que cuando el usuario haga clic en el botón, se llame a
showTentacle. 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 nuestro personaje animado!
Dejo como ejercicio adicional para el lector agregar un botón que oculte el tentáculo cuando se haga clic 
Si tienes problemas para hacer funcionar tu versión de este complemento, lo he subido a github.
Más en la serie
Parte 1: Conceptos básicos de complementos
Parte 2: Salidas de complementos
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 complemento
Este documento está controlado por versiones: sugiere cambios en github.
