Criando Rotas no Discourse e Exibindo Dados

[Discourse]

Ao longo do tempo, o Discourse cresceu em complexidade e pode ser assustador para iniciantes entender como os dados chegam do aplicativo Ruby on Rails de back-end até o aplicativo Ember.js na frente.

Este tutorial tem como objetivo mostrar o ciclo de vida completo de uma requisição no Discourse e explicar os passos necessários se você quiser construir uma nova página com sua própria URL em nossa aplicação.

URLs Primeiro

Eu sempre prefiro começar a pensar em recursos em termos das URLs para acessá-los. Por exemplo, digamos que queremos construir um recurso de administração que mostre o último lanche que comi enquanto trabalhava no Discourse. Uma URL adequada para isso seria /admin/snack.

Neste caso:

• Visitar /admin/snack no seu navegador deve mostrar o lanche usando o “full stack”, em outras palavras, o aplicativo Ember será carregado e ele solicitará os dados necessários para exibir o lanche.

• Visitar /admin/snack.json deve retornar os dados JSON do próprio lanche.

O Lado do Servidor (Ruby on Rails)

Vamos começar criando um novo controller para o lanche.

app/controllers/admin/snack_controller.rb

class Admin::SnackController < Admin::AdminController
  def index
    render json: { name: "donut", description: "delicious!" }
  end
end

Neste caso, herdamos de Admin::AdminController para obter todas as verificações de segurança para garantir que o usuário que visualiza o controller seja um administrador. Só temos mais uma coisa a fazer antes de podermos acessar nosso controller, e isso é adicionar uma linha em config/routes.rb:

Encontre o bloco que se parece com isto:

namespace :admin, constraints: StaffConstraint.new do
  # lots of stuff
end

E adicione esta linha dentro dele:

get 'snack' => 'snack#index'

Quando terminar, você deverá ser capaz de visitar /admin/snack.json no seu navegador e verá o JSON do lanche! Nossa API de lanches parece estar funcionando

É claro, à medida que você constrói seu recurso para adicionar mais complexidade, você provavelmente não retornaria apenas JSON codificado de forma fixa de um controller como este; você consultaria o banco de dados e o retornaria dessa forma.

O Lado do Cliente (Ember.js)

Se você abrir seu navegador e visitar /admin/snack (sem o .json), verá que o Discourse diz “Oops! That page doesn’t exist.” — isso ocorre porque não há nada em nosso aplicativo Ember front-end para responder à rota. Vamos adicionar um template handlebars para mostrar nosso lanche:

app/assets/javascripts/admin/templates/snack.hbs

<h1>{{model.name}}</h1>

<hr />

<p>{{model.description}}</p>

E, assim como no lado da API do Rails, precisamos conectar a rota. Abra o arquivo app/assets/javascripts/admin/routes/admin-route-map.js e procure pelo método export default function(). Adicione a seguinte linha:

this.route("snack");

Temos uma última coisa a fazer no mundo Ember, e é fazer com que o aplicativo Ember execute uma requisição AJAX para buscar nosso JSON do servidor. Vamos criar mais um arquivo. Este será um Ember Route. Sua função model() será chamada quando a rota for acessada, então faremos nossa chamada ajax lá:

app/assets/javascripts/admin/routes/admin-snack.js

import { ajax } from "discourse/lib/ajax";

export default Ember.Route.extend({
  model() {
    return ajax("/admin/snack.json");
  },
});

Agora, você pode abrir seu navegador em /admin/snack e deverá ver os detalhes do lanche renderizados na página!

Resumo

• Abrir seu navegador em /admin/snack inicializa o aplicativo Ember

• O roteador do aplicativo Ember diz que snack deve ser a rota

• O Ember.Route para snack faz uma requisição AJAX para /admin/snack.json

• O roteador do aplicativo Rails diz que este deve ser o admin_snack controller

• O admin_snack_controller retorna JSON

• O aplicativo Ember recebe o JSON e renderiza o template Handlebars

Para Onde Ir a Partir Daqui

Eu escrevi um tutorial de acompanhamento sobre como adicionar um Componente Ember ao Discourse.

---

Este documento é controlado por versão - sugira alterações no github.