Capitolo 7 - Utilizzo di servizi di contenuti AEM 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 è 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 il Publish AEM 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 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 personalizzati responsabili dell'analisi del JSON e dell'associazione dei valori agli elementi View.

initApp(...) viene quindi chiamato, rendendo la richiesta HTTP di GET all'endpoint di Servizi di contenuto AEM su 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 → root → :items che rappresenta il contenitore di layout 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.

Si noti che è necessario fornire lo schema, l'host e la porta AEM (tramite aemHost) all'istanza di Publish AEM, poiché 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 conosci il modo in cui i servizi di contenuto AEM possono promuovere l’esperienza mobile nativa, utilizza ciò che 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.

Complimenti

Hai completato l'esercitazione headless per AEM!

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