Hoofdstuk 7 - AEM inhoudsservices van een mobiele app gebruiken

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

De Android Mobile-toepassing

Deze zelfstudie gebruikt een eenvoudige systeemeigen 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 Android is grotendeels onbelangrijk en de verbruikende mobiele app kan in elk raamwerk voor elk mobiel platform, bijvoorbeeld iOS, worden geschreven.

Android wordt gebruikt voor zelfstudie vanwege de mogelijkheid om een Android-emulator in Windows, MacOs en Linux uit te voeren, vanwege de populariteit ervan en omdat deze kan worden geschreven als Java, een taal die AEM ontwikkelaars goed begrijpen.

De Android Mobile-app van de zelfstudie is niet ​bedoeld om u te leren hoe u mobiele Android-apps kunt ontwikkelen of best practices voor Android-ontwikkeling kunt overbrengen, maar om te tonen hoe AEM Content Services kan worden gebruikt via een mobiele toepassing.

De manier waarop AEM Content Services de Mobile App Experience

Mobiele-toepassingsdemonstratie

De mobiele app configureren voor gebruik buiten de landinstelling

Als AEM Publiceren niet is ingeschakeld http://localhost:4503 de host en poort kunnen worden bijgewerkt in de mobiele app Settings om naar de eigenschap AEM Publish host/port te wijzen.

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 tot /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 mobiele app wordt aangedreven.

Omdat de bewerkbare sjabloon van de API voor gebeurtenissen (/content/wknd-mobile/en/api/events.model.json) is vergrendeld, kan de Mobile-app worden gecodeerd om te zoeken naar specifieke informatie op specifieke locaties in de JSON-reactie.

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's MainActivity verantwoordelijk voor het aanroepen van AEM Content Services om de inhoud te verzamelen die de Mobile App-ervaring stimuleert.

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 Mobiele App, en registreert 3 douane ViewBinders verantwoordelijk voor het parseren van de JSON en het binden van de waarden aan de View elementen.

initApp(...) wordt dan geroepen die het HTTP- GET verzoek aan het eindpunt van de Diensten van de Inhoud van de AEM bij AEM Publish doet om de inhoud te verzamelen. Bij ontvangst van een geldige JSON-respons wordt de JSON-respons doorgegeven aan elke patiënt ViewBinder die verantwoordelijk is voor het parseren van de JSON en het binden ervan aan de mobiele telefoon View elementen.

De JSON-respons parseren

Hierna bekijken we de LogoViewBinder, wat eenvoudig is, maar een aantal 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 regel van bind(...) navigeert onderaan de Reactie van JSON via de sleutels :items → root → items die staat voor de AEM Layout Container waaraan de componenten zijn toegevoegd.

Hier wordt gecontroleerd op een sleutel met de naam image, die staat voor de component Image (het is ook hier belangrijk dat deze knooppuntnaam → JSON-sleutel stabiel is). Als dit object bestaat, wordt het gelezen en toegewezen aan de aangepaste afbeeldingspOJO via Jackson ObjectMapper bibliotheek. De POJO van de afbeelding wordt hieronder besproken.

Tot slot de src wordt met de klasse Glide helperbibliotheek.

Bericht dat wij het AEM schema, de gastheer en de haven (via aemHost) naar de AEM Publish-instantie omdat AEM Content Services alleen het JCR-pad (dat wil zeggen: /content/dam/wknd-mobile/images/wknd-logo.png) aan de inhoud waarnaar wordt verwezen.

De afbeeldingspo image-pojo

Het gebruik van de Jackson ObjectMapper of vergelijkbare mogelijkheden die andere bibliotheken zoals Gson bieden, helpen complexe JSON-structuren toe te wijzen aan Java POJO's zonder dat ze rechtstreeks met de native JSON-objecten zelf moeten werken. In dit eenvoudige geval geven we de src van de image JSON-object, naar de src rechtstreeks via het @JSONProperty aantekening.

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 de AEM zelfstudie zonder koppen voltooid!

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: