Créer des routes dans Discourse et afficher des données

[Discourse]

Avec le temps, Discourse est devenu 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 côté serveur jusqu’à 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.

D’abord les URL

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 affichait le dernier snack que j’ai mangé pendant que je travaillais sur Discourse. Une URL appropriée pour cela serait /admin/snack

Dans ce cas :

• Visiter /admin/snack dans votre navigateur devrait afficher le snack en utilisant la « pile complète », autrement dit l’application Ember sera chargée et elle demandera les données dont elle a besoin pour afficher le snack.

• Visiter /admin/snack.json devrait renvoyer les données JSON du snack lui-même.

Le côté serveur (Ruby on Rails)

Commençons par créer un nouveau contrôleur pour le snack.

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 bénéficier de 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 qu’une 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 du snack ! Notre API snack semble fonctionner

Bien sûr, à mesure que vous développerez votre fonctionnalité pour ajouter plus de complexité, vous ne renverrez probablement pas simplement du JSON codé en dur depuis un contrôleur comme celui-ci, vous interrogeriez la base de données et le renverriez 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 dit « Oups ! Cette page n’existe pas. » — c’est parce qu’il n’y a rien dans notre application Ember côté front-end pour répondre à la route. Ajoutons un modèle .gjs pour afficher notre snack :

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

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

  <hr />

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

Et, comme pour le côté API Rails, nous devons configurer 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 ne nous reste qu’une dernière chose à faire dans l’univers Ember, et c’est de faire effectuer à l’application Ember une requête AJAX pour récupérer notre JSON depuis le serveur. Créons un dernier fichier. Ce sera une Route Ember. Sa fonction model() sera appelée lorsque la route sera entrée, donc nous ferons notre appel ajax là-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, vous pouvez ouvrir votre navigateur sur /admin/snack et vous devriez voir les détails du snack rendus dans 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

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

• Le routeur de l’application Rails indique que ce doit être le admin_snack controller

• Le admin_snack_controller renvoie du JSON

• L’application Ember reçoit 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 - suggérez des modifications sur github.