Capitolo 5 - Authoring delle pagine dei servizi per i contenuti

Il capitolo 5 dell’esercitazione AEM Headless copre la creazione della pagina dai modelli definiti nel capitolo 4. La pagina creata in questo capitolo fungerà da punto finale HTTP JSON per l’app mobile.

NOTA

L’architettura del contenuto della pagina di /content/wknd-mobile/en/api è stata pregenerata. Le pagine di base di en e api hanno uno scopo architettonico e organizzativo, ma non sono strettamente necessarie. Se il contenuto API può essere localizzato, è consigliabile seguire le consuete best practice per l’organizzazione delle pagine Copia lingua e Gestione multisito , in quanto la pagina API può essere localizzata come qualsiasi pagina di AEM Sites.

Creazione della pagina API evento

  1. Passa a AEM > Siti > WKND Mobile > English >API.
  2. Tocca l’etichetta della pagina API, quindi tocca il pulsante ​Crea nella barra delle azioni superiore e crea una nuova pagina API Eventi nella pagina API.
    1. Tocca Crea nella barra delle azioni superiore
    2. Seleziona il modello API eventi
    3. Nel campo Nome immetti eventi
    4. Nel campo Titolo immetti API eventi
    5. Tocca Crea nella barra delle azioni superiore per creare la pagina
    6. Tocca Fine per tornare all’amministratore di AEM Sites

Pagina Creazione dell’API degli eventi

NOTA

Il progetto fornisce CSS per fornire alcuni stili di base per l’esperienza di authoring.

  1. Modifica la pagina API eventi passando a AEM > Siti > WKND Mobile > Inglese > API, seleziona la pagina API eventi e tocca Modifica nella barra delle azioni superiore.

  2. Aggiungi un’ immagine logo per visualizzarla nell’app trascinandola dal Finder sul segnaposto del componente Immagine.

    • Utilizza il logo fornito in /content/dam/wknd-mobile/images/wknd-logo.png.
  3. Aggiungi riga tag per visualizzare sopra gli eventi.

    1. Modifica il componente Testo
    2. Inserisci il testo:
      • The WKND is here.
  4. Seleziona eventi da visualizzare:

    1. Imposta la seguente configurazione nella scheda Proprietà :
      • Modello: Evento
      • Percorso padre: /content/dam/wknd-mobile/en/events
      • Tag: <Lascia vuoto>
    2. Imposta la seguente configurazione nella scheda Elementi :
      • Rimuovi gli elementi elencati, per garantire che siano esposti TUTTI gli elementi dei frammenti di contenuto dell’evento.

Rivedi l’output JSON della pagina API

L’output JSON e il relativo formato possono essere rivisti richiedendo la pagina con il selettore .model.json .

Questa struttura JSON (o schema) deve essere ben compresa dai consumatori di questa API. È fondamentale che i consumatori di API comprendano quali aspetti della struttura sono fissi (ad esempio, Logo (immagine) e tag live (testo) dell’API evento e fluidi (ad esempio gli eventi elencati in Componente elenco frammenti di contenuto).

La risoluzione di questo contratto su un’API pubblicata potrebbe causare un comportamento non corretto nelle applicazioni che consumano contenuti.

  1. Nelle nuove schede del browser, richiedi le pagine API degli eventi utilizzando il selettore .model.json, che richiama AEM’esportatore JSON di Content Services e serializza la pagina e i componenti in una struttura JSON normalizzata e ben definita.

    La struttura JSON prodotta da queste pagine è la struttura a cui devono essere allineate le app che consumano.

  2. Richiedi la pagina API Eventi come JSON.

    Il risultato dovrebbe essere simile a:

Output JSON di AEM Content Services

NOTA

Questo JSON può essere emesso in modo ordinato (formattato) per una leggibilità umana utilizzando il selettore .tidy:

Passaggio successivo

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

In questa pagina