Tutorial anterior: Developing Discourse Plugins - Part 4 - Setup git
Às vezes, as configurações do site não são uma interface de administração suficiente para o seu plugin funcionar como você deseja. Por exemplo, se você instalar o plugin discourse-akismet, você deve ter notado que ele adiciona um item de navegação à seção de plugins de administração em sua instalação do Discourse:
Neste tutorial, mostraremos como adicionar uma interface de administração para o seu plugin. Vou chamar meu plugin de purple-tentacle, em homenagem a um dos meus jogos de computador favoritos. Sério, eu realmente amo esse jogo!
Configurando a Rota de Administração
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 do nosso arquivo de tradução i18n e ele apontará para a rota purple-tentacle.
As linhas abaixo configuram o mapeamento do lado do servidor de rotas para o nosso plugin. Uma suposição que o Discourse faz é 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 dado do back-end, mas precisamos dizer ao Discourse para servir algo caso o usuário visite /admin/plugins/purple-tentacle diretamente. Esta linha apenas diz: ‘ei, se o usuário visitar essa URL diretamente no lado do servidor, sirva o conteúdo padrão de plugins!’
(Se isso for confuso, não se preocupe muito, voltaremos a isso em um tutorial futuro quando lidarmos com ações do lado do servidor.)
Em seguida, adicionaremos um template que será exibido quando o usuário visitar 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 clica em um botão:
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>
Se você aprendeu o básico do handlebars, o template deve ser bem simples de entender. O <DButton /> é um componente no Discourse que usamos para exibir um botão com um rótulo e um ícone.
Para conectar nosso novo template, 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 que os plugins pudessem adicionar rotas ao aplicativo 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á conseguir visitar /admin/plugins e verá nosso link! Se você clicar nele, verá o botão para mostrar nosso tentáculo roxo:
Infelizmente, quando você clica no botão, nada acontece 
Se você olhar no seu console de desenvolvedor, deverá ver um erro que fornece uma pista do porquê:
Uncaught Error: Nothing handled the action 'showTentacle'
Ah sim, a razão está no nosso template handlebars, estamos dependendo de algumas coisas:
- Que quando o usuário clica no botão,
showTentacleserá chamado. showTentacledeve definir a propriedadetentacleVisiblecomotruepara que a imagem apareça.
Se você não leu os Guias do Ember sobre Controladores agora é um bom momento para fazê-lo, porque implementaremos um controlador para nosso template 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, quando atualizarmos 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ê está 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: Plugin Outlets
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 é controlado por versão - sugira alterações no github.
