Progetto editor SPA

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.

Obiettivo

1. Comprendi la struttura di un nuovo progetto AEM editor SPA generato da un archetipo Maven.
2. Distribuisci il progetto iniziale in un’istanza locale di AEM.

Cosa verrà creato

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.

Prerequisiti

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.

Ottieni il progetto

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.

1. 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
   

2. 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
   

3. 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

   NOTA

   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.

Crea il progetto

Quindi, compila, genera e distribuisci il codice del progetto in un’istanza locale di AEM utilizzando Maven.

1. Assicurati che un'istanza di AEM sia in esecuzione localmente sulla porta 4502.

2. 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
   

3. 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.

4. Passa a Gestione pacchetti nell'istanza AEM locale: http://localhost:4502/crx/packmgr/index.jsp.

5. 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.

6. 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.

Contenuto autore

Quindi, apri il SPA iniziale generato dall’archetipo e aggiorna parte del contenuto.

1. 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.

2. Apri la pagina us > en > WKND SPA Angular Home Page selezionando la pagina e facendo clic sul pulsante Modifica nella barra dei menu:

   

3. Alla pagina è già stato aggiunto un componente Testo . Puoi modificare questo componente come qualsiasi altro componente in AEM.

   

4. 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.

Applicazione a pagina singola Inspect

Successivamente, verifica che si tratti di un'applicazione a pagina singola con l'uso degli strumenti di sviluppo del browser.

1. 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

2. 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?

3. Torna alla scheda : http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

4. 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.

5. 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.

   NOTA

   Potrebbe essere utile installare un’estensione del browser per formattare automaticamente l’output JSON.

Congratulazioni!

Congratulazioni, hai appena creato il tuo primo AEM SPA Editor Project!

È abbastanza semplice in questo momento, ma nei prossimi capitoli saranno aggiunte ulteriori funzionalità.

Passaggi successivi

Integrare il SPA - Scopri come il codice sorgente SPA è integrato con il progetto AEM e come è possibile sviluppare rapidamente il SPA.