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

[Discourse]

Au fil du temps, Discourse a gagné en complexité 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 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 d’accès. Par exemple, supposons que nous voulions 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 la « pile complète », c’est-à-dire que l’application Ember sera chargée et demandera les données nécessaires pour afficher la collation.

• Visiter /admin/snack.json devrait renvoyer 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 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 les données 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 renverrez probablement pas simplement des JSON codés en dur depuis un contrôleur comme celui-ci, vous interrogeriez la base de données et renverriez les résultats 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 côté client pour répondre à la route. Ajoutons un modèle .gjs pour afficher notre collation :

frontend/discourse/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 connecter la route. Ouvrez le fichier frontend/discourse/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 le monde Ember, et c’est de faire effectuer à l’application Ember une requête AJAX pour récupérer nos JSON du serveur. Créons un dernier fichier. Ce sera une Route Ember. Sa fonction model() sera appelée lorsque la route sera entrée, nous ferons donc notre appel ajax à l’intérieur :

frontend/discourse/admin/routes/admin-snack.js

import { ajax } from "discourse/lib/ajax";
import DiscourseRoute from "discourse/routes/discourse";

export default class AdminSnackRoute extends DiscourseRoute {
  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 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

• La route Ember 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 des JSON

• L’application Ember reçoit les 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.