Crea progetto

Scopri come generare un progetto Maven di Adobe Experience Manager (AEM) da usare come punto di partenza per un’applicazione React integrata con l’editor AEM SPA.

Obiettivo

Genera un progetto abilitato per l’editor SPA utilizzando l’archetipo di progetto AEM.
Distribuisci il progetto iniziale in un’istanza locale dell’AEM.

Cosa verrà creato

In questo capitolo, viene generato un nuovo progetto AEM, basato sulla Archetipo progetto AEM. Il progetto AEM viene avviato con un punto di partenza molto semplice per l'SPA React.

Cos’è un progetto Maven? - Apache Maven è uno strumento di gestione del software per la creazione di progetti. Tutti Adobe Experience Manager Le implementazioni di utilizzano i progetti Maven per generare, gestire e distribuire il codice personalizzato oltre all’AEM.

Che cos’è un archetipo Maven? - A Archetipo Maven è un modello o un modello per la generazione di nuovi progetti. L’archetipo del progetto AEM ci consente di generare un nuovo progetto con uno spazio dei nomi personalizzato e di includere una struttura di progetto che segue le best practice, accelerando notevolmente il nostro progetto.

Prerequisiti

Esaminare gli strumenti e le istruzioni necessari per l'impostazione di un ambiente di sviluppo locale. Assicurati che una nuova istanza di Adobe Experience Manager, avviata in autore , è in esecuzione in locale.

Creare il progetto

NOTA

Questa esercitazione utilizza la versione 35 dell’archetipo.

Apri un terminale della riga di comando e immetti il seguente comando Maven:
```
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=35 \
 -D appTitle="WKND SPA React" \
 -D appId="wknd-spa-react" \
 -D artifactId="aem-guides-wknd-spa.react" \
 -D groupId="com.adobe.aem.guides.wkndspa.react" \
 -D frontendModule="react" \
 -D aemVersion="cloud"
```
NOTA

Se il targeting riguarda AEM 6.5.5+ sostituisci aemVersion="cloud" con aemVersion="6.5.5". Se si esegue il targeting 6.4.8+, utilizza aemVersion="6.4.8".

Osserva frontendModule=react proprietà. Questo comunica all’Archetipo progetto AEM di avviare il progetto con un avviatore Base di codice React da utilizzare con l’editor SPA dell’AEM. Proprietà come appTitle, appId, artifactId, e groupId vengono utilizzati per identificare il progetto e lo scopo.

Elenco completo delle proprietà disponibili per la configurazione di un progetto si trova qui.
La seguente struttura di file e cartelle è generata dall’archetipo Maven sul file system locale:
```
|--- aem-guides-wknd-spa.react/
    |--- LICENSE
    |--- README.md
    |--- all/
    |--- archetype.properties
    |--- core/
    |--- dispatcher/
    |--- it.tests/
    |--- pom.xml
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.config/
    |--- ui.content/
    |--- ui.frontend/
    |--- ui.tests /
    |--- .gitignore
```
Ogni cartella rappresenta un singolo modulo Maven. In questa esercitazione lavoreremo principalmente con ui.frontend modulo, che è l’app React. Ulteriori dettagli sui singoli moduli sono disponibili nella sezione Documentazione di Archetipo progetto AEM.

Distribuire e generare il progetto

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

Verificare che un'istanza dell'AEM sia in esecuzione localmente sulla porta 4502.
Dalla riga di comando, accedi a aem-guides-wknd-spa.react directory del progetto.
```
$ cd aem-guides-wknd-spa.react
```

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

$ mvn clean install -PautoInstallSinglePackage

La build richiederà circa un minuto e dovrebbe terminare con il seguente messaggio:

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT:
[INFO]
[INFO] aem-guides-wknd-spa.react .......................... SUCCESS [  0.257 s]
[INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s]
[INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min]
[INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [  1.082 s]
[INFO] WKND SPA React - UI apps ........................... SUCCESS [  8.237 s]
[INFO] WKND SPA React - UI content ........................ SUCCESS [  5.633 s]
[INFO] WKND SPA React - UI config ......................... SUCCESS [  0.234 s]
[INFO] WKND SPA React - All ............................... SUCCESS [  0.643 s]
[INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s]
[INFO] WKND SPA React - Dispatcher ........................ SUCCESS [  0.066 s]
[INFO] WKND SPA React - UI Tests .......................... SUCCESS [  0.074 s]
[INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

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.

Accedi a Gestione pacchetti nell’istanza AEM locale: http://localhost:4502/crx/packmgr/index.jsp.
Dovresti vedere più pacchetti con prefisso aem-guides-wknd-spa.react.

Gestione pacchetti AEM

Tutto il codice personalizzato necessario per il progetto è incluso in questi pacchetti e installato nell’ambiente AEM.

Contenuto autore

Quindi, apri l’SPA iniziale generato dall’archetipo e aggiorna alcuni contenuti.

Accedi a Sites console: http://localhost:4502/sites.html/content.

L’SPA del WKND include una struttura di base del sito 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 il proprietà disponibili durante la generazione di un progetto.
Apri us > it > Home page di WKND SPA React selezionando la pagina e facendo clic sul pulsante Modifica nella barra dei menu:
A Testo il componente è già stato aggiunto alla pagina. Puoi modificare questo componente come qualsiasi altro componente nell’AEM.
Aggiungi un ulteriore 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.

Inspect: applicazione a pagina singola

Quindi, verifica che si tratti di un’applicazione a pagina singola con l’utilizzo degli strumenti di sviluppo del browser.

In Editor pagina, fare clic su Informazioni pagina pulsante > Visualizza come pubblicato:

Verrà aperta una nuova scheda con il parametro query ?wcmmode=disabled che disattiva efficacemente l’editor AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled
Visualizza l’origine della pagina e osserva che il contenuto del testo Hello World o qualsiasi altro contenuto non 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-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script>
</body>
...
```
clientlib-react.min.js è l’SPA di React che viene caricato sulla pagina e responsabile del rendering del contenuto.

Tuttavia, da dove proviene il contenuto?
Torna alla scheda: http://localhost:4502/content/wknd-spa-react/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 XHR richieste:

Deve essere presente una richiesta a http://localhost:4502/content/wknd-spa-react/us/en.model.json. Contiene tutti i contenuti, formattati in JSON, che determineranno l’SPA.
In una nuova scheda apri http://localhost:4502/content/wknd-spa-react/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 Testo componenti.
```
...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
}
...
```
Nel prossimo capitolo verrà esaminato come questo contenuto JSON viene mappato dai Componenti AEM ai Componenti SPA per formare la base dell’esperienza dell’Editor SPA dell’AEM.

NOTA

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

Congratulazioni.

Congratulazioni, hai appena creato il tuo primo progetto di editor SPA per l’AEM!

L'SPA è piuttosto semplice. Nei capitoli successivi vengono aggiunte ulteriori funzionalità.

Passaggi successivi

Integrare un SPA - Scopri come il codice sorgente dell’SPA viene integrato con il progetto AEM e quali strumenti sono disponibili per sviluppare rapidamente l’SPA.

Crea progetto

Obiettivo

Cosa verrà creato

Prerequisiti

Creare il progetto

Distribuire e generare il progetto

Contenuto autore

Inspect: applicazione a pagina singola

Congratulazioni.

Passaggi successivi

Risorse Business.Adobe.com

In questa pagina

Visualizza successivo:

Scopri

Documentazione

Community

Assistenza

Risorse

Account Adobe

Adobe