Kapitel 4 - Definieren von Content Services-Vorlagen

Kapitel 4 des Tutorials AEM Headless behandelt die Rolle AEM bearbeitbaren Vorlagen im Kontext von AEM Content Services. Bearbeitbare Vorlagen werden verwendet, um die JSON-Inhaltsstruktur zu definieren, AEM Content Services Clients über die Zusammensetzung von Content Services-aktivierten AEM Komponenten bereitstellt.

Die Rolle von Vorlagen in AEM Content Services

AEM bearbeitbare Vorlagen werden verwendet, um die HTTP-Endpunkte zu definieren, auf die zugegriffen wird, um den Ereignisinhalt als JSON verfügbar zu machen.

Traditionell AEM bearbeitbare Vorlagen werden zur Definition von Webseiten verwendet, doch diese Verwendung ist einfach eine Konvention. Bearbeitbare Vorlagen können zum Erstellen verwendet werden any Inhaltsmenge; wie auf diesen Inhalt zugegriffen wird: als HTML in einem Browser, da JSON von JavaScript (AEM-SPA-Editor) oder einer Mobile App genutzt wird, eine Funktion der Art und Weise ist, wie diese Seite angefordert wird.

In AEM Content Services werden bearbeitbare Vorlagen verwendet, um festzulegen, wie die JSON-Daten bereitgestellt werden.

Für WKND Mobile App erstellen wir eine einzelne bearbeitbare Vorlage, die zur Steuerung eines einzelnen API-Endpunkts verwendet wird. Dieses Beispiel ist zwar einfach, die Konzepte von Headless zu veranschaulichen, doch können Sie mehrere Seiten (oder Endpunkte) erstellen, die jeweils verschiedene Inhaltssätze enthalten, um eine komplexere und besser organisierte API zu erstellen.

Grundlegendes zum API-Endpunkt

So erstellen Sie unseren API-Endpunkt und verstehen, welche Inhalte für unsere WKND Mobile App, lassen Sie uns das Design erneut besuchen.

API-Seitenerkennung für Ereignisse

Wie wir sehen können, müssen wir drei logische Inhaltssätze für die mobile App bereitstellen.

  1. Die Logo
  2. Die Tag Line
  3. Die Liste der Veranstaltungen

Dazu können wir diese Anforderungen AEM Komponenten zuordnen (und in unserem Fall AEM WCM-Kernkomponenten), um den erforderlichen Inhalt als JSON verfügbar zu machen.

  1. Die Logo über eine Bildkomponente
  2. Die Tag Line über eine Textkomponente
  3. Die Liste der Veranstaltungen über eine Inhaltsfragmentlisten-Komponente die wiederum einen Satz von Event-Inhaltsfragmenten referenziert.
HINWEIS

Um den JSON-Export von Seiten und Komponenten durch AEM Content Service zu unterstützen, müssen die Seiten und Komponenten Ableiten von AEM WCM-Kernkomponenten.

AEM WCM-Kernkomponenten verfügt über integrierte Funktionen zur Unterstützung eines normalisierten JSON-Schemas exportierter Seiten und Komponenten. Alle in diesem Tutorial verwendeten WKND Mobile-Komponenten (Seite, Bild, Text und Inhaltsfragmentliste) werden von AEM WCM-Kernkomponenten abgeleitet.

Definieren der Ereignis-API-Vorlage

  1. Öffnen Sie Tools > Allgemein > Vorlagen >WKND Mobile.

  2. Erstellen Sie die Events API template:

    1. Tippen Erstellen in der oberen Aktionsleiste
    2. Wählen Sie die WKND Mobile - Empty Page template
    3. Tippen Nächste in der oberen Aktionsleiste
    4. Eingabe Events API im Vorlagentitel field
    5. Tippen Erstellen in der oberen Aktionsleiste
    6. Tippen Öffnen Öffnen Sie die neue Vorlage zur Bearbeitung

  3. Zunächst erlauben wir es den drei identifizierten AEM Komponenten, die wir benötigen, den Inhalt zu modellieren, indem wir die Politik des Stamms Layout-Container. Stellen Sie sicher, dass Struktur Modus aktiv ist, wählen Sie die Layout Container [Root] und tippen Sie auf Politik Schaltfläche.

  4. under Eigenschaften > Zugelassene Komponenten Suchen nach WKND Mobile. Zulassen der folgenden Komponenten aus der WKND Mobile Komponentengruppe, damit sie für die Events API-Seite.

    • WKND Mobile > Image

      • Das Logo für die App

    • WKND Mobile > Text

      • Der Einführungstext der App

    • WKND Mobile > Content Fragment List

      • Die Liste der Ereigniskategorien, die in der App angezeigt werden können

  5. Tippen Sie auf Fertig Häkchen in der oberen rechten Ecke nach Abschluss.

  6. Aktualisieren das Browserfenster, um neu zu sehen Zugelassene Komponenten in der linken Leiste.

  7. Ziehen Sie aus der Komponentensuche in der linken Leiste die folgenden AEM Komponenten:

    1. Image für das Logo
    2. Text für die Tag-Zeile
    3. Content Fragment List für die Ereignisse

  8. Für jede der oben genannten Komponenten, wählen Sie sie aus und drücken Sie die unlock Schaltfläche.

  9. Stellen Sie jedoch sicher, dass die Layout-Container is locked um zu verhindern, dass andere Komponenten hinzugefügt oder diese drei Komponenten entfernt werden.

  10. Tippen Seiteninformationen > In Admin anzeigen , um zur WKND Mobile Vorlagenliste. Wählen Sie die neu erstellte Events API Vorlage und tippen Sie auf Aktivieren in der oberen Aktionsleiste.

HINWEIS

Beachten Sie, dass die Komponenten, die zum Aufdecken des Inhalts verwendet werden, der Vorlage selbst hinzugefügt und gesperrt werden. Auf diese Weise können Autoren die vordefinierten Komponenten bearbeiten, jedoch nicht beliebig Komponenten hinzufügen oder entfernen, da eine Änderung der API selbst die Annahmen rund um die JSON-Struktur beschädigen und verbrauchende Apps beschädigen könnte. Alle APIs müssen stabil sein.

Nächste Schritte

Installieren Sie optional die com.adobe.aem.guides.wknd-mobile.content.chapter-4.zip Inhaltspaket in der AEM-Autoreninstanz über AEM Package Manager. Dieses Paket enthält die Konfigurationen und Inhalte, die in diesem und den vorherigen Kapiteln des Tutorials beschrieben werden.

Auf dieser Seite