Tutorial anterior: Developing Discourse Plugins - Part 4 - Setup git
Às vezes, as configurações do site não são suficientes como interface de administração para o seu plugin funcionar da maneira que você deseja. Por exemplo, se você instalar o plugin discourse-akismet, talvez tenha notado que ele adiciona um item de navegação na seção de plugins de administração do seu 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, proveniente 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 o nosso plugin. Uma premissa que o Discourse faz é que quase todas as rotas no front end têm uma rota correspondente 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 informar o 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 dos plugins!’
(Se isso estiver confuso, não se preocupe muito, voltaremos a isso em um tutorial futuro quando tratarmos de ações no 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 um tentáculo roxo quando o usuário clica 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 do Discourse que usamos para exibir 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 adicionassem rotas à aplicação ember. A sintaxe dentro de map() é muito semelhante à do 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, você deve ser capaz de 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 para o seu console de desenvolvedor, deve ver um erro que fornece uma pista do motivo:
Uncaught Error: Nothing handled the action 'showTentacle'`
Ah sim, a razão é que em nosso modelo estamos dependendo de algumas coisas:
- Que quando o usuário clica no botão,
showTentacleserá chamado no controlador. showTentacledeve definir a propriedadetentacleVisiblecomotruepara que a imagem apareça.
Se você ainda não leu os Guias do Ember sobre Controladores, agora é um bom momento para fazê-lo, porque implementaremos um controlador para o 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!
Deixarei como exercício extra para o leitor adicionar um botão que oculta o tentáculo 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: Fundamentos de Plugins
Parte 2: Saídas 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.
