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 verwendet werden, um beliebige Inhaltssätze zu erstellen. 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 die 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

Um zu verstehen, wie Sie unseren API-Endpunkt erstellen und welche Inhalte für unsere WKND Mobile-App verfügbar gemacht werden sollen, sollten wir das Design erneut aufrufen.

API-Seitenerkennung für Ereignisse

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

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

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. Das Logo wird über eine Bildkomponente angezeigt.
  2. Die Tag-Zeile wird über eine Text-Komponente angezeigt.
  3. Die Liste der Ereignisse wird über eine Inhaltsfragmentlisten-Komponente angezeigt, die wiederum auf eine Reihe von Ereignis-Inhaltsfragmenten verweist.
HINWEIS

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

AEM WCM- Kernkomponenten verfügen ü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 Vorlage Events API :

    1. Tippen Sie in der oberen Aktionsleiste auf Erstellen .
    2. Wählen Sie die Vorlage WKND Mobile - Empty Page aus.
    3. Tippen Sie in der oberen Aktionsleiste auf Weiter .
    4. Geben Sie Events API in das Feld Vorlagentitel ein.
    5. Tippen Sie in der oberen Aktionsleiste auf Erstellen .
    6. Tippen Sie auf Öffnen Öffnen Sie die neue Vorlage zum Bearbeiten
  3. Zuerst lassen wir die drei identifizierten AEM Komponenten zu, die wir zum Modellieren des Inhalts benötigen, indem wir die Richtlinie des Stammordners Layout-Container bearbeiten. Stellen Sie sicher, dass der Modus Struktur aktiv ist, wählen Sie Layout Container [Root] und tippen Sie auf die Schaltfläche Richtlinie.

  4. Suchen Sie unter Properties > Allowed Components nach WKND Mobile. Lassen Sie die folgenden Komponenten aus der Komponentengruppe WKND Mobile zu, damit sie auf der API-Seite Events verwendet werden können.

    • 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 das Häkchen Fertig in der oberen rechten Ecke, wenn Sie fertig sind.

  6. ​Aktualisieren Sie das Browser-Fenster, um in der linken Leiste die Liste der neu zulässigen Komponenten anzuzeigen.

  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. Wählen Sie für jede der oben genannten Komponenten diese aus und drücken Sie die ​Entsperrungstaste.

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

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

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

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

Auf dieser Seite