Criando rotas no Discourse e exibindo dados

[Discourse]

Com o tempo, o Discourse cresceu em complexidade e pode ser intimidante para iniciantes entenderem como os dados chegam do aplicativo Ruby on Rails no back end até o aplicativo Ember.js na frente.

Este tutorial tem como objetivo mostrar o ciclo de vida completo de uma solicitação no Discourse e explicar os passos necessários caso você queira criar uma nova página com sua própria URL em nosso aplicativo.

URLs Primeiro

Eu sempre prefiro começar a pensar em funcionalidades em termos das URLs para acessá-las. Por exemplo, digamos que queremos criar uma funcionalidade de administração que mostrasse o último lanche que eu 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”, ou seja, o aplicativo Ember será carregado e solicitará os dados de que precisa para exibir o lanche.

• Visitar /admin/snack.json deve retornar os dados em 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 está visualizando o controller é um administrador. Temos apenas mais uma coisa a fazer antes de podermos acessar nosso controller, e isso é adicionar uma linha em config/routes.rb:

Encontre o bloco que parece com este:

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

E adicione esta linha dentro dele:

get 'snack' => 'snack#index'

Quando você terminar, você deve 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 sua funcionalidade e adiciona mais complexidade, provavelmente não retornaria apenas JSON hardcoded 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 porque não há nada em nosso aplicativo front end Ember para responder à rota. Vamos adicionar um template .gjs para mostrar nosso lanche:

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

<template>
  <h1>{{@controller.model.name}}</h1>

  <hr />

  <p>{{@controller.model.description}}</p>
</template>

E, assim como no lado da API Rails, precisamos configurar 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 solicitação AJAX para buscar nosso JSON do servidor. Vamos criar um último arquivo. Este será uma 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 deve ver os detalhes do lanche renderizados na página!

Resumo

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

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

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

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

• O admin_snack_controller retorna JSON

• O aplicativo Ember obtém o JSON e renderiza o template .gjs

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.