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

[Discourse]

Au fil du temps, Discourse est devenu de plus en plus complexe, et il peut être intimidant pour les débutants de comprendre comment les données parcourent tout le chemin, depuis l’application Ruby on Rails en back-end jusqu’à l’application Ember.js en front-end.

Ce tutoriel vise à présenter 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 son propre URL dans notre application.

D’abord les URLs

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

Dans ce cas :

• Visiter /admin/snack dans votre navigateur devrait afficher l’en-cas en utilisant la « pile complète », c’est-à-dire que l’application Ember sera chargée et demandera les données nécessaires pour afficher l’en-cas.

• Visiter /admin/snack.json devrait renvoyer les données JSON de l’en-cas lui-même.

Côté serveur (Ruby on Rails)

Commençons par créer un nouveau contrôleur pour l’en-cas.

app/controllers/admin/snack_controller.rb

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

Dans ce cas, nous héritons de Admin::AdminController pour bénéficier de toutes les vérifications 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 chose à faire avant de pouvoir accéder à notre contrôleur : ajouter une ligne à config/routes.rb :

Trouvez le bloc qui ressemble à ceci :

namespace :admin, constraints: StaffConstraint.new do
  # beaucoup de choses
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 voir le JSON de l’en-cas ! Notre API d’en-cas semble fonctionner

Bien sûr, au fur et à mesure que vous développerez votre fonctionnalité pour ajouter plus de complexité, vous ne renverriez probablement pas un JSON codé en dur depuis un contrôleur comme celui-ci ; vous interrogeriez plutôt la base de données et renverriez les données de cette manière.

Côté client (Ember.js)

Si vous ouvrez votre navigateur et visitez /admin/snack (sans le .json), vous verrez que Discourse affiche « Oups ! Cette page n’existe pas. » — c’est parce qu’il n’y a rien dans notre application front-end Ember pour répondre à cette route. Ajoutons un modèle .gjs pour afficher notre en-cas :

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

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

  <hr />

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

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

this.route("snack");

Il nous reste une dernière chose à faire dans l’univers d’Ember : 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. Il s’agira d’un Ember Route. Sa fonction model() sera appelée lorsque la route sera entrée, nous ferons donc notre appel ajax dedans :

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, ouvrez votre navigateur sur /admin/snack et vous devriez voir les détails de l’en-cas rendus dans la page !

Résumé

• Ouvrir votre navigateur sur /admin/snack lance l’application Ember

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

• Le 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 admin_snack_controller renvoie du JSON

• L’application Ember récupère le JSON et rend le modèle .gjs

Où aller à partir d’ici

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

---

Ce document est sous contrôle de version - proposez des modifications sur GitHub.