Hoofdstuk 7 - AEM inhoudsservices van een mobiele app gebruiken

Hoofdstuk 7 van de zelfstudie gebruikt een native Android Mobile-app om inhoud van AEM Content Services te verbruiken.

De Android Mobile-toepassing

Dit leerprogramma gebruikt a eenvoudige inheemse Android Mobile App om de inhoud van de Gebeurtenis te verbruiken en te tonen die door AEM Diensten van de Inhoud wordt blootgesteld.

Het gebruik van Androidis grotendeels onbelangrijk, en de het verbruiken mobiele app zou in om het even welk kader voor om het even welk mobiel platform, bijvoorbeeld iOS kunnen worden geschreven.

Android wordt gebruikt voor zelfstudie omdat een Android Emulator in Windows, macOs en Linux kan worden uitgevoerd en omdat het populair is en kan worden geschreven als Java, een taal die AEM ontwikkelaars goed begrijpen.

Android Mobile App van de zelfstudie is niet ​bedoeld om te instrueren hoe te om de Mobiele apps van Android te bouwen of Android ontwikkelingsbeste praktijken over te brengen, maar eerder om te illustreren hoe AEM de Diensten van de Inhoud van een Mobiele Toepassing kunnen worden verbruikt.

De manier waarop AEM Content Services de Mobile App Experience

Mobiele-toepassingsdemonstratie

De mobiele app configureren voor gebruik buiten de landinstelling

Als AEM Publish niet op http://localhost:4503 in werking wordt gesteld kunnen de gastheer en de haven in Mobiele App Settings worden bijgewerkt om aan het bezit AEM de gastheer/de haven van Publish te richten.

De mobiele toepassing lokaal uitvoeren

De mobiele toepassingscode

In deze sectie wordt de Android Mobile App-code gemarkeerd die het meest interageert en afhankelijk is van AEM Content Services en die JSON-uitvoer is.

Tijdens het laden maakt de Mobile App HTTP GET naar /content/wknd-mobile/en/api/events.model.json . Dit is het eindpunt voor AEM Content Services dat is geconfigureerd om de inhoud te leveren waarmee de Mobile App kan worden gestart.

Omdat het Bewerkbare Malplaatje van de Gebeurtenis API (/content/wknd-mobile/en/api/events.model.json) wordt gesloten, kan de Mobiele App worden gecodeerd om naar specifieke informatie in specifieke plaatsen in de reactie te zoeken JSON.

Codestroom op hoog niveau

Het aanhalen van het eindpunt van de Diensten van de Inhoud van de AEM

Hieronder volgt een destillatie van de code in de Mobile App MainActivity die verantwoordelijk is voor het aanroepen van AEM Content Services om de inhoud te verzamelen die de Mobile App-ervaring aandrijft.

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(..) is de initialisatiehaak voor de Mobile-app en registreert de 3 aangepaste ViewBinders die verantwoordelijk is voor het parseren van de JSON en het binden van de waarden aan de View -elementen.

initApp(...) wordt vervolgens aangeroepen, zodat de HTTP-GET bij het eindpunt van AEM Content Services voor AEM Publish een aanvraag indient om de inhoud te verzamelen. Na ontvangst van een geldige JSON-respons wordt de JSON-respons doorgegeven aan elke ViewBinder die verantwoordelijk is voor het parseren van de JSON en het binden ervan aan de mobiele View -elementen.

De JSON-respons parseren

Hierna bekijken we de LogoViewBinder . Dit is eenvoudig, maar er worden enkele belangrijke overwegingen benadrukt.

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");
        }
    }
}

De eerste lijn van bind(...) navigeert onderaan de Reactie JSON via de sleutels :punten → wortel → :items die de AEM Container van de Lay-out vertegenwoordigt de componenten werden toegevoegd aan.

Van hier wordt een controle gemaakt voor een zeer belangrijke genoemd beeld, dat de component van het Beeld vertegenwoordigt (opnieuw, is het belangrijk deze knoopnaam → sleutel JSON stabiel). Als dit voorwerp bestaat, leest het en in kaart gebracht aan POJO van het douanebeeldvia de bibliotheek van het Jackson ObjectMapper. De POJO van de afbeelding wordt hieronder besproken.

Ten slotte wordt het logo src in de Android ImageView geladen met behulp van de Glide hulplijnbibliotheek.

U ziet dat we het AEM schema, de host en de poort (via aemHost) aan de AEM Publish-instantie moeten leveren, omdat AEM Content Services alleen het JCR-pad (dat wil zeggen: /content/dam/wknd-mobile/images/wknd-logo.png ) naar de inhoud waarnaar wordt verwezen.

De afbeeldingspo image-pojo

Terwijl facultatief, het gebruik van Jackson ObjectMapperof gelijkaardige mogelijkheden die door andere bibliotheken zoals Gson worden verstrekt, helpt complexe structuren JSON aan POJOs van Java in kaart te brengen zonder het middel om direct met de inheemse JSON voorwerpen zelf te behandelen. In dit eenvoudige geval wijzen we de src -toets van het image JSON-object rechtstreeks via de @JSONProperty -annotatie toe aan het src -kenmerk in de afbeeldingspo.

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;
    }
}

De POJO van de Gebeurtenis, die het selecteren van vele meer gegevenspunten van het voorwerp JSON vereist, profiteert van deze techniek meer dan het eenvoudige Beeld, wat wij allen willen is src.

Ontdek de Mobile App Experience

Nu u weet hoe AEM Content Services native mobiele ervaring kan aansturen, kunt u gebruiken wat u hebt geleerd om de volgende stappen uit te voeren en uw wijzigingen te bekijken in de mobiele app.

Na elke stap vernieuwt u de Mobile-app en controleert u de update van de mobiele ervaring.

Gefeliciteerd

u hebt voltooid met het AEM Hoofdloze leerprogramma!

Voor meer informatie over AEM Content Services en AEM als een Headless CMS raadpleegt u de andere documentatie en materialen voor activering van de Adobe: