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

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

Android行動應用程式

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

使用 Android 基本上不重要,且耗用的行動應用程式可在任何行動平台(例如iOS)的任何架構中編寫。

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

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

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

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

  1. 標誌 由定義 Events API page's 影像元件.
  2. 標籤行 定義於 Events API page's 文字元件.
  3. 事件清單 衍生自事件內容片段的序列化,透過設定 內容片段清單元件.

行動應用程式示範

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

如果未在上執行AEM Publish http://localhost:4503 可在行動應用程式的 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並選取 設定檔或除錯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 with API層級29.
      • 首次啟動AVD管理器時,系統會要求您下載版本控制API。 按一下「Q」版本旁的「下載」連結,然後完成下載和安裝。
    5. 按一下 下一個 按鈕。
    6. 按一下 完成 按鈕。
  9. 關閉 AVD管理員 窗口。
  10. 在頂端功能表列中選取 wknd-mobile.x.x.x運行/編輯配置 下拉。
  11. 點選 執行 按鈕 運行/編輯配置
  12. 在快顯視窗中,選取新建立的 Pixel 2 API 29 虛擬裝置和點選 確定
  13. 若 WKND Mobile 應用程式不會立即載入、尋找及點選 WKND 圖示。
    • 如果模擬器啟動,但模擬器的螢幕保持黑色,請點選 功率 按鈕(位於模擬器窗口旁)。
    • 若要在虛擬裝置內捲動,請按一下並按住並拖曳。
    • 若要從AEM重新整理內容,請從上方下拉至「重新整理」圖示顯示,然後發行。

行動應用程式程式碼

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

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

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

高階程式碼流量

  1. 開啟 WKND Mobile 應用調用 HTTP GET 請求AEM發佈於 /content/wknd-mobile/en/api/events.model.json 收集要填入行動應用程式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 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 →根→:items 代表元件所新增的AEM Layout Container。

在此會檢查名為 影像,代表影像元件(同樣地,此節點名稱→ JSON金鑰為穩定)。 如果此物件存在,則會讀取並對應至 自訂影像POJO 通過傑克森 ObjectMapper 程式庫。 以下探討影像POJO。

最後,標誌 src 會使用 Glide 協助程式庫。

請注意,我們必須提供AEM結構、主機和連接埠(透過 aemHost)以AEM Content Services形式發佈至AEM Publish例項只會提供JCR路徑(ie. /content/dam/wknd-mobile/images/wknd-logo.png)到參考的內容。

影像POJO

若為選用項目,請使用 Jackson ObjectMapper 或其他程式庫(例如Gson)提供的類似功能,可協助將複雜的JSON結構對應至Java POJO,而不需直接處理原生JSON物件本身。 在這個簡單的案例中,我們會將 srcimage 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. 建立和發佈 new Event 內容片段
  2. 取消發佈 現有 Event 內容片段
  3. 將更新發佈至 標籤行

恭喜

您已完成AEM Headless教學課程!

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

本頁內容