Kapitel 7 - Använda AEM innehållstjänster från en mobilapp

I kapitel 7 i självstudiekursen används en Android-mobilapp för att förbruka innehåll från AEM Content Services.

Android mobilapp

I den här självstudien används en enkel inbyggd Android-mobilapp för att förbruka och visa händelseinnehåll som exponeras av AEM Content Services.

Användningen av Android är i stort sett oviktig, och den förbrukande mobilappen kan skrivas i vilket ramverk som helst för vilken mobilplattform som helst, till exempel iOS.

Android används som självstudiekurs eftersom det går att köra en Android Emulator i Windows, macOs och Linux, dess popularitet och att det kan skrivas som Java, ett språk som utvecklarna förstår väl AEM.

Självstudiekursens Android-mobilapp är inte ​avsedd att instruera dig att skapa Android-mobilappar eller förmedla bästa praxis för Android-utveckling, utan snarare att illustrera hur AEM innehållstjänster kan användas från ett mobilprogram.

Hur AEM innehållstjänster driver mobilappsupplevelsen

Demonstration av mobilappar

Konfigurera mobilappen för icke-lokal värdanvändning

Om AEM Publish inte körs på http://localhost:4503 kan värden och portar uppdateras i mobilappens Settings så att de pekar på egenskapen AEM Publish värd/port.

Kör mobilappen lokalt

Koden för mobilappar

I det här avsnittet beskrivs den Android Mobile App-kod som de flesta interagerar med och som är beroende av AEM Content Services och JSON-utdata.

Vid inläsning skapar mobilappen HTTP GET till /content/wknd-mobile/en/api/events.model.json, som är AEM Content Services-slutpunkt konfigurerad för att tillhandahålla innehållet som ska driva mobilappen.

Eftersom den redigerbara mallen för händelse-API:t (/content/wknd-mobile/en/api/events.model.json) är låst kan mobilappen kodas för att söka efter specifik information på specifika platser i JSON-svaret.

Kodflöde på hög nivå

AEM Content Services-slutpunkten anropas

Nedan följer en destillation av koden i mobilappens MainActivity som anropar AEM Content Services för att samla in innehållet som driver upplevelsen av mobilappen.

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(..) är initieringsgaffeln för mobilappen och registrerar de 3 anpassade ViewBinders som ansvarar för parsning av JSON och bindning av värdena till elementen View.

initApp(...) anropas sedan, vilket gör HTTP-GET-begäran till AEM Content Services-slutpunkten på AEM Publish för att samla in innehållet. När ett giltigt JSON-svar tas emot, skickas JSON-svaret till varje ViewBinder som ansvarar för att parsa JSON och binda det till de mobila View -elementen.

Tolka JSON-svaret

Därefter ska vi titta på LogoViewBinder, som är enkel, men flera viktiga saker att tänka på.

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

Den första raden i bind(...) navigerar nedåt i JSON-svaret via tangenterna :items → root → :items som representerar den AEM Layoutbehållare som komponenterna lades till i.

Härifrån görs en kontroll för en nyckel med namnet image som representerar Image-komponenten (återigen är det viktigt att det här nodnamnet → JSON-nyckeln är stabil). Om det här objektet finns, läses det och mappas till anpassad bild-POJO via Jackson ObjectMapper-biblioteket. Bildens POJO utforskas nedan.

Slutligen läses logotypens src in i Android ImageView med hjälp av hjälpbiblioteket Glide.

Observera att vi måste tillhandahålla AEM schema, värd och port (via aemHost) till den AEM Publish-instansen eftersom AEM Content Services bara tillhandahåller JCR-sökvägen (dvs. /content/dam/wknd-mobile/images/wknd-logo.png) till det refererade innehållet.

Bild-POJO image-pojo

Om du väljer det här alternativet kan du använda Jackson ObjectMapper eller liknande funktioner från andra bibliotek, som Gson, för att mappa komplexa JSON-strukturer till Java-POJO:er utan att behöva arbeta direkt med de inbyggda JSON-objekten. I det här enkla fallet mappar vi src-nyckeln från image JSON-objektet till src-attributet i Image POJO direkt via @JSONProperty-anteckningen.

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

Händelse-POJO, som kräver att du väljer många fler datapunkter från JSON-objektet, utnyttjar den här tekniken mer än den enkla bilden, som bara är src.

Utforska upplevelsen av mobilappar

Nu när du har en förståelse för hur AEM Content Services kan skapa en mobil upplevelse kan du använda det du lärt dig för att utföra följande steg och se ändringarna återspeglas i mobilappen.

Uppdatera mobilappen efter varje steg och bekräfta uppdateringen av mobilupplevelsen.

Grattis

Du har slutfört den AEM självstudiekursen Headless!

Läs mer om AEM Content Services och AEM som Headless CMS på Adobe i annan dokumentation och annat material: