要求

必备知识

  • 了解 AEM Mobile
  • 有关通过点播门户创建和发布内容的知识
  • Apache Cordova 的相关知识 (http://cordova.apache.org)

必要的产品

  • AEM Mobile

Cordova 可扩展性

利用 Experience Manager Mobile Runtime,用户能够通过 Apache Cordova 可扩展性和适用于测试的开发人员工具(测试版)创建丰富的应用程序体验。

HTML 文章中可用的 Cordova 可扩展性和基于 InDesign 的文章中的 Web 叠加使您能够利用以下功能:

  • 核心 Cordova 插件 – 利用核心 Cordova 插件,例如相机、联系人、地理位置和文件共享。
  • 自定义 Cordova 插件 – 利用来自 Cordova/Phonegap 社区的插件或创建您自己的插件。示例:条形码扫描和移动数据库。
  • 通过 Cordova 启用的特定于 AEM Mobile 的插件 – 适用于本地应用程序和内容元数据的插件。

 

核心 Cordova 插件

利用核心 Cordova 插件集,可使用 JavaScript 在 AEM Mobile 内容视图中访问本机设备功能。构建应用程序时,可按应用程序逐个启用或禁用插件。

提供了下列核心 Cordova 插件:

  • 相机 – 用于拍照和从系统的图像库中选择图像。
  • 联系人 – 允许访问设备联系人数据库。对于 Windows 应用程序,此插件唯一支持的 API 为“pickContact”。
  • 设备信息 – 描述设备的硬件和软件。
  • 设备移动(加速计)- 提供对移动传感器的访问权,此传感器可检测相对于当前设备方向的移动变化情况(在沿 x、y 和 z 轴的三个维度中)。
  • 设备方向(指南针)- 通常从设备顶部检测设备所指方向或前进方向的传感器。
  • 文件访问 - 允许对设备上驻留的文件进行读/写访问。
  • 文件传输 - 允许访问以上传和下载文件。
  • 地理位置 - 提供有关设备位置的 GPS 信息,如纬度和经度。
  • 全球化 - 使用特定于用户区域设置、语言和时区的操作。
  • 媒体 (cordova-plugin-media) - 提供在设备上录制和播放音频文件的功能。
  • 媒体捕获 - 提供对设备音频、图像和视频捕获功能的访问权。
  • 网络信息 - 有关设备移动电话网络和 Wi-Fi 连接以及设备是否具有 Internet 连接的信息。
  • 通知对话框 - 提供对一些本机对话框 UI 元素(如警报和蜂鸣声)的访问权。
  • 震动(仅 iOS、Android) – 一种使设备震动的方式。
  • WKWebView(仅限 iOS)– 您可以启用 WKWebView 插件以通过在 Mobile Safari 中呈现 HTML 文件的同一方式呈现这些文件。启用此选项,会在 iOS 9 设备上对 HTML 文章和 Web 叠加使用 WKWebView (WebKit) 而不是 UIWebView。在 iOS 8 设备上运行的应用程序仍将使用 UIWebView 呈现内容。(请参阅构建适用于 AEM Mobile 的 iOS 应用程序。)

有关详细信息,请参阅 Cordova 核心插件

有关示例,请参阅从 Github 下载示例

自定义 Cordova 插件

借助将自定义 Cordova 插件添加到 AEM Mobile 应用程序的功能,您可创建利用通过 Cordova/PhoneGap 社区获得的许多插件的内容,也可创建您自己的自定义插件。例如,您可在应用程序中启用移动条形码扫描、访问地理围栏和利用移动数据库。

构建使用自定义 Cordova 插件的应用程序的工作流程与构建应用程序的标准方法不同。您使用更新后的 AEM Mobile Developer Tool 指定要使用的 Cordova 插件。对于 iOS 应用程序,可使用此开发人员工具修改已下载的 .ipa。对于 Android 应用程序,可使用此开发人员工具创建 .apk 文件,随后可使用在创建或编辑 Android 应用程序时显示的新的“自定义应用程序 Shell”选项卡上传此文件。

请参阅 https://cordova.apache.org/plugins/

 

注意:

Cordova 插件此时限制为文章级别。需要打开文章,AEM Mobile 应用程序才能使用插件。对于 iOS 设备,如果文章是顶级集合中的第一个项,则文章将在应用程序启动时加载并保留在内存中。在用户浏览至其他内容后,该文章可继续运行并进行相同的 Cordova 插件调用。但是,顶级文章中的插件不可作为其他文章的参考。

 

特定于 AEM Mobile 的 Cordova 插件

特定于 AEM Mobile 的支持 Cordova 的插件是一组 JavaScript API,这些 API 提供了从文章内容视图中访问与 AEM Mobile Runtime 应用程序及其内容相关的特定数据的权限。要利用 AEM Mobile Cordova 插件,必须通过选中文章属性中的“启用可扩展性功能”选项来实现内容的可扩展性。这些插件在 AEM Mobile 应用程序中是自动启用的。

特定于 AEM Mobile 的 Cordova 插件包括下列 API:

  • 实体元数据访问(内容标题、授权)
  • 设备信息(平台、版本、标识符)
  • 推送通知信息(推送令牌)
  • 缩览图(背景和社交共享图像)

有关详细文档,请参阅使用特定于 AEM Mobile 的支持 Cordova 的插件

Cordova 插件示例

在应用程序中启用可扩展性功能

  1. 为引用 Cordova API 的内容视图或 Web 叠加创建源 HTML 内容。

    如果您的 HTML 代码引用核心 Cordova 插件或特定于 AEM Mobile 的支持 Cordova 的插件,请添加此行:

    <script type="text/javascript" src="cordova.js"></script>

    cordova.js 文件将自动包含在您的应用程序中;您只需在运行时加载它即可。

    Cordova 插件和特定于 AEM Mobile 的支持 Cordova 的插件首先需要完全加载 Cordova,然后才可安全使用。否则,调用某些 Cordova API 的脚本可能会因 Cordova 未加载而失败。

    当 Cordova 准备好后,它将触发 deviceready 事件,您可使用此事件确定何时启动您的代码。

    将此代码包括在 HTML 文件中:

    document.addEventListener("deviceready", function() {
        // Cordova is now ready,
        // start initializing the rest of the code
    }, false);

    有关更多信息,请参阅 Cordova 事件

  2. 对于使用这些插件的每项内容,请选中内容属性中的“启用可扩展性功能”。(在点播门户的“内容和布局”部分中编辑内容属性。)

    您还可通过 On-Demand Services API 为文章启用可扩展性功能。创建或更新文章实体元数据时,将参数 isTrustedContent 设置为 true(布尔值)。默认情况下,此值设置为 false。

    默认情况下,已为所有文章禁用“启用可扩展性功能”。您可在项目设置中更改默认设置。

  3. 对于使用核心(而不是自定义)Cordova 插件的应用程序,请构建支持 Cordova 插件的应用程序。(对于自定义 Cordova 插件,请执行下一节中的步骤。)

    如需构建应用程序以支持您要在内容中使用的 API,请使用“插件”选项卡。

    特定于 AEM Mobile 且支持 Cordova 的插件不需要启用插件。

    适用于 iOS 应用程序的插件

    注意:

    为获得最佳结果,请仅选择您计划使用的 Cordova 插件。

  4. 测试应用程序。

构建使用自定义 Cordova 插件的应用程序的工作流程

如果您在应用程序中使用自定义 Cordova 插件,则需要使用 AEM Mobile Developer Tool 来指定要使用的 Cordova 插件。然后,使用此开发人员工具修改 .ipa 文件 (iOS) 或创建可在构建 Android 应用程序时上传的 .apk 应用程序 Shell (Android)。

仅当您要在应用程序中使用自定义 Cordova 插件时,才需要执行这些步骤。使用此开发人员工具指定应用程序中使用的所有插件 - 自定义插件、核心插件和特定于 AEM Mobile 的插件。当您使用此开发人员工具修改或构建应用程序时,您在构建应用程序时在“插件”选项卡中指定的任何设置都将被忽略。使用此开发人员工具指定所有 Cordova 插件信息。

自定义 Cordova 插件视频

自定义 Cordova 插件视频

适用于使用自定义 Cordova 插件的应用程序的 iOS 工作流程

  1. 创建使用 Cordova 插件的内容。执行“在应用程序中启用可扩展性功能”中的上述步骤,以在使用 Cordova 插件的每篇文章中实现可扩展性。

  2. 在点播门户中,构建 iOS 应用程序并下载 .ipa 文件。(请参阅构建适用于 AEM Mobile 的 iOS 应用程序。)

  3. 使用 AEM Mobile Developer Tool 设置项目、测试内容并标识应用程序中使用的 Cordova 插件。然后,使用此开发人员工具修改下载的 .ipa 文件,使其包含您指定的 Cordova 信息。

    有关详细信息,请参阅下面有关使用 AEM Mobile Developer Tool 的部分。

  4. 对修改后的 .ipa 文件进行签名。

适用于使用自定义 Cordova 插件的应用程序的 Android 工作流程

  1. 创建使用 Cordova 插件的内容。执行“在应用程序中启用可扩展性功能”中的上述步骤,以在使用 Cordova 插件的每篇文章中实现可扩展性。

  2. 使用 AEM Mobile Developer Tool 设置项目、测试内容并指定计划在应用程序中使用的 Cordova 插件。然后,使用此开发人员工具创建一个包含您指定的 Cordova 信息的应用程序 Shell(.apk 文件)。

    有关详细信息,请参阅下面有关使用 AEM Mobile Developer Tool 的部分。

  3. 在点播门户中,构建一个 Android 应用程序。在“自定义应用程序 Shell”选项卡中,指定您使用此开发人员工具构建的 .apk 文件。

  4. 在点播门户中,下载 .apk 文件并对其进行签名。

使用 AEM Mobile Developer Tool

AEM Mobile Developer Tool 是一个帮助实现流畅的开发人员工作流程的命令行实用工具。此工具安装在开发人员的本地桌面上并提供下列功能:

  • 创建项目 – 创建已准备好进行本地开发的 AEM Mobile 项目文件夹结构。此项目结构仅用于测试目的。
  • 创建内容 – 创建能够使用可用的 Cordova 和 Runtime API 的 AEM Mobile 内容模板。
  • 添加 Cordova 插件和构建应用程序 – 如果您在应用程序中使用自定义 Cordova 插件,则使用此开发人员工具指定插件并构建应用程序 Shell (Android) 或修改包含您指定的 Cordova 插件的 .ipa 文件 (iOS)。
  • 在模拟器上运行 – (1) 启动模拟器;(2) 安装模拟器版本,并且 (3) 启动 AEM Mobile Runtime 模拟器版本以在本地环境中显示本地内容。如果目标模拟器已启动,则忽略步骤 1;如果模拟器版本已安装,则忽略步骤 2。
  • 帮助 – 显示命令行命令的帮助。

AEM Mobile 命令结构

两个主要工作流程都需要 AEM Mobile Developer Tool :

  • 开发并测试使用 Cordova 插件的内容。
  • 构建包含自定义 Cordova 插件的应用程序。

 

许可协议

注意:

通过安装下面列出的软件,即表示我承认我已阅读并同意 Adobe.com 使用条款中的条款。

安装依赖项

请根据操作系统安装必要的依赖项:

  • Mac OS X:
    • Node JS(建议使用最新版本;需要 v6.2.2 或更高版本)
    • 对于 iOS 开发,则为 Xcode(v7.0 或更高版本)
    • 对于 Android 开发,则为 Java(具体取决于 OS X 版本)
  • Windows:

 

安装 AEM Mobile 命令行工具 (Mac OS)

在 Windows 上进行开发时,请在 PowerShell 中而不是命令提示符下运行所有命令。

  1. 启动终端。

  2. 运行以下命令以通过 Node.js 安装 AEM Mobile 命令行工具:

    npm install -g aemm

    如果出现用户权限被拒绝消息,请尝试将上述脚本与“sudo”一起运行:

    sudo npm install -g aemm

    完成后,者将创建一个符号链接,以便您可从终端的任何目录中运行 AEM Mobile 命令行工具 (aemm)。

更新此开发人员工具

当更新的 AEM Mobile Developer Tool 版本变得可用时,立即再次运行 npm install -g aemm(或 sudo npm install -g aemm)。

配置 Android 环境

要模拟 Android 版本,您必须安装必需的 Android SDK 并配置 Android 模拟器运行环境。

  1. 从终端,运行以下命令以安装必需的 SDK 和配置:

    aemm platform install android
  2. 系统可能会提示您阅读 Android SDK 许可协议。请输入 y 接受协议或输入 n 表示拒绝。如果拒绝,将无法安装所需的 SDK 并运行 Android 模拟器。

仅当构建使用自定义 Cordova 插件的应用程序时需要配置适用于 iOS 的环境 (sudo aemm platform install ios)。

安装模拟器版本

AEM Mobile 命令行工具需要将在构建项目时安装并运行的 AEM Mobile Runtime 模拟器版本。使用模拟器测试 HTML 内容时需要此过程。构建使用自定义 Cordova 插件的应用程序不需要此过程。

要安装 AEM Mobile Runtime 模拟器版本,请执行下列操作之一:

  1. 从终端,运行以下命令以安装最新版的模拟器版本:

    aemm app install <platform>

    可用的 <platform> 值如下所示:iosandroid

您也可指定模拟器生成版本号。这将允许您安装可用模拟器版本列表中的旧版本。

  1. 从终端,获取可用模拟器版本的列表:

    aemm app install --list
  2. 在安装过程中指定模拟器版本:

    aemm app install <platform> <simulator-version>

    例如,在 iOS 上安装模拟器版本 2016.4:

    aemm app install ios 2016.4

    注意:

    如果您在尝试运行模拟器时收到错误消息,则请适时启动 Xcode 并签署许可协议。您还可在终端中输入 sudo xcodebuild –license accept

     

创建项目

AEM Mobile 命令行工具具有构建和测试项目所需的目录结构。此项目仅用于测试目的。测试内容后,您可将内容添加到点播门户中的您的项目中。

要设置此项目结构,请执行以下操作:

  1. 在终端中,导航到管理新项目要使用的目录。
  2. 创建目录结构(将“<project name>”替换为您的项目名称:
aemm project create <project-name>

这将使用指定的 <project-name> 创建一个目录并在其中创建一个名为“SampleArticle”的示例内容目录。

运行模拟器

现在已经创建项目目录,您可开始构建应用程序了。使用模拟器测试 HTML 内容时需要此过程。构建使用自定义 Cordova 插件的应用程序不需要此过程。

要打开模拟器(如果尚未打开),安装 AEM Mobile Runtime 模拟器版本(如果尚未安装)并运行此模拟器,请执行下列操作:

  1. 从终端,使用以下命令导航到创建的项目目录:

    cd <drag and drop the project-name directory>
  2. (可选)设置启动仿真器/模拟器将使用的默认方向。选项为横向或纵向模式。

    aemm config --set screenOrientation <<orientation>>

    例如,要将方向指定为横向模式:

    aemm config --set screenOrientation landscape

    使用此选项还将替换现有默认方向模式(如果有)。获取当前默认方向模式:

    aemm config --get screenOrientation

    删除当前默认方向模式:

    aemm config --unset screenOrientation
  3. 打开、安装和运行模拟器版本。

    aemm run <platform>

    可用的 <platform> 值如下所示:iosandroid

  4. run 命令将继续在终端中侦听,要终止它,请在同一终端窗口中输入以下组合键:Ctrl + C

模拟器应用程序启动后,您应能看到之前创建的“SampleArticle”。对“SampleArticle”目录中的文件进行任何更改都将导致模拟器应用程序自动刷新并显示更新后的内容。

运行模拟器时,请按 Command+Shift+H 返回主屏幕。

您可通过指定设备名称来指定要使用的模拟器设备。这在不同模拟器设备上测试时非常方便。

  1. 获取系统中当前安装的可用模拟器的列表:

    aemm run <platform> --list
  2. 从 <uuid><device-name> 的列表中,指定设备:

    aemm run <platform> --target "<device-name>"

    例如,要在采用 iOS 9.2 的 iPhone 6s 上运行模拟器:

    aemm run ios --target "iPhone-6s, 9.2"

创建内容

项目将创建默认 HTML 内容模板,但您可通过执行下列操作向列表添加更多模板:

  1. 从终端,导航到创建的项目目录:

     cd <drag and drop the project-name directory>
  2. 创建其他 HTML 内容:

    aemm article create <article-name>

    这将在项目目录中使用指定的 <article-name> 创建另一个 HTML 内容目录。

    HTML 内容文件夹结构就是一个包含 index.html 以及在 index.html 中映射的所有必需资源 (CSS/JS/images/etc) 的目录。因此,您也可以不运行上述脚本,而是自己在 <project-name directory>/www/<custom-folder> 中创建一个文件夹并在其中包含 index.html。如果您已在其他地方选取好 HTML 内容并且要测试 Cordova 可扩展性,这可能会有用。您可将 HTML 内容拖放至 <project-name directory>/www/ 文件夹中,模拟器将会识别它。

将 Cordova 插件添加到项目中(对于自定义 Cordova 插件)

仅当您要在应用程序中使用自定义 Cordova 插件时,才需要这些命令。如果您使用自定义 Cordova 插件,则使用 AEM Mobile Developer Tool 指定在应用程序中使用的 Cordova 插件 - 自定义插件、核心插件和 AEM-Mobile 特定的插件。

  1. 确保已安装 Node JS v6.2.2 或更高版本。

    如果您之前安装了 LTE 版本,建议您下载并安装最新版本。

  2. 从终端,导航到创建的项目目录:

    cd <drag and drop the project-name directory>
  3. 添加要包含在应用程序中的 Cordova 插件(核心插件和自定义插件):

    aemm plugin add [plugin_0] [plugin_1] [...]

    要支持在 AEM Mobile 应用程序中使用的标准 Cordova 插件:

    aemm plugin add aemm-plugin-application aemm-plugin-user aemm-plugin-context aemm-plugin-device aemm-plugin-inappbrowser aemm-plugin-fullscreen-video aemm-plugin-navto aemm-plugin-html-contract

    将默认视图从 UIWebView 更改为 WKWebView(与选择“插件”选项卡中的“WKWebView”的效果相同):

    aemm plugin add https://github.com/adobe-marketing-cloud-mobile/cordova-plugin-wkwebview-engine.git#2.0.0

    当前使用版本 2.0.0,但可能会更新。您可在以下位置找到要使用的最新版本:https://github.com/adobe-marketing-cloud-mobile/cordova-plugin-wkwebview-engine/releases

    要支持在 AEM Mobile 应用程序中使用的所有核心 Cordova 插件(删除您不需要使用的插件):

    aemm plugin add cordova-plugin-camera cordova-plugin-compat cordova-plugin-contacts cordova-plugin-device cordova-plugin-device-motion cordova-plugin-device-orientation cordova-plugin-dialogs cordova-plugin-file cordova-plugin-file-transfer cordova-plugin-geolocation cordova-plugin-globalization cordova-plugin-media cordova-plugin-media-capture cordova-plugin-network-information cordova-plugin-vibration

    使用此命令查看已添加至项目的插件的列表:

    aemm plugin list

    使用此命令删除之前添加的插件:

    aemm plugin remove [plugin]

    使用帮助命令查看其他信息:

    aemm plugin help

构建自定义应用程序(适用于自定义 Cordova 插件)

仅当您要在应用程序中使用自定义 Cordova 插件时,才需要这些命令。 

对于 iOS 应用程序,修改从点播门户的“应用程序”部分下载的 .ipa 文件。

对于 Android 应用程序,构建将在点播门户中构建应用程序时上传的应用程序 Shell .apk 文件。

请注意,您在构建应用程序时添加到“插件”部分中的任何设置将被忽略,并替换为使用 AEM Mobile Developer Tool 指定的设置。

注意:

“aemm”命令基于“cordova”命令构建,并且将许多命令委派给 cordova-lib。您可能遇到建议您尝试运行 cordova 命令的错误。大多数情况下,请先尝试将 cordova 替换为 aemm,然后执行建议的操作。

  1. (iOS) 配置 iOS 环境以允许 Xcode 构建未签名的框架。

    sudo aemm platform install ios
    aemm platform add ios
  2. 导航到已创建的项目目录并添加要包含在应用程序中的 Cordova 插件,如上一节中所述。

  3. 构建 Cordova 结构 (iOS) 或构建应用程序 Shell (Android)。

    aemm build [platform]

    iOS 示例:

    aemm build ios --device --release

    添加 --device 将为 iOS 设备而不是模拟器构建应用程序。

    添加 --release 将构建发行版而不是默认调试版。

    Android 示例:

    aemm build android --release

    注意:

    如果您无法构建应用程序,建议您卸载 NodeJS 并安装最新版本的 NodeJS(有关详细信息,请参阅 NodeJS 站点)。此外,运行 sudo npm uninstall -g aemm,然后运行 sudo npm install -g aemm

    解决代码签名错误消息问题

    如果您已更新 XCode,您可能会收到以下错误消息:“Error: CODE_SIGNING_REQUIRED must be set to NO in order to build for device.You can resolve this by running 'aemm platform install ios'.”

    如果您遇到此问题,变通方法是在终端中运行以下命令:

     

    sudo /usr/libexec/PlistBuddy -c "Set DefaultProperties:CODE_SIGNING_REQUIRED NO" "$(xcode-select -p)/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/SDKSettings.plist"

    更新 Xcode 后需要采用此变通方法。

  4. (iOS) 打包 .ipa 文件。

    aemm package ios --device <drag and drop .ipa file>

    示例:

    aemm package ios --device /Users/jdoe/Downloads/coffee_2062.ipa
  5. 执行下列操作之一:

    • (iOS) 对修改后的 .ipa 文件进行签名。
    • (Android) 上传您在点播门户中构建的 .apk 应用程序 Shell。构建、下载 .apk 文件并对其进行签名。

    有关此工作流程的详细信息,请参阅本文中的上一节内容,即构建使用自定义 Cordova 插件的应用程序。

在模拟器中测试自定义 Cordova 插件

运行下列命令:

aemm build ios
aemm package ios
aemm run ios

忽略 --device 参数以将命令应用于模拟器。需要运行 aemm package ios 以便将自定义插件打包到模拟器版本中。要还原原始模拟器版本,请重新运行 aemm app install ios 命令。

远程调试

从模拟器中,您可远程检查 HTML 内容,就如同您在现代浏览器中所做的那样。此功能允许您查看和操作 DOM 元素,检查控制台生成的任何错误或直接输入 JavaScript/jQuery 命令等。有关更多信息,请参阅以下内容:

打包内容

项目目录中的 HTML 内容还将位于为 AEM Mobile 点播服务门户生成内容文件所需的结构中。您可选择项目目录中的所有 HTML 内容并将其拖放至 AEM Mobile Packager 中。

有关更多信息,请参阅创建适用于 AEM Mobile 的 HTML 文章

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略