Directus: Schneller zur Backend-API mit dem Headless CMS
Directus ist ein sogenanntes Headless CMS, mit dem wir strukturierte Daten eigenständig definieren und diese automatisch über eine API bereitstellen können. Zudem ist es kombiniert mit einer übersichtlichen Admin-Oberfläche auf Basis von Vue.js, die definitiv einen Blick wert ist.
Wofür steht eigentlich Headless CMS? Der Name CMS (Content Management System) ist vielen ein Begriff. Es ist eine Softwarelösung, die einen typischen Anwendungsfall aus einer Datenschicht mit Backend und Frontend kombiniert, welches die Daten visuell aufbereitet. Wordpress ist ein sehr bekanntes Beispiel.
Ein Headless CMS konzentriert sich hingegen viel mehr auf die Daten und das Backend, wobei das Frontend erst gar nicht mitgeliefert wird. Nach dem Prinzip: Definiere dein Schema, speichere deine Daten und hier ist die Schnittstelle.
Dies kann theoretisch erst mal als Nachteil empfunden werden, ist aber bei genauerer Betrachtung eher ein großer Vorteil. Ballast wird zurückgelassen und wir können selbst entscheiden, wohin unsere Daten ausgespielt werden. Eine App, eine Webseite, ein automatisiertes Printprodukt? Kein Problem. Den Ausgabekanal können wir über die flexible API technologisch und strategisch selbst bestimmen.
Ein Headless CMS ist somit eher eine Datenquelle mit der richtigen Verfügbarkeit nach außen. Es wird aber nicht nur ohne Frontend geliefert und mit einer API, sondern konzentriert sich sehr stark auf die Verwaltung der Daten. Wir befinden uns sehr nah an der Datenschicht – nur eben mit einer UI.
Directus Version 9: Die Zukunft spricht Javascript
Im Gegensatz zu Directus 8, das noch auf PHP basierte, ist die Version 9 rein in Javascript umgesetzt. Sprich: Alles basiert auf einem Technologie-Stack, was besonders Frontend-Entwickler freuen wird.
Wir benötigen somit nur noch einen Node-Server und eine klassische Datenbank (z. B. MySQL). Wir installieren die Open-Source-Anwendung auf unserem Server oder nutzen direkt die kostenlose Community Cloud.
Directus 9(öffnet im neuen Fenster) ist aus zwei Blinkwinkeln interessant.
Die Besonderheiten von Directus 9
Es bietet eine sehr saubere und flexible Admin-Oberfläche, in der wir unser Datenschema definieren (sogenannte Collections), aber zugleich auch die Daten verwalten können. Mitarbeiter und Redakteure werden sich auch ohne technisches Know-how gut in der Admin-Oberfläche zurechtfinden, um den Content zu verwalten.
Die richtigen Benutzerrollen, die wir alle eigenständig definieren können, steuern auch hier wieder die Rechte. Möglicherweise dürfen technische Admins Collections verändern, wohingegen die Redakteure natürlich nur Daten in die vordefinierte Struktur ablegen dürfen.
Unmittelbar in Directus können auch eigene KPIs und Dashboards definiert werden, die abgelegte Daten aufbereiten oder filtern. Das ist praktisch für jeden Controller, der zwar keine Daten bearbeiten möchte, aber direkt im System eine Auswertung aller verfügbaren Produkte, Beiträge oder anderer Daten erhalten möchte.
Natürlich verfügen die Datensätze auch über Revisionen, die uns helfen, jederzeit Änderungen zu speichern beziehungsweise einen alten Stand wieder herzustellen.
Mit sogenannten Webhooks können wir auf verschiedene Ereignisse reagieren oder weitere Prozesse auslösen. Soll ein Newsletter erzeugt werden, wenn ein neuer Artikel angelegt wurde? Kein Problem, der Webhook wird ausgelöst und ruft eine hinterlegte URL auf.
Mehrsprachigkeit ist ein großes Thema und darf natürlich auch nicht außer Acht gelassen werden. In Directus kann jede Collection und jeder Datensatz in beliebig viele Sprachen übersetzt und später über die API gesondert abgerufen werden.
Wer mit Directus arbeitet, merkt schnell, dass an jede Eventualität, jeden Datentyp und jede Relation gedacht wurde – und wir sprechen hier nur über die Admin-Oberfläche. Die Magie passiert unter der Haube und zielt auf die API ab, die sich automatisch durch unsere angelegten Collections erzeugt.
Wir erstellen unser erstes Directus-Projekt
Um mit Directus zu starten, ist die einfachste Lösung, die kostenlose Community Cloud zu nutzen. Directus selbst ist Open Source und kann natürlich auch händisch auf jedem Server installiert werden. Den Quellcode für den eigenen Server finden wir hier(öffnet im neuen Fenster) .
Für alle ohne Server geht es hier(öffnet im neuen Fenster) weiter: Account erstellen, Projekt als Community Cloud erstellen – fertig!
Am besten auch hier erst das Demo Project auswählen. Einstellungen, Collections und Daten, die uns helfen, das System zu verstehen und die API auszuprobieren, werden bereits hinterlegt.
Die REST- und GraphQL-API anbinden
Haben wir unseren Directus-Server am Laufen und mit diversen Daten gefüllt, können wir uns um das Herzstück kümmern: die API. Prinzipiell ist eine API oft ein aufwendiger Prozess, der händisch angelegt und definiert werden muss. Directus macht es uns aber einfach und stellt automatisch für jede Collection einen Endpoint zur Verfügung, den wir filtern, sortieren oder erweitern können.
Möchten wir zum Beispiel alle Artikel unserer Collection namens Articles erhalten, wäre dies der folgende GET-Aufruf:
{{ DOMAIN }}/items/articles
Da wir diesen Call ohne eine Authentifizierung durchführen, müssen wir erst in der Benutzerverwaltung prüfen, ob die Rolle Public die Articles auch lesen darf. Nur dann erhalten wir eine positive Rückmeldung, andernfalls müssten wir ein sogenanntes JSON Web Token von einem Nutzer übermitteln, der die Berechtigung besitzt.
Wir können auch direkt Filter anhängen, um beispielsweise nur die Artikel zu erhalten, die im Status "draft" liegen.
{{ DOMAIN }}/items/articles?filter[status][_eq]=draft
Auch Sortieren ist ganz einfach möglich über folgenden Aufruf:
{{ DOMAIN }}/items/articles?sort=sort,-date_created
Grundsätzlich können wir uns merken, dass alles, was wir in der Admin-Oberfläche eingeben, auch über die API – im gewünschten Format – abgerufen werden kann.
Alle Details zu den Möglichkeiten der API finden sich in den offiziellen Docs(öffnet im neuen Fenster) .
Möglichkeiten eines Headless CMS
Directus ist in seiner Version 9 bereits ein sehr ausgearbeitetes System und bietet damit viele Funktionalitäten, die man sich von einem Headless CMS wünschen kann.
Natürlich ist ein Headless CMS nicht die richtige Wahl für jede Problemstellung. Möchten wir eine normale Webseite entwickeln, ist unsere Wahl wahrscheinlich eher ein klassisches CMS. Müssen wir aber eher einen Produktkatalog entwickeln, welcher später auf der Webseite mit diversen Produktfiltern angezeigt wird, und sollen die Vertriebsmitarbeiter mit einer App ausgestattet werden, um den Kunden zügig und schnell das richtige Produkt zu verkaufen, kann es sinnvoll sein, eher ein Headless CMS einzusetzen.
Der große Vorteil liegt auf der Hand: Ändern wir die Produktbeschreibung in Directus, ändert es sich automatisch auf jedem Ausgabekanal, der über die Directus-API angebunden wird.
Wir selbst können steuern, welche Struktur und Felder für unseren Produktkatalog relevant sind und welche Daten zu einem Produkt gehören. Es benötigt keine Vorlage, von der wir nur die Hälfte ausfüllen; wir selbst können die Vorlage und Felder definieren.
Habt ihr schon mal mit einem Headless CMS oder sogar mit Directus gearbeitet?
Jonathan Schneider(öffnet im neuen Fenster) ist Web-/App-Entwickler und arbeitet seit über zehn Jahren im Bereich Entwicklung und Programmierung, mit der Spezialisierung auf Frontend.