Bearbeiten von React-Apps mit dem universellen Editor
Erfahren Sie, wie Sie die Inhalte einer Beispiel-React-App mit dem universellen Editor bearbeiten. Die Inhalte werden in Inhaltsfragmenten in AEM gespeichert und mithilfe von GraphQL-APIs abgerufen.
Dieses Tutorial führt Sie durch den Prozess der Einrichtung der lokalen Entwicklungsumgebung, der Instrumentierung der React-App zum Bearbeiten ihres Inhalts und der Bearbeitung des Inhalts mit dem universellen Editor.
Lerninhalt
Dieses Tutorial behandelt folgende Themen:
-
Ein kurzer Überblick über den universellen Editor
-
Einrichten der lokalen Entwicklungsumgebung
- AEM-SDK: Es stellt die Inhalte bereit, die für die React-App mithilfe von GraphQL-APIs in Inhaltsfragmenten gespeichert sind.
- React-App: Eine einfache Benutzeroberfläche, in der die Inhalte von AEM angezeigt werden.
- Universeller Editor: Eine lokale Kopie des universellen Editor-Dienstes, die den universellen Editor und das AEM-SDK bindet.
-
Instrumentieren der React-App zum Bearbeiten des Inhalts mit dem universellen Editor
-
Bearbeiten des Inhalts der React-App mit dem universellen Editor
Überblick über den universellen Editor
Der universelle Editor unterstützt Content-Autorinnen und -Autoren sowie Entwicklerinnen und Entwickler (Frontend und Backend). Prüfen wir einige der wichtigsten Vorteile des universellen Editors:
- Entwickelt zum Bearbeiten von Headless- und Headful-Inhalten im Modus „What-you-see-is-what-you-get“ (WYSIWYG).
- Bietet ein konsistentes Erlebnis der Inhaltsbearbeitung für verschiedene Frontend-Technologien wie React, Angular, Vue usw. Auf diese Weise können die Inhaltsautoren die Inhalte bearbeiten, ohne sich Gedanken über die zugrunde liegende Frontend-Technologie machen zu müssen.
- Für die Aktivierung des universellen Editors in der Frontend-Anwendung ist eine sehr minimale Instrumentierung erforderlich. So wird die Produktivität der Entwickelnden maximiert und sie können sich auf die Entwicklung des Erlebnisses konzentrieren.
- Aufteilung der Zuständigkeiten auf drei Rollen: Content-Autorinnen und -Autoren, Frontend-Entwicklerinnen und -Entwickler sowie Backend-Entwicklerinnen und -Entwickler, sodass sich jede Rolle auf ihre Kernaufgaben konzentrieren kann.
Beispiel-React-App
In diesem Tutorial wird WKND Teams als Beispiel-React-App verwendet. Die React-App WKND Teams enthält eine Liste der Team-Mitglieder und deren Details.
Die Team-Details wie Titel, Beschreibung und Team-Mitglieder werden in AEM als Team-Inhaltsfragmente gespeichert. Ebenso werden die Personendetails wie Name, Biografie und Profilbild als Personen-Inhaltsfragmente in AEM gespeichert.
Der Inhalt für die React-App wird von AEM mit GraphQL-APIs bereitgestellt und die Benutzeroberfläche wird mit zwei React-Komponenten erstellt: Teams und Person.
Ein entsprechendes Tutorial zur Erstellung der React-App WKND-Teams ist verfügbar. Das Tutorial finden Sie hier.
Nächster Schritt
Erfahren Sie, wie Sie die lokale Entwicklungsumgebung einrichten.