Kapitel 7 - AEM von Content Services aus einer Mobile App

Kapitel 7 des Tutorials verwendet eine native Android Mobile App, um Inhalte aus AEM Content Services zu nutzen.

Die Android Mobile App

In diesem Tutorial wird eine Einfache native Android Mobile-App , um Ereignisinhalte zu nutzen und anzuzeigen, die von AEM Content Services bereitgestellt werden.

Die Verwendung von Android ist weitgehend unwichtig, und die verbrauchende mobile App könnte in jedem Framework für jede mobile Plattform geschrieben werden, z. B. iOS.

Android wird für das Tutorial verwendet, da ein Android-Emulator unter Windows, macOs und Linux ausgeführt werden kann und weil es beliebt ist und als Java geschrieben werden kann, eine Sprache, die von AEM Entwicklern gut verstanden wird.

Die Android Mobile App des Tutorials lautet not​soll Anweisungen zum Erstellen von Android-Mobile-Apps oder zum Vermitteln von Best Practices für die Android-Entwicklung geben, um jedoch zu veranschaulichen, wie AEM Content Services über eine Mobile-Anwendung genutzt werden können.

Wie AEM Content Services das Mobile-App-Erlebnis antreiben

Zuordnung von Mobile App zu Content Services

  1. Die logo gemäß der Definition von Events API Seite Bildkomponente.
  2. Die Tag-Zeile wie in der Events API Seite Textkomponente.
  3. Diese Ereignisliste wird aus der Serialisierung der Ereignisinhaltsfragmente abgeleitet, die über die konfigurierte Inhaltsfragmentlisten-Komponente.

Mobile App-Demonstration

Konfigurieren der Mobile App für die Verwendung ohne localhost

Wenn die AEM-Veröffentlichung nicht ausgeführt wird auf http://localhost:4503 Der Host und Port können in der Mobile App aktualisiert werden. Settings , um auf die Eigenschaft AEM Publish-Host/-Port zu verweisen.

Lokales Ausführen der Mobile App

  1. Laden Sie die Android Studio , um den Android-Emulator zu installieren.
  2. Download Android APK file GitHub > Assets > wknd-mobile.x.x.xapk
  3. Öffnen Android Studio
    • Beim ersten Start von Android Studio müssen Sie aufgefordert werden, die Android SDK wird angezeigt. Akzeptieren Sie die Standardeinstellungen und schließen Sie die Installation ab.
  4. Öffnen Sie Android Studio und wählen Sie Profil- oder Debug-APK
  5. Wählen Sie die APK-Datei (wknd-mobile.x.x.x.apk), heruntergeladen in Schritt 2 und klicken Sie auf OK
    • Wenn Sie dazu aufgefordert werden Erstellen eines neuen Ordners oder Vorhandene verwenden auswählen Vorhandene verwenden.
  6. Klicken Sie beim ersten Start von Android Studio mit der rechten Maustaste auf die wknd-mobile.x.x.x in der Liste "Projekte"und wählen Sie Moduleinstellungen öffnen.
    • under Module > wknd-mobile.x.x.x > Registerkarte "Abhängigkeiten" auswählen Android API 29 Platform. Tippen Sie auf OK , um die Änderungen zu schließen und zu speichern.
    • Andernfalls wird beim Versuch, den Emulator zu starten, der Fehler "Bitte Android SDK auswählen"angezeigt.
  7. Öffnen Sie die AVD Manager durch Auswahl Tools > AVD Manager oder tippen Sie auf AVD Manager in der oberen Leiste angezeigt.
  8. Im AVD Manager Fenster, klicken Sie auf + Virtuelles Gerät erstellen… wenn Sie noch kein Gerät registriert haben.
    1. Wählen Sie links die Telefon Kategorie.
    2. Wählen Sie eine Pixel 2.
    3. Klicken Sie auf Nächste Schaltfläche.
    4. Auswählen Q mit API-Ebene 29.
      • Beim ersten Start von AVD Manager werden Sie aufgefordert, die versionierte API herunterzuladen. Klicken Sie auf den Downloadlink neben der "Q"-Version und schließen Sie den Download und die Installation ab.
    5. Klicken Sie auf Nächste Schaltfläche.
    6. Klicken Sie auf Beenden Schaltfläche.
  9. Schließen Sie die AVD Manager Fenster.
  10. Wählen Sie in der oberen Menüleiste wknd-mobile.x.x.x von Konfigurationen ausführen/bearbeiten angezeigt.
  11. Tippen Sie auf Ausführen Schaltfläche neben dem ausgewählten Konfiguration ausführen/bearbeiten
  12. Wählen Sie im Popup die neu erstellte Pixel 2 API 29 virtuelles Gerät und tippen Sie auf OK
  13. Wenn die Variable WKND Mobile Die App lädt nicht sofort, sucht und tippen Sie auf WKND -Symbol auf dem Android-Startbildschirm des Emulators.
    • Wenn der Emulator gestartet wird, der Emulator jedoch schwarz bleibt, tippen Sie auf die power im Fenster der Tools des Emulators neben dem Emulator-Fenster.
    • Um innerhalb des virtuellen Geräts zu scrollen, klicken und halten Sie die Maustaste gedrückt und ziehen Sie.
    • Um den Inhalt von AEM zu aktualisieren, ziehen Sie ihn von oben nach unten, bis das Aktualisierungssymbol angezeigt wird, und veröffentlichen Sie ihn.

Der Mobile-App-Code

In diesem Abschnitt wird der Android-Mobile-App-Code vorgestellt, der am häufigsten interagiert und von AEM Content Services und der JSON-Ausgabe abhängig ist.

Beim Laden führt die Mobile App HTTP GET nach /content/wknd-mobile/en/api/events.model.json Dies ist der Endpunkt AEM Content Services , der für die Bereitstellung des Inhalts für die Mobile-App konfiguriert ist.

Da die bearbeitbare Vorlage der Ereignis-API (/content/wknd-mobile/en/api/events.model.json) gesperrt ist, kann die Mobile-App codiert werden, um an bestimmten Stellen in der JSON-Antwort nach bestimmten Informationen zu suchen.

Übergeordneter Code-Fluss

  1. Öffnen der WKND Mobile App ruft eine HTTP GET Anfrage an AEM Publish unter /content/wknd-mobile/en/api/events.model.json , um den Inhalt zu erfassen, der in der Benutzeroberfläche der Mobile-App angezeigt wird.
  2. Nach Erhalt des Inhalts von AEM, wird jedes der drei Ansichtselemente der Mobile App, die Logo, Tag-Zeile und Ereignisliste, werden mit dem Inhalt von AEM initialisiert.
    • Um den AEM Inhalt an das Ansichtselement der Mobile-App zu binden, ist die JSON, die jede AEM Komponente darstellt, ein Objekt, das einem Java POJO zugeordnet ist, das wiederum an das Android-Ansichtselement gebunden ist.
      • Bildkomponente JSON → Logo POJO → Logo ImageView
      • Textkomponente JSON → TagLine POJO → Text ImageView
      • Inhaltsfragmentlisten-JSON → Events POJO → Events RecyclerView
    • Der Mobile-App-Code kann die JSON-Datei den POJOs zuordnen, da die Orte innerhalb der größeren JSON-Antwort bekannt sind. Denken Sie daran, dass die JSON-Schlüssel "image", "text"und "contentfragmentlist"durch die Knotennamen der AEM Komponenten bestimmt werden. Wenn sich diese Knotennamen ändern, wird die Mobile-App beschädigt, da sie nicht weiß, wie der benötigte Inhalt aus den JSON-Daten abgerufen werden soll.

Aufrufen des Endpunkts AEM Content Services

Im Folgenden finden Sie eine Destillation des Codes in der Mobile App MainActivity verantwortlich für das Aufrufen AEM Content Services zur Erfassung des Inhalts, der das Mobile-App-Erlebnis antreibt.

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(..) ist der Initialisierungs-Hook für die Mobile App und registriert die 3 benutzerdefinierten ViewBinders verantwortlich für das Analysieren der JSON-Datei und das Binden der Werte an die View -Elemente.

initApp(...) wird dann aufgerufen, wodurch die HTTP-GET-Anfrage an den AEM Content Services-Endpunkt auf AEM Publish gesendet wird, um den Inhalt zu erfassen. Nach Erhalt einer gültigen JSON-Antwort wird die JSON-Antwort an jede ViewBinder , der für das Parsen der JSON und die Bindung an das Mobilgerät verantwortlich ist View -Elemente.

Analysieren der JSON-Antwort

Als Nächstes schauen wir uns die LogoViewBinder, was einfach ist, aber einige wichtige Aspekte hervorhebt.

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

Die erste Zeile von bind(...) Navigieren der JSON-Antwort über die Schlüssel nach unten :items → root → items , der den AEM Layout-Container darstellt, dem die Komponenten hinzugefügt wurden.

Hier wird nach einem Schlüssel mit dem Namen geprüft image, was die Bildkomponente darstellt (ebenfalls ist es wichtig, dass dieser Knotenname → JSON-Schlüssel stabil ist). Wenn dieses Objekt vorhanden ist, wird es gelesen und dem benutzerdefiniertes Bild-POJO über Jackson ObjectMapper -Bibliothek. Das Bild-POJO wird unten beschrieben.

Schließlich ist die src in die Android-Bildansicht geladen wird, indem die Glide Helper-Bibliothek.

Beachten Sie, dass wir das AEM Schema, den Host und Port bereitstellen müssen (über aemHost) zur AEM-Veröffentlichungsinstanz hinzu, da AEM Content Services nur den JCR-Pfad bereitstellt (d. h. /content/dam/wknd-mobile/images/wknd-logo.png) zum referenzierten Inhalt.

Bild-POJO

Die Verwendung der Jackson ObjectMapper oder ähnlichen Funktionen, die von anderen Bibliotheken wie Gson bereitgestellt werden, helfen Ihnen, komplexe JSON-Strukturen Java-POJOs zuzuordnen, ohne direkt mit den nativen JSON-Objekten selbst umzugehen. In diesem einfachen Fall ordnen wir die src Schlüssel aus image JSON-Objekt, zum src -Attribut im Bild-POJO direkt über das @JSONProperty -Anmerkung.

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

Das Ereignis-POJO, für das viel mehr Datenpunkte aus dem JSON-Objekt ausgewählt werden müssen, profitiert von dieser Technik mehr als das einfache Bild, das wir nur wünschen, src.

Erlebnis der Mobile App

Nachdem Sie nun wissen, wie AEM Content Services das native Mobile-Erlebnis fördern kann, können Sie die folgenden Schritte ausführen und Ihre Änderungen in der Mobile-App anzeigen.

Führen Sie nach jedem Schritt einen Pull-to-Aktualisierungsvorgang für die Mobile-App durch und überprüfen Sie die Aktualisierung des mobilen Erlebnisses.

  1. Erstellen und veröffentlichen new Event Inhaltsfragment
  2. Veröffentlichung rückgängig machen vorhandene Event Inhaltsfragment
  3. Veröffentlichen Sie ein Update im Tag Line

Herzlichen Glückwunsch

Sie haben das AEM Headless-Tutorial abgeschlossen!

Weitere Informationen zu AEM Content Services und AEM as a Headless CMS finden Sie in der anderen Dokumentation und den Aktivierungsmaterialien der Adobe:

Auf dieser Seite