Modifica delle app React tramite Editor universale

5 maggio 2025
  • Si applica a:
  • Experience Manager as a Cloud Service

Creato per:

  • Intermedio
  • Sviluppatore

Scopri come modificare il contenuto di un’app React di esempio utilizzando l’editor universale. I contenuti vengono memorizzati all’interno dei Frammenti di contenuto in AEM e recuperati utilizzando le API di GraphQL.

Questa esercitazione ti guida attraverso il processo di configurazione dell’ambiente di sviluppo locale, la strumentazione dell’app React per modificarne il contenuto e la modifica del contenuto tramite l’editor universale.

Cosa impara

Questo tutorial tratta i seguenti argomenti:

  • Breve panoramica di Universal Editor

  • Configurazione dell’ambiente di sviluppo locale

    • AEM SDK: fornisce i contenuti archiviati nei frammenti di contenuto per l'app React utilizzando le API di GraphQL.
    • React app: interfaccia utente semplice che visualizza il contenuto di AEM.
    • Universal Editor Service: una copia locale del servizio Universal Editor che associa Universal Editor e AEM SDK.

  • Come dotare l’app React per modificare i contenuti con l’editor universale

  • Come modificare i contenuti dell’app React utilizzando l’editor universale

Panoramica dell’editor universale

L’editor universale consente ad autori e sviluppatori di contenuti (front-end e back-end), esaminiamo alcuni dei vantaggi chiave dell’editor universale:

  • Progettato per modificare contenuti headless e headful in modalità ciò che vedi è ciò che ottieni (WYSIWYG).
  • Offre un’esperienza di modifica dei contenuti coerente su diverse tecnologie front-end come React, Angular, Vue, ecc. Pertanto, gli autori dei contenuti possono modificarli senza preoccuparsi della tecnologia front-end sottostante.
  • È necessaria una strumentazione minima per abilitare Universal Editor nell’applicazione front-end. In questo modo, massimizza la produttività dello sviluppatore e li libera di concentrarsi sulla creazione dell’esperienza.
  • Separazione delle preoccupazioni tra tre ruoli: autori di contenuti, sviluppatori front-end e sviluppatori back-end, consentendo a ogni ruolo di concentrarsi sulle proprie responsabilità di base.

App React di esempio

Questa esercitazione utilizza Team WKND come app React di esempio. L'app React WKND Teams visualizza un elenco dei membri del team e i relativi dettagli.

I dettagli del team come titolo, descrizione e membri del team sono memorizzati come Frammenti di contenuto team in AEM. Allo stesso modo, i dettagli della persona come nome, biografia e immagine del profilo vengono memorizzati come Frammenti di contenuto persona in AEM.

Il contenuto per l’app React viene fornito da AEM tramite le API GraphQL e l’interfaccia utente viene creata utilizzando due componenti React, Teams e Person.

È disponibile un tutorial corrispondente per scoprire come creare l'app React WKND Teams. L'esercitazione è disponibile qui.