Erste Schritte mit der AEM-Inhaltsfragmentbereitstellung mit OpenAPI-APIs
Ein umfassendes Tutorial, das erläutert, wie AEM-Inhalte in einem Headless-CMS-Szenario mithilfe der Bereitstellung von Inhaltsfragmenten von AEM mit OpenAPI-APIs erstellt und bereitgestellt und von einer externen App genutzt werden. In diesem Artikel werden diese Konzepte erläutert, indem Sie Schritt für Schritt durch die Erstellung einer React-App geführt werden, die WKND-Teams und zugehörige Mitgliederdetails anzeigt. Teams und Mitglieder werden mithilfe von AEM-Inhaltsfragmentmodellen modelliert und von der React-App mithilfe der AEM-Inhaltsfragmentbereitstellung mit OpenAPI-APIs genutzt.
Dieses Tutorial behandelt folgende Themen:
- Erstellen einer Projektkonfiguration
- Erstellen von Inhaltsfragmentmodellen zum Modellieren von Daten
- Erstellen von Inhaltsfragmenten basierend auf den zuvor erstellten Modellen
- Erfahren Sie, Sie mit der AEM-Inhaltsfragmentbereitstellung mit der Funktion „Jetzt ausprobieren“ der Dokumentation zu OpenAPI-APIs Inhaltsfragmente in AEM abfragen können.
- Verwenden von Inhaltsfragmentdaten über die AEM-Inhaltsfragmentbereitstellung mit OpenAPI-API-Aufrufen über eine 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 über AEM-Administratorzugriff auf eine AEM as a Cloud Service-Umgebung verfügen. Sie können auch eine Entwicklungsumgebung, eine schnelle Entwicklungsumgebung oder eine Umgebung in einem Sandbox-Programm verwenden.
Fangen wir an!
Starten Sie das Tutorial mit Definieren von Inhaltsfragmentmodellen.
GitHub-Projekt
Der Quell-Code und die Inhaltspakete sind im GitHub-Repository AEM Headless Tutorials verfügbar.
Die main-Verzweigung enthält den endgültigen Quell-Code für dieses Tutorial.
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.