Configurer un environnement de développement AEM local

Guide de configuration d’un développement local pour Adobe Experience Manager, AEM. Cet article présente l’installation locale, Apache Maven, les environnements de développement intégrés, le débogage et la résolution de problèmes. Le développement avec Eclipse IDE, CRXDE Lite, Visual Studio Code et IntelliJ est également abordé.

Vue d’ensemble

La configuration d’un environnement de développement local constitue la première étape du développement pour Adobe Experience Manager ou AEM. Prenez le temps de configurer un environnement de développement de qualité afin d’augmenter votre productivité et d’écrire un meilleur code plus rapidement. L’environnement de développement local AEM consiste en quatre zones :

Installer des instances AEM locales

Lorsque nous nous référons à une instance AEM locale, il s’agit d’une copie d’Adobe Experience Manager exécutée sur la machine personnelle d’un développeur ou d’une développeuse. Tout effort de développement AEM doit commencer par l’écriture et l’exécution de code sur une instance AEM locale.

Si vous découvrez AEM, sachez que deux modes d’exécution de base peuvent être installés : Création et Publication. Le mode d’exécution de Création est l’environnement utilisé par les personnes chargées du marketing numérique pour créer et gérer du contenu. Lors du développement, vous déployez la plupart du temps du code sur une instance de création. Vous pouvez ainsi créer des pages, ajouter et configurer des composants. AEM Sites est un CMS de création WYSIWYG. La plupart des codes CSS et JavaScript peuvent donc être testés sur une instance de création.

Il est également essentiel de tester le code sur une instance de Publication locale. L’instance de Publication est l’environnement AEM dans lequel les visiteurs et visiteuses de votre site web interagissent. Bien que l’instance de Publication repose sur la même pile technologique que l’instance de Création, des différences majeures apparaissent entre les configurations et les autorisations. Le code doit être testé sur une instance de Publication avant d’aller plus loin.

Étapes

~/aem-sdk
    /author
    /publish

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

Double-cliquez sur le fichier aem-publish-p4503.jar pour installer l’instance de Publication. L’instance de publication démarre et s’exécute sur le port 4503 de l’ordinateur local.

Utiliser la ligne de commande

Au lieu de double-cliquer sur le fichier JAR, vous pouvez lancer AEM à partir de la ligne de commande ou créer un script (.bat ou .sh) en fonction de votre préférence de système d’exploitation local. Vous trouverez ci-dessous un exemple de commande :

$ java -Xmx2048M -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=30303 -jar aem-author-p4502.jar -gui -r"author,localdev"

Les -X sont des options JVM et les -D sont des propriétés de framework supplémentaires. Pour plus d’informations, consultez les articles Déployer et maintenir une instance AEM et Autres options disponibles dans le fichier de démarrage rapide.

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 Java. AEM est une plateforme Java et Maven est la méthode standard de gestion du code des projets AEM. Un Projet AEM Maven ou simplement un Projet AEM consiste en un projet Maven qui comprend tous le code personnalisé de votre site.

Tous les projets AEM doivent être créés à partir de la dernière version de l’AEM Project Archetype  : https://github.com/adobe/aem-project-archetype. L’AEM Project Archetype fournit un bootstrap d’un projet AEM avec un exemple de code et de contenu. L’AEM Project Archetype inclut également des AEM WCM Core Components prêts à être utilisés dans votre projet.

Étapes

$ 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

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, la prise en charge de la syntaxe et des outils de création. Selon le type de développement entrepris, vous vous tournerez vers un IDE particulier. Quel que soit l’IDE, il est important de pouvoir déployer périodiquement le code sur une instance AEM locale afin de le tester. Il est important d’intégrer de temps à autre les configurations d’une instance AEM locale dans votre projet AEM afin de les conserver 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 lors du développement AEM, accompagnés de vidéos qui montrent l’intégration à une instance AEM locale.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Lorsque vous utilisez un IDE, vérifiez classic sous l’onglet Profil Maven.

Profil IntelliJ Maven

IDE Eclipse

L’Eclipse IDE est l’un des IDE les plus populaires pour le développement Java™, certainement parce qu’il est open source et gratuit. Adobe fournit le plug-in AEM Developer Tools pour Eclipse afin de faciliter le développement dans une interface utilisateur graphique conviviale et de synchroniser le code avec une instance AEM locale. L’IDE Eclipse est recommandé aux développeurs et développeuses qui découvrent AEM, car les AEM Developer Tools prennent en charge son interface utilisateur graphique.

Installation et configuration

IntelliJ IDEA

IntelliJ IDEA est un IDE puissant pour le développement Java™ professionnel. IntelliJ IDEA est disponible en deux versions, l’édition gratuite Community et l’édition commerciale (payante) Ultimate. La version gratuite Community d’IntellIJ IDEA est suffisante pour le développement avec AEM, mais l’édition Ultimate offre des fonctionnalités supplémentaires.

Installation and Setup

Visual Studio Code

Visual Studio Code a rapidement recueilli les faveurs des développeurs et développeuses front-end grâce à sa prise en charge améliorée de JavaScript, Intellisense, ainsi que du débogage du navigateur. Visual Studio Code est open source, gratuit et doté de nombreuses extensions puissantes. Visual Studio Code peut être configuré pour s’intégrer à AEM à l’aide de l’outil Adobe, repo. Il existe également plusieurs extensions prises en charge par la communauté qui peuvent être installées pour s’intégrer à AEM.

Visual Studio Code est un excellent choix pour l’équipe de développement front-end qui écrit principalement du code CSS/LESS et JavaScript pour créer des bibliothèques clientes AEM. Cet outil n’est peut-être pas adapté aux nouveaux développeurs et développeuses AEM, car les définitions de nœud (boîtes de dialogue et composants) doivent être modifiées dans du code XML brut. Plusieurs extensions Java™ sont disponibles pour Visual Studio Code, mais si vous faites principalement du développement Java™, Eclipse IDE ou IntelliJ peuvent constituer des options préférables.

Liens importants

CRXDE Lite

CRXDE Lite est une vue navigateur du référentiel AEM. CRXDE Lite est incorporé dans AEM et permet à un développeur ou à une développeuse d’effectuer des tâches de développement standard telles que la modification de fichiers et la définition de composants, de boîtes de dialogue et de modèles. CRXDE Lite n’est pas conçu pour être un environnement de développement complet, mais il constitue un excellent outil de débogage. CRXDE Lite est utile pour étendre ou simplement comprendre le code de produit en dehors de votre base de code. CRXDE Lite fournit une vue puissante du référentiel et permet de tester et de gérer efficacement les autorisations.

CRXDE Lite doit être utilisé avec d’autres IDE pour tester et déboguer le code, mais jamais comme outil de développement principal. Il offre une prise en charge limitée de la syntaxe, ne dispose d’aucune fonctionnalité de saisie automatique et fournit une intégration limitée aux systèmes de gestion du contrôle de code source.

Résolution des problèmes

À l’aide. Mon code ne fonctionne pas. Comme dans tout effort de développement, votre code peut ne pas fonctionner comme prévu. AEM est une plateforme puissante mais complexe. Vous trouverez ci-dessous les principales actions que vous pouvez entreprendre pour résoudre et suivre les problèmes (cette liste n’est en aucun cas exhaustive) :

Vérifier le déploiement du code

En cas de problème, la première étape consiste à vérifier que le code a bien été déployé et installé sur AEM.

Vérifier les journaux

AEM est une plateforme bavarde qui consigne les informations utiles dans le fichier error.log. Le fichier error.log se trouve dans le dossier d’installation d’AEM : < 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, le fichier error.log est configuré pour consigner les insctructions INFO. Si vous souhaitez modifier le niveau de journal, accédez à Prise en charge des journaux : http://localhost:4502/system/console/slinglog. Il se peut que vous trouviez le fichier error.log trop fourni. Utilisez la Prise en charge des journaux pour configurer des instructions de journal pour un package Java™ spécifique. Il s’agit d’une bonne pratique pour les projets, afin de séparer facilement les problèmes de code personnalisé des problèmes concernant la plateforme AEM prête à l’emploi.

Le lot est au statut Installé. bundle-active

Tous les lots (à l’exception des fragments) doivent adopter le statut Actif. Si votre lot de code est au statut Installé, un problème s’est produit. Il s’agit généralement d’un problème de dépendance :

Dans la copie d’écran ci-dessus, le statut du WKND Core bundle est Installé. La raison est la suivante : 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épendance Dependency Finder peut s’avérer utile. Il est disponible à l’adresse suivante : http://localhost:4502/system/console/depfinder. Ajoutez le nom du package Java™ pour vérifier la version disponible sur l’instance AEM :

Toujours dans l’exemple ci-dessus, nous constatons que la version installée sur l’instance AEM est 12.2, alors que le lot attendait 12.6. À partir de là, vous pouvez effectuer les étapes à l’envers et voir si les dépendances Maven sur AEM correspondent aux dépendances Maven du projet AEM. Dans l’exemple ci-dessus les Core Components  v2.2.0 sont installés 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 osgi-component-sling-models

Les composants AEM doivent être pris en charge par un Sling Model pour encapsuler toute logique commerciale et veiller à ce que le script de rendu HTL reste propre. Si le modèle Sling est introuvable, il peut s’avérer utile de vérifier les Sling Models dans la console : http://localhost:4502/system/console/status-slingmodels. Cela vous indique 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, la méthode de dépannage la plus efficace est l’utilisation des outils de développement du navigateur. Pour réduire le problème lors du développement d’une instance de création AEM, il est utile d’afficher la page « telle que publiée ».

Sélectionnez le menu Propriétés de la page, puis cliquez sur Afficher telle que publiée. La page s’ouvre alors sans l’éditeur AEM et avec un paramètre de requête défini sur wcmmode=disabled. Cela désactive effectivement l’interface utilisateur de création AEM et facilite le dépannage/débogage des problèmes de front-end.

Un autre problème fréquent lors du développement du code front-end est un fichier CSS/JS ancien ou obsolète en cours de chargement. Dans un premier temps, assurez-vous que l’historique du navigateur a été effacé et démarrez éventuellement un navigateur en navigation privée ou une nouvelle session.

Déboguer des bibliothèques clientes

Avec les différentes méthodes de catégories et d’incorporations pour intégrer plusieurs bibliothèques clientes, la résolution des problèmes peut s’avérer fastidieuse. AEM propose plusieurs outils pour faciliter cette tâche. L’un des outils les plus intéressant est la Recréation des bibliothèques clientes qui force AEM à recompiler les fichiers LESS et à générer le CSS.