Crear rutas en Discourse y mostrar datos

[Discourse]

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

Este tutorial 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 empezar a pensar en las funcionalidades en términos de las URLs para acceder a ellas. Por ejemplo, supongamos que queremos crear una función de administración que muestre el último snack que comí mientras trabajaba en Discourse. Una URL adecuada para eso sería /admin/snack

En este caso:

• Visitar /admin/snack en tu navegador debería mostrar el snack utilizando el «full stack», es decir, la aplicación Ember se cargará y solicitará los datos que necesita para mostrar el snack.

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

El lado del servidor (Ruby on Rails)

Empecemos creando un nuevo controlador para el snack.

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 todas las comprobaciones de seguridad que aseguran que el usuario que ve el controlador es un administrador. Solo tenemos una cosa más que hacer antes de poder acceder a nuestro controlador, y es añadir una línea a config/routes.rb:

Busca el bloque que se ve así:

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

Y añade 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 del snack. ¡Nuestra API de snacks parece estar funcionando

Por supuesto, a medida que construyas tu función y añadas más complejidad, probablemente no devolverías JSON codificado en el controlador de esta manera; consultarías la base de datos y lo devolverías así.

El lado del cliente (Ember.js)

Si abres tu navegador y visitas /admin/snack (sin el .json), verás que Discourse dice «¡Ups! Esa página no existe.», porque no hay nada en nuestra aplicación front end Ember que responda a la ruta. Añadamos una plantilla .gjs para mostrar nuestro snack:

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(). Añade la siguiente línea:

this.route("snack");

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

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 del snack renderizados en la página.

Resumen

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

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

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

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

• El admin_snack_controller devuelve JSON

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

A dónde ir desde aquí

He escrito un tutorial de seguimiento sobre cómo añadir un Componente de Ember a Discourse.

---

Este documento está controlado por versiones - sugiere cambios en github.