Criando rotas no Discourse e exibindo dados

[Discourse]

Com o tempo, o Discourse tornou-se mais complexo e pode ser intimidante para iniciantes entenderem como os dados trafegam desde o aplicativo back-end Ruby on Rails até o aplicativo Ember.js no front-end.

Este tutorial tem como objetivo mostrar o ciclo de vida completo de uma requisiçã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

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

Neste caso:

• Acessar /admin/snack no seu navegador deve exibir a lanchinho usando a “pilha completa”, ou seja, o aplicativo Ember será carregado e solicitará os dados necessários para exibir a lanchinho.

• Acessar /admin/snack.json deve retornar os dados JSON da própria lanchinho.

Lado do Servidor (Ruby on Rails)

Vamos começar criando um novo controlador para a lanchinho.

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, garantindo que o usuário que está visualizando o controlador seja um administrador. Só precisamos fazer mais uma coisa antes de acessar nosso controlador: adicionar uma linha ao arquivo config/routes.rb.

Encontre o bloco que se parece com isto:

namespace :admin, constraints: StaffConstraint.new do
  # muitas coisas
end

E adicione esta linha dentro dele:

get 'snack' => 'snack#index'

Uma vez feito isso, você deverá ser capaz de acessar /admin/snack.json no seu navegador e verá o JSON da lanchinho! Nossa API de lanchinhos parece estar funcionando

É claro, à medida que você desenvolve seu recurso para adicionar mais complexidade, provavelmente não retornaria apenas JSON codificado manualmente a partir de um controlador como este; você consultaria o banco de dados e retornaria os dados dessa forma.

Lado do Cliente (Ember.js)

Se você abrir seu navegador e acessar /admin/snack (sem o .json), verá que o Discourse diz “Ops! Essa página não existe.” — isso ocorre porque não há nada em nosso aplicativo front-end Ember que responda à rota. Vamos adicionar um template .gjs para exibir nossa lanchinho:

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 do 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 mais uma coisa a fazer no mundo do Ember: fazer com que o aplicativo Ember realize uma requisição AJAX para buscar nosso JSON do servidor. Vamos criar um último arquivo. Este será uma Rota Ember. Sua função model() será chamada quando a rota for acessada, então faremos nossa chamada ajax dentro dela:

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 da lanchinho 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.

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

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

• O admin_snack_controller retorna JSON.

• O aplicativo Ember recebe o JSON e renderiza o template .gjs.

Para onde ir a partir daqui

Escrevi um tutorial complementar sobre como adicionar um Componente Ember ao Discourse.

---

Este documento está sob controle de versão — sugira alterações no GitHub.