Découvrez comment utiliser un projet Maven Adobe Experience Manager (AEM) comme point de départ pour une application d’Angular intégrée à AEM Editor.
Dans ce chapitre, un nouveau projet AEM sera déployé, selon l’archétype de projet AEM. Le projet AEM sera démarré avec un point de départ très simple pour l’SPA de l’Angular. Le projet utilisé dans ce chapitre servira de base à une mise en oeuvre de la SPA WKND et sera élaboré dans les prochains chapitres.
Un message Hello World classique.
Examinez les outils et instructions requis pour configurer un environnement de développement local. Assurez-vous qu’une nouvelle instance d’Adobe Experience Manager, démarrée en mode author, s’exécute localement.
Il existe plusieurs options pour créer un projet Maven multi-module pour AEM. Ce tutoriel utilisait la dernière version AEM Project Archetype comme base du code du tutoriel. Des modifications ont été apportées au code du projet afin de prendre en charge plusieurs versions d’AEM. Veuillez consulter la note sur la compatibilité ascendante.
Il est recommandé d’utiliser la version la plus récente de l’archétype pour générer un nouveau projet pour une mise en oeuvre concrète. Les projets AEM doivent cibler une seule version d’AEM à l’aide de la propriété aemVersion
de l’archétype.
Téléchargez le point de départ de ce tutoriel via Git :
$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start
La structure de dossiers et de fichiers suivante représente le projet AEM généré par l’archétype Maven sur le système de fichiers local :
|--- aem-guides-wknd-spa
|--- all/
|--- core/
|--- dispatcher/
|--- ui.apps/
|--- ui.apps.structure/
|--- ui.content/
|--- ui.frontend /
|--- it.tests/
|--- pom.xml
|--- README.md
|--- .gitignore
|--- archetype.properties
Les propriétés suivantes ont été utilisées lors de la génération du projet AEM à partir de l’archétype de projet AEM :
Propriété | Valeur |
---|---|
aemVersion | nuage |
appTitle | Angular SPA WKND |
appId | wknd-spa-angular |
groupId | com.adobe.aem.guides |
frontendModule | angular |
package | com.adobe.aem.guides.wknd.spa.angular |
includeExamples | n |
Notez la propriété frontendModule=angular
. Cela indique à l’archétype de projet AEM de démarrer le projet avec une base de code d’Angular de démarrage à utiliser avec l’AEM Éditeur.
Ensuite, compilez, compilez et déployez le code du projet sur une instance locale d’AEM à l’aide de Maven.
Vérifiez qu’une instance d’AEM s’exécute localement sur le port 4502.
Depuis le terminal de ligne de commande, vérifiez que Maven est installé :
$ mvn --version
Apache Maven 3.6.2
Maven home: /Library/apache-maven-3.6.2
Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
Exécutez la commande Maven ci-dessous à partir du répertoire aem-guides-wknd-spa
pour créer et déployer le projet vers AEM :
$ mvn -PautoInstallSinglePackage clean install
Si vous utilisez AEM 6.x :
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Les multiples modules du projet doivent être compilés et déployés sur AEM.
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
[INFO]
[INFO] wknd-spa-angular ................................... SUCCESS [ 0.473 s]
[INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
[INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
[INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [ 0.694 s]
[INFO] WKND SPA Angular - UI apps ......................... SUCCESS [ 6.351 s]
[INFO] WKND SPA Angular - UI content ...................... SUCCESS [ 2.885 s]
[INFO] WKND SPA Angular - All ............................. SUCCESS [ 1.736 s]
[INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [ 2.563 s]
[INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [ 1.846 s]
[INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [ 0.270 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
Le profil Maven autoInstallSinglePackage compile les modules individuels du projet et déploie un seul module sur l’instance AEM. Par défaut, ce package est déployé sur une instance d’AEM s’exécutant localement sur le port 4502 et avec les informations d’identification admin:admin.
Accédez à Package Manager sur votre instance d’AEM locale : http://localhost:4502/crx/packmgr/index.jsp.
Vous devriez voir trois packages pour wknd-spa-angular.all
, wknd-spa-angular.ui.apps
et wknd-spa-angular.ui.content
.
Tout le code personnalisé nécessaire au projet sera regroupé dans ces modules et installé sur le runtime AEM.
Vous devriez également voir plusieurs packages pour spa.project.core
et core.wcm.components
. Il s’agit de dépendances automatiquement incluses par l’archétype. Vous trouverez plus d’informations sur AEM composants principaux ici.
Ouvrez ensuite le SPA de démarrage généré par l’archétype et mettez à jour une partie du contenu.
Accédez à la console Sites : http://localhost:4502/sites.html/content.
Le SPA WKND comprend une structure de site de base avec un pays, une langue et une page d’accueil. Cette hiérarchie est basée sur les valeurs par défaut de l’archétype pour language_country
et isSingleCountryWebsite
. Ces valeurs peuvent être remplacées en mettant à jour les propriétés disponibles lors de la génération d’un projet.
Ouvrez la page us > en > WKND SPA Angular Home Page en sélectionnant la page et en cliquant sur le bouton Modifier dans la barre de menus :
Un composant Texte a déjà été ajouté à la page. Vous pouvez modifier ce composant comme tout autre composant dans AEM.
Ajoutez un composant Texte supplémentaire à la page.
Notez que l’expérience de création est similaire à celle d’une page AEM Sites traditionnelle. Actuellement, un nombre limité de composants peuvent être utilisés. D’autres éléments seront ajoutés au cours du tutoriel.
Vérifiez ensuite qu’il s’agit d’une application d’une seule page qui utilise les outils de développement de votre navigateur.
Dans Éditeur de page, cliquez sur le menu Informations sur la page > Afficher comme publié :
Un nouvel onglet s’ouvre alors avec le paramètre de requête ?wcmmode=disabled
qui désactive effectivement l’éditeur d’AEM : http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
Affichez la source de la page et notez que le contenu textuel Hello World ou tout autre contenu est introuvable. Vous devriez plutôt voir du code HTML comme suit :
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="spa-root"></div>
<script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script>
...
</body>
...
clientlib-angular.min.js
est l’Angular SPA chargé sur la page et responsable du rendu du contenu.
D’où vient le contenu ?
Revenez à l’onglet : http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
Ouvrez les outils de développement du navigateur et examinez le trafic réseau de la page lors d’une actualisation. Affichez les requêtes XHR :
Une demande doit être envoyée à http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Contient tout le contenu, au format JSON, qui pilotera le SPA.
Dans un nouvel onglet, ouvrez http://localhost:4502/content/wknd-spa-angular/us/en.model.json
La requête en.model.json
représente le modèle de contenu qui pilotera l’application. Inspect de la sortie JSON et vous devriez être en mesure de trouver le fragment de code représentant le ou les composants Texte.
...
":items": {
"text": {
"text": "<p>Hello World! Updated content!</p>\r\n",
"richText": true,
":type": "wknd-spa-angular/components/text"
},
"text_98796435": {
"text": "<p>A new text component.</p>\r\n",
"richText": true,
":type": "wknd-spa-angular/components/text"
},
...
Dans le chapitre suivant, nous allons examiner la manière dont le contenu JSON est mappé des composants AEM aux composants SPA pour former la base de l’expérience de l’éditeur d’.
Il peut s’avérer utile d’installer une extension de navigateur pour formater automatiquement la sortie JSON.
Félicitations, vous venez de créer votre premier projet SPA Éditeur d'AEM !
C'est assez simple pour le moment, mais dans les prochains chapitres, d'autres fonctionnalités seront ajoutées.
Intégrer le SPA : découvrez comment le code source SPA est intégré au projet d’AEM et comprenez les outils disponibles pour développer rapidement le .