Configurazione rapida

La configurazione rapida è una procedura dettagliata che illustra come installare ed eseguire l’app WKND e come SPA remota e come crearla utilizzando AEM Editor SPA.

La configurazione rapida consente di passare direttamente allo stato finale dell'esercitazione.

Un video dettagliato sulla configurazione rapida

Prerequisiti

Questa esercitazione richiede quanto segue:

Questa esercitazione presuppone:

  • Microsoft® Visual Studio Code come IDE
  • Una directory di lavoro di ~/Code/wknd-app
  • Esecuzione dell'SDK AEM come servizio Author su http://localhost:4502
  • Esecuzione dell'SDK AEM con l'account locale admin con password admin
  • Esecuzione del SPA su http://localhost:3000

Avvia l'AEM SDK Quickstart

Scarica e installa AEM SDK Quickstart sulla porta 4502, con le credenziali admin/admin predefinite.

  1. Scarica l'SDK più recente AEM

  2. Decomprimi l'SDK AEM in ~/aem-sdk

  3. Esegui AEM SDK Quickstart Jar

    $ java -jar aem-sdk-quickstart-xxx.jar

# Provide `admin` as the admin user's password

AEM SDK verrà avviato e avviato automaticamente il http://localhost:4502. Accedi utilizzando le seguenti credenziali:

  • Nome utente: admin
  • Password: admin

Scarica e installa il pacchetto WKND Site

Questa esercitazione dipende dal progetto WKND 0.3.0+ (per contenuti).

  1. Scarica la versione più recente di aem-guides-wknd.all.x.x.x.zip
  2. Accedi a AEM Gestione pacchetti dell'SDK all'indirizzo http://localhost:4502/crx/packmgr con le credenziali admin.
  3. ____ Carica il aem-guides-wknd.all.x.x.x.zip download al passaggio 1
  4. Toccare il pulsante Installa per la voce aem-guides-wknd.all-x.x.x.zip

Scaricare e installare pacchetti di SPA per app WKND

Per eseguire una configurazione rapida, vengono forniti pacchetti AEM che contengono la configurazione AEM finale e il contenuto dell’esercitazione.

  1. Scarica
  2. Scarica
  3. Accedi a AEM Gestione pacchetti dell'SDK all'indirizzo http://localhost:4502/crx/packmgr con le credenziali admin.
  4. ____ Carica il wknd-app.all.x.x.x.zip download al passaggio 1
  5. Toccare il pulsante Installa per la voce wknd-app.all.x.x.x.zip
  6. ____ Carica il wknd-app.ui.content.sample.x.x.x.zip download al passaggio 2
  7. Toccare il pulsante Installa per la voce wknd-app.ui.content.sample.x.x.x.zip

Scarica la sorgente dell’app WKND

Scarica il codice sorgente dell’app WKND da Github.com e cambia il ramo contenente le modifiche alle SPA eseguite in questa esercitazione.

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

Avvia l'applicazione SPA

Dalla directory principale del progetto, installa le dipendenze npm dei progetti SPA ed esegui l’applicazione.

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start

Se si verificano degli errori durante l'esecuzione di npm install, prova i seguenti passaggi:

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start

Verifica che il SPA sia in esecuzione in http://localhost:3000.

Creare contenuti in AEM Editor SPA

Prima di creare contenuti, disponi le finestre del browser in modo che AEM Author (http://localhost:4502) sia a sinistra e il SPA remoto (http://localhost:3000) esegua a destra. Questa disposizione ti consente di vedere in che modo le modifiche ai contenuti di origine AEM si riflettono immediatamente nel SPA.

  1. Accedi a AEM servizio Author SDK come admin
  2. Passa a Sites > App WKND > us > en
  3. Modifica Pagina iniziale app WKND
  4. Passa alla modalità Modifica

Creare il componente fisso della visualizzazione Home

  1. Tocca il testo Avventure WKND per attivare il componente Titolo fisso (codificato nella vista Home SPA)
  2. Tocca l’icona chiave inglese nella barra delle azioni del componente Titolo
  3. Modifica il contenuto del componente Titolo e salva
  4. Aggiorna il SPA in esecuzione su http://localhost:3000 e osserva che le modifiche sono riflesse

Creare il componente contenitore della vista Home

  1. Durante la modifica di WKND App Home Page…
  2. Espandi la barra laterale SPA Editor (a sinistra)
  3. Tocca le icone Componenti
  4. Aggiungi, modifica o rimuovi componenti dal componente contenitore situato sotto il logo WKND e sopra il componente Titolo fisso
  5. Aggiorna il SPA in esecuzione su http://localhost:3000 e osserva che le modifiche sono riflesse

Creare un componente contenitore su un percorso dinamico

  1. Passa alla modalità Anteprima nell'editor SPA
  2. Tocca la scheda Bali Surf Camp e naviga al suo percorso dinamico
  3. Aggiungi, modifica o rimuovi componenti dal componente contenitore che si trova sopra l’intestazione Itinerario
  4. Aggiorna il SPA in esecuzione su http://localhost:3000 e osserva che le modifiche sono riflesse

Le nuove pagine AEM sotto la Home page dell'app WKND > Avventura deve hanno un nome di pagina AEM che corrisponde al nome del frammento di contenuto dell'avventura corrispondente. Questo perché il percorso SPA per AEM mappatura pagina è basato sull’ultimo segmento del percorso, che è il nome del frammento di contenuto.

Congratulazioni!

Hai appena avuto un rapido assaggio di come AEM editor SPA può migliorare il tuo SPA con aree controllate e modificabili! Se sei interessato, controlla il resto dell’esercitazione, ma assicurati di iniziare da zero, poiché in questa configurazione rapida l’ambiente di sviluppo locale è ora nello stato di fine dell’esercitazione!

In questa pagina