Lokale AEM-Entwicklungsumgebung einrichten

Anleitung zum Einrichten einer lokalen Entwicklung für Adobe Experience Manager, AEM. Behandelt wichtige Themen wie lokale Installation, Apache Maven, integrierte Entwicklungsumgebungen und Debugging/Fehlerbehebung. Entwicklung mit Eclipse IDE, CRXDE Lite, Visual Studio Code undIntelliJ werden 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 schnelleren Code zu schreiben. Wir können eine AEM lokale Entwicklungsumgebung in vier Bereiche unterteilen:

  • Lokale AEM
  • Apache Maven Projekt
  • Integrierte Entwicklungsumgebungen (IDE)
  • Fehlerbehebung

Installieren lokaler AEM-Instanzen

Wenn es um eine lokale AEM geht, handelt es sich um eine Kopie von Adobe Experience Manager, die auf dem persönlichen Computer eines Entwicklers ausgeführt wird. Alle AEM Entwicklung sollte beginnen, indem Code für eine lokale AEM-Instanz geschrieben und ausgeführt wird.

Wenn Sie neu AEM sind, können zwei grundlegende Ausführungsmodi installiert werden: Autor und Veröffentlichen. Die Autor runmode ist die Umgebung, die digitale Marketingexperten zum Erstellen und Verwalten von Inhalten verwenden werden. In der Entwicklung most der Zeit, zu der Sie Code in einer Autoreninstanz bereitstellen. Auf diese Weise können Sie neue Seiten erstellen sowie Komponenten hinzufügen und konfigurieren. AEM Sites ist ein WYSIWYG-Authoring-CMS und daher können die meisten CSS- und JavaScript-Dateien mit einer Authoring-Instanz getestet werden.

Es ist auch kritisch Testcode gegen eine lokale Veröffentlichen -Instanz. Die Veröffentlichen -Instanz ist die AEM Umgebung, mit der Besucher Ihrer Website interagieren. Während Veröffentlichen instance ist derselbe Technologiestapel wie Autor Beispielsweise gibt es einige wesentliche Unterschiede bei Konfigurationen und Berechtigungen. Code sollte always gegen eine lokale Veröffentlichen -Instanz, bevor sie in Umgebungen mit höherer Ebene weitergeleitet wird.

Schritte

  1. Sichern Java installiert ist.

    • Voreinstellen [Java JDK 11](https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2Fdc%3AsoftwareType&1_group.propertyvalues.operation=equals&1_group.propertyvalues.0_values=software-type%3Atooling&orderby=%40jcr%3Acontent%2Fjcr%3AlastModified&orderby.sort=desc&layout list&p.offset=0&p.limit=14) für AEM 6.5+
    • Java JDK 8 für AEM Versionen vor AEM 6.5
  2. Eine Kopie der AEM QuickStart Jar und eine license.properties.

  3. Erstellen Sie eine Ordnerstruktur auf Ihrem Computer wie folgt:

    ~/aem-sdk
        /author
        /publish
    
  4. Benennen Sie die QuickStart JAR bis aem-author-p4502.jar und platzieren Sie sie unter dem /author Verzeichnis. Fügen Sie die license.properties Datei unter /author Verzeichnis.

  5. Erstellen Sie eine Kopie der QuickStart JAR, benennen Sie es in um aem-publish-p4503.jar und platzieren Sie sie unter dem /publish Verzeichnis. Fügen Sie eine Kopie der license.properties Datei unter /publish Verzeichnis.

    ~/aem-sdk
        /author
            + aem-author-p4502.jar
            + license.properties
        /publish
            + aem-publish-p4503.jar
            + license.properties
    
  6. Doppelklicken Sie auf die aem-author-p4502.jar Datei zum Installieren der Autor -Instanz. Dadurch wird die Autoreninstanz gestartet, die auf dem Port ausgeführt wird. 4502 auf dem lokalen Computer.

    Doppelklicken Sie auf die aem-publish-p4503.jar Datei zum Installieren der Veröffentlichen -Instanz. Dadurch wird die Veröffentlichungsinstanz gestartet, die auf dem Port ausgeführt wird. 4503 auf dem lokalen Computer.

    HINWEIS

    Je nach Hardware Ihres Entwicklungsgeräts kann es schwierig sein, beide Autoren- und Veröffentlichungsinstanz -Instanz, die gleichzeitig ausgeführt wird. In seltenen Fällen müssen Sie beide gleichzeitig auf einem lokalen Setup ausführen.

    Weitere Informationen finden Sie unter Bereitstellen und Verwalten einer AEM-Instanz.

Installieren von Apache Maven

Apache Maven ist ein Tool zum Verwalten des Build- 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. Wenn AEM Maven-Projekt oder einfach AEM, verweisen wir auf ein Maven-Projekt, das alle custom Code für Ihre Site.

Alle AEM sollten auf der neuesten Version der AEM Project Archetype: https://github.com/adobe/aem-project-archetype. Die AEM Project Archetype erstellt einen Bootstrap eines AEM Projekts mit Beispielcode und -inhalt. Die AEM Project Archetype auch AEM WCM Core Components für die Verwendung in Ihrem Projekt konfiguriert wurde.

VORSICHT

Beim Starten eines neuen Projekts empfiehlt es sich, die neueste Version des Archetyps zu verwenden. Beachten Sie, dass es mehrere Versionen des Archetyps gibt und nicht alle Versionen mit früheren Versionen von AEM kompatibel sind.

Schritte

  1. Download Apache Maven

  2. Installieren Apache Maven und stellen Sie sicher, dass die Installation Ihrer Befehlszeile hinzugefügt wurde. PATH.

    • macOS Benutzer können Maven mithilfe von Homebrew
  3. Stellen Sie sicher, dass Maven wird installiert, indem ein neues Befehlszeilenterminal geöffnet und Folgendes ausgeführt wird:

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

    In der Vergangenheit wurden adobe-public Maven-Profil war erforderlich, um einen Punkt zu erreichen nexus.adobe.com , um AEM Artefakte herunterzuladen. Alle AEM Artefakte sind jetzt über Maven Central und die adobe-public Profil nicht benötigt.

Einrichten einer integrierten Entwicklungsumgebung

Eine integrierte Entwicklungsumgebung oder IDE ist eine Anwendung, die einen Texteditor, Syntaxunterstützung und Build-Tools kombiniert. Je nach der Art der Entwicklung, die Sie durchführen, ist möglicherweise eine IDE besser als eine andere. Unabhängig von der IDE ist es wichtig, regelmäßig push -Code in eine lokale AEM-Instanz zu verweisen, um sie zu testen. Außerdem wird es wichtig sein, gelegentlich abrufen Konfigurationen von einer lokalen AEM-Instanz in Ihr AEM-Projekt, um zu einem Quellcodeverwaltungssystem wie Git beizubehalten.

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

HINWEIS

Das WKND-Projekt wurde so aktualisiert, dass es standardmäßig auf AEM as a Cloud Service funktioniert. Es wurde aktualisiert, um Abwärtskompatibel mit 6.5/6.4. Wenn Sie AEM 6.5 oder 6.4 verwenden, hängen Sie die classic Profile zu beliebigen Maven-Befehlen hinzufügen.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Wenn Sie eine IDE verwenden, überprüfen Sie classic auf der Registerkarte "Maven-Profil"angezeigt.

Maven-Profil-Registerkarte

IntelliJ Maven-Profil

Eclipse IDE

Die Eclipse IDE ist eine der beliebtesten IDEs für die Java-Entwicklung, da es sich größtenteils um Open Source handelt und kostenlos! Adobe bietet ein Plug-in, AEM Developer Tools, für Eclipse um eine einfachere Entwicklung mit einer netten grafischen Benutzeroberfläche zu ermöglichen, um Code mit einer lokalen AEM-Instanz zu synchronisieren. Die Eclipse IDE wird für Entwickler empfohlen, die zum großen Teil neu AEM, da die GUI-Unterstützung von AEM Developer Tools.

Installation und Einrichtung

  1. Laden Sie die Eclipse IDE für Java EE Developers: https://www.eclipse.org
  2. Befolgen Sie die Anweisungen zum Installieren der AEM Developer Tools Plug-in: https://experienceleague.adobe.com/docs/experience-manager-65/developing/devtools/aem-eclipse.html?lang=de?lang=de
  • 00:30 - Importieren eines Maven-Projekts
  • 01:24 - Erstellen und Bereitstellen von Quellcode mit Maven
  • 04:33 - Push-Code-Änderungen mit AEM Developer Tool
  • 10:55 - Codeänderungen mit AEM Developer Tool abrufen
  • 13:12 - Verwenden der integrierten Debugging-Tools von Eclipse

IntelliJ IDEA

Die IntelliJ IDEA ist eine leistungsstarke IDE für die professionelle Java-Entwicklung. IntelliJ IDEA in zwei Geschmacksrichtungen verwendet wird, kostenlos Community Edition und einer kommerziellen (gebührenpflichtigen) Ultimate -Version. Die kostenlose Community Version von IntellIJ IDEA für eine AEM Entwicklung ausreicht, jedoch ist die Ultimate Erweitert seinen Funktionssatz.

Installation and Setup

  1. Laden Sie die IntelliJ IDEA: https://www.jetbrains.com/idea/download
  2. Installieren Repo (Befehlszeilen-Tool): https://github.com/Adobe-Marketing-Cloud/tools/tree/master/repo
  • 00:00 - Importieren eines Maven-Projekts
  • 05:47 - Erstellen und Bereitstellen von Quellcode mit Maven
  • 08:17 - Push-Änderungen mit Repo
  • 14:39 - Pull changes with Repo
  • 17:25 - Verwenden der integrierten Debugging-Tools von IntelliJ IDEA

Visual Studio Code

Visual Studio-Code hat sich schnell zu einem bevorzugten Tool für Frontend-Entwickler mit verbesserter JavaScript-Unterstützung, Intellisense, und Browserdebugging-Unterstützung. Visual Studio Code ist Open Source, kostenlos, mit vielen leistungsstarken Erweiterungen. Visual Studio Code kann mithilfe eines Adobe-Tools für die Integration mit AEM eingerichtet werden; repo. 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-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-Entwickler, da Knotendefinitionen (Dialogfelder, Komponenten) alle im rohen XML bearbeitet werden müssen. Es sind mehrere Java-Erweiterungen verfügbar für Visual Studio Code, jedoch in erster Linie mit Java-Entwicklung Eclipse IDE oder IntelliJ vorgezogen werden.

  • Download Visual Studio-Code
  • repo - FTP-ähnliches Tool für JCR-Inhalte
  • aemfed - Beschleunigen Sie Ihren AEM Frontend-Workflow.
  • AEM Sync - Von der Gemeinschaft gefördert* Erweiterung für Visual Studio Code
  • 00:30 - Importieren eines Maven-Projekts
  • 00:53 - Erstellen und Bereitstellen von Quellcode mit Maven
  • 04:03 - Push-Code-Änderungen mit dem Repo-Befehlszeilen-Tool
  • 08:29 - Pull-Code-Änderungen mit dem Repo-Befehlszeilen-Tool
  • 10:40 - Push-Code-Änderungen mit einem emfed Tool
  • 14:24 - Fehlerbehebung, Neuerstellung von Client-Bibliotheken

CRXDE Lite

CRXDE Lite ist eine browserbasierte Ansicht des AEM-Repositorys. CRXDE Lite ist in AEM eingebettet und ermöglicht Entwicklern die Durchführung standardmäßiger Entwicklungsaufgaben wie das Bearbeiten von Dateien, das Definieren von Komponenten, Dialogfeldern und Vorlagen. CRXDE Lite is not soll eine vollständige Entwicklungsumgebung sein, ist aber als Debugging-Tool sehr effektiv. CRXDE Lite ist nützlich, wenn Sie Produktcode außerhalb Ihrer Codebasis erweitern oder einfach verstehen. CRXDE Lite bietet eine leistungsstarke Ansicht des Repositorys und eine Möglichkeit, Berechtigungen effektiv zu testen und zu verwalten.

CRXDE Lite sollte immer in Verbindung mit anderen IDEs zum Testen und Debuggen von Code verwendet werden, jedoch nie als primäres Entwicklungstool. Es bietet eingeschränkte Syntaxunterstützung, keine automatische Vervollständigungsfunktionen und eine eingeschränkte Integration mit Quellcodeverwaltungssystemen.

Fehlerbehebung

Hilfe! Mein Code funktioniert nicht! Wie bei jeder Entwicklung wird es Zeiten (wahrscheinlich viele) geben, in denen Ihr Code einfach nicht wie erwartet funktioniert. AEM ist eine mächtige Plattform, aber mit großer Macht… ist eine große Komplexität. Im Folgenden finden Sie einige allgemeine Ausgangspunkte zur Fehlerbehebung und zur Problemverfolgung (bei weitem nicht aus einer vollständigen Liste mit möglichen Problemen):

Codebereitstellung überprüfen

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

  1. Überprüfen Package Manager um sicherzustellen, dass das Code-Paket hochgeladen und installiert wurde: http://localhost:4502/crx/packmgr/index.jsp. Überprüfen Sie den Zeitstempel, um sicherzustellen, dass das Paket kürzlich installiert wurde.
  2. Wenn Sie inkrementelle Dateiaktualisierungen mit einem Tool wie Repo oder AEM Developer Tools, checkCRXDE Lite dass die Datei an die lokale AEM-Instanz gesendet wurde und der Dateiinhalt aktualisiert wird: http://localhost:4502/crx/de/index.jsp
  3. Überprüfen, ob das Bundle hochgeladen wurde wenn Probleme im Zusammenhang mit Java-Code in einem OSGi-Bundle angezeigt werden. Öffnen Sie die Adobe Experience Manager Web Console: http://localhost:4502/system/console/bundles und suchen Sie nach Ihrem Bundle. Stellen Sie sicher, dass das Bundle über eine Aktiv Status. Weitere Informationen zur Fehlerbehebung bei einem Bundle in einem Installiert state.

Überprüfen Sie die Protokolle

AEM ist eine Chatty-Plattform und protokolliert viele nützliche Informationen in der error.log. Die error.log kann dort gefunden werden, wo AEM installiert wurde: < aem-installation-folder>/crx-quickstart/logs/error.log.

Eine nützliche Methode zum Verfolgen von Problemen besteht darin, Protokolleinträge 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 wird die error.log ist für die Protokollierung konfiguriert INFO -Anweisungen. Wenn Sie die Protokollebene ändern möchten, können Sie dies tun, indem Sie Protokollunterstützung: http://localhost:4502/system/console/slinglog. Sie können auch feststellen, dass die Variable error.log ist zu chatty. Sie können die Protokollunterstützung um Protokollanweisungen für nur ein bestimmtes Java-Paket zu konfigurieren. Dies ist eine Best Practice für Projekte, um benutzerdefinierte Code-Probleme einfach von OOTB AEM Plattformproblemen zu trennen.

Protokollierungskonfiguration in AEM

Bundle befindet sich im Status "Installiert"

Alle Pakete (außer Fragmente) sollten sich in einer Aktiv state. Wenn Ihr Code-Bundle in einem Installiert zuweisen, muss ein Problem behoben werden. Meistens handelt es sich um ein Abhängigkeitsproblem:

Bundle-Fehler in AEM

Im obigen Screenshot wird die WKND Core bundle ist Installiert state. Dies liegt daran, dass das Bundle eine andere Version von erwartet. com.adobe.cq.wcm.core.components.models 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:

Kernkomponenten

Im weiteren Verlauf des obigen Beispiels können wir sehen, dass die auf der AEM-Instanz installierte Version Artikel 12 Absatz 2 vs Artikel 12 Absatz 6 dass das Bundle erwartet hat. Dort können Sie rückwärts arbeiten und sehen, ob die Maven Abhängigkeiten von AEM entsprechen der Maven Abhängigkeiten im AEM Projekt. Im obigen Beispiel Core Components v2.2.0 wird auf der AEM-Instanz installiert, aber das Code-Bundle wurde mit einer Abhängigkeit von v2.2.2 und somit der Grund für das Abhängigkeitsproblem.

Überprüfung der Registrierung von Sling-Modellen

AEM Komponenten sollten immer durch eine Sling Model , um eine beliebige Geschäftslogik einzuschließen und sicherzustellen, dass das HTL-Rendering-Skript sauber bleibt. Wenn Probleme auftreten, bei denen das Sling-Modell nicht gefunden werden kann, ist es möglicherweise hilfreich, die Sling Models aus der Konsole: http://localhost:4502/system/console/status-slingmodels. Auf diese Weise erfahren Sie, ob Ihr Sling-Modell registriert wurde und mit welchem Ressourcentyp (dem Komponentenpfad) es verknüpft ist.

Status des Sling-Modells

Zeigt die Registrierung eines Sling Model, BylineImpl die mit einem Komponenten-Ressourcentyp von wknd/components/content/byline.

CSS- oder JavaScript-Probleme

Bei den meisten CSS- und JavaScript-Problemen ist die Verwendung der Entwicklungstools 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.

CSS- oder JS-Probleme

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

Ein weiteres häufig auftretendes Problem bei der Entwicklung von Frontend-Code ist veraltetes oder veraltetes 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.

Debugging von Client-Bibliotheken

Bei verschiedenen Methoden von Kategorien und Einbettungen zum Einschließen mehrerer Client-Bibliotheken kann es umständlich sein, eine Fehlerbehebung durchzuführen. AEM stellt mehrere Hilfsmittel zur Verfügung. Eines der wichtigsten Instrumente ist Client-Bibliotheken neu erstellen was AEM zwingt, alle LESS-Dateien neu zu kompilieren und das CSS zu generieren.

  • Sprunglippen - Listet alle in der AEM-Instanz registrierten Client-Bibliotheken auf. <host>/libs/granite/ui/content/dumplibs.html
  • Testausgabe - ermöglicht es einem Benutzer, die erwartete HTML-Ausgabe von clientlib-Includes basierend auf der Kategorie anzuzeigen. <host>/libs/granite/ui/content/dumplibs.test.html
  • Überprüfung von Bibliotheksabhängigkeiten - markiert alle Abhängigkeiten oder eingebetteten Kategorien, die nicht gefunden werden können. <host>/libs/granite/ui/content/dumplibs.validate.html
  • Client-Bibliotheken neu erstellen - ermöglicht es einem Benutzer, AEM zu erzwingen, alle Client-Bibliotheken neu zu erstellen oder den Cache von Client-Bibliotheken ungültig zu machen. Dieses Tool ist besonders effektiv bei der Entwicklung mit LESS, da dies AEM zwingen kann, die generierte CSS neu zu kompilieren. Im Allgemeinen ist es effektiver, Caches zu invalidieren und dann eine Seitenaktualisierung vorzunehmen, anstatt alle Bibliotheken neu zu erstellen. <host>/libs/granite/ui/content/dumplibs.rebuild.html

Debuggen von Clientlibs

HINWEIS

Wenn Sie den Cache ständig mit dem Client-Bibliotheken neu erstellen -Tool es sich möglicherweise lohnt, eine einmalige Neuerstellung aller Client-Bibliotheken durchzuführen. Dies kann etwa 15 Minuten dauern, in der Regel werden jedoch alle zukünftigen Caching-Probleme behoben.

Auf dieser Seite