Tutorial anterior: Developing Discourse Plugins - Part 4 - Setup git
Às vezes, as configurações do site não são suficientes como uma interface de administração para que seu plugin funcione como você deseja. Por exemplo, se você instalar o plugin discourse-akismet, pode ter notado que ele adiciona um item de navegação à seção de plugins do administrador do seu Discourse:
Neste tutorial, mostraremos como adicionar uma interface de administração para seu plugin. Vou chamar meu plugin de „purple-tentacle“, em homenagem a um dos meus jogos de computador favoritos. Sério, eu realmente amo aquele jogo!
Configurando a rota de administrador
Vamos começar adicionando um plugin.rb como fizemos nas partes anteriores do 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
A linha add_admin_route informa ao Discourse que este plugin precisará de um link na página /admin/plugins. Seu título será purple_tentacle.title, vindo do nosso arquivo de traduções i18n, e ele linkará para a rota purple-tentacle.
As linhas abaixo configuram o mapeamento de rotas no lado do servidor para nosso plugin. O Discourse parte do pressuposto de que quase toda rota no front-end tem uma rota no lado do servidor que fornece dados. Para este plugin de exemplo, na verdade não precisamos de nenhum dados do back-end, mas precisamos dizer ao Discourse para servir algo caso o usuário acesse /admin/plugins/purple-tentacle diretamente. Esta linha apenas diz: „ei, se o usuário acessar essa URL diretamente no lado do servidor, sirva o conteúdo padrão dos plugins!"
(Se isso estiver confuso, não se preocupe muito; voltaremos a isso em um tutorial futuro, quando lidarmos com ações no lado do servidor.)
Em seguida, adicionaremos um modelo que será exibido quando o usuário acessar o caminho /admin/plugins/purple-tentacle. Será apenas um botão que mostra um gif animado de um tentáculo roxo quando o usuário clicar no botão:
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>
Se você aprendeu os fundamentos do Handlebars, o modelo deve ser bastante simples de entender. O <DButton /> é um componente no Discourse que usamos para mostrar um botão com um rótulo e um ícone.
Para conectar nosso novo modelo, precisamos criar um mapa de rotas:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Um mapa de rotas é algo que adicionamos ao Discourse para permitir que plugins adicionem rotas à aplicação Ember. A sintaxe dentro de map() é muito semelhante ao roteador do Ember. Neste caso, nosso mapa de rotas é muito simples; ele apenas declara uma rota chamada purple-tentacle sob /admin/plugins.
Finalmente, vamos adicionar nossas strings de tradução:
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
Se você reiniciar seu servidor de desenvolvimento, deverá ser capaz de visitar /admin/plugins e verá nosso link! Se clicar nele, verá o botão para mostrar nosso tentáculo roxo:
Infelizmente, quando você clica no botão, nada acontece 
Se você olhar seu console de desenvolvedor, deverá ver um erro que fornece uma pista do motivo:
Uncaught Error: Nothing handled the action 'showTentacle'`
Ah sim, o motivo é que, em nosso modelo, estamos dependendo de algumas coisas:
- Que quando o usuário clicar no botão,
showTentacleserá chamado no controlador. showTentacledeve definir a propriedadetentacleVisiblecomotruepara que a imagem apareça.
Se você ainda não leu as Guias do Ember sobre Controladores, agora é um bom momento para fazê-lo, pois implementaremos um controlador para nosso modelo purple-tentacle que lidará com essa lógica.
Crie o seguinte arquivo:
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;
}
}
E agora, ao atualizar nossa página, clicar no botão mostra nosso personagem animado!
Deixo como um exercício extra para o leitor adicionar um botão que esconde o tentáculo quando clicado 
Se você estiver tendo problemas para fazer sua versão deste plugin funcionar, eu a enviei para o GitHub.
Mais na série
Parte 1: Noções básicas de plugins
Parte 2: Saídas de plugins
Parte 3: Configurações do site
Parte 4: Configuração do git
Parte 5: Este tópico
Parte 6: Testes de aceitação
Parte 7: Publique seu plugin
Este documento está sob controle de versão — sugira alterações no GitHub.
