Création de routes dans Discourse et affichage des données

[Discourse]

Au fil du temps, Discourse est devenu complexe et il peut être intimidant pour les débutants de comprendre comment les données passent de l’application Ruby on Rails côté serveur à l’application Ember.js côté client.

Ce tutoriel vise à montrer le cycle de vie complet d’une requête dans Discourse et à expliquer les étapes nécessaires si vous souhaitez créer une nouvelle page avec sa propre URL dans notre application.

Les URL d’abord

Je préfère toujours commencer à penser aux fonctionnalités en termes d’URL pour y accéder. Par exemple, disons que nous voulons créer une fonctionnalité d’administration qui affiche la dernière collation que j’ai mangée en travaillant sur Discourse. Une URL appropriée pour cela serait /admin/snack.

Dans ce cas :

• Visiter /admin/snack dans votre navigateur devrait afficher la collation en utilisant le « full stack », c’est-à-dire que l’application Ember sera chargée et demandera les données dont elle a besoin pour afficher la collation.

• Visiter /admin/snack.json devrait retourner les données JSON de la collation elle-même.

Le côté serveur (Ruby on Rails)

Commençons par créer un nouveau contrôleur pour la collation.

app/controllers/admin/snack_controller.rb

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

Dans ce cas, nous héritons de Admin::AdminController pour obtenir tous les contrôles de sécurité afin de nous assurer que l’utilisateur qui consulte le contrôleur est un administrateur. Il ne nous reste plus qu’une seule chose à faire avant de pouvoir accéder à notre contrôleur, et c’est d’ajouter une ligne à config/routes.rb :

Trouvez le bloc qui ressemble à ceci :

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

Et ajoutez cette ligne à l’intérieur :

get 'snack' => 'snack#index'

Une fois terminé, vous devriez pouvoir visiter /admin/snack.json dans votre navigateur et vous verrez le JSON de la collation ! Notre API de collation semble fonctionner

Bien sûr, à mesure que vous développerez votre fonctionnalité pour ajouter plus de complexité, vous ne vous contenterez probablement pas de retourner du JSON codé en dur à partir d’un contrôleur comme celui-ci ; vous interrogez la base de données et la retournez de cette manière.

Le côté client (Ember.js)

Si vous ouvrez votre navigateur et visitez /admin/snack (sans le .json), vous verrez que Discourse affiche « Oops! That page doesn’t exist. » — c’est parce qu’il n’y a rien dans notre application Ember front-end pour répondre à la route. Ajoutons un template handlebars pour afficher notre collation :

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

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

<hr />

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

Et, comme du côté API Rails, nous devons connecter la route. Ouvrez le fichier app/assets/javascripts/admin/routes/admin-route-map.js et recherchez la méthode export default function(). Ajoutez la ligne suivante :

this.route("snack");

Il ne nous reste plus qu’une dernière chose à faire dans le monde Ember, et c’est de faire en sorte que l’application Ember effectue une requête AJAX pour récupérer notre JSON depuis le serveur. Créons un dernier fichier. Ce sera une Ember Route. Sa fonction model() sera appelée lorsque la route sera atteinte, nous effectuerons donc notre appel ajax à l’intérieur :

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

Maintenant, vous pouvez ouvrir votre navigateur sur /admin/snack et vous devriez voir les détails de la collation rendus sur la page !

Résumé

• Ouvrir votre navigateur sur /admin/snack démarre l’application Ember

• Le routeur de l’application Ember indique que snack doit être la route

• La Ember.Route pour snack effectue une requête AJAX vers /admin/snack.json

• Le routeur de l’application Rails indique que cela doit être le contrôleur admin_snack

• Le contrôleur admin_snack retourne du JSON

• L’application Ember reçoit le JSON et rend le template Handlebars

Par où commencer ensuite

J’ai écrit un tutoriel de suivi sur comment ajouter un composant Ember à Discourse.

---

Ce document est contrôlé par version - suggérez des modifications sur github.