第7章 — 從行動應用程式使用AEM內容服務

本教學課程的第7章使用原生Android行動應用程式來使用AEM內容服務中的內容。

Android行動應用程式

本教學課程使用​簡單的原生Android行動應用程式​來使用和顯示AEM Content Services公開的事件內容。

使用Android基本上不重要，且使用中的行動應用程式可在任何行動平台（例如iOS）的任何架構中撰寫。

Android可用來進行教學課程，因為能夠在Windows、macOs和Linux上執行Android模擬器，其普及程度，而且可以以Java的形式撰寫，這是AEM開發人員非常了解的語言。

本教學課程的Android行動應用程​​​式並非旨在指示如何建置Android行動應用程式或傳達Android開發最佳實務，而是說明如何從行動應用程式使用AEM內容服務。

AEM Content Services如何推動行動應用程式體驗

行動應用程式與內容服務的對應

  1. 由Events API頁面的​影像元件​所定義的​標誌。
  2. 標籤行，如Events API頁的​文本元件​上所定義。
  3. 此​事件清單​衍生自事件內容片段的序列化，透過設定的​內容片段清單元件​公開。

行動應用程式示範

為非本地主機使用配置行動應用

如果未在​http://localhost:4503​上執行AEM Publish，可在行動應用程式的Settings中更新主機和連接埠，以指向屬性AEM Publish主機/連接埠。

在本機執行行動應用程式

  1. 下載並安裝Android Studio以安裝Android模擬器。
  2. ​​下載Android APK 檔 案GitHub >資產> wknd-mobile.x.x.xapk
  3. 開啟​Android Studio
    • 首次啟動Android Studio時，會出現安裝Android SDK的提示。 接受預設值並完成安裝。
  4. 開啟Android Studio，然後選取​設定檔或Debug APK
  5. 選取步驟2中下載的APK檔案(wknd-mobile.x.x.x.apk)，然後按一下​OK
    • 如果提示​建立新資料夾​或​使用現有，請選擇​使用現有。
  6. 在Android Studio的初次啟動時，以滑鼠右鍵按一下「專案」清單中的​wknd-mobile.x.x.x，然後選取​開啟模組設定。
    • 在「模組> wknd-mobile.x.x.x >相依性」標籤下，選取「 Android API 29平台​」。​點選「確定」以關閉並儲存變更。
    • 若未這麼做，當您嘗試啟動模擬器時，會出現「請選取Android SDK」錯誤。
  7. 通過選擇​工具> AVD管理器​或點選頂欄中的​AVD管理器​表徵圖，開啟​AVD管理器。
  8. 在​AVD管理器​窗口中，按一下​+建立虛擬設備……​如果尚未註冊設備。
    1. 在左側，選擇​Phone​類別。
    2. 選擇​Pixel 2。
    3. 按一下​Next​按鈕。
    4. 選擇​Q（API級別29）。
      • AVD管理器初次啟動時，系統會要求您下載版本控制API。 按一下「Q」版本旁的「下載」連結，然後完成下載和安裝。
    5. 按一下​Next​按鈕。
    6. 按一下​完成​按鈕。
  9. 關閉​AVD管理器​窗口。
  10. 在頂端功能表列中，從​執行/編輯設定​下拉式清單中選取​wknd-mobile.x.x.x。
  11. 點選所選​執行/編輯設定​旁的​執行​按鈕
  12. 在快顯視窗中，選取新建立的​Pixel 2 API 29​虛擬裝置，然後點選​OK
  13. 如果WKND Mobile應用程式未立即載入，請在模擬器中從Android主畫面尋找並點選​WKND​圖示。
    • 如果模擬器啟動，但模擬器的螢幕保持黑色，請在模擬器窗口旁的模擬器的「工具」窗口中點選​power​按鈕。
    • 若要在虛擬裝置內捲動，請按一下並按住並拖曳。
    • 若要從AEM重新整理內容，請從上方下拉至「重新整理」圖示
      顯示和發行。

行動應用程式程式碼

本節重點說明最互動且依賴AEM Content Services的Android行動應用程式程式碼及其JSON輸出。

載入時，行動應用程式會將HTTP GET製作為/content/wknd-mobile/en/api/events.model.json，此為AEM Content Services端點，其設定為提供內容以驅動行動應用程式。

由於事件API(/content/wknd-mobile/en/api/events.model.json)的可編輯範本已鎖定，因此可對行動應用程式進行編碼，以在JSON回應中的特定位置中尋找特定資訊。

高階程式碼流量

  1. 開啟WKND Mobile應用程式時，會在/content/wknd-mobile/en/api/events.model.json叫用向AEM Publish的HTTP GET請求，以收集要填入行動應用程式UI的內容。
  2. 從AEM收到內容後，行動應用程式的三個檢視元素（標誌、標籤行和事件清單）的每個，都會以AEM的內容初始化。
    • 若要將AEM內容系結至行動應用程式的檢視元素，代表每個AEM元件的JSON會對應至Java POJO，而Java POJO又會系結至Android檢視元素。
      • 影像元件JSON →標誌POJO →標誌ImageView
      • 文字元件JSON → TagLine POJO →文字ImageView
      • 內容片段清單JSON →事件POJO →事件回收器檢視
    • 行動應用程式程式碼可將JSON對應至POJO，因為較大JSON回應內的已知位置。請記住， 「image」、「text」和「contentfragmentlist」的JSON索引鍵是由後備AEM元件的節點名稱指定。 如果這些節點名稱變更，行動應用程式將會中斷，因為它不知道如何從JSON資料中取得必要的內容。

叫用AEM Content Services端點

以下是行動應用程式MainActivity中程式碼的蒸餾，該程式碼負責叫用AEM內容服務以收集推動行動應用程式體驗的內容。

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(..) 是行動應用程式的初始化連結，並註冊3個自 ViewBinders 訂，負責剖析JSON並將值系結至 View 元素。

initApp(...) 接著會被呼叫，這會向AEM Publish上的AEM Content Services端點提出HTTPGET要求，以收集內容。收到有效的JSON回應時，JSON回應會傳遞至每個ViewBinder，該負責剖析JSON並將其系結至行動View元素。

剖析JSON回應

接下來，我們將看LogoViewBinder，它很簡單，但強調了幾個重要的注意事項。

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

bind(...)的第一行會透過索引鍵​:items → root →:items​向下導覽JSON回應，其代表元件所新增的AEM配置容器。

在此會檢查代表影像元件的​image​索引鍵(同樣地，此節點名稱→ JSON索引鍵很穩定)。 如果此物件存在，則會透過Jackson ObjectMapper資料庫讀取並對應至自訂影像POJO。 以下探討影像POJO。

最後，標誌的src會使用Glide協助程式庫載入至Android ImageView中。

請注意，我們必須將AEM結構、主機和連接埠（透過aemHost）提供給AEM Publish執行個體，因為AEM Content Services只會提供JCR路徑(ie. /content/dam/wknd-mobile/images/wknd-logo.png)到參考的內容。

影像POJO

雖然為選用項目，但使用Jackson ObjectMapper或其他資料庫（例如Gson）提供的類似功能，可協助將複雜的JSON結構對應至Java POJO，而無須繁瑣地直接處理原生JSON物件本身。 在此簡單案例中，我們會透過@JSONProperty附註，直接將src索引鍵從image JSON物件對應至影像POJO中的src屬性。

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

事件POJO需要從JSON物件中選取更多資料點，它比簡單影像更有好處，我們只想要src。

探索行動應用程式體驗

現在您已了解AEM Content Services如何促進原生行動體驗，運用您所學到的內容執行下列步驟，並查看行動應用程式中反映的變更。

在每個步驟後，提取並重新整理行動應用程式，並驗證行動體驗的更新。

  1. 建立並發佈​新Event內容片段
  2. 取消發佈現有Event內容片段​​
  3. 發佈更新至​標籤行

恭喜

您已完成AEM Headless教學課程！

若要深入了解AEM Content Services和AEM as a Headless CMS，請造訪Adobe的其他檔案和啟用資料：

本頁內容