Erste Schritte mit der Bereitstellung von AEM-Inhaltsfragmenten mit OpenAPIs
In diesem Tutorial wird veranschaulicht, wie AEM-Inhalte mithilfe der Inhaltsfragmentbereitstellung von AEM mit OpenAPIs erstellt und verfügbar gemacht und von einem externen Programm in einem Headless-CMS-Szenario genutzt werden. In diesem Artikel werden diese Konzepte erläutert, indem die Erstellung einer React-App vorgestellt wird, die WKND-Teams und zugehörige Mitgliederdetails anzeigt. Teams und Mitglieder werden mithilfe von AEM-Inhaltsfragmentmodellen modelliert und von der React-App mithilfe der Bereitstellung von AEM-Inhaltsfragmenten mit OpenAPIs genutzt.
Dieses Tutorial behandelt folgende Themen:
- Erstellen einer Projektkonfiguration
- Erstellen von Inhaltsfragmentmodellen zum Modellieren von Daten
- Erstellen Sie Inhaltsfragmente basierend auf den zuvor erstellten Modellen
- Erfahren Sie, wie Inhaltsfragmente in AEM mithilfe der Funktion „Probieren Sie es aus“ der AEM-Inhaltsfragmentbereitstellung mit OpenAPIs-Dokumentation abgefragt werden können
- Verwenden von Inhaltsfragmentdaten über die Bereitstellung von AEM-Inhaltsfragmenten mit OpenAPI-Aufrufen aus einer React-Beispiel-App
- Verbessern der React-App, damit sie im universellen Editor bearbeitbar ist
Voraussetzungen prerequisites
Für dieses Tutorial sind folgende Dinge erforderlich:
-
AEM Sites as a Cloud Service
-
Grundlegende HTML- und JavaScript-Kenntnisse
-
Die folgenden Tools müssen lokal installiert sein:
- Node.js v22+
- Git
- Eine IDE (z. B. Microsoft® Visual Studio Code)
AEM as a Cloud Service-Umgebung
Um dieses Tutorial abzuschließen, sollten Sie AEM-Administrator Zugriff auf eine AEM as a Cloud Service-Umgebung haben. Eine Entwicklungs-Umgebung eine schnelle oder eine Umgebung in einem Sandbox-Programm kann ebenfalls verwendet werden.
Fangen wir an!
Starten Sie das Tutorial mit Definieren von Inhaltsfragmentmodellen.
GitHub-Projekt
Der Quell-Code und die Inhaltspakete sind im GitHub-Repository {} der AEM Headless-Tutorials verfügbar.
Die main Verzweigung enthält den endgültigen Quell-Codedieses Tutorials.
Momentaufnahmen des Codes am Ende jedes Schritts sind als Git-Tags verfügbar.
- Beginn von Kapitel 4 - React-App:
headless_open-api_basic - Ende von Kapitel 4 - React-App:
headless_open-api_basic_4-end - Ende von Kapitel 5 - Universeller Editor:
headless_open-api_basic_5-end
Wenn Sie ein Problem mit dem Tutorial oder dem Code feststellen, hinterlassen Sie ein GitHub-Problem.