第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何推動行動應用程式體驗

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

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

行動應用程式展示

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

如果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. 選擇步驟2中下載的APK檔案(wknd-mobile.x.x.x.apk),然後按一下​確定
    • 如果提示​建立新資料夾​或​使用現有,請選擇​使用現有
  6. 在Android Studio初次啟動時,在「專案」清單中按一下滑鼠右鍵,然後選取「開啟模組設定」
    • 在「模組> wknd-mobile.x.x.x >相依性標籤」下方,選取「Android API 29 Platform」。 點選「確定」以關閉並儲存變更。
    • 如果您未執行此動作,在嘗試啟動模擬器時會出現「請選取Android SDK」錯誤。
  7. 通過選擇​工具> AVD管理器​或點選頂欄中的​AVD管理器​表徵圖,開啟​AVD管理器
  8. 在​AVD管理器​窗口中,按一下​+建立虛擬設備……(如果您尚未註冊裝置)。
    1. 在左側,選擇​Phone​類別。
    2. 選擇​像素2
    3. 按一下​Next​按鈕。
    4. 選擇​Q,其中​API Level 29
      • 在AVD Manager初次啟動時,系統會要求您下載版本化API。 按一下「Q」版本旁的「下載」連結,然後完成下載和安裝。
    5. 按一下​Next​按鈕。
    6. 按一下​完成​按鈕。
  9. 關閉​AVD管理器​窗口。
  10. 在頂部菜單欄中,從​運行/編輯配置​下拉菜單中選擇​wknd-mobile.x.x.x
  11. 點選所選​運行/編輯配置​旁的​運行​按鈕
  12. 在彈出式選單中,選取新建立的​Pixel 2 API 29​虛擬裝置,然後點選​確定
  13. 如果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回應的特定位置尋找特定資訊。

高階程式碼流

  1. 開啟WKND Mobile應用程式會叫用HTTP GET請求至/content/wknd-mobile/en/api/events.model.json的AEM Publish,以收集要填入行動應用程式UI的內容。
  2. 在從接收內容時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

探索行動應用程式體驗

現在您已瞭解Content Services如何推動原生AEMMobile體驗,請運用您學到的知識來執行下列步驟,並查看您在Mobile應用程式中所反映的變更。

在每個步驟後,拉進以重新整理行動應用程式,並驗證行動體驗的更新。

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

恭喜

您已完成無頭教學AEM課程!

若要進一步了AEM解內容服務,並AEM以無頭CMS的形式,請造訪Adobe的其他檔案與啟用資料:

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now