Creazione di percorsi in Discourse e visualizzazione dei dati

[Discourse]

Col tempo, Discourse è diventato più complesso e può essere scoraggiante per i principianti capire come i dati viaggiano dall’applicazione back-end Ruby on Rails fino all’applicazione Ember.js in prima linea.

Questo tutorial ha lo scopo di mostrare l’intero ciclo di vita di una richiesta in Discourse e spiegare i passaggi necessari se si desidera creare una nuova pagina con il proprio URL nella nostra applicazione.

Prima gli URL

Preferisco sempre iniziare a pensare alle funzionalità in termini di URL per accedervi. Ad esempio, supponiamo di voler creare una funzionalità di amministrazione che mostri l’ultimo spuntino che ho mangiato mentre lavoravo su Discourse. Un URL adatto per questo sarebbe /admin/snack.

In questo caso:

• Visitare /admin/snack nel browser dovrebbe mostrare lo spuntino utilizzando l’intera pila tecnologica, ovvero l’applicazione Ember verrà caricata e richiederà i dati necessari per visualizzare lo spuntino.

• Visitare /admin/snack.json dovrebbe restituire i dati JSON relativi allo spuntino stesso.

Il lato server (Ruby on Rails)

Iniziamo creando un nuovo controller per lo spuntino.

app/controllers/admin/snack_controller.rb

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

In questo caso ereditiamo da Admin::AdminController per ottenere tutti i controlli di sicurezza necessari a garantire che l’utente che visualizza il controller sia un amministratore. Dobbiamo solo fare una cosa in più prima di poter accedere al nostro controller, ovvero aggiungere una riga a config/routes.rb:

Trova il blocco che assomiglia a questo:

namespace :admin, constraints: StaffConstraint.new do
  # un sacco di cose
end

E aggiungi questa riga al suo interno:

get 'snack' => 'snack#index'

Una volta terminato, dovresti essere in grado di visitare /admin/snack.json nel browser e vedrai il JSON relativo allo spuntino! La nostra API per gli spuntini sembra funzionare

Ovviamente, man mano che sviluppi la tua funzionalità aggiungendo maggiore complessità, probabilmente non restituirai semplicemente JSON hardcoded da un controller come questo, ma interrogherai il database e restituirai i dati in quel modo.

Il lato client (Ember.js)

Se apri il browser e visiti /admin/snack (senza .json), vedrai che Discourse dice: “Ops! Questa pagina non esiste.” Questo perché non c’è nulla nella nostra applicazione front-end Ember che risponda a tale route. Aggiungiamo un template .gjs per mostrare il nostro spuntino:

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

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

  <hr />

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

E, come nel lato API di Rails, dobbiamo collegare la route. Apri il file app/assets/javascripts/admin/routes/admin-route-map.js e cerca il metodo export default function(). Aggiungi la seguente riga:

this.route("snack");

Abbiamo ancora una cosa da fare nel mondo di Ember, ovvero far sì che l’applicazione Ember esegua una richiesta AJAX per recuperare il nostro JSON dal server. Creiamo un ultimo file. Si tratterà di una Ember Route. La sua funzione model() verrà chiamata quando si entra nella route, quindi faremo la nostra chiamata ajax lì:

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

Ora, puoi aprire il browser su /admin/snack e dovresti vedere i dettagli dello spuntino renderizzati nella pagina!

Riepilogo

• Aprire il browser su /admin/snack avvia l’applicazione Ember

• Il router dell’applicazione Ember indica che snack deve essere la route

• L’Ember.Route per snack esegue una richiesta AJAX a /admin/snack.json

• Il router dell’applicazione Rails indica che dovrebbe essere il controller admin_snack

• Il admin_snack_controller restituisce JSON

• L’applicazione Ember riceve il JSON e renderizza il template .gjs

Dove andare da qui

Ho scritto un tutorial di approfondimento su come aggiungere un componente Ember a Discourse.

---

Questo documento è sottoposto a controllo delle versioni: suggerisci modifiche su GitHub.