Creazione di percorsi in Discourse e visualizzazione dati

[Discourse]

Nel tempo Discourse è cresciuto in complessità e può essere scoraggiante per i principianti capire come i dati arrivino dal backend dell’applicazione Ruby on Rails all’applicazione Ember.js sul frontend.

Questo tutorial è pensato per mostrare il ciclo di vita completo di una richiesta in Discourse e spiegare i passaggi necessari se si desidera creare una nuova pagina con il proprio URL nella nostra applicazione.

URL prima di tutto

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 snack 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 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 per lo 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 per assicurarci che l’utente che visualizza il controller sia un amministratore. Abbiamo 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 assomiglia a questo:

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 tuo browser e vedrai il JSON per lo snack! La nostra API per gli snack sembra funzionare

Naturalmente, man mano che sviluppi la tua funzionalità aggiungendo più complessità, probabilmente non restituiresti semplicemente JSON codificato in modo statico da un controller come questo, ma interrogheresti il database e lo restituiresti in quel modo.

Il lato client (Ember.js)

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

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

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

<hr />

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

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

Ci resta un’ultima cosa da fare nel mondo Ember, ed è far sì che l’applicazione Ember esegua una richiesta AJAX per recuperare il nostro JSON dal server. Creiamo un ultimo file. Questa sarà una Ember Route. La sua funzione model() verrà chiamata quando la rotta viene inserita, 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 snack renderizzati nella pagina!

Riepilogo

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

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

• La 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 JSON

• L’applicazione Ember riceve il JSON e renderizza il template Handlebars

Da dove andare da qui

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

---

Questo documento è controllato tramite versione - suggerisci modifiche su github.