Einrichten einer lokalen AEM-Entwicklungsumgebung

Anleitung zum Einrichten einer lokalen Entwicklung für Adobe Experience Manager, AEM. Behandelt wichtige Themen wie lokale Installation, Apache Maven, integrierte Entwicklungsumgebungen und Debuggen/Fehlerbehebung. Die Entwicklung mit Eclipse IDE, CRXDE Lite, Visual Studio Code und IntelliJ wird diskutiert.

Übersicht

Die Einrichtung einer lokalen Entwicklungsumgebung ist der erste Schritt bei der Entwicklung für Adobe Experience Manager oder AEM. Nehmen Sie sich Zeit für die Einrichtung einer qualitätsorientierten Entwicklungsumgebung, um Ihre Produktivität zu steigern und schneller besseren Code zu schreiben. Wir können eine lokale AEM-Entwicklungsumgebung in vier Bereiche unterteilen:

Installieren lokaler AEM-Instanzen

Bei einer lokalen AEM-Instanz handelt es sich um eine Kopie von Adobe Experience Manager, die auf dem persönlichen Computer einer Entwicklungsperson ausgeführt wird. Jede AEM-Entwicklung sollte damit beginnen, Code für eine lokale AEM-Instanz zu schreiben und auszuführen.

Wenn Sie neu bei AEM sind, können zwei grundlegende Ausführungsmodi installiert werden: Author und Publish. Der Ausführungsmodus Author ist die Umgebung, die digitale Marketing-Fachleute zum Erstellen und Verwalten von Inhalten verwenden. Wenn Sie die meiste Zeit entwickeln, stellen Sie Code in einer Autoreninstanz bereit. Auf diese Weise können Sie Seiten erstellen sowie Komponenten hinzufügen und konfigurieren. Da AEM Sites ein WYSIWYG-Authoring-CMS ist, können die meisten CSS- und JavaScript-Dateien mit einer Authoring-Instanz getestet werden.

Es ist auch ausschlaggebend, Code in einer lokalen Veröffentlichungsinstanz zu testen. Die Veröffentlichungsinstanz ist die AEM-Umgebung, mit der Besuchende Ihrer Website interagieren. Während die Veröffentlichungsinstanz derselbe Technologiestapel wie die Autoreninstanz ist, gibt es einige wesentliche Unterschiede bei Konfigurationen und Berechtigungen. Der Code muss mit einer lokalen Veröffentlichungsinstanz getestet werden, bevor er in Umgebungen auf höherer Ebene genutzt wird.

Schritte

~/aem-sdk
    /author
    /publish

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

Klicken Sie zweimal auf die Datei aem-publish-p4503.jar, um die Veröffentlichungsinstanz zu installieren. Dadurch wird die Veröffentlichungsinstanz gestartet, die auf dem Port 4503 auf dem lokalen Computer ausgeführt wird.

Verwenden der Befehlszeile

Eine Alternative zum Doppelklicken auf die JAR-Datei besteht darin, AEM über die Befehlszeile zu starten oder ein Skript zu erstellen (.bat oder .sh), abhängig von Ihrem lokalen Betriebssystem. Nachfolgend finden Sie ein Beispiel für den entsprechenden Befehl:

$ 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"

Hier sind die -X JVM-Optionen und die -D zusätzliche Framework-Eigenschaften. Weitere Informationen finden Sie unter Bereitstellen und Verwalten einer AEM-Instanz und unter Weitere in der Schnellstartdatei verfügbare Optionen.

Installieren von Apache Maven

Apache Maven ist ein Tool zum Verwalten des Erstellungs- und Bereitstellungsverfahrens für Java-basierte Projekte. AEM ist eine Java-basierte Plattform, und Maven ist die Standardmethode zum Verwalten von Code für ein AEM-Projekt. Mit dem AEM Maven-Projekt oder einfach Ihrem AEM-Projekt meinen wir ein Maven-Projekt, das allen benutzerdefinierten Code für Ihre Site enthält.

Alle AEM-Projekte sollten mit der neuesten Version von AEM Project Archetype aufgebaut worden sein: https://github.com/adobe/aem-project-archetype. Der AEM Project Archetype stellt einen Bootstrap eines AEM-Projekts mit Beispiel-Code und -inhalt bereit. Der AEM Project Archetype enthält auch AEM WCM Core Components, die für die Verwendung in Ihrem Projekt konfiguriert wurden.

Schritte

$ 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

Einrichten einer integrierten Entwicklungsumgebung

Eine integrierte Entwicklungsumgebung oder IDE ist eine Anwendung, die einen Texteditor, Syntaxunterstützung und Build-Tools kombiniert. Je nach Art der Entwicklung, die Sie betreiben, kann eine IDE einer anderen vorzuziehen sein. Unabhängig von der IDE ist es wichtig, regelmäßig Push-Code an eine lokale AEM-Instanz senden zu können, um ihn zu testen. Es ist wichtig, gelegentlich Pull-Konfigurationen aus einer lokalen AEM-Instanz in Ihr AEM-Projekt zu ziehen, um sie in einem Versionsverwaltungssystem wie Git zu erhalten.

Im Folgenden finden Sie einige der gängigsten IDEs, die bei der AEM-Entwicklung verwendet werden, mit entsprechenden Videos, die die Integration mit einer lokalen AEM-Instanz zeigen.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Wenn Sie eine IDE verwenden, stellen Sie bitte sicher, dass Sie classic in Ihrer Registerkarte „Maven-Profil“ aktivieren.

IntelliJ-Maven-Profil

Eclipse IDE

Die Eclipse IDE ist eine der beliebtesten IDEs für die Java™-Entwicklung, vor allem weil sie Open-Source und kostenlos ist. Adobe stellt ein Plug-in namens AEM Developer Tools für Eclipse zur Verfügung, um die Entwicklung mit einer ansprechenden grafischen Benutzeroberfläche zu erleichtern und den Code mit einer lokalen AEM-Instanz zu synchronisieren. Die Eclipse-IDE wird für Entwicklerinnen und Entwickler empfohlen, die neu in AEM sind, vor allem wegen der GUI-Unterstützung durch AEM Developer Tools.

Installation und Einrichtung

IntelliJ IDEA

IntelliJ IDEA ist eine leistungsstarke IDE für professionelle Java™-Entwicklung. IntelliJ IDEA gibt es in zwei Varianten, eine kostenlose Community-Edition und eine kommerzielle (kostenpflichtige) Ultimate-Version. Die kostenlose Community-Version von IntellIJ IDEA reicht für die weitere AEM-Entwicklungen aus, die Ultimate-Version erweitert jedoch den Funktionsumfang.

Installation and Setup

Visual Studio Code

Visual Studio Code hat sich dank der verbesserten JavaScript-Unterstützung, Intellisenseund der Unterstützung von Browser-Debugging schnell zu einem beliebten Werkzeug für Frontend-Entwicklerinnen und -Entwickler etabliert. Visual Studio Code ist Open Source, kostenlos und besitzt viele leistungsstarke Erweiterungen. Visual Studio Code kann mithilfe eines Adobe-Tools namens repo für die Integration mit AEM eingerichtet werden. Es gibt auch mehrere von der Community unterstützte Erweiterungen, die installiert werden können, um sie in AEM zu integrieren.

Visual Studio Code ist eine hervorragende Wahl für Frontend-Entwicklerinnen und -Entwickler, die hauptsächlich CSS/LESS- und JavaScript-Code schreiben, um AEM Client-Bibliotheken zu erstellen. Dieses Tool ist möglicherweise nicht die beste Wahl für neue AEM-Entwicklungspersonen, da Knotendefinitionen (Dialogfelder, Komponenten) in rohen XML-Dateien bearbeitet werden müssen. Es gibt mehrere Java™-Erweiterungen für Visual Studio Code, aber wenn Sie hauptsächlich Java™-Entwicklung betreiben, sollten Sie Eclipse IDE oder IntelliJ vorziehen.

Wichtige Links

CRXDE Lite

CRXDE Lite ist eine Browser-basierte Ansicht des AEM-Repositorys. CRXDE Lite ist in AEM eingebettet und ermöglicht Entwicklungspersonen die Durchführung standardmäßiger Entwicklungsaufgaben wie das Bearbeiten von Dateien oder das Definieren von Komponenten, Dialogfeldern und Vorlagen. CRXDE Lite dient nicht als vollständige Entwicklungsumgebung, ist aber ein effektives Debugging-Tool. CRXDE Lite ist nützlich, wenn Sie Produkt-Code außerhalb Ihrer Code-Basis erweitern oder einfach verstehen wollen. CRXDE Lite bietet eine leistungsstarke Ansicht des Repositorys und eine Möglichkeit, Berechtigungen effektiv zu testen und zu verwalten.

CRXDE Lite sollte zusammen mit anderen IDEs zum Testen und Debuggen von Code verwendet werden, jedoch nie als primäres Entwicklungs-Tool. Es bietet nur eine eingeschränkte Syntaxunterstützung, keine automatischen Vervollständigungsfunktionen und eine eingeschränkte Integration in Versionsverwaltungssysteme.

Fehlerbehebung

Hilfe! Mein Code funktioniert nicht! Wie bei allen Entwicklungsaktivitäten gibt es auch hier Momente (wahrscheinlich viele), in denen Ihr Code nicht wie erwartet funktioniert. AEM ist eine leistungsstarke Plattform, aber große Leistung bringt auch große Komplexität mit sich. Im Folgenden finden Sie einige allgemeine Ausgangspunkte zur Fehlerbehebung und zum Erkennen von Problemen (bei weitem keine vollständige Liste von Dingen, die schiefgehen können):

Überprüfen der Code-Bereitstellung

Ein guter erster Schritt bei Auftreten eines Problems besteht darin, zu überprüfen, ob der Code bereitgestellt und erfolgreich in AEM installiert wurde.

Überprüfen der Protokolle

AEM ist eine gesprächige Plattform und protokolliert nützliche Informationen im error.log. Die Datei error.log kann dort gefunden werden, wo AEM installiert wurde: < aem-installation-folder>/crx-quickstart/logs/error.log.

Eine nützliche Methode zum Erkennen von Problemen besteht darin, Protokollanweisungen in Ihren Java™-Code einzufügen:

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);
}

Standardmäßig ist error.log für die Protokollierung von INFO-Anweisungen konfiguriert. Wenn Sie die Protokollebene ändern möchten, gehen Sie zur Protokollunterstützung: http://localhost:4502/system/console/slinglog. Vielleicht finden Sie auch, dass die error.log zu geschwätzig ist. Sie können die Protokollunterstützung verwenden, um Protokolleinträge nur für ein bestimmtes Java™-Paket zu konfigurieren. Dies ist eine Best Practise für Projekte, um Probleme mit benutzerdefiniertem Code leicht von Problemen zu trennen, die von AEM Platform selbst herrühren.

Bundle befindet sich im Status „installiert“ bundle-active

Alle Bundles (außer Fragmenten) sollten sich im Status aktiv befinden. Wenn sich Ihr Code-Bundle in installiertem Status befindet, muss ein Problem behoben werden. Meistens handelt es sich um ein Abhängigkeitsproblem:

Im obigen Screenshot befindet sich das WKND Core bundle im installierten Status. Dies liegt daran, dass das Bundle eine andere Version von com.adobe.cq.wcm.core.components.models erwartet, als in der AEM-Instanz verfügbar ist.

Ein nützliches Tool, das verwendet werden kann, ist die Abhängigkeitssuche: http://localhost:4502/system/console/depfinder. Fügen Sie den Namen des Java™-Pakets hinzu, um zu überprüfen, welche Version in der AEM-Instanz verfügbar ist:

Weiter können wir am obigen Beispiel sehen, dass die auf der AEM-Instanz installierte Version 12.2 statt der vom Bundle erwarteten 12.6 ist. Von dort aus können Sie rückwärts arbeiten und sehen, ob die Maven-Abhängigkeiten von AEM den Maven-Abhängigkeiten im AEM-Projekt entsprechen. Im obigen Beispiel ist Core Components v2.2.0 auf der AEM-Instanz installiert, aber das Code-Bundle wurde mit einer Abhängigkeit von v2.2.2 gebaut, was der Grund für das Abhängigkeitsproblem ist.

Überprüfen der Sling-Modellregistrierung osgi-component-sling-models

AEM-Komponenten müssen von einem Sling Model unterstützt werden, um jegliche Business-Logik zu kapseln und sicherzustellen, dass das HTL-Rendering-Skript sauber bleibt. Bei Problemen, bei denen das Sling-Modell nicht gefunden werden kann, kann es hilfreich sein, die Sling Models auf der Konsole zu überprüfen: http://localhost:4502/system/console/status-slingmodels. Dies teilt Ihnen mit, ob Ihr Sling-Modell registriert wurde und mit welchem Ressourcentyp (dem Komponentenpfad) es verknüpft ist.

Zeigt die Registrierung eines Sling Model mit BylineImpl, die an einen Komponenten-Ressourcentyp von wknd/components/content/byline gebunden ist.

CSS- oder JavaScript-Probleme

Bei den meisten CSS- und JavaScript-Problemen ist die Verwendung der Entwicklungs-Tools des Browsers die effektivste Möglichkeit zur Fehlerbehebung. Um das Problem bei der Entwicklung für eine AEM-Autoreninstanz einzuschränken, ist es hilfreich, die Seite „als veröffentlicht“ anzuzeigen.

Öffnen Sie das Menü Seiteneigenschaften und klicken Sie auf Als veröffentlicht anzeigen. Dadurch wird die Seite ohne den AEM-Editor und mit einem auf wcmmode=disabled festgelegten Abfrageparameter geöffnet. Dadurch wird die AEM-Authoring-Benutzeroberfläche deaktiviert und die Fehlerbehebung/das Debuggen von Frontend-Problemen deutlich vereinfacht.

Ein weiteres Problem, das bei der Entwicklung von Frontend-Code häufig auftritt, ist das Laden von altem oder veraltetem CSS/JS. Als ersten Schritt müssen Sie sicherstellen, dass der Browser-Verlauf gelöscht wurde, und bei Bedarf einen Inkognito-Browser oder eine neue Sitzung starten.

Debuggen von Client-Bibliotheken

Mit den verschiedenen Methoden der Kategorien und Einbettungen, die mehrere Client-Bibliotheken umfassen, kann die Fehlersuche mühsam sein. AEM stellt dafür mehrere Tools als Hilfe zur Verfügung. Eines der wichtigsten Tools ist Rebuild Client Libraries, das AEM zwingt, alle LESS-Dateien neu zu kompilieren und das CSS zu generieren.