Creazione di rotte in Discourse e visualizzazione dei dati

[Discourse]

Col tempo, Discourse è cresciuta in complessità e per i principianti può risultare scoraggiante capire come i dati passino dall’applicazione back-end Ruby on Rails all’applicazione Ember.js in front-end.

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 funzione di amministrazione che mostrasse l’ultimo snack che ho mangiato mentre lavoravo su Discourse. Un URL adatto sarebbe /admin/snack

In questo caso:

• Visitare /admin/snack nel browser dovrebbe mostrare lo snack utilizzando lo “stack completo”, in altre parole l’applicazione Ember verrà caricata e richiederà i dati necessari per visualizzare lo snack.

• Visitare /admin/snack.json dovrebbe restituire i dati JSON dello snack stesso.

Il lato server (Ruby on Rails)

Iniziamo creando un nuovo controller per lo snack.

app/controllers/admin/snack_controller.rb

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

In questo caso ereditiamo da Admin::AdminController per ottenere tutti i controlli di sicurezza che assicurano che l’utente che visualizza il controller sia un amministratore. C’è solo un’altra cosa da fare prima di poter accedere al nostro controller, ed è aggiungere una riga a config/routes.rb:

Trova il blocco che ha questo aspetto:

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

E aggiungi questa riga al suo interno:

get 'snack' => 'snack#index'

Una volta fatto, dovresti essere in grado di visitare /admin/snack.json nel browser e vedrai i JSON dello snack! La nostra API per gli snack sembra funzionare

Ovviamente, mentre sviluppi la tua funzionalità aggiungendo più complessità, probabilmente non restituirai semplicemente JSON hardcoded da un controller come questo; interrogherai il database e li restituirai in quel modo.

Il lato client (Ember.js)

Se apri il browser e visiti /admin/snack (senza .json), vedrai che Discourse dice “Oops! That page doesn’t exist.” — questo perché non c’è nulla nella nostra applicazione front-end Ember che risponda alla rotta. Aggiungiamo un template .gjs per mostrare il nostro snack:

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

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

  <hr />

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

E, come per il lato API di Rails, dobbiamo collegare la rotta. 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");

C’è un’ultima cosa da fare nel mondo Ember, ed è far eseguire all’applicazione Ember una richiesta AJAX per recuperare i nostri JSON dal server. Creiamo un ultimo file. Sarà un Ember Route. La sua funzione model() verrà chiamata quando la rotta viene raggiunta, quindi eseguiamo la nostra chiamata ajax lì dentro:

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 snack renderizzati nella pagina!

Riepilogo

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

• Il router dell’applicazione Ember dice che snack dovrebbe essere la rotta

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

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

• Il admin_snack_controller restituisce i JSON

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

Dove andare da qui

Ho scritto un tutorial di follow-up su come aggiungere un Component Ember a Discourse.

---

Questo documento è sottoposto a controllo delle versioni - suggerisci modifiche su github.