Documentazione AEM Tutorial su AEM Tutorial WKND di AEM Sites

Configurazione del progetto project-setup

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Argomenti:
Archetipo del progetto AEM

Creato per:

Principiante
Sviluppatore

Questa esercitazione tratta la creazione di un progetto Maven con più moduli per gestire il codice e le configurazioni di un sito Adobe Experience Manager.

Prerequisiti prerequisites

Esaminare gli strumenti e le istruzioni necessari per configurare un ambiente di sviluppo locale. Assicurati di disporre di una nuova istanza di Adobe Experience Manager disponibile localmente e di non aver installato altri pacchetti campione/demo (diversi dai Service Pack richiesti).

Obiettivo objective

Scopri come generare un nuovo progetto AEM utilizzando un archetipo Maven.
Comprendi i diversi moduli generati dall’Archetipo di progetto AEM e come funzionano insieme.
Scopri in che modo i Componenti core AEM vengono inclusi in un progetto AEM.

Cosa intendi creare what-build

https://video.tv.adobe.com/v/36158?quality=12&learn=on&captions=ita

In questo capitolo verrà generato un nuovo progetto Adobe Experience Manager utilizzando Archetipo progetto AEM. Il progetto AEM contiene il codice completo, il contenuto e le configurazioni utilizzati per un’implementazione di Sites. Il progetto generato in questo capitolo funge da base per un’implementazione del sito WKND e viene sviluppato nei capitoli futuri.

Cos’è un progetto Maven? - Apache Maven è uno strumento di gestione software per la creazione di progetti. Tutte le implementazioni di Adobe Experience Manager utilizzano i progetti Maven per generare, gestire e distribuire codice personalizzato in aggiunta all'AEM.

Che cos'è un archetipo Maven? - Un archetipo Maven è un modello o un modello per la generazione di nuovi progetti. L’archetipo del progetto AEM consente di generare un nuovo progetto con uno spazio dei nomi personalizzato e include una struttura di progetto che segue le best practice, accelerando notevolmente lo sviluppo del progetto.

Creare il progetto create

Sono disponibili due opzioni per la creazione di un progetto Maven Multi-module per l’AEM. Questa esercitazione utilizza Archetipo progetto AEM Maven 35. Cloud Manager fornisce inoltre una procedura guidata dell'interfaccia utente per avviare la creazione di un progetto di applicazione AEM. Il progetto sottostante generato dall’interfaccia utente di Cloud Manager ha la stessa struttura di quello che si ottiene utilizzando direttamente l’archetipo.

NOTE

Questa esercitazione utilizza la versione 35 dell'archetipo. È sempre consigliabile utilizzare la versione più recente dell'archetipo per generare un nuovo progetto.

La serie successiva di passaggi si svolgerà utilizzando un terminale della riga di comando basato su UNIX®, ma dovrebbe essere simile se si utilizza un terminale Windows.

Aprire un terminale della riga di comando. Verifica che Maven sia installato:

code language-shell
`$ mvn --version Apache Maven 3.6.2 Maven home: /Library/apache-maven-3.6.2 Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home`

Passa a una directory in cui desideri generare il progetto AEM. Può trattarsi di qualsiasi directory in cui desideri mantenere il codice sorgente del progetto. Ad esempio, una directory denominata code sotto la home directory dell'utente:

code language-shell
`$ cd ~/code`

Incolla quanto segue nella riga di comando per generare il progetto in modalità batch:

code language-shell

code language-shell
`mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \ -D archetypeGroupId=com.adobe.aem \ -D archetypeArtifactId=aem-project-archetype \ -D archetypeVersion=39 \ -D appTitle="WKND Sites Project" \ -D appId="wknd" \ -D groupId="com.adobe.aem.guides" \ -D artifactId="aem-guides-wknd" \ -D package="com.adobe.aem.guides.wknd" \ -D version="0.0.1-SNAPSHOT" \ -D aemVersion="cloud"`

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
    -D archetypeGroupId=com.adobe.aem \
    -D archetypeArtifactId=aem-project-archetype \
    -D archetypeVersion=39 \
    -D appTitle="WKND Sites Project" \
    -D appId="wknd" \
    -D groupId="com.adobe.aem.guides" \
    -D artifactId="aem-guides-wknd" \
    -D package="com.adobe.aem.guides.wknd" \
    -D version="0.0.1-SNAPSHOT" \
    -D aemVersion="cloud"

note note
NOTE
Per eseguire la destinazione AEM 6.5.14+ sostituire `aemVersion="cloud"` con `aemVersion="6.5.14"`.
Inoltre, utilizza sempre l'ultimo `archetypeVersion` facendo riferimento a Tipo di progetto AEM > Utilizzo

Un elenco completo delle proprietà disponibili per la configurazione di un progetto è disponibile qui.

La seguente struttura di file e cartelle è generata dall’archetipo Maven sul file system locale:

code language-plain

code language-plain
`~/code/ \|--- aem-guides-wknd/ \|--- all/ \|--- core/ \|--- ui.apps/ \|--- ui.apps.structure/ \|--- ui.config/ \|--- ui.content/ \|--- ui.frontend/ \|--- ui.tests / \|--- it.tests/ \|--- dispatcher/ \|--- pom.xml \|--- README.md \|--- .gitignore`

 ~/code/
    |--- aem-guides-wknd/
        |--- all/
        |--- core/
        |--- ui.apps/
        |--- ui.apps.structure/
        |--- ui.config/
        |--- ui.content/
        |--- ui.frontend/
        |--- ui.tests /
        |--- it.tests/
        |--- dispatcher/
        |--- pom.xml
        |--- README.md
        |--- .gitignore

Distribuire e generare il progetto build

Genera e implementa il codice del progetto in un’istanza locale dell’AEM.

Verificare che nella porta 4502 sia in esecuzione localmente un'istanza Autore di AEM.

Dalla riga di comando, passare alla directory del progetto aem-guides-wknd.

code language-shell
`$ cd aem-guides-wknd`

Esegui il comando seguente per generare e distribuire l’intero progetto a AEM:

code language-shell
`$ mvn clean install -PautoInstallSinglePackage`

La build dura circa un minuto e deve terminare con il seguente messaggio:

code language-none

code language-none
... [INFO] ------------------------------------------------------------------------ [INFO] Reactor Summary for WKND Sites Project 0.0.1-SNAPSHOT: [INFO] [INFO] WKND Sites Project ................................. SUCCESS [ 0.113 s] [INFO] WKND Sites Project - Core .......................... SUCCESS [ 3.136 s] [INFO] WKND Sites Project - UI Frontend ................... SUCCESS [ 4.461 s] [INFO] WKND Sites Project - Repository Structure Package .. SUCCESS [ 0.359 s] [INFO] WKND Sites Project - UI apps ....................... SUCCESS [ 1.732 s] [INFO] WKND Sites Project - UI content .................... SUCCESS [ 0.956 s] [INFO] WKND Sites Project - UI config ..................... SUCCESS [ 0.064 s] [INFO] WKND Sites Project - All ........................... SUCCESS [ 8.229 s] [INFO] WKND Sites Project - Integration Tests ............. SUCCESS [ 3.329 s] [INFO] WKND Sites Project - Dispatcher .................... SUCCESS [ 0.027 s] [INFO] WKND Sites Project - UI Tests ...................... SUCCESS [ 0.032 s] [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 23.189 s [INFO] Finished at: 2023-01-10T11:12:23-05:00 [INFO] ------------------------------------------------------------------------

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for WKND Sites Project 0.0.1-SNAPSHOT:
[INFO]
[INFO] WKND Sites Project ................................. SUCCESS [  0.113 s]
[INFO] WKND Sites Project - Core .......................... SUCCESS [  3.136 s]
[INFO] WKND Sites Project - UI Frontend ................... SUCCESS [  4.461 s]
[INFO] WKND Sites Project - Repository Structure Package .. SUCCESS [  0.359 s]
[INFO] WKND Sites Project - UI apps ....................... SUCCESS [  1.732 s]
[INFO] WKND Sites Project - UI content .................... SUCCESS [  0.956 s]
[INFO] WKND Sites Project - UI config ..................... SUCCESS [  0.064 s]
[INFO] WKND Sites Project - All ........................... SUCCESS [  8.229 s]
[INFO] WKND Sites Project - Integration Tests ............. SUCCESS [  3.329 s]
[INFO] WKND Sites Project - Dispatcher .................... SUCCESS [  0.027 s]
[INFO] WKND Sites Project - UI Tests ...................... SUCCESS [  0.032 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  23.189 s
[INFO] Finished at: 2023-01-10T11:12:23-05:00
[INFO] ------------------------------------------------------------------------

Il profilo Maven autoInstallSinglePackage compila i singoli moduli del progetto e distribuisce un singolo pacchetto all'istanza AEM. Per impostazione predefinita, questo pacchetto viene distribuito a un'istanza AEM in esecuzione localmente sulla porta 4502 e con le credenziali di admin:admin.

Passa a Gestione pacchetti nell'istanza AEM locale: http://localhost:4502/crx/packmgr/index.jsp. Dovrebbero essere visualizzati pacchetti per aem-guides-wknd.ui.apps, aem-guides-wknd.ui.config, aem-guides-wknd.ui.content e aem-guides-wknd.all.
Passare alla console Sites: http://localhost:4502/sites.html/content. Il sito WKND è uno dei siti. Include una struttura del sito con una gerarchia Masters per Stati Uniti e Lingua. Questa gerarchia del sito si basa sui valori per language_country e isSingleCountryWebsite durante la generazione del progetto utilizzando l'archetipo.
Apri la pagina Stati Uniti > Inglese selezionando la pagina e facendo clic sul pulsante Modifica nella barra dei menu:
Il contenuto iniziale è già stato creato e sono disponibili diversi componenti da aggiungere a una pagina. Sperimenta questi componenti per un’idea delle funzionalità. Scopri le nozioni di base di un componente nel prossimo capitolo.

Contenuto di esempio generato dall'archetipo

Inspect il progetto project-structure

Il progetto AEM generato è costituito da singoli moduli Maven, ciascuno con un ruolo diverso. Questo tutorial e la maggior parte degli sviluppi si concentrano su questi moduli:

core - Codice Java, principalmente sviluppatori back-end.
ui.frontend - Contiene il codice sorgente per CSS, JavaScript, Sass, TypeScript, principalmente per sviluppatori front-end.
ui.apps - Contiene definizioni di componenti e finestre di dialogo, incorpora CSS e JavaScript compilati come librerie client.
ui.content - contiene contenuti strutturali e configurazioni come modelli modificabili, schemi di metadati (https://experienceleague.adobe.com/content,%20/conf?lang=it).
all - si tratta di un modulo Maven vuoto che combina i moduli di cui sopra in un singolo pacchetto che può essere distribuito in un ambiente AEM.

Diagramma progetto Maven

Per ulteriori informazioni su tutti i moduli Maven, consulta la documentazione di Archetipo progetto AEM.

Inclusione di componenti core core-components

I componenti core AEM sono un insieme di componenti WCM (Web Content Management) standardizzati per l'AEM. Questi componenti forniscono un set di base di una funzionalità e sono formattati, personalizzati ed estesi per singoli progetti.

L'ambiente AEM as a Cloud Service include la versione più recente di Componenti core AEM. Pertanto, i progetti generati per AEM as a Cloud Service non includono un incorporamento di componenti core AEM.

Per i progetti generati da AEM 6.5/6.4, l'archetipo incorpora automaticamente i componenti core AEM nel progetto. Per l’AEM 6.5/6.4 è consigliabile incorporare i componenti core AEM per garantire che venga distribuita con il progetto l’ultima versione. Ulteriori informazioni sull'inclusione dei Componenti core nel progetto sono disponibili qui.

Gestione controllo Source source-control

È sempre consigliabile utilizzare una forma di controllo del codice sorgente per gestire il codice nell'applicazione. Questa esercitazione utilizza Git e GitHub. Esistono diversi file generati da Maven e/o dall’IDE di scelta che devono essere ignorati da SCM.

Maven crea una cartella di destinazione ogni volta che generi e installi il pacchetto di codice. La cartella e il contenuto di destinazione devono essere esclusi da SCM.

In, il modulo ui.apps osserva che molti file .content.xml sono stati creati. Questi file XML associano i tipi di nodo e le proprietà del contenuto installato nel JCR. Questi file sono critici e non possono essere ignorati.

L'archetipo del progetto AEM genera un file .gitignore di esempio che può essere utilizzato come punto di partenza per il quale i file possono essere tranquillamente ignorati. Il file viene generato in <src>/aem-guides-wknd/.gitignore.

Congratulazioni. congratulations

Congratulazioni, hai creato il tuo primo progetto AEM!

Passaggi successivi next-steps

Comprendi la tecnologia sottostante di un componente Adobe Experience Manager (AEM) Sites tramite un semplice esempio di HelloWorld con l'esercitazione sulle nozioni di base sui componenti.

Comandi Maven avanzati (bonus) advanced-maven-commands

Durante lo sviluppo, potresti lavorare con uno solo dei moduli e voler evitare di creare l’intero progetto per risparmiare tempo. È inoltre possibile distribuire direttamente su un'istanza Publish AEM o su un'istanza AEM non in esecuzione sulla porta 4502.

Esaminiamo ora alcuni profili e comandi Maven aggiuntivi che puoi utilizzare per una maggiore flessibilità durante lo sviluppo.

Modulo core core-module

Il modulo core contiene tutto il codice Java™ associato al progetto. La build del modulo core distribuisce un bundle OSGi all'AEM. Per creare solo questo modulo:

Accedi alla cartella core (sotto aem-guides-wknd):

code language-shell
`$ cd core/`

Esegui il comando seguente:

code language-shell

code language-shell
$ mvn clean install -PautoInstallBundle ... [INFO] --- sling-maven-plugin:2.4.0:install (install-bundle) @ aem-guides-wknd.core --- [INFO] Installing Bundle aem-guides-wknd.core(~/code/aem-guides-wknd/core/target/aem-guides-wknd.core-0.0.1-SNAPSHOT.jar) to http://localhost:4502/system/console via WebConsole [INFO] Bundle installed [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 8.558 s

$ mvn clean install -PautoInstallBundle
...
[INFO] --- sling-maven-plugin:2.4.0:install (install-bundle) @ aem-guides-wknd.core ---
[INFO] Installing Bundle aem-guides-wknd.core(~/code/aem-guides-wknd/core/target/aem-guides-wknd.core-0.0.1-SNAPSHOT.jar) to http://localhost:4502/system/console via WebConsole
[INFO] Bundle installed
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  8.558 s

Passa a http://localhost:4502/system/console/bundles. Questa è la console web OSGi e contiene informazioni su tutti i bundle installati nell’istanza AEM.
Attiva/disattiva la colonna di ordinamento Id per visualizzare il bundle WKND installato e attivo.
Puoi visualizzare il percorso "fisico" del file jar in CRXDE-Lite:

Moduli Ui.apps e Ui.content apps-content-module

Il modulo Maven ui.apps contiene tutto il codice di rendering necessario per il sito sotto /apps. Ciò include i file CSS/JS memorizzati in un formato AEM denominato clientlibs. Sono inclusi anche HTL script per il rendering di Dynamic HTML. Puoi considerare il modulo ui.apps come una mappa della struttura nel JCR, ma in un formato che può essere archiviato in un file system e impegnato nel controllo del codice sorgente. Il modulo ui.apps contiene solo codice.

Per creare solo questo modulo:

Dalla riga di comando. Accedi alla cartella ui.apps (sotto aem-guides-wknd):

code language-shell
`$ cd ../ui.apps`

Esegui il comando seguente:

code language-shell

code language-shell
`$ mvn clean install -PautoInstallPackage ... Package installed in 70ms. [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 2.987 s [INFO] Finished at: 2023-01-10T11:35:28-05:00 [INFO] ------------------------------------------------------------------------`

$ mvn clean install -PautoInstallPackage
...
Package installed in 70ms.
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  2.987 s
[INFO] Finished at: 2023-01-10T11:35:28-05:00
[INFO] ------------------------------------------------------------------------

Passa a http://localhost:4502/crx/packmgr/index.jsp. Dovresti visualizzare il pacchetto ui.apps come primo pacchetto installato e avere una marca temporale più recente di qualsiasi altro pacchetto.

Pacchetto

Tornare alla riga di comando ed eseguire il comando seguente (nella cartella ui.apps):

code language-shell

code language-shell
$ mvn -PautoInstallPackagePublish clean install ... [INFO] --- content-package-maven-plugin:1.0.2:install (install-package-publish) @ aem-guides-wknd.ui.apps --- [INFO] Installing aem-guides-wknd.ui.apps (/Users/sachinmali/Desktop/code/wknd-tutorial/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4503/crx/packmgr/service.jsp [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] ------------------------------------------------------------------------ [INFO] BUILD FAILURE [INFO] ------------------------------------------------------------------------ [INFO] Total time: 2.812 s [INFO] Finished at: 2023-01-10T11:37:28-05:00 [INFO] ------------------------------------------------------------------------ [ERROR] Failed to execute goal com.day.jcr.vault:content-package-maven-plugin:1.0.2:install (install-package-publish) on project aem-guides-wknd.ui.apps: Connection refused (Connection refused) -> [Help 1]

$ mvn -PautoInstallPackagePublish clean install
...
[INFO] --- content-package-maven-plugin:1.0.2:install (install-package-publish) @ aem-guides-wknd.ui.apps ---
[INFO] Installing aem-guides-wknd.ui.apps (/Users/sachinmali/Desktop/code/wknd-tutorial/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4503/crx/packmgr/service.jsp
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  2.812 s
[INFO] Finished at: 2023-01-10T11:37:28-05:00
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.day.jcr.vault:content-package-maven-plugin:1.0.2:install (install-package-publish) on project aem-guides-wknd.ui.apps: Connection refused (Connection refused) -> [Help 1]

Il profilo autoInstallPackagePublish è destinato a distribuire il pacchetto in un ambiente Publish in esecuzione sulla porta 4503. L’errore precedente è previsto se non è possibile trovare un’istanza AEM in esecuzione su http://localhost:4503.

Eseguire infine il comando seguente per distribuire il pacchetto ui.apps sulla porta 4504:

code language-shell

code language-shell
$ mvn -PautoInstallPackage clean install -Daem.port=4504 ... [INFO] --- content-package-maven-plugin:1.0.2:install (install-package) @ aem-guides-wknd.ui.apps --- [INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4504/crx/packmgr/service.jsp [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] ------------------------------------------------------------------------ [INFO] BUILD FAILURE [INFO] --------------------------------------------------------------------

$ mvn -PautoInstallPackage clean install -Daem.port=4504
...
[INFO] --- content-package-maven-plugin:1.0.2:install (install-package) @ aem-guides-wknd.ui.apps ---
[INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4504/crx/packmgr/service.jsp
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] --------------------------------------------------------------------

Anche in questo caso, è previsto un errore di compilazione se non è disponibile alcuna istanza AEM in esecuzione sulla porta 4504. Il parametro aem.port è definito nel file POM in aem-guides-wknd/pom.xml.

Il modulo ui.content è strutturato nello stesso modo del modulo ui.apps. L'unica differenza consiste nel fatto che il modulo ui.content contiene il contenuto noto come mutable. Il contenuto Variabile si riferisce essenzialmente a configurazioni non di codice come Modelli, Criteri o strutture di cartelle memorizzate nel controllo del codice sorgente ma possono essere modificate direttamente in un'istanza AEM. Questo argomento è trattato più dettagliatamente nel capitolo Pagine e modelli.

Gli stessi comandi Maven utilizzati per compilare il modulo ui.apps possono essere utilizzati per compilare il modulo ui.content. Puoi ripetere i passaggi precedenti dalla cartella ui.content.

Risoluzione dei problemi

In caso di problemi durante la generazione del progetto utilizzando l'archetipo di progetto AEM, vedi l'elenco di problemi noti e l'elenco di problemi aperti.

Congratulazioni di nuovo! congratulations-bonus

Congratulazioni, per aver passato attraverso il materiale bonus.

Passaggi successivi next-steps-bonus

Comprendi la tecnologia sottostante di un componente Adobe Experience Manager (AEM) Sites tramite un semplice esempio di HelloWorld con l'esercitazione sulle nozioni di base sui componenti.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9