Configurazione rapida AEM Headless tramite SDK locale

La configurazione rapida AEM Headless ti permette di utilizzare AEM Headless utilizzando il contenuto del progetto di esempio del sito WKND, e un esempio di app React (a SPA) che consuma il contenuto sopra AEM API GraphQL Headless. Questa guida utilizza AEM SDK as a Cloud Service.

Prerequisiti

È necessario installare localmente i seguenti strumenti:

• JDK 11
• Node.js v14.x
• Git

1. Installare l’SDK AEM

Questa configurazione utilizza AEM SDK as a Cloud Service per esplorare AEM API GraphQL. Questa sezione fornisce una guida rapida all’installazione e all’esecuzione dell’SDK AEM in modalità Autore. Una guida più dettagliata per la creazione di un ambiente di sviluppo locale si trova qui.

1. Passa a Portale di distribuzione software > AEM as a Cloud Service e scarica la versione più recente del SDK AEM.

   

2. Decomprimi il download e copia il jar Quickstart (aem-sdk-quickstart-XXX.jar) in una cartella dedicata, ovvero ~/aem-sdk/author.

3. Rinomina il file jar in aem-author-p4502.jar.

   La author name specifica che il jar Quickstart viene avviato in modalità Autore. La p4502 specifica l'esecuzione di Quickstart sulla porta 4502.

4. Per installare e avviare l'istanza AEM, apri un prompt dei comandi nella cartella che contiene il file jar ed esegui il seguente comando :

   $ cd ~/aem-sdk/author
   $ java -jar aem-author-p4502.jar
   

5. Fornisci una password amministratore come admin. Qualsiasi password amministratore è accettabile, tuttavia si consiglia di utilizzare admin per lo sviluppo locale per ridurre la necessità di riconfigurare.

6. Al termine dell'installazione del servizio AEM, dovrebbe essere aperta una nuova finestra del browser in http://localhost:4502.

7. Accedi con il nome utente admin e la password selezionata durante AEM'avvio iniziale (in genere admin).

2. Installare il contenuto di esempio

Contenuto di esempio dal Sito di riferimento WKND viene utilizzato per accelerare l’esercitazione. Il WKND è un marchio fittizio in stile di vita, spesso utilizzato con formazione AEM.

Il sito WKND include configurazioni necessarie per esporre un Endpoint GraphQL. In un’implementazione reale, segui i passaggi documentati per includere gli endpoint GraphQL nel progetto del cliente. A CORS è stato anche confezionato come parte del sito WKND. È necessaria una configurazione CORS per concedere l’accesso a un’applicazione esterna, ulteriori informazioni su CORS di seguito.

1. Scarica l'ultimo pacchetto di AEM compilato per il sito WKND: aem-guides-wknd.all-x.x.x.zip.

   NOTA

   Assicurati di scaricare la versione standard compatibile con AEM as a Cloud Service e not la classic versione.

2. Da Inizio AEM menu, vai a Strumenti > Distribuzione > Pacchetti.

   

3. Fai clic su Carica pacchetto e scegli il pacchetto WKND scaricato nel passaggio precedente. Per installare il pacchetto, fai clic su Installa.

4. Da Inizio AEM menu, vai a Risorse > File > WKND condiviso > Inglese > Avventure.

   

   Questa è una cartella di tutte le risorse che comprendono le varie Avventure promosse dal marchio WKND. Questo include i tipi di media tradizionali come immagini e video e i supporti specifici per AEM come Frammenti di contenuto.

5. Fai clic su Sci in discesa Wyoming e fai clic su Frammento di contenuto per lo sci in discesa scheda:

   

6. L’editor dei frammenti di contenuto si apre per l’avventura Sci in discesa nel Wyoming.

   

   Osserva che vari campi, come Titolo, Descrizione e Attività definire il frammento.

   Frammenti di contenuto sono uno dei modi in cui il contenuto può essere gestito in AEM. I frammenti di contenuto sono contenuti riutilizzabili e non soggetti a presentazione composti da elementi di dati strutturati quali testo, testo RTF, date o riferimenti ad altri frammenti di contenuto. I frammenti di contenuto vengono esaminati più dettagliatamente più avanti nella configurazione rapida.

7. Fai clic su Annulla per chiudere il frammento. Sentitevi liberi di navigare in alcune delle altre cartelle ed esplorare l'altro contenuto Avventura.

3. Scaricare ed eseguire l'app WKND React

Uno degli obiettivi di questa esercitazione è quello di mostrare come utilizzare AEM contenuto da un’applicazione esterna utilizzando le API GraphQL. Questa esercitazione utilizza un'app React di esempio. L’app React è intenzionalmente semplice e si concentra sull’integrazione con AEM API GraphQL.

1. Apri un nuovo prompt dei comandi e duplica l’app React di esempio da GitHub:

   $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
   $ cd aem-guides-wknd-graphql/react-app
   

2. Apri l’app React in aem-guides-wknd-graphql/react-app nell’IDE che preferisci.

3. Nell’IDE, apri il file . .env.development a /.env.development. Verifica la REACT_APP_AUTHORIZATION La riga non viene commentata e il file dichiara le seguenti variabili:

   REACT_APP_HOST_URI=http://localhost:4502
   REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
   # Use Authorization when connecting to an AEM Author environment
   REACT_APP_AUTHORIZATION=admin:admin
   

   Assicurati REACT_APP_HOST_URI rimanda all’SDK AEM locale. Per comodità, questo avvio rapido collega l’app React a AEM Author. Autore i servizi richiedono l’autenticazione, quindi l’app utilizza admin per stabilire la connessione. La connessione di un’app ad AEM Author è una pratica comune durante lo sviluppo, in quanto consente di eseguire rapidamente l’iterazione dei contenuti senza dover pubblicare le modifiche.

   NOTA

   In uno scenario di produzione, l’app si connetterà a un AEM Pubblica ambiente. Questo viene trattato più dettagliatamente nella Distribuzione di produzione sezione .

4. Installa e avvia l'app React:

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

5. Una nuova finestra del browser apre automaticamente l’app su http://localhost:3000.

   

   Viene visualizzato un elenco dei contenuti dell’avventura da AEM.

6. Fai clic su una delle immagini dell'avventura per visualizzare i dettagli dell'avventura. Viene AEM una richiesta per restituire i dettagli di un'avventura.

   

7. Utilizza gli strumenti di sviluppo del browser per ispezionare il Rete richieste. Visualizza la XHR richiede e osserva più richieste di GET a /graphql/execute.json/.... Questo prefisso del percorso richiama AEM endpoint di query persistente, selezionando la query persistente da eseguire utilizzando il nome e i parametri codificati che seguono il prefisso .

   

4. Modificare il contenuto in AEM

Quando l’app React è in esecuzione, aggiorna il contenuto di AEM e osserva che la modifica si riflette nell’app.

1. Passa a AEM http://localhost:4502.

2. Passa a Risorse > File > WKND condiviso > Inglese > Avventure > Bali Surf Camp.

   

3. Fai clic su Bali Surf Camp frammento di contenuto per aprire l’editor frammento di contenuto.

4. Modifica la Titolo e Descrizione dell'avventura.

   

5. Fai clic su Salva per salvare le modifiche.

6. Aggiorna l’app React all’indirizzo http://localhost:3000 per visualizzare le modifiche:

   

5. Esplora GraphiQL

1. Apri GraphiQL passando a Strumenti > Generale > Editor di query GraphQL

2. Seleziona le query persistenti esistenti a sinistra ed eseguine per visualizzare i risultati.

   NOTA

   Lo strumento GraphiQL e l'API GraphQL è più avanti nell’esercitazione è stato esplorato più dettagliatamente.

Congratulazioni.

Congratulazioni, ora disponi di un’applicazione esterna che consuma contenuti AEM con GraphQL. Puoi controllare il codice nell’app React e continuare a provare a modificare i frammenti di contenuto esistenti.

Passaggi successivi

• Avvia l'esercitazione AEM Headless

Risorse Business.Adobe.com