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

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

Android行動應用程式

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

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

Android是教學課程，因為它能夠在Windows、macOs和Linux上執行Android模擬器，而且其受歡迎程度也很高，而且它可以編寫成Java語言，這是開發人員十分熟悉的AEM語言。

本教學課程的Android行動應用程式並非要指示如何建立Android行動應用程式或傳達Android開發的最佳實務，而是要說明如何從行動應用程式使用AEMContent Services。

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

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

logo由Events API頁面的影像元件定義。
標籤行定義於Events API頁面的文字元件。
該事件清單是從事件內容片段的序列化衍生而來，該序列化通過配置的內容片段清單元件公開。

行動應用程式展示

設定非localhost使用的行動應用程式

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

在本機執行行動應用程式

下載並安裝Android Studio以安裝Android模擬器。
下載Android APK 檔案GitHub >資產> wknd-mobile.x.x.xapk
開啟Android Studio
- 在Android Studio初次啟動時，將會出現安裝Android SDK的提示。接受預設值並完成安裝。
開啟Android Studio並選取「設定檔」或「除錯APK」
選擇步驟2中下載的APK檔案(wknd-mobile.x.x.x.apk)，然後按一下確定
- 如果提示建立新資料夾或使用現有，請選擇使用現有。
在Android Studio初次啟動時，在「專案」清單中按一下滑鼠右鍵，然後選取「開啟模組設定」。
- 在「模組> wknd-mobile.x.x.x >相依性標籤」下方，選取「Android API 29 Platform」。點選「確定」以關閉並儲存變更。
- 如果您未執行此動作，在嘗試啟動模擬器時會出現「請選取Android SDK」錯誤。
通過選擇工具> AVD管理器或點選頂欄中的AVD管理器表徵圖，開啟AVD管理器。
在AVD管理器窗口中，按一下+建立虛擬設備……（如果您尚未註冊裝置）。
1. 在左側，選擇Phone類別。
2. 選擇像素2。
3. 按一下Next按鈕。
4. 選擇Q，其中API Level 29。
  - 在AVD Manager初次啟動時，系統會要求您下載版本化API。按一下「Q」版本旁的「下載」連結，然後完成下載和安裝。
5. 按一下Next按鈕。
6. 按一下完成按鈕。
關閉AVD管理器窗口。
在頂部菜單欄中，從運行／編輯配置下拉菜單中選擇wknd-mobile.x.x.x。
點選所選運行／編輯配置旁的運行按鈕
在彈出式選單中，選取新建立的Pixel 2 API 29虛擬裝置，然後點選確定
如果WKND Mobile應用程式未立即載入，請在模擬器的Android首頁畫面中尋找並點選WKND圖示。
- 如果模擬器啟動，但模擬器螢幕保持黑色，請在模擬器窗口旁邊的模擬器工具窗口中按一下power按鈕。
- 若要在虛擬裝置內捲動，請按住並拖曳。
- 若要重新整理內AEM容，請從上方向下拉，直到「重新整理」圖示
  顯示和釋放。

行動應用程式程式碼

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

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

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

高階程式碼流

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

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

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

剖析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的索引鍵，此索引鍵代表Image元件（同樣，此節點名稱→JSON索引鍵是穩定的）。如果此對象存在，則通過Jackson ObjectMapper庫讀取並映射到自定義映像POJO。下面將探索映像POJO。

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

請注意，我們必須AEM將架構、主機和連接埠（透過aemHost）提供至AEM Publish例項，因為AEMContent Services將僅提供JCR路徑(即 /content/dam/wknd-mobile/images/wknd-logo.png)至參考內容。

映像POJO

雖然可選，但是使用Jackson ObjectMapper或其他程式庫（例如Gson）提供的類似功能，可協助將複雜的JSON結構對應至Java POJO，而不需直接處理原生JSON物件本身。在此簡單案例中，我們會透過@JSONProperty註解，將image JSON物件的src索引鍵直接對應至「影像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;
    }
}

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