Configurare un ambiente locale di sviluppo AEM

Guida alla configurazione di uno sviluppo locale per Adobe Experience Manager, AEM. Include argomenti importanti sull’installazione locale, Apache Maven, gli ambienti di sviluppo integrati e il debug/risoluzione dei problemi. Vengono discusse le attività di sviluppo con Eclipse IDE, CRXDE Lite, Visual Studio Code e IntelliJ.

Panoramica

La creazione di un ambiente di sviluppo locale rappresenta il primo passo per lo sviluppo per Adobe Experience Manager o AEM. Prenditi il tempo necessario per configurare un ambiente di sviluppo di qualità che aumenti la produttività e scriva codice migliore, più rapidamente. Possiamo suddividere l'ambiente di sviluppo locale dell'AEM in quattro aree:

Installare istanze AEM locali

Quando si fa riferimento a un’istanza AEM locale, si parla di una copia di Adobe Experience Manager in esecuzione sul computer personale di uno sviluppatore. Tutti gli sviluppatori AEM devono iniziare scrivendo ed eseguendo il codice su un'istanza AEM locale.

Se non si ha familiarità con AEM, è possibile installare due modalità di esecuzione di base: Autore e Publish. Autore modalità di esecuzione è l'ambiente utilizzato dagli esperti di marketing digitale per creare e gestire i contenuti. Quando si sviluppa la maggior parte del tempo, si distribuisce il codice in un’istanza di authoring. Questo consente di creare pagine e aggiungere e configurare componenti. AEM Sites è un CMS di authoring WYSIWYG e quindi la maggior parte dei CSS e JavaScript può essere testata rispetto a un’istanza di authoring.

È anche il codice di test critico per un'istanza locale di Publish. L'istanza Publish è l'ambiente AEM con cui i visitatori del sito Web interagiscono. Anche se l'istanza Publish è lo stesso stack tecnologico dell'istanza Author, esistono alcune distinzioni importanti con le configurazioni e le autorizzazioni. Il codice deve essere testato su un'istanza locale di Publish prima di essere promosso ad ambienti di livello superiore.

Passaggi

~/aem-sdk
    /author
    /publish

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

Fare doppio clic sul file aem-publish-p4503.jar per installare l'istanza Publish. Verrà avviata l'istanza di Publish, in esecuzione sulla porta 4503 del computer locale.

Utilizzo della riga di comando

Un'alternativa al doppio clic sul file JAR consiste nell'avviare AEM dalla riga di comando o creare uno script (.bat o .sh) a seconda della configurazione del sistema operativo locale. Di seguito è riportato un esempio del comando di esempio:

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

In questo caso, -X sono opzioni JVM e -D sono proprietà di framework aggiuntive. Per ulteriori informazioni, vedere Distribuzione e manutenzione di un'istanza AEM e Altre opzioni disponibili nel file Quickstart.

Installare Apache Maven

Apache Maven è uno strumento per gestire la procedura di compilazione e distribuzione per i progetti basati su Java. AEM è una piattaforma basata su Java e Maven è il metodo standard per gestire il codice per un progetto AEM. Quando si parla di progetto Maven per AEM o solo del progetto AEM, si fa riferimento a un progetto Maven che include tutto il codice personalizzato per il sito.

Tutti i progetti AEM devono essere basati sulla versione più recente di AEM Project Archetype: https://github.com/adobe/aem-project-archetype. AEM Project Archetype fornisce un bootstrap di un progetto AEM con codice e contenuto di esempio. AEM Project Archetype include anche AEM WCM Core Components configurato per essere utilizzato nel progetto.

Passaggi

$ 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

Configurare un ambiente di sviluppo integrato

Un ambiente di sviluppo integrato o IDE è un’applicazione che combina un editor di testo, il supporto della sintassi e strumenti di creazione. A seconda del tipo di sviluppo che si sta effettuando, un IDE potrebbe essere preferibile rispetto ad un altro. Indipendentemente dall'IDE, è importante essere in grado di inviare periodicamente il codice a un'istanza AEM locale per testarlo. Occasionalmente è importante richiamare configurazioni da un'istanza AEM locale nel progetto AEM per mantenere un sistema di gestione del controllo del codice sorgente come Git.

Di seguito sono riportati alcuni degli IDE più popolari utilizzati con lo sviluppo dell’AEM e i relativi video che mostrano l’integrazione con un’istanza dell’AEM locale.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Quando, utilizzando un IDE, assicurati di controllare classic nella scheda Profilo Maven.

Profilo Maven IntelliJ

IDE Eclipse

Eclipse IDE è uno degli IDE più popolari per lo sviluppo Java™, in gran parte perché è open source e libero! L'Adobe fornisce un plug-in, AEM Developer Tools, per Eclipse per consentire uno sviluppo più semplice con un'interfaccia grafica per sincronizzare il codice con un'istanza AEM locale. L'IDE Eclipse è consigliato per sviluppatori che non hanno mai utilizzato AEM in gran parte a causa del supporto GUI di AEM Developer Tools.

Installazione e configurazione

IDEA IntelliJ

IntelliJ IDEA è un potente IDE per lo sviluppo Java™ professionale. IntelliJ IDEA è disponibile in due versioni: gratuita Community e Ultimate commerciale (a pagamento). La versione gratuita di Community di IntellIJ IDEA è sufficiente per un ulteriore sviluppo AEM, tuttavia Ultimate espande il set di funzionalità.

Installation and Setup

Visual Studio Code

Visual Studio Code è diventato rapidamente uno strumento preferito per sviluppatori front-end con supporto avanzato per JavaScript, Intellisense e supporto per il debug del browser. Visual Studio Code è open source, gratuito, con molte potenti estensioni. Visual Studio Code può essere configurato per l'integrazione con AEM con l'aiuto di uno strumento Adobe, repo. È inoltre possibile installare diverse estensioni supportate dalla community per l'integrazione con AEM.

Visual Studio Code è un'ottima scelta per gli sviluppatori front-end che scrivono principalmente codice CSS/LESS e codice JavaScript per creare librerie client AEM. Questo strumento potrebbe non essere la scelta migliore per i nuovi sviluppatori AEM, in quanto le definizioni dei nodi (finestre di dialogo, componenti) devono essere modificate in XML non elaborato. Sono disponibili diverse estensioni Java™ per Visual Studio Code, tuttavia se si esegue principalmente lo sviluppo Java™ Eclipse IDE o IntelliJ potrebbe essere preferibile.

Collegamenti importanti

CRXDE Lite

CRXDE Liti è una visualizzazione dell'archivio AEM basata su browser. CRXDE Lite è incorporato in AEM e consente a uno sviluppatore di eseguire attività di sviluppo standard quali la modifica di file, la definizione di componenti, finestre di dialogo e modelli. CRXDE Lite è not destinato a essere un ambiente di sviluppo completo, ma è efficace come strumento di debug. CRXDE Lite è utile quando si estende o si comprende semplicemente il codice del prodotto al di fuori della base di codice. CRXDE Lite fornisce una visualizzazione efficace dell'archivio e un modo per testare e gestire in modo efficace le autorizzazioni.

CRXDE Lite deve essere utilizzato con altri IDE per testare ed eseguire il debug del codice, ma mai come strumento di sviluppo primario. Offre un supporto limitato per la sintassi, non offre funzionalità di completamento automatico e un'integrazione limitata con i sistemi di gestione del controllo del codice sorgente.

Risoluzione dei problemi

Guida Il mio codice non funziona. Come per tutti gli sviluppi, in alcuni casi (probabilmente in molti casi) il codice non funziona come previsto. L'AEM è una piattaforma potente, ma con grande potenza… diventa molto complessa. Di seguito sono riportati alcuni punti di partenza di alto livello per la risoluzione dei problemi e il tracciamento (ma non un elenco esaustivo di possibili errori):

Verifica distribuzione del codice

Un buon primo passo, quando si verifica un problema, è quello di verificare che il codice sia stato distribuito e installato correttamente nell'AEM.

Controlla i registri

AEM è una piattaforma chiacchierata e registra informazioni utili nel error.log. È possibile trovare il error.log in cui è stato installato AEM: < aem-installation-folder>/crx-quickstart/logs/error.log.

Una tecnica utile per tenere traccia dei problemi è aggiungere istruzioni di registro nel codice 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);
}

Per impostazione predefinita, error.log è configurato per registrare INFO istruzioni. Se si desidera modificare il livello di log, è possibile passare a Supporto log: http://localhost:4502/system/console/slinglog. È inoltre possibile che error.log sia troppo veloce. È possibile utilizzare il Supporto log per configurare le istruzioni di log solo per un pacchetto Java™ specificato. Questa è una best practice per i progetti, per separare facilmente i problemi relativi al codice personalizzato dai problemi OOTB della piattaforma AEM.

Il bundle è in stato Installato bundle-active

Tutti i bundle (esclusi i frammenti) devono essere in stato Attivo. Se il bundle di codice è nello stato Installato, è necessario risolvere un problema. Nella maggior parte dei casi si tratta di un problema di dipendenza:

Nella schermata precedente, WKND Core bundle è uno stato Installato. Il bundle prevede una versione di com.adobe.cq.wcm.core.components.models diversa da quella disponibile nell'istanza AEM.

Uno strumento utile che può essere utilizzato è Trova dipendenze: http://localhost:4502/system/console/depfinder. Aggiungi il nome del pacchetto Java™ per verificare la versione disponibile nell’istanza AEM:

Continuando con l’esempio precedente, possiamo vedere che la versione installata nell’istanza AEM è 12.2 rispetto a 12.6 prevista dal bundle. Da qui, puoi lavorare all'indietro e vedere se le dipendenze Maven da AEM corrispondono alle dipendenze Maven nel progetto AEM. In, l'esempio precedente Core Components v2.2.0 è installato nell'istanza AEM, ma il bundle di codice è stato creato con una dipendenza da v2.2.2, da cui il motivo del problema di dipendenza.

Verifica registrazione modelli Sling osgi-component-sling-models

I componenti AEM devono essere supportati da Sling Model per incapsulare qualsiasi logica di business e garantire che lo script di rendering HTL rimanga pulito. In caso di problemi in cui non è possibile trovare il modello Sling, controllare Sling Models dalla console: http://localhost:4502/system/console/status-slingmodels. Questo indica se il modello Sling è stato registrato e a quale tipo di risorsa (il percorso del componente) è associato.

Mostra la registrazione di un Sling Model, BylineImpl associato a un tipo di risorsa componente wknd/components/content/byline.

Problemi CSS o JavaScript

Per la maggior parte dei problemi relativi a CSS e JavaScript, l’utilizzo degli strumenti di sviluppo del browser è il modo più efficace per risolvere i problemi. Per limitare il problema durante lo sviluppo per un’istanza dell’autore AEM, è utile visualizzare la pagina "così come è stata pubblicata".

Apri il menu Proprietà pagina e fai clic su Visualizza come pubblicato. Verrà aperta la pagina senza l'editor AEM e con un parametro di query impostato su wcmmode=disabled. Questo disabilita efficacemente l’interfaccia utente di creazione dell’AEM e semplifica notevolmente la risoluzione dei problemi e il debug front-end.

Un altro problema che si verifica di solito durante lo sviluppo del codice front-end è il caricamento di CSS/JS obsoleto o precedente. Come primo passo, assicurati che la cronologia del browser sia stata cancellata e, se necessario, avvia un browser in incognito o una nuova sessione.

Debug delle librerie client

Con i diversi metodi di categorie e incorporamenti per includere più librerie client, la risoluzione dei problemi può risultare laboriosa. L'AEM espone diversi strumenti per aiutarlo. Uno degli strumenti più importanti è Ricostruisci librerie client che obbliga AEM a ricompilare i file LESS e generare CSS.