Drupal 8 REST/JSON - Integration mit JavaScript-Anwendung

Im Laufe der letzten Jahre haben Websites eine bedeutende Veränderung durchlaufen. Viele neue Dienste und Social-Media-Websites wurden geschaffen. Mobile Anwendungen spielen heutzutage eine sehr bedeutsame Rolle im Internet, und der Datenaustausch zwischen verschiedenen Online-Diensten ist nichts Außergewöhnliches mehr. Man könnte sogar sagen, dass die Integration mit externen Diensten inzwischen Standard ist, insbesondere bei großen E-Commerce-Anwendungen oder Online-Zahlungssystemen.
Hier könnte man sich die Frage stellen: Können wir mit externen Diensten über Drupal kommunizieren? Natürlich können wir das! Als Drupal-Agentur müssen wir im Rahmen der Drupal-Entwicklung für unsere Kunden verschiedene JavaScript-Anwendungen integrieren.

In diesem Beitrag werden wir erläutern, wie dies in Drupal 8 funktioniert. Wir werden eines der populäreren Datenformate für den Datenaustausch besprechen - JSON.

In unserem Beispiel werden wir Drupal 8.2^ und jQuery verwenden, um eine einfache JavaScript-Anwendung zu schreiben. Wir werden Drupal als unser CMS zur Verwaltung der Daten verwenden, und unsere Inhalte werden auf einer „leichten“ HTML-Website angezeigt.

1. Zuerst installieren wir Drupal 8 und aktivieren unsere Module:

• Die RESTful-Webdienste-API ist neu in Drupal 8
• Serialisierung

2. Dann laden wir das REST UI-Modul herunter und aktivieren es (dieser Schritt ist optional, aber nützlich).

https://www.drupal.org/project/restui
Dieses Modul ermöglicht es dem Benutzer, den Zugang und das Datenformat über die Benutzeroberfläche (Administrationspanel) zu verwalten. Es funktioniert mit Drupal 8.2 oder neuer.

3. Konfiguration mit REST UI - Anzeige des Knotens im JSON-Format.

Jetzt passen wir unseren Inhaltstyp zur Integration an. In unserem Beispiel verwenden wir die NODE-Entität. Gehen Sie zu /admin/config/services/rest. Wählen Sie „Inhaltstyp“ und setzen Sie das Format auf json, Auth-Cookie in der GET-Methode. In diesem Fall werden wir nur Daten herunterladen, daher ist die GET-Methode völlig ausreichend.

Wenn Sie sich entscheiden, das REST UI-Modul nicht zu installieren, müssen Sie die Einstellungen für alle Entitäten manuell in den Konfigurationsdateien eingeben. Die obigen Einstellungen sehen wie folgt aus:
Dateiname:  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. Erstellen wir nun unseren Knoten.

Angenommen, unser neuer Knoten befindet sich unter http://www.drupal8.dev/node/1
müssen wir einen ?_format=json-Parameter hinzufügen, der uns die folgende Adresse gibt: domain.example/node/1?_format=json 

Wenn alles richtig konfiguriert ist, sollten wir jetzt ein Knotenobjekt im JSON-Format haben. Wenn Sie JSON-Inhalte in Ihrem Browser anzeigen, können Sie ein Add-on oder eine Erweiterung zum Formatieren von JSON-Code installieren (das auf dem Screenshot gezeigte ist JSON Lite https://addons.mozilla.org/en-US/firefox/addon/json-lite/?src=api)

5. Liste der Knoten in JSON

Gut, das Herunterladen einzelner Knoten funktioniert bereits. Versuchen wir nun, eine Liste von Knoten zu erhalten.
Wir werden das Views-Modul verwenden.

Angenommen, wir werden den Großteil der verfügbaren Daten nicht verwenden, können wir nur die Felder auswählen, die uns betreffen, um die Menge der übertragenen Daten zu reduzieren.

Zusammenfassend: Wir haben eine Liste von Inhalten erstellt, die sich unter /node_list befinden, und indem wir ?=_format=json zu unserer URL hinzufügen, können wir alle davon im JSON-Format herunterladen.

6. Eigene Adresse für REST/JSON (Endpoint)

Falls - aus welchen Gründen auch immer - die oben genannten Lösungen nicht ausreichen, können wir unseren eigenen Endpoint erstellen und neue Daten zu unserem JSON hinzufügen.
Erstellen wir Routing und einen Controller.

Routing

Zunächst beginnen wir mit der Erstellung eines Routings unter, z.B. /v1/custom_endpoint. Die Angabe unserer API-Version in der URL ist definitiv sinnvoll, da wir bei der Erstellung einer neueren Version diese bei /v2/custom_endpoint, /v3/... usw. belassen können. Auf diese Weise werden unsere Benutzer, die eine ältere Version der API verwenden, nicht von unseren Ressourcen abgeschnitten.
Routing-Beispiel:

ev_client_endpoint:
  path: '/v1/custom_endpoint'
  methods:  [GET]
  defaults:
    _controller: 'Drupal\ev_client_endpoint\Controller\EvEndpoint::get'
  requirements:
    _permission: 'access content'

Erklärung: Bei der Anfrage von GET unter /v1/custom_endpoint erhalten wir die vom EvEndpoint-Controller zurückgegebenen Daten über die Ausführung der GET-Methode.

Controller

Für dieses Beispiel nehmen wir an, dass unser Endpoint grundlegende Informationen über unsere Website zurückgeben soll - den Namen und die E-Mail-Adresse, den aktuellen Zeitstempel und einen zufälligen Knoten mit einer ID von 1 bis 10.

<?php

namespace Drupal\ev_client_endpoint\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\node\Entity\Node;
use Symfony\Component\HttpFoundation\JsonResponse;

/**
 * Ein Beispiel-Controller.
 */
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;

  }
}

Wenn alles korrekt gemacht wurde, können wir unseren Cache löschen und zu /v1/custom_endpoint gehen. Das Endergebnis sollte wie folgt aussehen.

​
{
"date": 1481920261,
"site_name": "Benutzerdefinierte Endpoint-Site",
"site_email": "admin@beispielseite",
"random_node": {
"title": "Titelknoten 5",
"body": "Inhaltsknoten 5"
}
}

​

7. Empfangen von JSON

Erstellen wir nun ein einfaches JavaScript, um unsere Daten auf der Website anzuzeigen.
Wenn wir uns von anderen Domains als unserem Drupal aus verbinden, kann das https://www.drupal.org/project/cors, das Hinzufügen von Headern zu Anfragen oder das Erstellen eines virtuellen Proxys nützlich sein, damit alle Anfragen als lokal angesehen werden (weitere Informationen finden Sie unter 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>Titel</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>

Jetzt können wir unsere app.js-Datei und die jQuery-Bibliothek im Head-Bereich hinzufügen.
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>'
        );
      }
    }
  });
});

JSON von unserem Drupal herunterladen: /v1/custom_endpoint

Die Daten-Variable enthält unser JSON, nun können wir es mit unseren Variablen dem HTML-Body mittels der Append-Funktion hinzufügen.

Wenn alles richtig gemacht wurde, fordert das JavaScript beim Anzeigen von index.html in unserem Browser die Daten von unserem Drupal an und lädt sie im JSON-Format herunter, um sie dann dem Body unserer Website hinzuzufügen.

Zusammenfassung

Dies sind einige grundlegende Informationen über den Einstieg in die Arbeit mit Webdiensten unter Verwendung von Drupal. Im nächsten Teil werden wir darüber schreiben, wie man sich mit einem vorhandenen Benutzerkonto in Drupal anmeldet, sowie Inhalte über REST/JSON hinzufügt und bearbeitet.
Wenn Sie Ihr Wissen über D8 und andere nützliche Werkzeuge zur Gestaltung von Webanwendungen weiter ausbauen möchten, geben Sie uns ein „Gefällt mir“ auf Facebook, wo wir unsere Tutorials, Anleitungen und verschiedene interessante Dinge aus der Branche teilen. Sie können auch am DrupalDay und am DrupalCamp teilnehmen! Bald kommt auch neuer Inhalt auf unserem Blog!