第7章 — 从移动设备应用程序使用AEM Content Services

本教程的第7章使用本机Android移动设备应用程序来使用AEM Content Services中的内容。

Android移动设备应用程序

本教程使用 简单的本机Android移动设备应用程序 以使用和显示由AEM Content Services公开的事件内容。

使用 Android 这在很大程度上并不重要,而且消费型移动应用程序可以在任何移动平台(例如iOS)的框架中编写。

Android之所以用作教程,是因为它可以在Windows、macOs和Linux上运行Android模拟器,而且它颇受欢迎,并且它可以编写为Java语言,这是AEM开发人员非常了解的一种语言。

本教程的Android移动设备应用程序为​ ​旨在指导如何构建Android移动设备应用程序或传达Android开发最佳实践,而是说明如何从移动设备应用程序使用AEM Content Services。

AEM Content Services如何推动移动应用程序体验

移动应用程序到Content Services的映射

  1. 徽标 由定义 Events API 页面的 图像组件.
  2. 标记行 如 Events API 页面的 文本组件.
  3. 事件列表 派生自事件内容片段的序列化,通过配置的公开 内容片段列表组件.

移动应用程序演示

配置移动应用程序以供非本地主机使用

如果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级别29.
      • AVD管理器初次启动时,系统会要求您下载版本化的API。 单击“Q”版旁边的“下载”链接,完成下载和安装。
    5. 单击 下一个 按钮。
    6. 单击 完成 按钮。
  9. 关闭 AVD管理器 窗口。

  10. 在顶部菜单栏中,选择 wknd-mobile.x.x.x运行/编辑配置 下拉菜单。

  11. 点按 运行 按钮(位于选定内容旁) 运行/编辑配置

  12. 在弹出窗口中,选择新创建的 Pixel 2 API 29 虚拟设备和点击 确定

  13. 如果 WKND Mobile 应用程序不会立即加载、查找并点按 WKND 图标(位于模拟器的Android主屏幕中)。

    • 如果模拟器启动,但模拟器的屏幕保持黑色,请点按 “模拟器”窗口旁边的“工具”窗口中的按钮。
    • 要在虚拟设备内滚动,请按住并拖动。
    • 要从AEM中刷新内容,请从顶部下拉直到显示“刷新”图标,然后释放。

移动设备应用程序代码

此部分重点介绍交互次数最多、依赖于AEM Content Services及其JSON输出的Android移动设备应用程序代码。

加载后,移动设备应用程序会发出 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 应用程序调用 HTTP GET 请求发布至AEM /content/wknd-mobile/en/api/events.model.json 收集内容以填充移动设备应用程序的UI。

  2. 从AEM收到内容后,移动设备应用程序的三个视图元素中的每一个都会将 徽标、标签行和活动列表,使用AEM中的内容进行初始化。

    • 要将AEM内容绑定到移动设备应用程序的视图元素,表示每个AEM组件的JSON是映射到Java POJO的对象,而该对象又绑定到Android视图元素。

      • 图像组件JSON →徽标POJO →徽标ImageView
      • 文本组件JSON → TagLine POJO →文本图像视图
      • 内容片段列表JSON →事件POJO →事件RecyclerView
    • 由于较大JSON响应中的已知位置,移动设备应用程序代码能够将JSON映射到POJO。 请记住,“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响应将传递到每个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 通过杰克逊 ObjectMapper 库。 下面将浏览图像POJO。

最后,徽标的 src 使用加载到Android ImageView中 Glide 辅助函数库。

请注意,我们必须提供AEM架构、主机和端口(通过 aemHost)到AEM发布实例,因为AEM Content Services将仅提供JCR路径(即 /content/dam/wknd-mobile/images/wknd-logo.png)到引用的内容。

图像POJO image-pojo

虽然可选,但使用 Jackson对象映射器 或其他库(如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的其他文档和支持材料:

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4