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. Sviluppo con Eclipse IDE, CRXDE Lite, Visual Studio Code e IntelliJ sono discussi.
La configurazione di un ambiente di sviluppo locale è il primo passaggio durante 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:
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 Lo sviluppo dell’AEM deve iniziare scrivendo ed eseguendo il codice rispetto a un’istanza AEM locale.
Se non si ha familiarità con l’AEM, è possibile installare due modalità di esecuzione di base: Autore e Pubblica. Il Autore runmode è l’ambiente che gli esperti di marketing digitale utilizzano 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 critico test del codice in base a un Pubblica dell'istanza. Il Pubblica è l’ambiente AEM con cui i visitatori del sito web interagiscono. Mentre il Pubblica è lo stesso stack di tecnologia del Autore Ad esempio, esistono alcune distinzioni importanti tra configurazioni e autorizzazioni. Il codice deve essere testato in base a un Pubblica prima di essere promossi in ambienti di livello superiore.
~/aem-sdk
/author
/publish
Rinomina il QuickStart JAR a aem-author-p4502.jar e posizionalo sotto il /author
directory. Aggiungi il license.properties file sotto /author
directory.
Crea una copia di QuickStart JAR, rinominalo in aem-publish-p4503.jar e posizionalo sotto il /publish
directory. Aggiungi una copia del license.properties file sotto /publish
directory.
~/aem-sdk
/author
+ aem-author-p4502.jar
+ license.properties
/publish
+ aem-publish-p4503.jar
+ license.properties
Fai doppio clic su aem-publish-p4503.jar file per installare Pubblica dell'istanza. Viene avviata l’istanza Publish, in esecuzione sulla porta 4503 nel computer locale.
A seconda dell'hardware della macchina di sviluppo, potrebbe essere difficile disporre di entrambi i Creazione e pubblicazione istanza in esecuzione contemporaneamente. Raramente è necessario eseguire entrambe le operazioni contemporaneamente su una configurazione locale.
Un’alternativa al doppio clic sul file JAR è avviare AEM dalla riga di comando o creare uno script (.bat
o .sh
) a seconda 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"
Ecco, il -X
sono opzioni JVM e -D
sono proprietà di framework aggiuntive. Per ulteriori informazioni, consulta Distribuzione e manutenzione di un’istanza AEM e Ulteriori opzioni disponibili nel file Quickstart.
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 diciamo Progetto AEM Maven o solo il tuo Progetto AEM, si tratta di un progetto Maven che include tutti i personalizzato codice per il sito.
Tutti i progetti AEM devono basarsi sulla versione più recente del AEM Project Archetype: https://github.com/adobe/aem-project-archetype. Il AEM Project Archetype fornisce un avvio di un progetto AEM con codice e contenuto di esempio. Il AEM Project Archetype include anche AEM WCM Core Components configurato per essere utilizzato nel progetto.
All’avvio di un nuovo progetto, è consigliabile utilizzare la versione più recente dell’archetipo. Tieni presente che esistono più versioni dell’archetipo e che non tutte le versioni sono compatibili con le versioni precedenti di AEM.
PATH
.
$ 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
In, l’aggiunta passata di adobe-public
Il profilo Maven doveva indicare nexus.adobe.com
per scaricare gli artefatti AEM. Tutti gli artefatti AEM sono ora disponibili tramite Maven Central e il adobe-public
profilo non necessario.
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 in corso, un IDE potrebbe essere preferibile rispetto a un altro. Indipendentemente dall’IDE, è importante essere in grado di push a un’istanza AEM locale per testarla. Occasionalmente è importante tirare configurazioni da un’istanza AEM locale nel progetto AEM al fine di 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.
Il progetto WKND è stato aggiornato per impostare il funzionamento su AEM as a Cloud Service. È stato aggiornato per essere retrocompatibile con 6.5/6.4. Se si utilizza AEM 6.5 o 6.4, aggiungere classic
profilo a qualsiasi comando Maven.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Quando, utilizzando un IDE, verificare classic
nella scheda Profilo Maven.
Profilo IntelliJ Maven
Il Eclipse IDE è uno degli IDE più popolari per lo sviluppo Java™, in gran parte perché è open source e gratuito! 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. Il Eclipse L'IDE è consigliato per sviluppatori che non hanno mai utilizzato AEM in gran parte grazie al supporto GUI fornito da AEM Developer Tools.
Il IDEA IntelliJ è un potente IDE per lo sviluppo Java™ professionale. IntelliJ IDEA si presenta in due gusti, gratuito Community edizione e uno commerciale (a pagamento) Ultimate versione. Il libero Community versione di IntellIJ IDEA è sufficiente per un maggiore sviluppo dell’AEM, tuttavia Ultimate espande il set di funzionalità.
Codice di Visual Studio è rapidamente diventato uno strumento preferito per sviluppatori front-end con supporto JavaScript avanzato, Intellisense, e il 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 l’AEM con l’aiuto di uno strumento Adobe, repository. Sono inoltre disponibili diverse estensioni supportate dalla community che possono essere installate per l’integrazione con AEM.
Visual Studio Code è un’ottima scelta 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, 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 esegue principalmente lo sviluppo Java™ Eclipse IDE o IntelliJ può essere preferibile.
CRXDE Lite è una visualizzazione dell’archivio AEM basata su browser. CRXDE Lite è incorporato nell’AEM e consente a uno sviluppatore di eseguire attività di sviluppo standard come la modifica di file, la definizione di componenti, finestre di dialogo e modelli. CRXDE Lite è non deve 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.
Aiuto! Il 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):
Un buon primo passo, quando si verifica un problema, è quello di verificare che il codice sia stato distribuito e installato correttamente nell'AEM.
L’AEM è una piattaforma chiacchierata che registra informazioni utili nel error.log. Il error.log dove è 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, il error.log è configurato per registrare INFO istruzioni. Se desideri modificare il livello di registro, puoi farlo andando su Supporto registro: http://localhost:4502/system/console/slinglog. È inoltre possibile che il error.log è troppo chiacchierona. È possibile utilizzare Supporto registro per configurare le istruzioni di registro 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.
Tutti i bundle (esclusi i frammenti) devono essere in un Attivo stato. Se vedi il pacchetto di codice in un Installato quindi c'è un problema che deve essere risolto. Nella maggior parte dei casi si tratta di un problema di dipendenza:
Nella schermata precedente, l’ WKND Core bundle è un Installato stato. Questo perché nel bundle è prevista una versione diversa di com.adobe.cq.wcm.core.components.models
rispetto a quelli disponibili nell’istanza AEM.
Un utile strumento che può essere utilizzato è il Finder 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 vs 12,6 che il bundle si aspettava. Da lì, puoi lavorare all'indietro e vedere se Maven le dipendenze dall'AEM corrispondano al Maven dipendenze 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 su v2.2.2, da cui il motivo del problema di dipendenza.
I componenti AEM devono essere supportati da un Sling Model per incapsulare qualsiasi logica di business e garantire che lo script di rendering HTL rimanga pulito. In caso di problemi che impediscono di trovare il modello Sling, può essere utile controllare la 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
associata a un tipo di risorsa componente wknd/components/content/byline
.
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 per un’istanza dell’autore AEM, è utile visualizzare la pagina "così come è stata pubblicata".
Apri Proprietà pagina 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. 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.
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 è Rigenera librerie client che obbligano l’AEM a ricompilare eventuali file LESS e generare il CSS.
Se devi invalidare costantemente la cache utilizzando Rigenera librerie client potrebbe valere la pena di eseguire una ricostruzione una tantum di tutte le librerie client. Questa operazione può richiedere circa 15 minuti, ma in genere elimina qualsiasi problema di caching in futuro.