Scopri come utilizzare un progetto Maven di Adobe Experience Manager (AEM) come punto di partenza per un’applicazione di Angular integrata con l’editor di SPA di AEM.
In questo capitolo, verrà implementato un nuovo progetto AEM, basato su AEM Project Archetype. Il progetto AEM verrà avviato con un punto di partenza molto semplice per il SPA Angular. Il progetto utilizzato in questo capitolo servirà da base per l'attuazione del SPA WKND e sarà basato sui prossimi capitoli.
Un classico messaggio Hello World.
Rivedi gli strumenti e le istruzioni necessari per configurare un ambiente di sviluppo locale. Assicurati che una nuova istanza di Adobe Experience Manager, avviata in modalità author, sia in esecuzione localmente.
Sono disponibili diverse opzioni per creare un progetto Maven Multi-Module per AEM. Questa esercitazione ha utilizzato l'ultimo AEM Project Archetype come base per il codice dell'esercitazione. Sono state apportate modifiche al codice del progetto per supportare più versioni di AEM. Rivedi la nota sulla compatibilità con le versioni precedenti.
È consigliabile utilizzare la versione più recente dell’ archetipo per generare un nuovo progetto per un’implementazione nel mondo reale. I progetti AEM devono essere destinati a una singola versione di AEM utilizzando la proprietà aemVersion
dell’archetipo.
Scarica il punto di partenza per questa esercitazione tramite Git:
$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start
La seguente struttura di file e cartelle rappresenta il Progetto AEM generato dall'archetipo Maven sul file system locale:
|--- aem-guides-wknd-spa
|--- all/
|--- core/
|--- dispatcher/
|--- ui.apps/
|--- ui.apps.structure/
|--- ui.content/
|--- ui.frontend /
|--- it.tests/
|--- pom.xml
|--- README.md
|--- .gitignore
|--- archetype.properties
Le seguenti proprietà sono state utilizzate durante la generazione del progetto AEM da AEM archetipo di progetto:
Proprietà | Valore |
---|---|
aemVersion | nuvole |
appTitle | Angular SPA WKND |
appId | angular wknd-spa |
groupId | com.adobe.aem.guides |
frontendModule | angular |
pacchetto | com.adobe.aem.guides.wknd.spa.angular |
includeExample | n |
Osserva la proprietà frontendModule=angular
. Questo comunica a AEM Project Archetype di avviare il progetto con un codice di Angular base da utilizzare con AEM SPA Editor.
Quindi, compila, genera e distribuisci il codice del progetto in un’istanza locale di AEM utilizzando Maven.
Assicurati che un'istanza di AEM sia in esecuzione localmente sulla porta 4502.
Dal terminale della riga di comando verificare che Maven sia installato:
$ 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
Esegui il seguente comando Maven dalla directory aem-guides-wknd-spa
per generare e distribuire il progetto in AEM:
$ mvn -PautoInstallSinglePackage clean install
Se utilizzi AEM 6.x:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
I moduli multipli del progetto devono essere compilati e distribuiti per AEM.
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
[INFO]
[INFO] wknd-spa-angular ................................... SUCCESS [ 0.473 s]
[INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
[INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
[INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [ 0.694 s]
[INFO] WKND SPA Angular - UI apps ......................... SUCCESS [ 6.351 s]
[INFO] WKND SPA Angular - UI content ...................... SUCCESS [ 2.885 s]
[INFO] WKND SPA Angular - All ............................. SUCCESS [ 1.736 s]
[INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [ 2.563 s]
[INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [ 1.846 s]
[INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [ 0.270 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
Il profilo Maven autoInstallSinglePackage compila i singoli moduli del progetto e distribuisce un singolo pacchetto all'istanza AEM. Per impostazione predefinita questo pacchetto verrà distribuito in 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.
Dovresti visualizzare tre pacchetti per wknd-spa-angular.all
, wknd-spa-angular.ui.apps
e wknd-spa-angular.ui.content
.
Tutto il codice personalizzato necessario per il progetto verrà raggruppato in questi pacchetti e installato nel runtime AEM.
Dovresti inoltre visualizzare diversi pacchetti per spa.project.core
e core.wcm.components
. Si tratta di dipendenze incluse automaticamente dall'archetipo. Ulteriori informazioni sui AEM componenti core sono disponibili qui.
Quindi, apri il SPA iniziale generato dall’archetipo e aggiorna parte del contenuto.
Passa alla console Sites : http://localhost:4502/sites.html/content.
Il SPA WKND include una struttura di base del sito con un paese, una lingua e una home page. Questa gerarchia si basa sui valori predefiniti dell'archetipo per language_country
e isSingleCountryWebsite
. Questi valori possono essere sovrascritti aggiornando le proprietà disponibili durante la generazione di un progetto.
Apri la pagina us > en > WKND SPA Angular Home Page selezionando la pagina e facendo clic sul pulsante Modifica nella barra dei menu:
Alla pagina è già stato aggiunto un componente Testo . Puoi modificare questo componente come qualsiasi altro componente in AEM.
Aggiungi alla pagina un componente aggiuntivo Testo .
L’esperienza di authoring è simile a quella di una pagina AEM Sites tradizionale. Attualmente è disponibile un numero limitato di componenti da utilizzare. Nel corso dell’esercitazione verranno aggiunti ulteriori elementi.
Successivamente, verifica che si tratti di un'applicazione a pagina singola con l'uso degli strumenti di sviluppo del browser.
In Editor pagina, fai clic sul menu Informazioni pagina > Visualizza come pubblicato:
Viene aperta una nuova scheda con il parametro di query ?wcmmode=disabled
che disattiva efficacemente l’editor AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
Visualizzare l’origine della pagina e notare che il contenuto di testo Hello World o qualsiasi altro contenuto non è trovato. Dovresti invece visualizzare l’HTML come segue:
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="spa-root"></div>
<script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script>
...
</body>
...
clientlib-angular.min.js
è l’Angular SPA caricato sulla pagina e responsabile del rendering del contenuto.
Da dove viene il contenuto?
Torna alla scheda : http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
Apri gli strumenti di sviluppo del browser ed esamina il traffico di rete della pagina durante un aggiornamento. Visualizza le richieste XHR:
È necessaria una richiesta a http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Contiene tutto il contenuto, formattato in JSON, che guiderà il SPA.
In una nuova scheda, apri http://localhost:4502/content/wknd-spa-angular/us/en.model.json
La richiesta en.model.json
rappresenta il modello di contenuto che guiderà l'applicazione. Inspect l'output JSON e dovresti essere in grado di trovare lo snippet che rappresenta i componenti Testo .
...
":items": {
"text": {
"text": "<p>Hello World! Updated content!</p>\r\n",
"richText": true,
":type": "wknd-spa-angular/components/text"
},
"text_98796435": {
"text": "<p>A new text component.</p>\r\n",
"richText": true,
":type": "wknd-spa-angular/components/text"
},
...
Nel capitolo successivo esamineremo come il contenuto JSON viene mappato da Componenti AEM a Componenti SPA per formare la base dell’esperienza di Editor SPA AEM.
Potrebbe essere utile installare un’estensione del browser per formattare automaticamente l’output JSON.
Congratulazioni, hai appena creato il tuo primo AEM SPA Editor Project!
È abbastanza semplice in questo momento, ma nei prossimi capitoli saranno aggiunte ulteriori funzionalità.
Integrare il SPA - Scopri come il codice sorgente SPA è integrato con il progetto AEM e come è possibile sviluppare rapidamente il SPA.