Willkommen bei einem mehrteiligen Tutorial, das für Entwickler konzipiert ist, die neu bei der SPA Editor Funktion in Adobe Experience Manager (AEM). Dieses Tutorial führt durch die Implementierung einer Angular-Anwendung für eine fiktive Lifestyle-Marke, die WKND. Die Angular-App wurde für die Bereitstellung mit AEM SPA Editor entwickelt, der Angular-Komponenten AEM Komponenten zuordnet. Die abgeschlossene SPA, die in AEM bereitgestellt wird, kann mit herkömmlichen In-line-Bearbeitungswerkzeugen von AEM dynamisch erstellt werden.
WKND SPA Implementierung
Ziel dieses mehrteiligen Tutorials ist es, Entwicklern beizubringen, wie eine Angular-Anwendung implementiert wird, um mit der SPA Editor-Funktion von AEM zu arbeiten. In einem realen Szenario werden die Entwicklungsaktivitäten nach Persona aufgeschlüsselt, wobei häufig eine Frontend-Entwickler und Back End-Entwickler. Wir glauben, dass es für jeden Entwickler, der an einem AEM SPA Editor-Projekt beteiligt ist, von Vorteil ist, dieses Tutorial abzuschließen.
Das Tutorial wurde für die Verwendung mit AEM as a Cloud Service und ist abwärtskompatibel mit AEM 6.5.4+ und AEM 6.4.8+. Die SPA wird mithilfe von implementiert:
Schätzen Sie 1-2 Stunden, um die einzelnen Teile des Tutorials zu durchlaufen.
Den gesamten Tutorial-Code finden Sie unter GitHub.
Die aktuelle Codebasis ist als herunterladbare AEM Packages verfügbar.
Bevor Sie mit diesem Tutorial beginnen, benötigen Sie Folgendes:
Es ist zwar nicht erforderlich, es ist jedoch von Vorteil, über ein grundlegendes Verständnis der Entwickeln herkömmlicher AEM Sites-Komponenten.
Zum Abschluss dieses Tutorials ist eine lokale Entwicklungsumgebung erforderlich. Screenshots und Videos werden mit dem AEM as a Cloud Service SDK erfasst, das in einer Mac OS-Umgebung mit Visual Studio-Code als IDE. Befehle und Code sollten unabhängig vom lokalen Betriebssystem sein, sofern nicht anders angegeben.
Neu bei AEM as a Cloud Service? Sehen Sie sich die Befolgen Sie die Anleitung zum Einrichten einer lokalen Entwicklungsumgebung mit dem AEM as a Cloud Service SDK..
Neu bei AEM 6.5? Sehen Sie sich die Anleitung zum Einrichten einer lokalen Entwicklungsumgebung.
Worauf wartest du?! Starten Sie das Tutorial, indem Sie zur SPA Editor-Projekt Kapitel und erfahren Sie, wie Sie ein Projekt mit aktiviertem SPA-Editor mithilfe des Projektarchetyps AEM erstellen.
Der Projektcode für dieses Tutorial wurde für AEM as a Cloud Service erstellt. Damit der Projektcode abwärtskompatibel zu 6.5.4+ und 6.4.8+ mehrere Änderungen vorgenommen wurden.
Die UberJar v6.4.4 wurde als Abhängigkeit einbezogen:
<!-- Adobe AEM 6.x Dependencies -->
<dependency>
<groupId>com.adobe.aem</groupId>
<artifactId>uber-jar</artifactId>
<version>6.4.4</version>
<classifier>apis</classifier>
<scope>provided</scope>
</dependency>
Ein zusätzliches Maven-Profil mit dem Namen classic
wurde hinzugefügt, um den Build zu ändern, um AEM 6.x-Umgebungen auszuwählen:
<!-- AEM 6.x Profile to include Core Components-->
<profile>
<id>classic</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
...
</profile>
Die classic
Profil ist standardmäßig deaktiviert. Wenn Sie dem Tutorial mit AEM 6.x folgen, fügen Sie die classic
Profil, wann immer es angewiesen wird, einen Maven-Build durchzuführen:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Verwenden Sie beim Generieren eines neuen Projekts für eine AEM-Implementierung immer die neueste Version des AEM Projektarchetyp und aktualisieren Sie die aemVersion
, um Ihre beabsichtigte Version von AEM auszuwählen.