Bienvenue dans un tutoriel en plusieurs parties conçu pour les développeurs qui découvrent le Éditeur de SPA dans Adobe Experience Manager (AEM). Ce tutoriel décrit la mise en oeuvre d’une application d’Angular pour une marque de style de vie fictive, WKND. L’application Angular est développée et conçue pour être déployée avec AEM SPA Editor, qui mappe les composants d’Angular aux composants d’AEM. Les SPA terminées, déployées sur AEM, peuvent être créées dynamiquement à l’aide des outils de modification en ligne traditionnels d’.
Implémentation SPA WKND
L’objectif de ce tutoriel en plusieurs parties est d’apprendre à un développeur comment mettre en oeuvre une application d’Angular pour travailler avec la fonctionnalité d’éditeur SPA d’AEM. Dans un scénario réel, les activités de développement sont ventilées par persona, impliquant souvent une Développeur front-end et un Développeur principal. Nous pensons qu’il est bénéfique pour tout développeur impliqué dans un projet d’AEM SPA Editor de suivre ce tutoriel.
Le tutoriel est conçu pour fonctionner avec AEM as a Cloud Service et est rétrocompatible avec AEM 6.5.4+ et AEM 6.4.8+. La SPA est mise en oeuvre à l’aide des éléments suivants :
Estimez 1 à 2 heures pour parcourir chaque partie du tutoriel.
Vous trouverez tout le code du tutoriel sur GitHub.
Le base de code la plus récente est disponible sous forme de packages AEM téléchargeables.
Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants :
Bien qu’il ne soit pas nécessaire, il est préférable de posséder une compréhension élémentaire de la fonction développement des composants AEM Sites traditionnels.
Un environnement de développement local est nécessaire pour terminer ce tutoriel. Les captures d’écran et les vidéos sont capturées à l’aide AEM SDK as a Cloud Service s’exécutant dans un environnement Mac OS avec Visual Studio Code comme IDE. Les commandes et le code doivent être indépendants du système d’exploitation local, sauf indication contraire.
Vous découvrez AEM as a Cloud Service ? Consultez la section le guide suivant pour configurer un environnement de développement local à l’aide du SDK as a Cloud Service AEM.
Vous découvrez AEM 6.5 ? Consultez la section guide de configuration d’un environnement de développement local.
Qu'attendez-vous?! Démarrez le tutoriel en accédant à la SPA Editor Project chapitres et découvrez comment générer un projet activé pour SPA Editor à l’aide d’AEM Project Archetype.
Le code de projet de ce tutoriel a été créé pour AEM as a Cloud Service. Pour rendre le code du projet rétrocompatible avec 6.5.4+ et 6.4.8+ plusieurs modifications ont été apportées.
Le UberJar v6.4.4 a été inclus comme dépendance :
<!-- 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>
Un profil Maven supplémentaire, nommé classic
a été ajouté pour modifier la version afin de cibler AEM environnements 6.x :
<!-- AEM 6.x Profile to include Core Components-->
<profile>
<id>classic</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
...
</profile>
Le classic
profile est désactivé par défaut. Si vous suivez le tutoriel avec AEM 6.x, ajoutez le classic
profile chaque fois qu’il est invité à effectuer une génération Maven :
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Lors de la génération d’un projet pour une mise en oeuvre AEM, utilisez toujours la dernière version de la variable AEM Archétype de projet et mettre à jour la variable aemVersion
pour cibler la version d’AEM prévue.