Tutorial anterior: Developing Discourse Plugins - Part 4 - Setup git
Às vezes, as configurações do site não são suficientes como interface de administrador para o seu plugin funcionar da maneira que 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 administrador 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 do Administrador
Vamos começar adicionando um plugin.rb como fizemos nas partes anteriores do tutorial.
plugin.rb
# name: purple-tentacle
# about: Um plugin de exemplo mostrando como adicionar uma rota de plugin
# 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ções i18n e ele linkará para a rota purple-tentacle.
As linhas abaixo configuram o mapeamento de rotas do lado do servidor para o nosso plugin. Uma suposição que o Discourse faz é que quase todas as rotas na interface frontal têm uma rota do lado do servidor que fornece dados. Para este plugin de exemplo, na verdade não precisamos de nenhum dados do back-end, mas precisamos informar ao Discourse para servir algo caso o usuário visite /admin/plugins/purple-tentacle diretamente. Esta linha apenas diz: ‘e aí, se o usuário visitar 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 do lado do servidor.)
Em seguida, adicionaremos um modelo 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 uma polvo roxa quando o usuário clica em um 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 o básico de 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 í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 à rotas do Ember. Neste caso, nosso mapa de rotas é muito simples, ele apenas declara uma rota chamada purple-tentacle sob /admin/plugins.
Por fim, vamos adicionar nossas strings de tradução:
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Polvo Roxo"
show: "Mostrar Polvo Roxo"
Se você reiniciar seu servidor de desenvolvimento, deverá ser capaz de visitar /admin/plugins e verá nosso link! Se você clicar nele, verá o botão para mostrar nosso polvo 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 sobre o 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 controller. showTentacledeve definir a propriedadetentacleVisiblecomotruepara que a imagem apareça.
Se você ainda não leu os Guias do Ember sobre Controllers, agora é um bom momento para fazê-lo, porque implementaremos um controller 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, quando atualizamos nossa página, clicar no botão mostra nosso personagem animado!
Deixo como exercício extra para o leitor adicionar um botão que esconde o polvo quando clicado 
Se você estiver tendo problemas para fazer sua versão deste plugin funcionar, eu o enviei para o github.
Mais na série
Parte 1: Conceitos Básicos de Plugins
Parte 2: Pontos de Plugin
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.
