Capitolo 4 - Definizione dei modelli di Content Services

Il capitolo 4 dell’esercitazione AEM Headless descrive il ruolo dei modelli modificabili AEM nel contesto di AEM Content Services. I modelli modificabili vengono utilizzati per definire la struttura del contenuto JSON che AEM Content Services espone ai clienti tramite la composizione dei componenti AEM abilitati per Content Services.

Ruolo dei modelli in AEM Content Services

I modelli modificabili AEM vengono utilizzati per definire i punti finali HTTP a cui si accede per esporre il contenuto dell’evento come JSON.

Tradizionalmente, i Modelli modificabili di AEM vengono utilizzati per definire le pagine web, ma questo utilizzo è semplicemente una convenzione. I modelli modificabili possono essere utilizzati per comporre qualsiasi set di contenuti; modalità di accesso a tale contenuto: come HTML in un browser, in quanto JSON utilizzato da JavaScript (AEM SPA Editor) o da un’app mobile è una funzione del modo in cui viene richiesta tale pagina.

In AEM Content Services, i modelli modificabili vengono utilizzati per definire la modalità di esposizione dei dati JSON.

Per l’ WKND Mobile app , creeremo un singolo modello modificabile che verrà utilizzato per indirizzare un singolo endpoint API. Anche se questo esempio è semplice per illustrare i concetti di AEM Headless, puoi creare più pagine (o endpoint) ciascuna esponendo diversi set di contenuti per creare un’API più complessa e meglio organizzata.

Informazioni sul punto finale dell’API

Per capire come comporre il nostro endpoint API e capire quale contenuto deve essere esposto alla nostra WKND Mobile app, rivediamo la progettazione.

Decomposizione della pagina API degli eventi

Come possiamo vedere, abbiamo tre set logici di contenuti da fornire all’app mobile.

  1. Il Logo
  2. La riga tag
  3. Elenco di Eventi

A questo scopo, possiamo mappare questi requisiti ai componenti AEM (e, nel nostro caso, ai componenti core di AEM WCM) per esporre il contenuto richiesto come JSON.

  1. Il Logo verrà visualizzato tramite un Componente immagine
  2. Il Tag Line verrà visualizzato tramite un componente Testo
  3. L’elenco di Eventi verrà visualizzato tramite un componente Elenco frammenti di contenuto che a sua volta fa riferimento a un set di frammenti di contenuto evento.
NOTA

Per supportare l’esportazione JSON di pagine e componenti da parte di AEM Content Service, le pagine e i componenti devono essere derivati dai componenti core di AEM WCM.

I componenti core WCM di AEM offrono funzionalità integrate per supportare uno schema JSON normalizzato di pagine e componenti esportati. Tutti i componenti WKND Mobile utilizzati in questa esercitazione (Pagina, Immagine, Testo ed Elenco frammenti di contenuto) sono derivati dai componenti core WCM di AEM.

Definizione del modello API per gli eventi

  1. Passa a Strumenti > Generale > Modelli >WKND Mobile.

  2. Crea il modello Events API:

    1. Tocca Crea nella barra delle azioni superiore
    2. Seleziona il modello WKND Mobile - Empty Page
    3. Tocca Avanti nella barra delle azioni superiore
    4. Inserisci Events API nel campo Titolo modello
    5. Tocca Crea nella barra delle azioni superiore
    6. Tocca Apri per aprire il nuovo modello da modificare
  3. In primo luogo, consentiamo ai tre componenti AEM identificati di modellare il contenuto modificando il Criterio della directory principale Contenitore di layout. Assicurati che la modalità Struttura sia attiva, seleziona il Layout Container [Root] e tocca il pulsante Criterio .

  4. In Proprietà > Componenti consentiti cerca WKND Mobile. Consenti l'utilizzo dei seguenti componenti dal gruppo di componenti WKND Mobile in modo che possano essere utilizzati nella pagina API Events.

    • WKND Mobile > Image

      • Logo dell’app
    • WKND Mobile > Text

      • Testo introduttivo dell’app
    • WKND Mobile > Content Fragment List

      • Elenco delle categorie di eventi disponibili per la visualizzazione nell’app
  5. Toccare il segno di spunta Fine nell'angolo superiore destro al termine.

  6. ​Aggiorna la finestra del browser per visualizzare l’elenco dei componenti consentiti nella barra a sinistra.

  7. Da Components Finder nella barra a sinistra, trascina i seguenti componenti AEM:

    1. Image per il logo
    2. Text per la riga tag
    3. Content Fragment List per gli eventi
  8. Per ciascuno dei componenti di cui sopra, selezionali e premi il pulsante ​Slockbutton.

  9. Assicurati tuttavia che il contenitore layout sia bloccato per impedire l'aggiunta di altri componenti o che questi tre componenti vengano rimossi.

  10. Tocca Informazioni pagina > Visualizza in Admin per tornare all'elenco dei modelli WKND Mobile. Seleziona il modello Events API appena creato e tocca Abilita nella barra delle azioni superiore.

NOTA

I componenti utilizzati per la visualizzazione del contenuto vengono aggiunti al modello stesso e bloccati. Questo consente agli autori di modificare i componenti predefiniti, ma non di aggiungere o rimuovere in modo arbitrario i componenti, in quanto la modifica dell’API stessa potrebbe interrompere i presupposti intorno alla struttura JSON e interrompere le app consumiste. Tutte le API devono essere stabili.

Passaggi successivi

Facoltativamente, installa il pacchetto di contenuti com.adobe.aem.guides.wknd-mobile.content.capitolo-4.zip su AEM Author tramite Gestione pacchetti di AEM. Questo pacchetto contiene le configurazioni e il contenuto descritti in questo e nei precedenti capitoli dell'esercitazione.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now