Chapitre 7 : consulter AEM Content Services à partir d’une application mobile

Le chapitre 7 du tutoriel emploie une application mobile Android native pour utiliser du contenu d’AEM Content Services.

Application mobile Android

Ce tutoriel utilise une application mobile Android native simple pour utiliser et afficher le contenu d’événement exposé par AEM Content Services.

L’utilisation d’Android n’est pas importante, et l’application mobile consommatrice peut être écrite dans n’importe quel framework pour n’importe quelle plateforme mobile, par exemple iOS.

Android est utilisé pour les tutoriels en raison de la possibilité d’exécuter un émulateur Android sous Windows, macOs et Linux, de sa popularité, et du fait qu’il peut être écrit en Java, un langage bien compris par les développeurs et développeuses AEM.

L’application mobile Android du tutoriel n’est pas destinée à expliquer comment créer des applications mobiles Android ou transmettre les bonnes pratiques de développement Android, mais plutôt à illustrer la manière dont AEM Content Services peut être utilisé à partir d’une application mobile.

Comment AEM Content Services oriente l’expérience de l’application mobile

Démonstration de l’application mobile

Configuration de l’application mobile pour une utilisation autre que localhost

Si l’instance de publication AEM n’est pas exécutée sur http://localhost:4503, l’hôte et le port peuvent être mis à jour dans les Settings de l’application mobile pour pointer vers la propriété hôte/port de l’instance de publication AEM.

Exécution locale de l’application mobile

Code de l’application mobile

Cette section décrit le code de l’application mobile Android qui interagit le plus et qui dépend d’AEM Content Services et de sa sortie JSON.

Lors du chargement, l’application mobile applique HTTP GET à /content/wknd-mobile/en/api/events.model.json qui est le point d’entrée AEM Content Services configuré pour fournir le contenu permettant d’orienter l’application mobile.

Comme le modèle modifiable de l’API d’événements (/content/wknd-mobile/en/api/events.model.json) est verrouillé, l’application mobile peut être codée pour rechercher des informations spécifiques à des emplacements spécifiques dans la réponse JSON.

Flux de code de haut niveau

Appeler le point d’entrée d’AEM Content Services

Vous trouverez ci-dessous un condensé du code dans la MainActivity de l’application mobile chargée d’appeler AEM Content Services pour collecter le contenu qui oriente l’expérience de l’application 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(..) est le crochet d’initialisation de l’application mobile et enregistre les 3 ViewBinders personnalisés chargés de l’analyse du fichier JSON et de la liaison des valeurs aux éléments View.

initApp(...) est ensuite appelée, ce qui envoie la requête HTTP GET au point d’entrée d’AEM Content Services sur l’instance de publication AEM pour collecter le contenu. Lors de la réception d’une réponse JSON valide, la réponse JSON est transmise à chaque ViewBinder chargé d’analyser le fichier JSON et de le lier aus éléments View mobiles.

Analyser la réponse JSON

Ensuite, nous allons voir le LogoViewBinder, qui est simple, mais met en évidence plusieurs points importants.

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 première ligne de bind(...) navigue vers le bas de la réponse JSON à l’aide des clés  :items → root → :items qui représentent le conteneur de disposition d’AEM auquel les composants ont été ajoutés.

À partir de là, la clé nommée image fait l’objet d’une vérification. Cette clé représente le composant Image (il est important que ce nom de nœud → clé JSON soit stable). Si cet objet existe, il est lu et mappé au POJO d’image personnalisée via la bibliothèque ObjectMapper Jackson. Le POJO d’image est exploré ci-dessous.

Enfin, le src du logo est chargé dans l’ImageView d’Android à l’aide de la bibliothèque d’assistance Glide.

Notez que nous devons fournir le schéma, l’hôte et le port d’AEM (via aemHost) à l’instance de publication AEM, car AEM Content Services ne fournira que le chemin d’accès JCR (c’est-à-dire /content/dam/wknd-mobile/images/wknd-logo.png) au contenu référencé.

POJO d’image image-pojo

Bien que cela soit facultatif, l’utilisation de l’ObjectMapper Jackson ou des fonctionnalités similaires fournies par d’autres bibliothèques comme Gson, permettent de mapper des structures JSON complexes à des POJO Java sans avoir à traiter directement les objets JSON natifs eux-mêmes. Dans ce cas simple, nous mappons la clé src de l’objet JSON image à l’attribut src dans le POJO d’image, directement via l’annotation @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;
    }
}

Le POJO d’événement, qui nécessite de sélectionner beaucoup plus de points de données à partir de l’objet JSON, bénéficie de cette technique plus que le POJO d’image, dont nous voulons simplement le src.

Explorer l’expérience de l’application mobile

Maintenant que vous comprenez comment AEM Content Services peut générer une expérience mobile native, utilisez ce que vous avez appris pour effectuer les étapes suivantes et voir vos modifications répercutées dans l’application mobile.

Après chaque étape, actualisez l’application mobile en balayant du haut de l’écran vers le bas et vérifiez la mise à jour de l’expérience mobile.

Félicitations.

Vous avez terminé le tutoriel AEM Headless.

Pour en savoir plus sur AEM Content Services et AEM en tant que CMS découplé, consultez d’autres documentations et supports de formation d’Adobe :