Let's go Headless

Headless AEM mit Content Fragments

Traditionelle Content-Management-Systeme (CMS) wurden für Webseiten entwickelt. Mittlerweile werden Inhalte aber über verschiedene mobile Anwendungen hinweg konsumiert, wie Apps, Smartwatches, etc. Das erfordert einen neuen Ansatz bei der Verwaltung und Veröffentlichung von Inhalten. Der Adobe Experience Manager (AEM) bietet mit den sogenannten „Content Fragments“ eine Lösung, um Inhalte zu verwalten und in einer beliebigen Endanwendung auszuspielen.

Headless

„Headless“ (dt. kopflos) in Zusammenhang mit einem Content-Management-System ist keinesfalls etwas Negatives, sondern vielmehr die Zukunft der Content Verwaltung. Ein Headless CMS ist ein CMS, welches kein Frontend (Head) hat, sondern nur ein Backend zum Verwalten des Contents bietet. Dieser Inhalt kann dann über eine API abgerufen werden (API aus dem Englischen „application programming interface“, wörtlich „Anwendungs­programmier­schnittstelle“).

Der große Vorteil dabei ist, dass der Content in unterschiedlichen Anwendungen verwendet werden kann und nur an einer zentralen Stelle gepflegt werden muss. Die Inhalte können dann beispielsweise in einer App, auf einer Webseite, in einem Online-Shop und/oder auf einer Smart-Watch angezeigt werden. Die Darstellung des Contents kann dabei für jedes Frontend individuell festgelegt werden. 

Die Lösung von Adobe bezüglich Headless CMS wurde in AEM integriert und heißt „Content Fragments“. Auch hier kann man, wie bei AEM Sites, das komplette Adobe Ökosystem nutzen. Beispielsweise Photoshop (Assets), um auch bearbeitete Bilder Headless auszuspielen, oder Analytics, um den erstellten Inhalt zu analysieren. Dabei ist es egal auf welchem Gerät der Inhalt ausgespielt wird. 

Content Fragments

AEM bietet mit den sogenannten „Content Fragments“ (dt. Inhaltsfragmente) eine flexible Lösung für die Verwaltung von „Headless Content“. Ein Content Fragment ist ein spezieller Typ eines Assets und wird auch im Asset Bereich in AEM gespeichert. Für eine strukturierte Ablage der Content Fragments wird eine für das Projekt passende Ordner-Struktur angelegt, wie zum Beispiel eine Kategorisierung nach Sprachen oder Themenbereichen. 

Ein Content Fragment kann strukturierte Daten wie beispielsweise Texte, Nummern oder auch Datum und Zeit speichern. Auch komplexere Datenstrukturen, wie Referenzen auf andere Content Fragments oder Bilder und Videos können abgebildet werden. 

Mittels „Content Fragment Models“ lassen sich Vorlagen für Content Fragments erstellen. Anhand dieser Models können beliebig viele Content Fragments des gleichen Typs erstellt werden. Für die Content Fragment Model bietet AEM eine Auswahl an Datentypen, für mehr Informationen zu den Datentypen siehe AEM Content Fragments Data Types.

Die Content Fragment Models und Content Fragments können von Autoren selbstständig und ohne IT-Unterstützung erstellt werden. Das Entwicklungsteam muss nur den Content über eine API auslesen.

Data Types Content Fragment Model

Beispiel

Will man zum Beispiel verschiedene Artikel speichern, könnten ein Content Fragment Model und ein ausgefülltes Content Fragment folgendermaßen aussehen:

Content Fragment Model
Content Fragment Article

Components vs. Assets API

Eine API stellt Inhalte über jeden Kanal und auf jedem Gerät zur Verfügung. Die Website, mobile Anwendung oder Shop kann in jeder beliebigen Programmiersprache, mit ihren bevorzugten Tools und ihrem eigenen Entwicklungsprozess entwickelt werden.

AEM bietet hier verschiedene Ansätze. Man kann Components, die Assets API oder GraphQL nutzen. Im Folgenden werden Components und Assets API beschrieben, für weitere Informatinen zu GraphQL können Sie sich auch den Blog-Artikel AEM mit GraphQL durchlesen. 

Components

Die Content Fragments lassen sich über Komponenten auslesen. Das heißt man verwendet zusätzlich eine Page und verlinkt darauf die Content Fragments. AEM bietet bereits zwei Core Components, welche Content Fragments anzeigen können: die Content Fragment und die Content Fragment List Komponente. Unten ist eine Page mit einer Content Fragment Komponente zu sehen. Die Content Fragment Komponente beinhaltet in unserem Beispiel den Artikel „Cats and Dogs“.

Die Inhalte werden durch Publizieren des Content Fragments und der Page für die Endanwendung verfügbar gemacht. Entwickler, die den Inhalt abrufen wollen, greifen auf das Sling Model der Page zu und erhalten dadurch den Inhalt als JSON Format

Gibt es beispielsweise eine Page unter content/newspaper/en_GB/articles, auf der alle Artikel verfügbar sind, kann der Inhalt der Page über den Dispatcher abgerufen werden: https://XYdomain/content/newspaper/en_GB/articles.model.json

Assets API

Die Assets API ermöglicht CRUD-Vorgänge (Create-Read-Update-Delete) auf in AEM gespeicherte Inhalte. Mit der Assets API können jedem Programm, das HTTP-Anfragen ausführen und JSON-Antworten verarbeiten kann, Inhalte bereitgestellt werden. Die Assets-REST-API ist in jeder standardmäßigen Installation einer aktuellen AEM-Version verfügbar.

Um den Inhalt abzurufen, wird der /api/assets-Endpunkt, sowie der Pfad zum entsprechenden Inhalt (ohne /content/dam) verwendet. 

Um auf den Artikel unter /content/dam/newspaper/en_GB/articles/cats-and-dogs zuzugreifen, wird folgender Pfad angefordert: /api/assets/newspaper/en_GB/articles/cats-and-dogs

Die im Request angegebene HTTP-Methode gibt den auszuführenden Vorgang an:

  • GET: Zum Abrufen einer JSON-Darstellung eines Assets bzw. Ordners
  • POST: Zum Erstellen neuer Assets oder Ordner
  • PUT: Zum Aktualisieren der Eigenschaften eines Assets oder Ordners
  • DELETE: Zum Löschen eines Assets oder Ordners

Beispiel JSON output - Assets API und Components

{
  "contentfragment": {
    "id": "contentfragment-81802f5778",
    "title": "cats and dogs",
    "description": "",
    ":items": {

    },
    ":itemsOrder": [

    ],
    "elements": {
      "headline": {
        "title": "Headline",
        "dataType": "string",
        "value": "Cats and Dogs",
        "multiValue": false,
        ":type": "string"
      },
      "author": {
        "title": "Author",
        "dataType": "string",
        "value": "Marie-Philine Herale",
        "multiValue": false,
        ":type": "string"
      },
      "date": {
        "title": "Date",
        "dataType": "calendar",
        "value": 1664496000000,
        "multiValue": false,
        ":type": "calendar"
      },
      "content": {
        "title": "Content",
        "dataType": "string",
        "value": "Cats and dogs can be friends. This was proven last week when a dog saved a cats live by saving the cat from a fire. ",
        "multiValue": false,
        ":type": "text/plain"
      }
    },
    "elementsOrder": [
      "headline",
      "author",
      "date",
      "content"
    ],
    ":type": "my-project/components/contentfragment",
    "model": "my-project/models/article"
  }
}

Vorteile der APIs im Einzelnen

An sich ist keine API besser oder schlechter. Die Wahl der API richtet sich nach dem jeweiligen Andwendsungsfall. Im Folgenden sind die Vorteile der APIs aufgelistet: 

 

Components

  • Autoren entscheiden, welcher Inhalt auf der Page angezeigt wird. Es können Inhalte aus unterschiedlichen Ordnern zusammengefügt werden 
  • Eine Kombination aus Web-Inhalten und Content Fragments ist möglich 
  • Eine Page kann angepasst werden, z.B. eine spezielle Anzeige des Inhalts 

 

Assets API

  • CRUD-Vorgänge 
  • Content Fragment erstellen und publizieren (keine zusätzliche Page nötig) 
  • Assets (Bilder, Videos, Dokumente, etc.) verwalten 
  • Authentifizierung nötig 

Take Aways Headless AEM

AEM dient als zentrale Content Datenbank. Der Content kann in beliebigen Frontends verwendet werden. Eine flexible Content Aufbereitung ist möglich.

Autoren können Content zentral in AEM entwickeln und benötigen dafür keine IT-Unterstützung.

Entwickler können den Content auslesen, wofür ihnen verschiedene APIs in AEM zur Verfügung stehen.

 

Weiterführende Links: