Creando rutas en Discourse y mostrando datos

[Discourse]

Con el tiempo, Discourse ha aumentado en complejidad y puede resultar abrumador para los principiantes entender cómo los datos viajan desde la aplicación backend de Ruby on Rails hasta la aplicación frontend de Ember.js.

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

Primero las URLs

Siempre prefiero comenzar pensando en las funciones en términos de las URLs para acceder a ellas. Por ejemplo, digamos que queremos crear una función de administración que muestre la última comida rápida que consumí mientras trabajaba en Discourse. Una URL adecuada para ello sería /admin/snack.

En este caso:

• Visitar /admin/snack en tu navegador debería mostrar la comida rápida utilizando la “pila completa”; es decir, se cargará la aplicación Ember y solicitará los datos necesarios para mostrar la comida.

• Visitar /admin/snack.json debería devolver los datos JSON de la propia comida.

El lado del servidor (Ruby on Rails)

Comencemos creando un nuevo controlador para la comida.

app/controllers/admin/snack_controller.rb

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

En este caso, heredamos de Admin::AdminController para obtener todas las verificaciones de seguridad que aseguran que el usuario que ve el controlador sea un administrador. Solo nos falta una cosa más antes de poder acceder a nuestro controlador: agregar una línea a config/routes.rb.

Busca el bloque que se ve así:

namespace :admin, constraints: StaffConstraint.new do
  # muchas cosas
end

Y agrega esta línea dentro de él:

get 'snack' => 'snack#index'

Una vez que hayas terminado, deberías poder visitar /admin/snack.json en tu navegador y verás el JSON de la comida. ¡Nuestra API de comida parece estar funcionando

Por supuesto, a medida que desarrolles tu función y añadas más complejidad, probablemente no solo devolverías JSON codificado directamente desde un controlador como este, sino que consultarías la base de datos y devolverías los datos de esa manera.

El lado del cliente (Ember.js)

Si abres tu navegador y visitas /admin/snack (sin el .json), verás que Discourse dice: “¡Vaya! Esa página no existe”. Esto se debe a que no hay nada en nuestra aplicación frontend de Ember que responda a la ruta. Agreguemos una plantilla .gjs para mostrar nuestra comida:

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

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

  <hr />

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

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

this.route("snack");

Nos queda una última cosa por hacer en el mundo de Ember: hacer que la aplicación Ember realice una solicitud AJAX para obtener nuestro JSON del servidor. Creemos un último archivo. Este será una Ruta de Ember. Su función model() se llamará cuando se ingrese a la ruta, por lo 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, puedes abrir tu navegador en /admin/snack y deberías ver los detalles de la comida renderizados en la página.

Resumen

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

• El enrutador de la aplicación Ember indica que snack debe ser la ruta.

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

• El enrutador de la aplicación Rails indica que eso debe ser el controlador admin_snack.

• El admin_snack_controller devuelve JSON.

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

A dónde ir a partir de aquí

He escrito una guía complementaria sobre cómo agregar un componente de Ember a Discourse.

---

Este documento está controlado por versiones: sugiere cambios en GitHub.