Configuration d’un environnement de développement AEM local

Guide de configuration d'un développement local pour Adobe Experience Manager, AEM. Couvre les principaux sujets de l'installation locale, Apache Maven, les environnements de développement intégré et le débogage/dépannage. On discute du développement avec Eclipse IDE, CRXDE Lite, Visual Studio Code etIntelliJ.

Présentation

La mise en place d'un environnement de développement local est la première étape du développement pour Adobe Experience Manager ou AEM. Prenez le temps de configurer un environnement de développement de la qualité pour augmenter votre productivité et écrivez un meilleur code, plus rapidement. Nous pouvons diviser un environnement de développement local AEM en 4 domaines :

• Instances d’AEM locales
• Apache Maven project
• Environnements de développement intégré (IDE)
• Résolution des incidents

Installation des instances d’AEM locales

Lorsque nous faisons référence à une instance d’AEM locale, nous parlons d’une copie de Adobe Experience Manager exécutée sur la machine personnelle d’un développeur. Le développement de AllAEM doit être début en écrivant et en exécutant du code par rapport à une instance d’AEM locale.

Si vous êtes novice en AEM, deux modes d’exécution de base peuvent être installés : Auteur et Publier. L’auteur runmode est l’environnement que les spécialistes du marketing numérique utiliseront pour créer et gérer le contenu. Lorsque vous développez la plupart du temps, vous déployez du code sur une instance d’auteur. Vous pouvez ainsi créer de nouvelles pages, ajouter et configurer des composants. AEM Sites est un CMS de création WYSIWYG et la plupart des CSS et JavaScript peuvent donc être testés par rapport à une instance de création.

Il s’agit également du code de test critique par rapport à une instance locale Publier. L’instance Publier est l’environnement AEM avec lequel les visiteurs de votre site Web interagiront. Bien que l’instance Publier soit la même pile technologique que l’instance Auteur, il existe certaines différences majeures avec les configurations et les autorisations. Le code doit toujours être testé par rapport à une instance locale Publier avant d’être promu à des environnements de niveau supérieur.

Étapes

1. Vérifiez que Java est installé.

   • Préférer [JDK Java 11](https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2Fdc%3AsoftwareType&1_group.properties.operation=equals&1_group.propertyvalues.0_values=software-type%3Atooling&orderby=%40jcr%3Acontent%2Fjcr%3AlastModified&orderby.sort=desc&layout liste&p.offset=0&p.limit=14) pour AEM 6.5+
   • Java JDK 8 pour AEM versions antérieures à AEM 6.5

2. Obtenez une copie du fichier Jar AEM QuickStart et a license.properties.

3. Créez une structure de dossiers sur votre ordinateur comme suit :

   ~/aem-sdk
       /author
       /publish
   

4. Renommez QuickStart JAR en aem-author-p4502.jar et placez-le sous le répertoire /author. Ajoutez le fichier license.properties sous le répertoire /author.

5. Effectuez une copie du fichier JAR QuickStart, renommez-le en aem-publish-p4503.jar et placez-le sous le répertoire /publish. Ajoutez une copie du fichier license.properties situé sous le répertoire /publish.

   ~/aem-sdk
       /author
           + aem-author-p4502.jar
           + license.properties
       /publish
           + aem-publish-p4503.jar
           + license.properties
   

6. Cliquez avec le doublon sur le fichier aem-author-p4502.jar pour installer l’instance Auteur. L’instance d’auteur est ainsi début, s’exécutant sur le port 4502 de l’ordinateur local.

   Cliquez avec le doublon sur le fichier aem-publish-p4503.jar pour installer l’instance Publier. L’instance de publication est alors début et s’exécute sur le port 4503 de l’ordinateur local.

   REMARQUE

   Selon le matériel de votre machine de développement, il peut être difficile d’exécuter simultanément une instance Auteur et Publier. Il est rare que vous deviez exécuter les deux simultanément sur une configuration locale.

   Pour plus d’informations, voir Déploiement et gestion d’une instance AEM.

Installer Apache Maven

Apache Maven est un outil permettant de gérer la procédure de création et de déploiement pour les projets basés sur Java. AEM est une plateforme basée sur Java et Maven est la méthode standard de gestion du code pour un projet AEM. Lorsque nous disons AEM Maven Project ou simplement votre AEM Project, nous faisons référence à un projet Maven qui inclut tout le code personnalisé de votre site.

Tous les projets AEM doivent être construits à partir de la dernière version du AEM Project Archetype : https://github.com/Adobe-Marketing-Cloud/aem-project-archetype. AEM Project Archetype va créer une amorce d'un projet AEM avec un exemple de code et de contenu. AEM Project Archetype inclut également AEM WCM Core Components configuré pour être utilisé sur votre projet.

Étapes

1. Télécharger Apache Maven

2. Installez Apache Maven et assurez-vous que l'installation a été ajoutée à votre ligne de commande PATH.

   • macOS les utilisateurs peuvent installer Maven à l’aide de Homebrew

3. Vérifiez que Maven est installé en ouvrant un nouveau terminal de ligne de commande et en exécutant les opérations suivantes :

   $ mvn --version
   Apache Maven 3.3.9
   Maven home: /Library/apache-maven-3.3.9
   Java version: 1.8.0_111, vendor: Oracle Corporation
   Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre
   Default locale: en_US, platform encoding: UTF-8
   

4. Ajoutez le profil adobe-public dans votre fichier Maven settings.xml afin d’ajouter automatiquement repo.adobe.com au processus de création de l’expert.

5. Créez un fichier nommé settings.xml à ~/.m2/settings.xml s'il n'existe pas déjà.

6. Ajoutez le profil adobe-public dans le fichier settings.xml en fonction de les instructions ici.

   Un exemple settings.xml est répertorié ci-dessous. Notez que la convention d’affectation de nom settings.xml et l’emplacement sous le .m2 répertoire de l’utilisateur sont importants.

   <settings xmlns="https://maven.apache.org/SETTINGS/1.0.0"
     xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="https://maven.apache.org/SETTINGS/1.0.0
                         https://maven.apache.org/xsd/settings-1.0.0.xsd">
   <profiles>
    <!-- ====================================================== -->
    <!-- A D O B E   P U B L I C   P R O F I L E                -->
    <!-- ====================================================== -->
        <profile>
            <id>adobe-public</id>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
            <properties>
                <releaseRepository-Id>adobe-public-releases</releaseRepository-Id>
                <releaseRepository-Name>Adobe Public Releases</releaseRepository-Name>
                <releaseRepository-URL>https://repo.adobe.com/nexus/content/groups/public</releaseRepository-URL>
            </properties>
            <repositories>
                <repository>
                    <id>adobe-public-releases</id>
                    <name>Adobe Public Repository</name>
                    <url>https://repo.adobe.com/nexus/content/groups/public</url>
                    <releases>
                        <enabled>true</enabled>
                        <updatePolicy>never</updatePolicy>
                    </releases>
                    <snapshots>
                        <enabled>false</enabled>
                    </snapshots>
                </repository>
            </repositories>
            <pluginRepositories>
                <pluginRepository>
                    <id>adobe-public-releases</id>
                    <name>Adobe Public Repository</name>
                    <url>https://repo.adobe.com/nexus/content/groups/public</url>
                    <releases>
                        <enabled>true</enabled>
                        <updatePolicy>never</updatePolicy>
                    </releases>
                    <snapshots>
                        <enabled>false</enabled>
                    </snapshots>
                </pluginRepository>
            </pluginRepositories>
        </profile>
   </profiles>
    <activeProfiles>
        <activeProfile>adobe-public</activeProfile>
    </activeProfiles>
   </settings>
   

7. Vérifiez que le profil adobe-public est principal en exécutant la commande suivante :

   $ mvn help:effective-settings
   ...
   <activeProfiles>
       <activeProfile>adobe-public</activeProfile>
   </activeProfiles>
   <pluginGroups>
       <pluginGroup>org.apache.maven.plugins</pluginGroup>
       <pluginGroup>org.codehaus.mojo</pluginGroup>
   </pluginGroups>
   </settings>
   [INFO] ---------------------------------------------------------------------
   

[INFO] BUILD SUCCESS
[INFO] ---------------------------------------------------------------------

[INFO] Total time: 0.856 s

Si vous ne voyez pas le **adobe-public**, cela indique que le repo de l'Adobe n'est pas référencé correctement dans votre fichier `~/.m2/settings.xml`. Veuillez revoir les étapes précédentes et vérifier que le fichier settings.xml référence le référentiel d'Adobe.

## Configurer un Environnement de développement intégré

Un environnement de développement intégré ou IDE est une application qui combine un éditeur de texte, une prise en charge de la syntaxe et des outils de création. Selon le type de développement que vous effectuez, un IDE peut être préférable à un autre. Quel que soit l'IDE, il sera important de pouvoir périodiquement ***pousser*** le code vers une instance d'AEM locale afin de le tester. Il sera également important d'extraire occasionnellement ***des configurations*** d'une instance d'AEM locale dans votre projet AEM afin de persister dans un système de gestion de contrôle de code source comme Git.

Vous trouverez ci-dessous quelques-uns des IDE les plus utilisés avec le développement AEM avec des vidéos correspondantes qui montrent l'intégration avec une instance AEM locale.

<div class="extension note">
<div>REMARQUE</div>
<div>
<p>Le projet WKND a été mis à jour par défaut pour fonctionner sur AEM en tant que Cloud Service. Il a été mis à jour pour être <a href="https://github.com/adobe/aem-guides-wknd#building-for-aem-6xx">rétrocompatible avec la version 6.5/6.4</a>. Si vous utilisez AEM 6.5 ou 6.4, ajoutez le profil <code>classic</code> aux commandes Maven.</p>
</div>
</div>


```shell
$ mvn clean install -PautoInstallSinglePackage -Pclassic

Lors de l'utilisation d'un IDE, veillez à vérifier classic dans l'onglet Profil Maven.

Profil IntelliJ Maven

Eclipse IDE

Eclipse IDE est l'un des IDE les plus populaires pour le développement de Java, en grande partie parce qu'il est open source et gratuit ! Adobe fournit un module externe, AEM Developer Tools, pour Eclipse afin de permettre un développement plus facile avec une interface graphique graphique agréable pour synchroniser le code avec une instance d'AEM locale. L'IDE Eclipse est recommandé pour les développeurs qui viennent d'AEM en grande partie en raison de la prise en charge de l'interface utilisateur graphique par AEM Developer Tools.

Installation et configuration

1. Téléchargez et installez l'IDE Eclipse pour Java EE Developers : https://www.eclipse.org
2. Suivez les instructions pour installer le module externe AEM Developer Tools : https://eclipse.adobe.com/aem/dev-tools/

• 00:30 - Importer un projet expert
• 01:24 - Création et déploiement du code source avec Maven
• 04:33 - Changements de code Push avec AEM Developer Tool
• 10:55 - Extraire les modifications du code avec AEM Developer Tool
• 13:12 - Utilisation des outils de débogage intégrés d'Eclipse

IDÉE IntelliJ

IntelliJ IDEA est un IDE puissant pour le développement professionnel de Java. IntelliJ IDEA est disponible en deux versions, une ​​** Community édition libre et une Ultimate version commerciale (payante). La version Community gratuite de IntellIJ IDEA est suffisante pour un développement plus AEM, mais la Ultimate étend son ensemble de capacités.

Installation and Setup

1. Téléchargez et installez IntelliJ IDEA : https://www.jetbrains.com/idea/download
2. Installer Repo (outil de ligne de commande) : https://github.com/Adobe-Marketing-Cloud/tools/tree/master/repo

• 00:00 - Importer un projet expert
• 05:47 - Création et déploiement du code source avec Maven
• 08:17 - Apporter les modifications avec Repo
• 14:39 - Extraire les modifications avec Repo
• 17:25 - Utilisation des outils de débogage intégrés d'IntelliJ IDEA

Visual Studio Code

Visual Studio Codehas est rapidement devenu un outil favori pour les développeurs frontaux grâce à la prise en charge améliorée de JavaScript, Intellisenseet la prise en charge du débogage du navigateur. Visual Studio Code est open source, gratuit, avec de nombreuses extensions puissantes. Visual Studio Code peut être configuré pour s'intégrer à AEM avec l'aide d'un outil d'Adobe, repo. Il existe également plusieurs extensions prises en charge par la communauté qui peuvent être installées pour être intégrées à AEM.

Visual Studio Code est un excellent choix pour les développeurs frontaux qui rédigeront principalement du code CSS/LESS et JavaScript pour créer AEM bibliothèques clientes. Cet outil n’est peut-être pas le meilleur choix pour les nouveaux développeurs AEM puisque les définitions de noeud (boîtes de dialogue, composants) devront toutes être modifiées dans du XML brut. Il existe plusieurs extensions Java disponibles pour Visual Studio Code, mais si vous préférez développer Java Eclipse IDE ou IntelliJ.

Liens importants

• ​ DownloadVisual Studio Code
• repo - Outil de type FTP pour le contenu JCR
• aemfed - Accélérer votre flux de travail AEM frontal
• AEM Sync - Community supported* extension for Visual Studio Code

• 00:30 - Importer un projet expert
• 00:53 - Création et déploiement du code source avec Maven
• 04:03 - Changements de code Push avec l'outil de ligne de commande Repo
• 08:29 - Extraire les modifications du code à l'aide de l'outil de ligne de commande Repo
• 10:40 - Modification du code Push avec l’outil AEM
• 14:24 - Dépannage, reconstruction des bibliothèques client

CRXDE Lite

CRXDE Liteest une vue du référentiel AEM basée sur un navigateur. CRXDE Lite est intégrée dans AEM et permet au développeur d’effectuer des tâches de développement standard telles que la modification de fichiers, la définition de composants, de boîtes de dialogue et de modèles. CRXDE Lite n’est ​​** pas un environnement de développement complet, mais est très efficace en tant qu’outil de débogage. CRXDE Lite s’avère utile lors de l’extension ou simplement de la compréhension du code de produit en dehors de votre base de code. CRXDE Lite fournit une vue puissante du référentiel et un moyen de tester et de gérer efficacement les autorisations.

CRXDE Lite doit toujours être utilisé conjointement avec d'autres IDE pour tester et déboguer le code mais jamais comme outil de développement Principal. Il ne prend pas en charge la syntaxe, ne dispose pas de fonctionnalités de saisie semi-automatique et n'est pas intégré aux systèmes de gestion du contrôle de code source.

Résolution des incidents

Aide! Mon code ne fonctionne pas ! Comme pour tout développement, il y aura des fois (probablement plusieurs) où votre code ne fonctionne tout simplement pas comme prévu. AEM est une plateforme puissante, mais avec un grand pouvoir… vient une grande complexité. Vous trouverez ci-dessous quelques points de départ de haut niveau concernant la résolution des problèmes et le suivi des problèmes (mais loin d'une liste exhaustive des problèmes qui peuvent se produire) :

Vérification du déploiement du code

Une première étape intéressante, en cas de problème, consiste à vérifier que le code a été déployé et installé avec succès sur AEM.

1. Vérifiez Package Manager pour vous assurer que le package de code a été téléchargé et installé : http://localhost:4502/crx/packmgr/index.jsp. Vérifiez l'horodatage pour vérifier que le package a été installé récemment.
2. Si vous effectuez des mises à jour de fichier incrémentielles à l'aide d'un outil tel que Repo ou AEM Developer Tools, vérifiezCRXDE Lite que le fichier a été envoyé à l'instance d'AEM locale et que le contenu du fichier est mis à jour : http://localhost:4502/crx/de/index.jsp
3. Vérifiez que le lot est chargé si des problèmes liés au code Java se produisent dans un lot OSGi. Ouvrez la console Web Adobe Experience Manager : http://localhost:4502/system/console/bundles et recherchez votre lot. Assurez-vous que le lot a un état Principal. Voir ci-dessous pour plus d’informations sur le dépannage d’un lot dans un état Installé.

Vérification des journaux

AEM est une plate-forme de discussion et consigne de nombreuses informations utiles dans le error.log. Le fichier error.log se trouve là où AEM a été installé : < aem-installation-folder>/crx-quickstart/logs/error.log.

Une technique utile pour effectuer le suivi des problèmes consiste à ajouter des instructions de journal dans votre code Java :

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
...

public class MyClass {
    private final Logger log = LoggerFactory.getLogger(getClass());

    ...

    String myVariable = "My Variable";

    log.debug("Debug statement of myVariable {}", myVariable);

    log.info("Info statement of myVariable {}", myVariable);
}

Par défaut, error.log est configuré pour enregistrer les instructions INFO. Si vous souhaitez modifier le niveau de journal, vous pouvez le faire en accédant à Prise en charge des journaux : http://localhost:4502/system/console/slinglog. Vous pouvez également trouver que le error.log est trop bavard. Vous pouvez utiliser Prise en charge du journal pour configurer les instructions de journal pour un package Java spécifié uniquement. Il s’agit de la meilleure pratique pour les projets, afin de séparer facilement les problèmes de code personnalisé des problèmes de plateforme AEM prêtes à l’emploi.

L'offre groupée est à l'état Installer

Tous les lots (à l’exception des fragments) doivent être à l’état Principal. Si votre lot de codes apparaît dans un état Installé, un problème doit être résolu. La plupart du temps, il s'agit d'un problème de dépendance :

Dans la capture d’écran ci-dessus, WKND Core bundle est un état Installé. Cela est dû au fait que le lot attend une version différente de com.adobe.cq.wcm.core.components.models qui est disponible sur l'instance AEM.

L'outil de recherche de dépendances est un outil utile : http://localhost:4502/system/console/depfinder. Ajoutez le nom du package Java pour vérifier quelle version est disponible sur l’instance AEM :

En suivant l’exemple ci-dessus, nous constatons que la version installée sur l’instance AEM est 12.2 vs 12.6 que le lot attendait. A partir de là, vous pouvez travailler à l'envers et voir si les dépendances Maven de l'AEM correspondent aux dépendances Maven du projet AEM. Dans l’exemple ci-dessus, Core Components v2.2.0 est installé sur l’instance AEM mais le lot de code a été créé avec une dépendance sur v2.2.2, d’où la raison du problème de dépendance.

Vérifier l'enregistrement des modèles Sling

AEM composants doivent toujours être sauvegardés par un Sling Model pour encapsuler toute logique métier et s’assurer que le script de rendu HTML reste propre. Si vous rencontrez des problèmes où le modèle Sling est introuvable, il peut s’avérer utile de vérifier le Sling Models à partir de la console : http://localhost:4502/system/console/status-slingmodels. Cela vous dira si votre modèle Sling a été enregistré et à quel type de ressource (le chemin du composant) il est lié.

Affiche l'enregistrement d'un Sling Model, BylineImpl lié à un type de ressource de composant de wknd/components/content/byline.

Problèmes CSS ou JavaScript

Pour la plupart des problèmes CSS et JavaScript, l’utilisation des outils de développement du navigateur est le moyen le plus efficace de résoudre les problèmes. Pour réduire le problème lors du développement par rapport à une instance d’auteur AEM, il est utile de vue de la page "telle que publiée".

Ouvrez le menu Propriétés de la page et cliquez sur Vue comme Publié. La page s’ouvre alors sans l’éditeur AEM et avec un paramètre de requête défini sur wcmmode=disabled. Cela désactivera efficacement l’interface utilisateur de création d’AEM et facilitera le dépannage/débogage des problèmes frontaux.

Un autre problème fréquemment rencontré lors du développement du code frontal est le chargement de CSS/JS ancien ou obsolète. Dans un premier temps, assurez-vous que l’historique du navigateur a été effacé et, si nécessaire, début d’un navigateur incognito ou d’une nouvelle session.

Débogage des bibliothèques clientes

Avec différentes méthodes de catégories et d’incorporation pour inclure plusieurs bibliothèques clientes, il peut s’avérer difficile de résoudre les problèmes. AEM expose plusieurs outils pour y remédier. L'un des outils les plus importants est Reconstruire les bibliothèques clientes, ce qui obligera AEM à recompiler les fichiers LESS et à générer le fichier CSS.

• Effacer les bibliothèques : Liste toutes les bibliothèques clientes enregistrées dans l’instance AEM. <host>/libs/granite/ui/content/dumplibs.html
• Tester la sortie : permet à un utilisateur de voir la sortie HTML attendue des inclusions clientlib en fonction de la catégorie. <host>/libs/granite/ui/content/dumplibs.test.html
• Bibliothèques Validation des dépendances : met en évidence les dépendances ou les catégories incorporées introuvables. <host>/libs/granite/ui/content/dumplibs.validate.html
• Reconstruire les bibliothèques clientes : permet à un utilisateur de forcer l'AEM à recréer toutes les bibliothèques clientes ou d'invalider le cache des bibliothèques clientes. Cet outil est particulièrement efficace lorsque vous développez avec LESS, car cela peut forcer AEM à recompiler le CSS généré. En général, il est plus efficace d’invalider les caches, puis d’actualiser la page plutôt que de recréer toutes les bibliothèques. <host>/libs/granite/ui/content/dumplibs.rebuild.html