Criando rotas no Discourse e exibindo dados

[Discourse]

Com o tempo, o Discourse ganhou em complexidade e pode ser intimidante para iniciantes entenderem como os dados viajam do back-end, uma aplicação Ruby on Rails, até a aplicação Ember.js na frente.

Este tutorial tem como objetivo mostrar o ciclo de vida completo de uma requisição no Discourse e explicar as etapas necessárias 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 administrador que mostrasse 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 a “pilha completa”, em outras palavras, a aplicação Ember será carregada e fará a requisição dos 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 está visualizando o controller é um administrador. Temos apenas mais uma coisa a fazer antes de podermos acessar nosso controller, que é 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 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 seu recurso para adicionar mais complexidade, provavelmente não retornaria apenas JSON hardcoded de um controller como este; você consultaria o banco de dados e 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 nossa aplicação front-end Ember para responder à rota. Vamos adicionar um modelo .gjs para mostrar nosso lanche:

frontend/discourse/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 frontend/discourse/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, que é fazer a aplicação Ember executar uma requisição AJAX para buscar nosso JSON do servidor. Vamos criar um último arquivo. Esta será uma Ember Route. Sua função model() será chamada quando a rota for acessada, então faremos nossa chamada ajax lá:

frontend/discourse/admin/routes/admin-snack.js

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

export default class AdminSnackRoute extends DiscourseRoute {
  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 a aplicação Ember

• O roteador da aplicação Ember diz que snack deve ser a rota

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

• O roteador da aplicação Rails diz que isso deve ser o admin_snack controller

• O admin_snack_controller retorna JSON

• A aplicação Ember recebe o JSON e renderiza o modelo .gjs

Para onde ir a partir daqui

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

---

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