Guide de configuration d’un développement local pour Adobe Experience Manager, AEM. Couvre les rubriques importantes de l’installation locale, Apache Maven, les environnements de développement intégrés et le débogage/dépannage. Développement avec Eclipse IDE, CRXDE Lite, Visual Studio Code etIntelliJ sont discutées.
La configuration 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 qualité pour augmenter votre productivité et écrivez plus rapidement un meilleur code. Nous pouvons diviser un AEM environnement de développement local en 4 secteurs :
Lorsque nous nous référons à une instance d’AEM locale, nous parlons d’une copie d’Adobe Experience Manager en cours d’exécution sur la machine personnelle d’un développeur. Tous AEM développement doit commencer par écrire et exécuter du code sur une instance AEM locale.
Si vous êtes un utilisateur novice en AEM, deux modes d’exécution de base peuvent être installés : Auteur et Publier. Le Auteur runmode est l’environnement que les spécialistes du marketing numérique utiliseront pour créer et gérer du contenu. Lors du développement most de l’heure à laquelle vous déployez le code sur une instance d’auteur. Vous pouvez ainsi créer des pages, ajouter et configurer des composants. AEM Sites est un CMS de création WYSIWYG. La plupart des CSS et JavaScript peuvent donc être testés par rapport à une instance de création.
Il est également critique test du code par rapport à un élément local Publier instance. Le Publier est l’environnement AEM avec lequel les visiteurs de votre site web interagiront. Lorsque la variable Publier est la même pile technologique que l’objet Auteur il existe des différences majeures avec les configurations et les autorisations. Le code doit always être testé sur un site local Publier avant d’être convertie en environnements de niveau supérieur.
Assurez-vous que Java est installé.
Obtention d’une copie de la variable AEM QuickStart Jar et un license.properties.
Créez une structure de dossiers sur votre ordinateur comme suit :
~/aem-sdk
/author
/publish
Renommez la variable QuickStart JAR à aem-author-p4502.jar et placez-le sous le /author
répertoire . Ajoutez la variable license.properties sous le fichier /author
répertoire .
Effectuez une copie de la fonction QuickStart JAR, renommez-le aem-publish-p4503.jar et placez-le sous le /publish
répertoire . Ajoutez une copie de la fonction license.properties sous le fichier /publish
répertoire .
~/aem-sdk
/author
+ aem-author-p4502.jar
+ license.properties
/publish
+ aem-publish-p4503.jar
+ license.properties
Double-cliquez sur le aem-author-p4502.jar pour installer le fichier Auteur instance. Cette opération démarre l’instance d’auteur en cours d’exécution sur le port . 4502 sur l'ordinateur local.
Double-cliquez sur le aem-publish-p4503.jar pour installer le fichier Publier instance. L’instance de publication démarre alors sur le port . 4503 sur l'ordinateur local.
Selon le matériel de votre machine de développement, il peut être difficile d’avoir à la fois une Création et publication s’exécutant en même temps. Vous devez rarement exécuter les deux simultanément sur une configuration locale.
Pour plus d’informations, voir Déploiement et maintenance d’une instance AEM.
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 pour un projet AEM. Quand nous disons Projet AEM Maven ou simplement votre AEM projet, nous faisons référence à un projet Maven qui comprend tous les custom du code de votre site.
Tous les projets AEM doivent être créés à partir de la dernière version de la variable AEM Project Archetype: https://github.com/adobe/aem-project-archetype. Le AEM Project Archetype crée un bootstrap d’un projet AEM avec un exemple de code et de contenu. Le AEM Project Archetype inclut également AEM WCM Core Components configuré pour être utilisé sur votre projet.
Lors du démarrage d’un nouveau projet, il est recommandé d’utiliser la dernière version de l’archétype. Gardez à l’esprit qu’il existe plusieurs versions de l’archétype et que toutes les versions ne sont pas compatibles avec les versions antérieures d’AEM.
Télécharger Apache Maven
Installer Apache Maven et assurez-vous que l’installation a été ajoutée à votre ligne de commande. PATH
.
Vérifiez que Maven est installé en ouvrant un nouveau terminal de ligne de commande et en exécutant ce qui suit :
$ 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
Dans le passé, l’ajout de adobe-public
Le profil Maven était nécessaire pour pointer nexus.adobe.com
pour télécharger AEM artefacts. Tous les artefacts AEM sont désormais disponibles via Maven Central et le adobe-public
profile n’est pas nécessaire.
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 que vous effectuez, un IDE peut être préférable à un autre. Quel que soit l’IDE, il sera important de pouvoir périodiquement push code vers une instance d’AEM locale afin de la tester. Il sera également important de pull 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 les vidéos correspondantes qui montrent l’intégration à une instance AEM locale.
Le projet WKND a été mis à jour par défaut pour fonctionner sur AEM as a Cloud Service. Il a été mis à jour pour être rétrocompatible avec la version 6.5/6.4. Si vous utilisez AEM version 6.5 ou 6.4, ajoutez la variable classic
profile à n’importe quelle commande Maven.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Lorsque vous utilisez un IDE, veillez à vérifier classic
dans l’onglet Profil Maven .
Profil IntelliJ Maven
Le 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 free! Adobe fournit un module externe, AEM Developer Tools, pour Eclipse pour faciliter le développement avec une interface utilisateur graphique conviviale afin de synchroniser le code avec une instance d’AEM locale. Le Eclipse Il est recommandé aux développeurs qui découvrent l’AEM en grande partie en raison de la prise en charge de l’interface utilisateur graphique par AEM Developer Tools.
Le IntelliJ IDEA est un IDE puissant pour le développement professionnel de Java. IntelliJ IDEA vient en deux versions, a free Community édition et une publicité (payante) Ultimate version. Le libre Community version de IntellIJ IDEA est suffisant pour AEM développement, mais la variable Ultimate développe son ensemble de fonctionnalités..
Visual Studio Code est rapidement devenu un outil favori pour développeurs front-end avec une prise en charge améliorée de JavaScript, Intellisenseet 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 à l’aide d’un 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 les développeurs front-end qui écriront 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 d’AEM, car les définitions de noeud (boîtes de dialogue, composants) devront toutes être modifiées dans du code XML brut. Plusieurs extensions Java sont disponibles pour Visual Studio Code, mais principalement en cas de développement Java Eclipse IDE ou IntelliJ peut être préférable.
CRXDE Lite est une vue navigateur du référentiel AEM. CRXDE Lite est incorporé dans AEM et permet à un 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 is not est conçu pour être un environnement de développement complet, mais est très efficace en tant qu’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 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 offre une prise en charge de la syntaxe limitée, aucune fonctionnalité de saisie automatique et une intégration limitée aux systèmes de gestion du contrôle de code source.
Aide! Mon code ne fonctionne pas ! Comme pour tout développement, il y aura des moments (probablement plusieurs) où votre code ne fonctionne simplement pas comme prévu. AEM est une plate-forme puissante, mais avec une grande puissance… vient une grande complexité. Vous trouverez ci-dessous quelques points de départ de haut niveau concernant le dépannage et le suivi des problèmes (mais loin d’être une liste exhaustive des problèmes qui peuvent se produire) :
Une bonne première étape consiste, en cas de problème, à vérifier que le code a bien été déployé et installé sur AEM.
AEM est une plate-forme de discussion et consigne de nombreuses informations utiles dans le journal error.log. Le error.log est disponible 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, la variable error.log est configuré pour le journal INFO des instructions. 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. Il se peut également que la variable error.log est trop bavard. Vous pouvez utiliser la variable Prise en charge des journaux pour configurer les instructions de journal pour un package Java spécifié uniquement. Il s’agit d’une bonne pratique pour les projets, afin de séparer facilement les problèmes de code personnalisé des problèmes de plateforme AEM prêts à l’emploi.
Tous les lots (à l’exception des fragments) doivent se trouver dans une Principal état. Si votre lot de code s’affiche dans une Installé il existe alors un problème qui doit être résolu. Il s’agit généralement d’un problème de dépendance :
Dans la capture d’écran ci-dessus, la fonction WKND Core bundle est un Installé état. En effet, le lot attend une version différente de com.adobe.cq.wcm.core.components.models
qui est disponible sur l’instance AEM.
Un outil utile qui peut être utilisé est le suivant : Outil de recherche des dépendances: http://localhost:4502/system/console/depfinder. Ajoutez le nom du package Java pour vérifier quelle version est disponible sur l’instance AEM :
En reprenant l’exemple ci-dessus, nous pouvons constater que la version installée sur l’instance AEM est 12.2 vs 12,6 que le lot attendait. À partir de là, vous pouvez travailler à l’envers et voir si la variable Maven les dépendances sur AEM correspondent à la variable Maven dépendances 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.
AEM composants doivent toujours être pris en charge par une Sling Model pour encapsuler toute logique commerciale et veiller à ce que le script de rendu HTL reste propre. Si vous rencontrez des problèmes où le modèle Sling est introuvable, il peut s’avérer utile de vérifier la variable Sling Models à partir de 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 d’accès au composant) il est lié.
Affiche l’enregistrement d’une Sling Model, BylineImpl
qui est lié à un type de ressource de composant de wknd/components/content/byline
.
Pour la plupart des problèmes CSS et JavaScript, l’utilisation des outils de développement du navigateur est la méthode de dépannage la plus efficace. Pour réduire le problème lors du développement par rapport à une instance d’auteur AEM, il est utile d’afficher la page "en tant que publiée".
Ouvrez le Propriétés de la page et cliquez sur Afficher comme publié(e). La page s’ouvre alors sans l’éditeur d’AEM et avec un paramètre de requête défini sur wcmmode=disabled. Cela permet de désactiver efficacement l’interface utilisateur de création d’AEM et de faciliter le dépannage/débogage des problèmes front-end.
Un autre problème fréquemment rencontré lors du développement du code frontal 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, au besoin, lancez un navigateur incognito ou une nouvelle session.
Avec différentes méthodes de catégories et d’incorporations pour inclure plusieurs bibliothèques clientes, le dépannage peut s’avérer fastidieux. AEM expose plusieurs outils pour faciliter cette tâche. L’un des outils les plus importants est Reconstruire les bibliothèques clientes qui force AEM à recompiler les fichiers LESS et à générer le CSS.
Si vous devez constamment invalider le cache à l’aide de la variable Reconstruire les bibliothèques clientes pour effectuer une reconstruction unique de toutes les bibliothèques clientes. Cela peut prendre environ 15 minutes, mais élimine généralement les problèmes de mise en cache à l’avenir.