Drupal 8 REST/JSON - intégration avec l'application JavaScript
Au cours des dernières années, les sites web ont subi un changement significatif. De nombreux nouveaux services et sites de médias sociaux ont été créés. Les applications mobiles jouent désormais un rôle très important sur Internet, et divers services en ligne échangeant des données ne sont plus rien d'extraordinaire. On pourrait même dire que l'intégration avec des services externes est désormais la norme, notamment dans le cas des grandes applications de commerce électronique ou des systèmes de paiement en ligne.
Ici, nous pouvons nous poser la question suivante : pouvons-nous communiquer avec des services externes en utilisant Drupal ? Bien sûr que nous le pouvons ! En tant qu'agence Drupal, dans le cadre de nos travaux de développement Drupal pour nos clients, nous devons intégrer diverses applications JavaScript.
Dans cet article, nous allons voir comment le faire dans Drupal 8. Nous allons aborder l'un des formats d'échange de données les plus populaires : JSON.
Dans notre exemple, nous allons utiliser Drupal 8.2^ et jQuery pour écrire une simple application JavaScript. Nous allons utiliser Drupal comme notre CMS pour gérer les données, et notre contenu sera affiché sur un site HTML "léger".
1. Tout d'abord, nous installons Drupal 8 et activons nos modules :
- L'API des services web RESTful est nouvelle dans Drupal 8
- Serialization
2. Ensuite, nous téléchargeons et activons le module REST UI (cette étape est optionnelle mais utile).
https://www.drupal.org/project/restui
Ce module permet à l'utilisateur de gérer l'accès et le format des données via l'interface utilisateur (panneau d'administration). Il fonctionne avec Drupal 8.2 ou plus récent.
3. Configuration à l'aide de REST UI - affichage du nœud au format JSON.
Nous allons maintenant adapter notre type de contenu pour l'intégration. Dans notre exemple, nous allons utiliser l'entité NODE. Allez à /admin/config/services/rest. Sélectionnez "type de contenu" et définissez le format json, cookie d'authentification dans la méthode GET. Dans ce cas, nous allons seulement télécharger des données, donc la méthode GET sera parfaitement adaptée.
Si vous décidez de ne pas installer le module REST UI, vous devrez entrer les paramètres de toutes les entités manuellement dans les fichiers de configuration. Les paramètres ci-dessus sont les suivants :
Nom du fichier : rest.resource.entity.node.yml
uuid: add2fdec-b11f-45ad-a74f-3d30e36ad72f
langcode: en
status: true
dependencies:
module:
- node
- serialization
- user
id: entity.node
plugin_id: 'entity:node'
granularity: method
configuration:
GET:
supported_formats:
- json
supported_auth:
- cookie
4. Créons maintenant notre nœud.
En supposant que notre nouveau nœud se trouve à l'adresse http://www.drupal8.dev/node/1
nous devons ajouter un paramètre ?_format=json, ce qui nous donne l'adresse suivante : domaine.exemple/node/1?_format=json
Si tout est correctement configuré, nous devrions maintenant avoir un objet nœud au format JSON. Si vous affichez le contenu JSON dans votre navigateur, vous pouvez installer un module ou une extension pour formater le code JSON (celui que vous voyez sur la capture d'écran est JSON Lite https://addons.mozilla.org/en-US/firefox/addon/json-lite/?src=api)
5. Liste des nœuds en JSON
Très bien, le téléchargement de nœuds individuels fonctionne déjà. Essayons maintenant d'obtenir une liste de nœuds.
Nous allons utiliser le module Views.
À condition que nous n'allons pas utiliser la majorité des données disponibles, nous pouvons sélectionner uniquement les champs qui nous concernent afin de réduire la quantité de données transférées.
Pour résumer : nous avons créé une liste de contenu située à /node_list, et en ajoutant ?=_format=json à notre URL, nous pouvons télécharger l'un d'entre eux au format JSON.
6. Adresse propre pour REST/JSON (endpoint)
Si - pour quelque raison que ce soit - les solutions ci-dessus ne suffisent pas, nous pouvons créer notre propre endpoint et ajouter de nouvelles données à notre JSON.
Créons le routage et un contrôleur.
Routage
Tout d'abord, commençons par créer un routage à, par exemple, /v1/custom_endpoint. Inclure la version de notre API dans l'URL est vraiment une bonne pratique, car lors de la création d'une nouvelle version, nous pouvons la laisser sur /v2/custom_endpoint, /v3/... etc. De cette façon, nos utilisateurs qui utilisent une version plus ancienne de l'API ne seront pas privés de nos ressources.
Exemple de routage :
ev_client_endpoint:
path: '/v1/custom_endpoint'
methods: [GET]
defaults:
_controller: 'Drupal\ev_client_endpoint\Controller\EvEndpoint::get'
requirements:
_permission: 'access content'
Explication : en demandant GET sur /v1/custom_endpoint, nous allons recevoir les données renvoyées par le contrôleur EvEndpoint exécutant la méthode GET.
Contrôleur
Pour cet exemple, nous allons supposer que notre endpoint est censé renvoyer des informations de base sur notre site web - le nom et l'adresse e-mail, le timestamp actuel et un nœud aléatoire avec un ID de 1 à 10.
<?php
namespace Drupal\ev_client_endpoint\Controller;
use Drupal\Core\Controller\ControllerBase;
use Drupal\node\Entity\Node;
use Symfony\Component\HttpFoundation\JsonResponse;
/**
* Un contrôleur d'exemple.
*/
class EvEndpoint extends ControllerBase {
/**
* {@inheritdoc}
*/
public function get() {
$response = new JsonResponse();
$config = \Drupal::config('system.site');
$node = Node::load(random_int(1,10));
$data = array(
'date' => time(),
'site_name' => $config->get('name'),
'site_email' => $config->get('mail'),
'random_node' => array(
'title' => $node->get('title')->getValue()[0]['value'],
'body' => $node->get('body')->getValue()[0]['value'],
)
);
$response->setData($data);
return $response;
}
}
Après avoir correctement effectué toutes les étapes, nous pouvons vider le cache et accéder à /v1/custom_endpoint. Le résultat final devrait être comme suit.
{
"date": 1481920261,
"site_name": "custom endpoint site",
"site_email": "admin@examplesite",
"random_node": {
"title": "title node 5",
"body": "body node 5"
}
}
7. Réception du JSON
Créons maintenant un simple script JavaScript pour afficher nos données sur le site.
Si nous allons nous connecter à partir de domaines autres que notre Drupal, le https://www.drupal.org/project/cors, ajoutant des en-têtes aux requêtes ou créant un proxy virtuel peut être utile, de sorte que toutes les requêtes soient vues comme locales (vous pouvez en savoir plus à https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
Code html index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titre</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
</body>
</html>
Nous pouvons maintenant ajouter notre fichier app.js et la bibliothèque jQuery dans la section Head.
Script app.js
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://drupal8.dev/v1/custom_endpoint',
success: function (data) {
{
var date = new Date(data.date * 1000);
$('body').append('' +
'<h1 class="name">' + data.random_node.title + '</h1>' +
'<content class="body">' + data.random_node.body + '</content>' +
'<email class="mail">' + data.site_email + '</email>' +
'<div class="date">' + date + '</div>' +
'<h2 class="email">' + data.site_name + '</h2>'
);
}
}
});
});
Télécharger le JSON depuis notre Drupal : /v1/custom_endpoint
La variable data contient notre json, maintenant nous pouvons l'ajouter avec nos variables au corps HTML en utilisant la fonction append.
Si tout a été correctement effectué, en affichant index.html dans notre navigateur, le JavaScript demande les données de notre Drupal et les télécharge au format JSON, puis les ajoute au corps de notre site web.
Résumé
Voici quelques informations de base concernant le démarrage de l'aventure avec les services web en utilisant Drupal. Dans la prochaine partie, nous allons parler de la connexion à Drupal en utilisant un compte utilisateur existant, ainsi que de l'ajout et de la modification de contenu via REST/JSON.
Si vous souhaitez approfondir vos connaissances sur D8 et d'autres outils utiles pour concevoir des applications web, donnez-nous un like sur Facebook, où nous partageons nos tutoriels, guides et divers contenus intéressants de l'industrie. Vous pouvez également participer à DrupalDay et au DrupalCamp! Du nouveau contenu arrive également bientôt sur notre blog !
