Capitolo 7 - Utilizzo di AEM Content Services da un’app mobile

Il capitolo 7 dell'esercitazione utilizza un'app mobile Android nativa per utilizzare contenuti da AEM Content Services.

App mobile Android

Questa esercitazione utilizza una semplice app mobile nativa Android per utilizzare e visualizzare il contenuto Evento esposto da AEM Content Services.

L'utilizzo di Android è in gran parte poco importante e l'app mobile utilizzata potrebbe essere scritta in qualsiasi framework per qualsiasi piattaforma mobile, ad esempio iOS.

Android è utilizzato per tutorial a causa della capacità di eseguire un emulatore Android su Windows, macOs e Linux, la sua popolarità, e che può essere scritto come Java, un linguaggio ben capito dagli sviluppatori AEM.

L’app mobile Android del tutorial ​non ha lo scopo di istruire su come creare app Android Mobile o trasmettere le best practice di sviluppo Android, ma piuttosto di illustrare come AEM Content Services può essere utilizzato da un’applicazione mobile.

Come AEM Content Services guida l’esperienza dell’app mobile

Mappatura di app mobili su Content Services

  1. Il logo come definito dal Events API componente immagine della pagina .
  2. Il tag line come definito nel componente Events API Testo della pagina Componente testo.
  3. Questo elenco eventi è derivato dalla serializzazione dei frammenti di contenuto evento, esposti tramite il componente Elenco frammenti di contenuto configurato.

Dimostrazione dell'app mobile

Configurazione dell’app mobile per uso non localhost

Se AEM Publish non viene eseguito su http://localhost:4503 l'host e la porta possono essere aggiornati nell' Settings dell'app mobile per puntare alla proprietà Host/porta di AEM Publish.

Esecuzione locale dell’app mobile

  1. Scarica e installa Android Studio per installare l'emulatore Android.
  2. ​Scarica il APK file Android GitHub > Risorse > wknd-mobile.x.x.xapk
  3. Apri Android Studio
    • All'avvio iniziale di Android Studio, verrà visualizzato un messaggio per l'installazione di Android SDK. Accettate le impostazioni predefinite e completate l'installazione.
  4. Apri Android Studio e seleziona Profilo o Debug APK
  5. Seleziona il file APK (wknd-mobile.x.x.x.x.apk) scaricato nel passaggio 2 e fai clic su OK
    • Se viene richiesto di Creare una nuova cartella o Utilizzare esistente, selezionare Usa esistente.
  6. All'avvio iniziale di Android Studio, fai clic con il pulsante destro del mouse su wknd-mobile.x.x nell'elenco Progetti e seleziona Impostazioni modulo aperto.
    • In Moduli > wknd-mobile.x.x > Scheda Dipendenze, seleziona Piattaforma API Android 29. Toccare OK per chiudere e salvare le modifiche.
    • In caso contrario, quando tenti di avviare l’emulatore viene visualizzato l’errore "Seleziona l’SDK per Android".
  7. Apri AVD Manager selezionando Strumenti > AVD Manager o toccando l'icona AVD Manager nella barra superiore.
  8. Nella finestra AVD Manager fare clic su + Crea dispositivo virtuale… se il dispositivo non è già registrato.
    1. A sinistra, seleziona la categoria Telefono .
    2. Seleziona un Pixel 2.
    3. Fare clic sul pulsante Avanti.
    4. Seleziona Q con Livello API 29.
      • All’avvio iniziale di AVD Manager, ti verrà richiesto di Scaricare l’API con versione. Fai clic sul collegamento Scarica accanto alla versione "Q" e completa il download e l’installazione.
    5. Fare clic sul pulsante Avanti.
    6. Fare clic sul pulsante Fine.
  9. Chiudere la finestra AVD Manager.
  10. Nella barra dei menu principale seleziona wknd-mobile.x.x.x dal menu a discesa Esegui/Modifica configurazioni.
  11. Toccare il pulsante Esegui accanto al Esegui/Modifica configurazione selezionato
  12. Nella finestra a comparsa, seleziona il dispositivo virtuale Pixel 2 API 29 appena creato e tocca OK
  13. Se l’app WKND Mobile non viene caricata immediatamente, trova e tocca l’icona WKND nella schermata iniziale di Android nell’emulatore.
    • Se l'emulatore si avvia ma lo schermo dell'emulatore rimane nero, toccare il pulsante power nella finestra degli strumenti dell'emulatore accanto alla finestra dell'emulatore.
    • Per scorrere all'interno del dispositivo virtuale, fare clic e tenere premuto e trascinare.
    • Per aggiornare il contenuto da AEM, scegli dall’alto fino all’icona Aggiorna
      visualizza e rilascia.

Il codice dell’app mobile

Questa sezione evidenzia il codice dell’app mobile Android che più interagisce e dipende da AEM Content Services e dall’output JSON di .

Al caricamento, l’app mobile effettua da HTTP GET a /content/wknd-mobile/en/api/events.model.json che è il punto finale di AEM Content Services configurato per fornire il contenuto per l’app mobile.

Poiché il modello modificabile dell'API degli eventi (/content/wknd-mobile/en/api/events.model.json) è bloccato, l'app mobile può essere codificata per cercare informazioni specifiche in posizioni specifiche nella risposta JSON.

Flusso del codice di alto livello

  1. L’apertura dell’ WKND Mobile app richiama una richiesta HTTP GET all’AEM Publish at /content/wknd-mobile/en/api/events.model.json per raccogliere il contenuto per popolare l’interfaccia utente dell’app mobile.
  2. Dopo aver ricevuto il contenuto da AEM, ciascuno dei tre elementi di visualizzazione dell'app mobile, il logo, la riga tag e l'elenco eventi vengono inizializzati con il contenuto di AEM.
    • Per eseguire un binding al contenuto AEM all’elemento di visualizzazione dell’app mobile, il JSON che rappresenta ciascun componente AEM è un oggetto mappato a un POJO Java, che a sua volta è associato all’elemento Visualizzazione Android.
      • Componente immagine JSON → Logo POJO → Logo ImageView
      • Componente di testo JSON → TagLine POJO → Text ImageView
      • JSON Elenco frammenti di contenuto → Eventi POJO → Eventi RecyclerView
    • Il codice dell’app mobile è in grado di mappare il JSON ai POJO a causa delle posizioni ben note all’interno della risposta JSON maggiore. Ricorda che le chiavi JSON di "image", "text" e "contentfragmentlist" sono dettate dai nomi dei nodi dei componenti AEM di supporto. Se questi nomi di nodo cambiano, allora l'app mobile si interromperà in quanto non saprà come ottenere il contenuto richiesto dai dati JSON.

Richiamo dell'endpoint AEM Content Services

Di seguito è riportata una distillazione del codice nell’ MainActivity dell’app mobile responsabile della chiamata AEM Content Services per raccogliere il contenuto che guida l’esperienza dell’app mobile.

protected void onCreate(Bundle savedInstanceState) {
    ...
    // Create the custom objects that will map the JSON -> POJO -> View elements
    final List<ViewBinder> viewBinders = new ArrayList<>();

    viewBinders.add(new LogoViewBinder(this, getAemHost(), (ImageView) findViewById(R.id.logo)));
    viewBinders.add(new TagLineViewBinder(this, (TextView) findViewById(R.id.tagLine)));
    viewBinders.add(new EventsViewBinder(this, getAemHost(), (RecyclerView) findViewById(R.id.eventsList)));
    ...
    initApp(viewBinders);
}

private void initApp(final List<ViewBinder> viewBinders) {
    final String aemUrl = getAemUrl(); // -> http://localhost:4503/content/wknd-mobile/en/api/events.mobile.json
    JsonObjectRequest request = new JsonObjectRequest(aemUrl, null,
        new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                for (final ViewBinder viewBinder : viewBinders) {
                    viewBinder.bind(response);
                }
            }
        },
        ...
    );
}

onCreate(..) è l’hook di inizializzazione per l’app mobile e registra i 3 ViewBinders responsabili personalizzati per l’analisi del JSON e l’associazione dei valori agli View elementi.

initApp(...) viene quindi chiamato , che invia la richiesta HTTP GET al punto finale di AEM Content Services su AEM Publish per raccogliere il contenuto. Dopo aver ricevuto una risposta JSON valida, la risposta JSON viene passata a ogni ViewBinder responsabile dell’analisi del JSON e del binding agli elementi mobili View.

Analisi della risposta JSON

Ora esamineremo il LogoViewBinder, che è semplice, ma evidenzia diverse considerazioni importanti.

public class LogoViewBinder implements ViewBinder {
    ...
    public void bind(JSONObject jsonResponse) throws JSONException, IOException {
        final JSONObject components = jsonResponse.getJSONObject(":items").getJSONObject("root").getJSONObject(":items");

        if (components.has("image")) {
            final Image image = objectMapper.readValue(components.getJSONObject("image").toString(), Image.class);

            final String imageUrl = aemHost + image.getSrc();
            Glide.with(context).load(imageUrl).into(logo);
        } else {
            Log.d("WKND", "Missing Logo");
        }
    }
}

La prima riga di bind(...) naviga verso il basso nella risposta JSON tramite le chiavi :items → root → :items che rappresentano il contenitore di layout AEM a cui sono stati aggiunti i componenti.

Da qui viene effettuato un controllo per una chiave denominata image, che rappresenta il componente Immagine (ancora una volta, è importante che il nome del nodo → la chiave JSON sia stabile). Se questo oggetto esiste, legge e mappa l' immagine personalizzata POJO tramite la libreria Jackson ObjectMapper. L'immagine POJO è illustrata di seguito.

Infine, il logo src viene caricato in Android ImageView utilizzando la libreria di supporto Glide.

Nota che è necessario fornire lo schema, l’host e la porta AEM (tramite aemHost) all’istanza di pubblicazione AEM, in quanto AEM Content Services fornirà solo il percorso JCR (ad es. /content/dam/wknd-mobile/images/wknd-logo.png) al contenuto a cui si fa riferimento.

Immagine POJO

Anche se opzionale, l'utilizzo di Jackson ObjectMapper o di funzionalità simili fornite da altre librerie come Gson, aiuta a mappare complesse strutture JSON a JOs Java senza il tedio di trattare direttamente con gli oggetti JSON nativi stessi. In questo caso semplice mappamo la chiave src dall’oggetto JSON image all’attributo src nell’Image POJO direttamente tramite l’annotazione @JSONProperty.

package com.adobe.aem.guides.wknd.mobile.android.models;

import com.fasterxml.jackson.annotation.JsonProperty;

public class Image {
    @JsonProperty(value = "src")
    private String src;

    public String getSrc() {
        return src;
    }
}

Il POJO evento, che richiede la selezione di molti più punti dati dall’oggetto JSON, beneficia di questa tecnica più della semplice immagine, che tutto ciò che vogliamo è il src.

Esplorare l’esperienza con l’app mobile

Ora che hai capito come AEM Content Services è in grado di promuovere l’esperienza mobile nativa, utilizza ciò che hai imparato a eseguire i seguenti passaggi e osserva le modifiche che si riflettono nell’app mobile.

Dopo ogni passaggio, effettua il pull-to-refresh the Mobile App e verifica l’aggiornamento dell’esperienza mobile.

  1. Crea e pubblica nuovo Event frammento di contenuto
  2. Annullare la pubblicazione di un frammento di contenuto esistente Event
  3. Pubblica un aggiornamento alla riga tag

Congratulazioni

Hai completato l'esercitazione AEM Headless!

Per ulteriori informazioni su AEM Content Services e AEM come CMS headless, visita la documentazione e il materiale di abilitazione di Adobe:

In questa pagina