Progetto editor SPA create-project

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 nel 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 dall'archetipo progetto AEM:

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

Dal terminale della riga di comando, verifica 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

Eseguire il comando Maven seguente dalla directory aem-guides-wknd-spa per generare e distribuire il progetto in AEM:

$ mvn -PautoInstallSinglePackage clean install

Se si utilizza AEM 6.x:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

I moduli multipli del progetto devono essere compilati e distribuiti in 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 nell'istanza di AEM. Per impostazione predefinita, questo pacchetto viene distribuito a un'istanza di 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 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 è incluso in questi pacchetti e installato sul runtime di AEM.

Dovrebbero essere visualizzati anche diversi pacchetti per spa.project.core e core.wcm.components. Si tratta di dipendenze incluse automaticamente dall’archetipo. Ulteriori informazioni sui componenti core di AEM sono disponibili qui.

Passare alla console Sites: http://localhost:4502/sites.html/content.

L’applicazione a pagina singola WKND include una struttura di sito di base con un paese, una lingua e una pagina Home. 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:

Un componente Testo è già stato aggiunto alla pagina. Puoi modificare questo componente come qualsiasi altro componente in AEM.

Aggiungi un componente aggiuntivo Testo alla pagina.

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 aggiunte ulteriori informazioni.

Nell'Editor pagine, fai clic sul menu Informazioni pagina > Visualizza come pubblicato:

Verrà aperta una nuova scheda con il parametro di query ?wcmmode=disabled che disattiva 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 è stato trovato. Dovresti invece visualizzare 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'applicazione a pagina singola di Angular caricata sulla pagina e responsabile del rendering del contenuto.

Da dove proviene 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 e controlla 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 tutti i contenuti, formattati in JSON, che determineranno l’applicazione a pagina singola.

In una nuova scheda aprire 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. Ispeziona 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 prossimo capitolo esamineremo come il contenuto JSON viene mappato dai componenti di AEM ai componenti SPA per formare la base dell’esperienza di AEM SPA Editor.