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

Il capitolo 7 del tutorial utilizza un’app mobile nativa di Android per utilizzare contenuti di AEM Content Services.

L’app mobile Android

Questo tutorial utilizza una semplice app mobile nativa di Android per utilizzare e visualizzare il contenuto degli eventi 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 viene utilizzato per i tutorial a causa della capacità di eseguire un emulatore Android su Windows, macOs e Linux, della sua popolarità e del fatto che può essere scritto come Java, un linguaggio ben compreso dagli sviluppatori AEM.

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

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

Dimostrazione sull’app mobile

Configurazione dell’app mobile per un utilizzo non localhost

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

Esecuzione locale dell’app mobile

Il codice dell’app mobile

Questa sezione evidenzia il codice dell’app mobile di Android che interagisce maggiormente e dipende da AEM Content Services e dal suo output JSON.

Al momento del caricamento, l’app mobile rende HTTP GET a /content/wknd-mobile/en/api/events.model.json, che è l’endpoint di AEM Content Services configurato per fornire il contenuto per l’utilizzo dell’app mobile.

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

Flusso di codice di alto livello

Richiamare l’endpoint di AEM Content Services

Di seguito è riportata una distillazione del codice in MainActivity dell’app mobile responsabile della chiamata di AEM Content Services per la raccolta del contenuto all’origine dell’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 personalizzati responsabili dell’analisi del JSON e dell’associazione dei valori agli elementi View.

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

Analisi della risposta JSON

Esaminiamo ora LogoViewBinder, che è semplice, ma evidenzia alcune 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(...) passa alla risposta JSON tramite le chiavi :items→ radice →:items che rappresenta il contenitore di layout di AEM a cui sono stati aggiunti i componenti.

Da qui viene eseguito un controllo per una chiave denominata image, che rappresenta il componente Immagine (di nuovo, è importante che il nome del nodo → la chiave JSON siano stabili). Se questo oggetto esiste, viene letto e mappato al POJO 🔗 dell’immagine personalizzata tramite la libreria Jackson ObjectMapper. Il POJO Immagine viene illustrato di seguito.

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

È necessario fornire lo schema, l’host e la porta di AEM (tramite aemHost) all’istanza AEM Publish, in quanto AEM Content Services fornirà solo il percorso JCR (ad esempio /content/dam/wknd-mobile/images/wknd-logo.png) al contenuto di riferimento.

POJO immagine image-pojo

Anche se facoltativo, l’utilizzo di Jackson ObjectMapper o di funzionalità simili fornite da altre librerie come Gson consente di mappare strutture JSON complesse su POJO Java senza il tedio di trattare direttamente con gli oggetti JSON nativi stessi. In questo semplice caso, la chiave src viene mappata dall’oggetto JSON image all’attributo src nel POJO dell’immagine 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 è src.

Esplorare l’esperienza dell’app mobile

Ora che hai compreso come AEM Content Services può promuovere l’esperienza mobile nativa, utilizza quanto hai imparato per eseguire i passaggi seguenti e vedere le modifiche riportate nell’app mobile.

Dopo ogni passaggio, richiama per aggiornare l’app mobile e verifica l’aggiornamento dell’esperienza mobile.

Congratulazioni

Hai completato l’esercitazione AEM Headless!

Per ulteriori informazioni su AEM Content Services e AEM as a Headless CMS, consulta la documentazione e i materiali di supporto di Adobe: