Creando rutas en Discourse y mostrando datos

[Discourse]

A medida que Discourse ha crecido en complejidad con el tiempo, puede resultar desalentador para los principiantes comprender cómo los datos llegan desde la aplicación Ruby on Rails del backend hasta la aplicación Ember.js en el frontend.

Este tutorial tiene como objetivo mostrar el ciclo de vida completo de una solicitud en Discourse y explicar los pasos necesarios si desea crear una nueva página con su propia URL en nuestra aplicación.

URLs Primero

Siempre prefiero empezar a pensar en las características en términos de las URLs para acceder a ellas. Por ejemplo, digamos que queremos crear una característica de administración que muestre el último bocadillo que comí mientras trabajaba en Discourse. Una URL adecuada para eso sería /admin/snack

En este caso:

• Visitar /admin/snack en su navegador debería mostrar el bocadillo usando el “stack completo”, en otras palabras, la aplicación Ember se cargará y solicitará los datos que necesita para mostrar el bocadillo.

• Visitar /admin/snack.json debería devolver los datos JSON del bocadillo en sí.

El Lado del Servidor (Ruby on Rails)

Comencemos creando un nuevo controlador para el bocadillo.

app/controllers/admin/snack_controller.rb

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

En este caso, heredamos de Admin::AdminController para obtener todos los controles de seguridad y asegurarnos de que el usuario que ve el controlador sea un administrador. Solo nos queda una cosa más por hacer antes de poder acceder a nuestro controlador, y es agregar una línea a config/routes.rb:

Encuentre el bloque que se ve así:

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

Y agregue esta línea dentro:

get 'snack' => 'snack#index'

Una vez que haya terminado, debería poder visitar /admin/snack.json en su navegador y verá el JSON del bocadillo. ¡Nuestra API de bocadillos parece estar funcionando!

Por supuesto, a medida que desarrolle su característica para agregar más complejidad, probablemente no solo devolvería JSON codificado de forma estática desde un controlador como este, sino que consultaría la base de datos y la devolvería de esa manera.

El Lado del Cliente (Ember.js)

Si abre su navegador y visita /admin/snack (sin el .json), verá que Discourse dice “¡Vaya! Esa página no existe.” — eso se debe a que no hay nada en nuestra aplicación Ember frontend que responda a la ruta. Agreguemos una plantilla handlebars para mostrar nuestro bocadillo:

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

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

<hr />

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

Y, al igual que en el lado de la API de Rails, necesitamos conectar la ruta. Abra el archivo app/assets/javascripts/admin/routes/admin-route-map.js y busque el método export default function(). Agregue la siguiente línea:

this.route("snack");

Nos queda una última cosa por hacer en el mundo Ember, y es hacer que la aplicación Ember realice una solicitud AJAX para obtener nuestro JSON del servidor. Creemos un último archivo. Esta será una Ruta Ember. Su función model() se llamará cuando se ingrese a la ruta, así que haremos nuestra llamada ajax allí:

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");
  },
});

Ahora, puede abrir su navegador en /admin/snack y debería ver los detalles del bocadillo renderizados en la página.

Resumen

• Abrir su navegador en /admin/snack inicia la aplicación Ember

• El enrutador de la aplicación Ember dice que snack debería ser la ruta

• La Ruta Ember para snack realiza una solicitud AJAX a /admin/snack.json

• El enrutador de la aplicación Rails dice que ese debería ser el controlador admin_snack

• El admin_snack_controller devuelve JSON

• La aplicación Ember obtiene el JSON y renderiza la plantilla Handlebars

Por dónde empezar a partir de aquí

He escrito un tutorial de seguimiento sobre cómo agregar un componente Ember a Discourse.

---

Este documento está controlado por versiones: sugiera cambios en github.