Configurare un ambiente di sviluppo AEM locale

Guida alla configurazione di uno sviluppo locale per Adobe Experience Manager, AEM. Vengono trattati argomenti importanti relativi all’installazione locale, a Apache Maven, agli ambienti di sviluppo integrati e al debug/risoluzione dei problemi. Sviluppo con Eclipse IDE, CRXDE Lite, Visual Studio Code e IntelliJ sono discussi.

Panoramica

L’impostazione di un ambiente di sviluppo locale è il primo passaggio nello sviluppo per Adobe Experience Manager o AEM. Prenditi del tempo per configurare un ambiente di sviluppo di qualità per aumentare la produttività e scrivere codice migliore, più velocemente. Possiamo spezzare un ambiente di sviluppo locale AEM in quattro aree:

• Istanze AEM locali
• Apache Maven progetto
• Ambienti di sviluppo integrati (IDE)
• Risoluzione dei problemi

Installa istanze AEM locali

Quando ci riferiamo a un’istanza AEM locale, stiamo parlando di una copia di Adobe Experience Manager in esecuzione sul computer personale di uno sviluppatore. Tutto Lo sviluppo AEM dovrebbe iniziare scrivendo ed eseguendo il codice su un'istanza AEM locale.

Se hai poca esperienza con AEM, puoi installare due modalità di esecuzione di base: Autore e Pubblica. La Autore modalità runmode è l’ambiente utilizzato dagli esperti di marketing digitale per creare e gestire i contenuti. Durante lo sviluppo della maggior parte del tempo, distribuisci 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 critico codice di test per un locale Pubblica istanza. La Pubblica L’istanza è l’ambiente AEM con cui i visitatori del sito web interagiscono. Mentre il Pubblica L'istanza è la stessa dello stack di tecnologia della Autore Ad esempio, ci sono alcune distinzioni importanti con le configurazioni e le autorizzazioni. Il codice deve essere testato su un Pubblica prima di essere promossa in ambienti di livello superiore.

Passaggi

1. Assicurati che Java™ sia installato.
   • Preferisci [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.property.operation=equals&1_group.property.values.0_values=software-type%3Atooling&orderby=%40jcr%3Acontent%2Fjcr%3AlastModified&orderby.sort=desc&layout=list p.offset=0&p.limit=14) per AEM 6.5+
   • Java™ JDK 8 per AEM versioni precedenti a AEM 6.5
2. Ottieni una copia del AEM QuickStart Jar e un license.properties.
3. Crea una struttura di cartelle sul computer come segue:

~/aem-sdk
    /author
    /publish

1. Rinomina il QuickStart JAR a aem-author-p4502.jar e posizionarlo sotto il /author directory. Aggiungi il license.properties sotto il /author directory.

2. Crea una copia del QuickStart JAR, rinominalo in aem-publish-p4503.jar e posizionarlo sotto il /publish directory. Aggiungi una copia del license.properties sotto il /publish directory.

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

1. Fai doppio clic sul pulsante aem-author-p4502.jar file da installare Autore istanza. Viene avviata l’istanza di authoring, in esecuzione sulla porta 4502 sul computer locale.

Fai doppio clic sul pulsante aem-publish-p4503.jar file da installare Pubblica istanza. Viene avviata l’istanza Publish, in esecuzione sulla porta 4503 sul computer locale.

Uso della riga di comando

Un'alternativa al doppio clic sul file JAR è avviare AEM dalla riga di comando o creare uno script (.bat o .sh) a seconda del gusto 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"

Qui, il -X sono opzioni JVM e -D sono proprietà del framework aggiuntive, per ulteriori informazioni, consulta Distribuzione e manutenzione di un'istanza AEM e Altre opzioni disponibili nel file Quickstart.

Installa Apache Maven

Apache Maven è uno strumento per gestire la procedura di creazione e distribuzione per i progetti basati su Java. AEM è una piattaforma basata su Java e Maven è il metodo standard per gestire il codice di un progetto AEM. Quando diciamo Progetto AEM Maven o semplicemente il tuo Progetto AEM, stiamo facendo riferimento a un progetto Maven che include tutte le personalizzato codice del sito.

Tutti i progetti AEM devono essere basati sull’ultima versione di AEM Project Archetype: https://github.com/adobe/aem-project-archetype. La AEM Project Archetype fornisce un bootstrap di un progetto AEM con alcuni codici e contenuti di esempio. La AEM Project Archetype include anche AEM WCM Core Components configurato per essere utilizzato nel progetto.

Passaggi

1. Scarica Apache Maven
2. Installa Apache Maven e assicurati che l'installazione sia stata aggiunta alla riga di comando PATH.
   • macOS gli utenti possono installare Maven utilizzando Ebraico
3. Verifica che Maven viene installato aprendo un nuovo terminale della riga di comando ed eseguendo quanto segue:

$ 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 compilazione. A seconda del tipo di sviluppo, un IDE potrebbe essere preferibile rispetto a un altro. Indipendentemente dall’IDE, è importante essere in grado di push crea un codice per un'istanza AEM locale al fine di testarla. È importante per occasionalmente tirare configurazioni da un’istanza AEM locale al progetto AEM per persistere in un sistema di gestione del controllo del codice sorgente come Git.

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

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Quando si utilizza un IDE, assicurarsi di controllare classic nella scheda Profilo Maven.

Profilo Maven IntelliJ

Eclipse IDE

La Eclipse IDE è uno degli IDE più popolari per lo sviluppo Java™, in gran parte perché è open source e gratuito! L'Adobe fornisce un plug-in, AEM Developer Tools, per Eclipse per consentire uno sviluppo più semplice con una bella interfaccia grafica per sincronizzare il codice con un'istanza AEM locale. La Eclipse L’IDE è consigliato agli sviluppatori di AEM in larga parte a causa del supporto dell’interfaccia grafica di AEM Developer Tools.

Installazione e configurazione

1. Scarica e installa la Eclipse IDE per Java™ EE Developers: https://www.eclipse.org
2. Segui le istruzioni per installare AEM Developer Tools plugin: https://experienceleague.adobe.com/docs/experience-manager-65/developing/devtools/aem-eclipse.html?lang=it?lang=it

• 00:30 - Importa progetto Maven
• 01:24 - Creare e distribuire il codice sorgente con Maven
• 04:33 - Modifiche al codice push con AEM Developer Tool
• 10:55 - Modifiche al codice di pull con AEM Developer Tool
• 13:12 - Utilizzo degli strumenti di debug integrati di Eclipse

IDEA IntelliJ

La IDEA IntelliJ è un potente IDE per lo sviluppo professionale Java™. IntelliJ IDEA viene in due sapori, un gratuito Community Edizione e commerciale (a pagamento) Ultimate versione. Il libero Community versione di IntellIJ IDEA è sufficiente per uno sviluppo più AEM, tuttavia il Ultimate espande il set di funzionalità.

Installation and Setup

1. Scarica e installa la IntelliJ IDEA: https://www.jetbrains.com/idea/download
2. Installa Repo (strumento a riga di comando): https://github.com/Adobe-Marketing-Cloud/tools/tree/master/repo

• 00:00 - Importa progetto Maven
• 05:47 - Crea e distribuisci il codice sorgente con Maven
• 08:17 - Modifiche push con Repo
• 14:39 - Modifiche di pull con Repo
• 17:25 - Utilizzo degli strumenti di debug integrati di IntelliJ IDEA

Visual Studio Code

Codice di Visual Studio è diventato rapidamente uno strumento preferito per sviluppatori front-end con supporto JavaScript migliorato, Intellisensee supporto per il debug del browser. Visual Studio Code è open source, gratuito, con molte potenti estensioni. Visual Studio Code può essere configurato per integrarsi con AEM con l'aiuto di uno strumento di Adobe, repo. Sono inoltre disponibili diverse estensioni supportate dalla community che possono essere installate per l’integrazione con AEM.

Visual Studio Code è una scelta ideale per gli sviluppatori front-end che scrivono principalmente codice CSS/LESS e JavaScript per creare librerie client AEM. Questo strumento potrebbe non essere la scelta migliore per i nuovi sviluppatori AEM poiché 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 può essere preferito.

Collegamenti importanti

• Scarica Codice di Visual Studio
• repo - Strumento simile a FTP per il contenuto JCR
• aemed - Velocità del flusso di lavoro front-end AEM
• Sincronizzazione AEM - Sostegno comunitario* estensione per Visual Studio Code

• 00:30 - Importa progetto Maven
• 00:53 - Creare e distribuire il codice sorgente con Maven
• 04:03 - Modifiche al codice push con lo strumento a riga di comando Repo
• 08:29 - Modifiche al codice di pull con lo strumento a riga di comando Repo
• 10:40 - Modifiche al codice push con lo strumento aemfeed
• 14:24 - Risoluzione dei problemi e ricostruzione delle librerie client

CRXDE Lite

CRXDE Lite è una visualizzazione basata su browser dell’archivio AEM. CRXDE Lite è incorporato in AEM e consente allo sviluppatore di eseguire attività di sviluppo standard come la modifica di file, la definizione di componenti, finestre di dialogo e modelli. CRXDE Lite è not doveva essere un ambiente di sviluppo completo ma efficace come strumento di debug. CRXDE Lite è utile quando estendi o semplicemente comprendi il codice prodotto al di fuori della tua base di codice. CRXDE Lite fornisce una visualizzazione potente dell'archivio e un modo per testare e gestire in modo efficace le autorizzazioni.

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

Risoluzione dei problemi

Aiuto! Il mio codice non funziona! Come per tutte le attività di sviluppo, ci sono momenti (probabilmente molti) in cui il codice non funziona come previsto. AEM è una piattaforma potente, ma con grande potere… arriva una grande complessità. Di seguito sono riportati alcuni punti di partenza di alto livello per la risoluzione dei problemi e il tracciamento dei problemi (ma ben lontani da un elenco completo delle cose che possono andare storte):

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 in AEM.

1. Controlla Gestione pacchetti per assicurarti che il pacchetto di codice sia stato caricato e installato: http://localhost:4502/crx/packmgr/index.jsp. Controlla la marca temporale per verificare che il pacchetto sia stato installato di recente.
2. Se si esegue un aggiornamento incrementale dei file utilizzando uno strumento come Repo o AEM Developer Tools, checkCRXDE Lite che il file è stato inviato all’istanza AEM locale e che il contenuto del file è aggiornato: http://localhost:4502/crx/de/index.jsp
3. Verifica che il bundle sia caricato se vedi problemi relativi al codice Java™ in un bundle OSGi. Apri Console web Adobe Experience Manager: http://localhost:4502/system/console/bundles e cerca il tuo bundle. Assicurati che il bundle abbia un Attivo stato. Vedi sotto per ulteriori informazioni sulla risoluzione dei problemi di un bundle in un Installato stato.

Controlla i registri

AEM è una piattaforma chatty e registra informazioni utili nel error.log. La error.log si trova dove AEM è stato installato: < aem-installation-folder>/crx-quickstart/logs/error.log.

Una tecnica utile per tenere traccia dei problemi consiste nell’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 il registro INFO dichiarazioni. Per modificare il livello di log, è possibile farlo andando in Supporto del registro: http://localhost:4502/system/console/slinglog. Puoi anche trovare che error.log È troppo chiacchierone. È possibile utilizzare Supporto del registro per configurare le istruzioni di registro per un solo pacchetto Java™ specifico. Questa è una best practice per i progetti, al fine di separare facilmente i problemi di codice personalizzato dai problemi di piattaforma OOTB AEM.

Il bundle è in stato Installato

Tutti i bundle (esclusi i frammenti) devono essere in un Attivo stato. Se vedi il tuo bundle di codice in un Installato c'è un problema che deve essere risolto. Nella maggior parte dei casi si tratta di un problema di dipendenza:

Nella schermata precedente, il WKND Core bundle è un Installato stato. Questo perché il bundle si aspetta una versione diversa di com.adobe.cq.wcm.core.components.models che è disponibile nell’istanza AEM.

Uno strumento utile che può essere utilizzato è Finder dipendenza: http://localhost:4502/system/console/depfinder. Aggiungi il nome del pacchetto Java™ per controllare quale versione è disponibile nell'istanza AEM:

Continuando con l'esempio precedente, possiamo vedere che la versione installata sull'istanza AEM è 12,2 vs 12,6 che il bundle si aspettava. Da lì, è possibile lavorare indietro e vedere se il Maven le dipendenze da AEM corrispondono alle Maven dipendenze nel progetto AEM. In, l’esempio precedente Core Components v2.2.0 è installato nell'istanza AEM, ma il bundle di codice è stato generato con una dipendenza da v2.2.2, da qui la ragione del problema della dipendenza.

Verifica la registrazione dei modelli Sling

I componenti AEM devono essere supportati da un Sling Model per incapsulare qualsiasi logica di business e assicurarsi che lo script di rendering HTL rimanga pulito. Se si verificano problemi in cui non è possibile trovare il modello Sling, può essere utile controllare il 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 legato a un tipo di risorsa componente di wknd/components/content/byline.

Problemi CSS o JavaScript

Per la maggior parte dei problemi 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 rispetto a un’istanza di authoring AEM, è utile visualizzare la pagina "come pubblicata".

Apri Proprietà pagina menu e fai clic su Visualizza come pubblicato. Viene aperta la pagina senza l’Editor AEM e con un parametro di query impostato su wcmmode=disabled. In questo modo è possibile disattivare l’interfaccia utente di authoring AEM e semplificare la risoluzione dei problemi front-end e il debug.

Un altro problema riscontrato comunemente durante lo sviluppo di codice front-end è vecchio o CSS/JS obsoleto è in fase di caricamento. 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, può essere difficile risolvere i problemi. AEM espone diversi strumenti per aiutarti. Uno degli strumenti più importanti è Rigenera librerie client che forzano AEM ricompilare qualsiasi file LESS e generare il CSS.

• Libri di scarico - Elenca tutte le librerie client registrate nell'istanza AEM. <host>/libs/granite/ui/content/dumplibs.html
• Output del test - consente a un utente di visualizzare l’output HTML previsto degli include clientlib in base alla categoria. <host>/libs/granite/ui/content/dumplibs.test.html
• Convalida delle dipendenze delle librerie - evidenzia eventuali dipendenze o categorie incorporate che non è possibile trovare. <host>/libs/granite/ui/content/dumplibs.validate.html
• Rigenera librerie client - consente a un utente di forzare AEM a ricostruire tutte le librerie client o di annullare la validità della cache delle librerie client. Questo strumento è efficace quando si sviluppa con MENO in quanto può forzare AEM ricompilare il CSS generato. In generale, è più efficace annullare la validità delle cache, quindi eseguire un aggiornamento della pagina anziché ricostruire tutte le librerie. <host>/libs/granite/ui/content/dumplibs.rebuild.html

Risorse Business.Adobe.com

Automated Onboarding Style System Cms Cloud Targeted Content Customer Communications Theme Editor