Let's go Headless

Headless AEM mit Content Fragments

Zurück zu Insights
/de/de/insights
Teilen
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
medium
Content Fragment Article
medium

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:

Lassen Sie uns Großartiges schaffen!
Wir verwandeln mutige Ideen in echte Ergebnisse. Als Partner für digitale Transformation bringen wir unsere Kunden weiter und gestalten Erlebnisse, die begeistern. Kontaktieren Sie uns und erfahren Sie, wie wir Ihre Visionen zum Leben erwecken.
/content/dam/ews/videos/alex_hands_contact_code_2K_recbitrate.mp4
Let’s talk
/de/de/about-eggs/contact
Ihr nächstes Projekt startet genau hier
Neue Ideen, innovative Herangehensweisen und nachhaltige Lösungen – um diese für Sie zu verwirklichen, müssen wir Ihre Ziele verstehen. Lassen Sie uns gemeinsam den richtigen Weg zum Erfolg gestalten.