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

教學課程的第7章使用原生Android行動應用程式來使用AEM Content Services的內容。

Android行動應用程式

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

使用 Android 這在很大程度上並不重要，而且耗用的行動應用程式可以在任何行動平台的任何框架中撰寫，例如iOS。

Android之所以用於教學課程，是因為其可在Windows、macOs和Linux上執行Android模擬器、其受歡迎程度以及可寫成Java (AEM開發人員完全瞭解的語言)。

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

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

1. 此 標誌 如下列專案所定義： Events API 頁面的 影像元件.
2. 此 標籤行 如 Events API 頁面的 文字元件.
3. 此 事件清單 衍生自事件內容片段的序列化，透過設定的 內容片段清單元件.

行動應用程式示範

設定行動應用程式以供非localhost使用

如果AEM Publish未在上執行 http://localhost:4503 主機和連線埠可在行動應用程式的 Settings 指向屬性AEM發佈主機/連線埠。

在本機執行行動應用程式

1. 下載並安裝 Android Studio 安裝Android模擬器。
2. 下載 Android APK 檔案 GitHub >資產> wknd-mobile.x.x.xapk
3. 開啟 Android Studio
   • Android Studio初次啟動時，系統會提示您安裝 Android SDK 將會出現。 接受預設值並完成安裝。
4. 開啟Android Studio並選取 設定檔或偵錯APK
5. 選取APK檔案(wknd-mobile.x.x.x.apk)下載，然後按一下 確定
   • 如果系統提示 建立新資料夾，或 使用現有，選取 使用現有.
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. 在左側，選取 電話 類別。
   2. 選取 畫素2.
   3. 按一下 下一個 按鈕。
   4. 選取 Q 替換為 API Level 29.
      • AVD Manager初次啟動時，系統會要求您下載已建立版本的API。 按一下「Q」版旁的「下載」連結，完成下載和安裝。
   5. 按一下 下一個 按鈕。
   6. 按一下 完成 按鈕。
9. 關閉 AVD管理員 視窗。
10. 在頂端功能表列中，選取 wknd-mobile.x.x.x 從 執行/編輯設定 下拉式清單。
11. 點選 執行 所選專案旁的按鈕 執行/編輯設定
12. 在快顯視窗中，選取新建的 Pixel 2 API 29 虛擬裝置和點選 確定
13. 如果 WKND Mobile 應用程式未立即載入、尋找並點選 WKND 圖示加以檢視（位於模擬器的Android首頁畫面中）。
    • 如果模擬器啟動，但模擬器的畫面仍保持黑色，請點選 power 「模擬器」視窗旁的「工具」視窗中的按鈕。
    • 若要在虛擬裝置內捲動，請按住並拖曳。
    • 若要從AEM重新整理內容，請從上方下拉直到「重新整理」圖示顯示，然後釋放。

行動應用程式程式碼

本節重點說明互動最多、且取決於AEM Content Services及其JSON輸出的Android行動應用程式程式碼。

載入時，行動應用程式會執行 HTTP GET 至 /content/wknd-mobile/en/api/events.model.json 這是設定為提供內容以驅動行動應用程式的AEM Content Services端點。

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

高階程式碼流程

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

叫用AEM Content Services端點

以下為行動應用程式程式碼中的 MainActivity 負責叫用AEM Content Services來收集推動行動應用程式體驗的內容。

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(...) 透過索引鍵向下導覽JSON回應 ：items → root → ：items 代表新增元件的AEM配置容器。

從此處，會對名為的金鑰進行檢查 影像，代表影像元件(再次強調，此節點名稱→JSON索引鍵穩定非常重要)。 如果此物件存在，則會讀取並對應至 自訂影像POJO 透過Jackson ObjectMapper 資料庫。 以下說明影像POJO。

最後，圖志的 src 會使用載入到Android ImageView中 Glide 協助程式庫。

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

影像POJO

雖然可選用，但使用 Jackson ObjectMapper 或由其他程式庫（例如Gson）提供的類似功能，有助於將複雜的JSON結構對應到Java POJO，而不必費心直接處理原生JSON物件本身。 在這個簡單的案例中，我們會將 src 索引鍵來自 image JSON物件，至 src 屬性直接透過 @JSONProperty 註解。

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的其他檔案和啟用資料：

• 使用內容片段
• AEM WCM Core Components使用手冊
• AEM WCM核心元件程式庫
• AEM WCM核心元件GitHub專案
• 元件匯出程式的程式碼範例

Business.Adobe.com 資源