为演示站点启用 AEM Screens

了解在您的演示站点上启用完整 AEM Screens as a Cloud Service 的步骤。

注意

AEM Screens 演示需要将 Screens 加载项添加到 Cloud Manager 程序中。在此处了解如何添加它。

迄今为止的故事

在 AEM 参考演示加载项历程的上一个文档创建演示站点中,您基于参考演示加载项模板创建了一个演示站点。您现在应:

  • 了解如何访问 AEM 创作环境。
  • 了解如何基于模板创建站点。
  • 了解导航站点结构和编辑页面的基础知识。

现在您已拥有自己的演示站点,可以探索和了解有助于您管理演示站点的工具,并为演示站点启用完整的 AEM Screens as a Cloud Service 体验。

目标

AEM 参考演示加载项包含适用于咖啡店垂直业务 We.Cafe 的 AEM Screens 内容。本文档有助于您了解如何在 AEM Screens 的上下文中执行 We.Cafe 演示设置。阅读本文档后,您应:

  • 了解 AEM Screens 的基础知识。
  • 了解 We.Cafe 演示内容。
  • 了解如何为 We.Cafe 配置 AEM Screens。
    • 了解如何为 We.Cafe 创建 Screens 项目。
    • 能够使用 Google Sheets 和 API 配置模拟的天气服务。
    • 根据您的“天气服务”模拟动态变化的 Screens 内容。
    • 安装和使用 Screens 播放器。

了解 Screens

AEM Screens as a Cloud Service 是一种数字标牌解决方案,允许营销人员大规模创建和管理动态数字体验。借助 AEM Screens as a Cloud Service,您可以创建旨在公共场所使用的引人入胜的动态数字标牌体验。

小贴士

有关 AEM Screens as a Cloud Service 的完整详细信息,请参阅本文档末尾的其他资源部分。

通过安装 AEM 参考演示加载项,您可以在演示创作环境中自动获得适用于 AEM Screens 的 We.Cafe 内容。利用部署演示 Screens 项目中描述的步骤,您可以通过发布该内容并将其部署到媒体播放器等来启用完整的 AEM Screens 体验。

了解演示内容

We.Cafe 咖啡店在美国有三家店,分别在三个不同的位置。这三家店提供了三种相似的体验:

  • 柜台上方有一个菜单展示板,带有两个或三个垂直面板
  • 配备了一个水平或垂直面板的当街入口显示,旨在邀请客户进店
  • 配备了直立平板电脑的快速自助订餐亭,使客户无需排队
注意

当前版本的演示中只能测试入口显示。其他显示将包含在将来的版本中。

当前版本的演示中不包括该自助订餐亭。它将包含在将来的版本中。

假设纽约的店面较小,没有太多空间,因此:

  • 菜单展示板只有两个垂直面板,而不是像旧金山和圣何塞的店面那样有三个
  • 入口显示垂直放置,而不是水平放置
注意

如果您决定连接到连接 Screens as a Cloud Service 部分中的 Screens Cloud Service,请在显示下创建位置作为文件夹。有关显示的更多信息,请参阅本文档末尾的其他资源部分。

咖啡馆布局

We.Cafe 位置具有以下布局。

We.Cafe 布局

注意

屏幕的尺寸以英寸为单位。

入口

入口显示是分时段的,只会将第一张图像从早上更改为下午。在每次播放序列时,它还会宣传一种不同的特别咖啡制品,每次都使用计量的嵌入序列播放不同的物品。

入口渠道上的最后一个图像也是基于外部温度来确定的(即动态变化),可以像创建模拟数据源部分中所述的那样进行模拟。

部署演示 Screens 项目

若要在您在创建项目步骤中创建的沙盒中使用演示内容,必须基于模板创建站点。

如果您尚未创建 We.Cafe 演示站点,只需执行创建演示站点部分中的相同步骤即可。在选择模板时,只需选择 We.Cafe 网站模板

We.Cafe 模板

在向导完成后,您会发现内容已部署到 Sites 下,并且可以像导航和浏览任何其他内容一样导航和浏览该内容。

We.Cafe 内容

现在您已拥有 We.Cafe 演示内容,可以选择所需的测试 AEM Screens 的方式:

  • 如果您只想浏览AEM Sites 控制台中的内容,只需在其他资源部分中开始浏览和发现更多内容!无需执行其他操作。
  • 如果要体验 AEM Screens 的完整动态功能,请继续下一部分,即动态更改 Screens 内容

动态更改 Screens 内容

与AEM Sites 一样,AEM Screens 可以根据上下文动态更改内容。在 We.Cafe 演示中,已将渠道配置为根据当前温度显示不同的内容。为了模拟这种体验,您必须创建自己的简单天气服务。

创建模拟数据源

由于在演示期间或测试时很难更改天气,因此必须模拟温度变化。天气服务是通过在 Google Sheet 中存储温度值来模拟的,AEM 的 ContextHub 会调用该表格来检索温度。

创建 Google API 密钥

首先,您必须创建一个 Google API 密钥来促进数据交换。

  1. 登录 Google 帐户。

  2. 使用以下链接打开 Cloud Console:https://console.cloud.google.com

  3. 通过单击 Google Cloud Platform 标签后面的工具栏左上方的当前项目名称来创建项目。

    Google Cloud Console

  4. 在项目选择器对话框中,单击​新建项目

    新建项目

  5. 为项目命名,然后单击​创建

    创建项目

  6. 确保已选择您的新项目,然后在 Cloud Console 的仪表板中的汉堡菜单中,选择 API 和服务

    API 和服务

  7. 在“API 和服务”窗口的左侧面板中,单击窗口顶部的​凭据,然后单击​创建凭据​和 API 密钥

    凭据

  8. 在对话框中,复制新的 API 密钥并将其保存以供将来使用。点击​关闭,这样您就可以退出该对话框。

启用 Google Sheets API

要允许使用 API 密钥交换 Google Sheets 数据,您必须启用 Google Sheets API。

  1. 返回项目的 Google Cloud Console,网址为 https://console.cloud.google.com,然后使用汉堡菜单选择 API 和服务 -> 库

    API 库

  2. 在“API 库”屏幕中,滚动以查找您对 Google Sheets API 的搜索,然后单击它。

    API 库搜索

  3. Google Sheets API 窗口中,单击​启用

    Google sheets API

创建 Google Sheets 电子表格

现在您可以创建 Google Sheets 电子表格来存储天气数据。

  1. 转至 https://docs.google.com 并创建 Google Sheets 电子表格。

  2. 在单元格 A2 中输入 32 来定义温度。

  3. 通过单击窗口右上方的​共享​来共享文档,并在​获取链接​下,单击​更改

    共享表

  4. 复制链接以进行下一步。

    共享链接

  5. 找到表 ID。

    • 表 ID 是您在 d/ 之后和 /edit 之前复制的表链接中的随机字符串。
    • 例如:
      • 如果您的 URL 为 https://docs.google.com/spreadsheets/d/1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30/edit#gid=0
      • 表 ID 为 1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30
  6. 复制表 ID 以供将来使用。

测试您的天气服务

现在,您已将数据源创建为 Google Sheets 电子表格并支持通过 API 访问,请对其进行测试以确保您的“天气服务”可供访问。

  1. 打开 Web 浏览器。

  2. 输入以下请求,并替换您之前保存的表 ID 和 API 密钥值。

    https://sheets.googleapis.com/v4/spreadsheets/<yourSheetID>/values/Sheet1?key=<yourAPIKey>
    
  3. 如果您收到类似于以下内容的 JSON 数据,则说明您已正确设置。

    {
      "range": "Sheet1!A1:Z1000",
      "majorDimension": "ROWS",
      "values": [
        [],
        [
          "32"
        ]
      ]
    }
    

AEM Screens 可以使用相同的服务访问下一步配置的模拟天气数据。

配置 ContextHub

AEM Screens 可以根据上下文动态更改内容。在 We.Cafe 演示中,利用 AEM 的 ContextHub 将渠道配置为根据当前温度显示不同的内容。

小贴士

有关 ContextHub 的完整详细信息,请参阅本文档末尾的其他资源部分。

在显示屏幕内容时,ContextHub 会调用天气服务来查找当前温度以决定要显示的内容。

在演示中,可以更改表中的值。ContextHub 会识别这一点,并且内容会根据更新后的温度在渠道中进行调整。

  1. 在 AEMaaCS 创作实例上,转至​全局导航 -> 工具 ->站点-> ContextHub
  2. 选择与您从 We.Cafe 网站模板​创建的 Screens 项目同名的配置容器。
  3. 选择​配置 -> ContextHub 配置 -> Google Sheets,然后单击右上方的​下一步
  4. 该配置应已具有预配置的 JSON 数据。有两个值必须更改:
    1. [your Google Sheets id] 替换为您之前保存的表 ID
    2. [your Google API Key] 替换为您之前保存的 API 密钥
  5. 单击“保存”。

现在您可以更改 Google Sheet 电子表格中的温度值,ContextHub 会在“显示天气变化”时动态更新 Screens。

测试动态数据

现在,AEM Screens 和 ContextHub 已连接到您的天气服务,您可以对其进行测试以了解 Screens 如何动态更新内容。

  1. 访问您的沙盒创作实例。

  2. 通过​全局导航 -> 站点 导航到 Sites 控制台,然后选择以下页面 Screens -> <project-name> -> 渠道 -> 入口早上显示(纵向)

    选择演示项目内容

  3. 单击工具栏中的​“编辑”​或键入快捷键 e 以编辑页面。

  4. 在编辑器中,您可以查看内容。一个图像以蓝色突出显示,角落有一个定位图标。

    编辑器中的 Screens 内容

  5. 将您在电子表格中输入的温度从 32 更改为 70,然后观察内容变化。

    编辑器中的 Screens 内容

根据温度从冰冷的 32°F (0°C) 到舒适的 70°F (21°C) 的变化,此特色图像从一杯热茶变成了一杯凉爽的冰咖啡。

重要

仅使用描述的 Google Sheets 解决方案进行演示。Adobe 不支持在生产环境中使用 Google Sheets。

连接 Screens as a Cloud Service

如果您还想设置真正的数字标牌体验,包括在数字标牌设备或计算机上运行的播放器,请执行后续步骤。

或者,您可以在 AEMaaCS 上的渠道编辑器中预览演示。

小贴士

有关渠道编辑器的完整详细信息,请参阅本文档末尾的其他资源部分。

配置 AEM Screens as a Cloud Service

首先,您必须将 Screens 演示内容发布到 AEM Screens as a Cloud Service 并配置该服务。

  1. 发布演示 Screens 项目的内容。

  2. https://experience.adobe.com/screens 上导航到 Screens as a Cloud Service 并登录。

  3. 在屏幕的右上方,确保您在正确的组织中。

    查看 Screens 组织

  4. 在左上方的角落,单击​编辑设置​图标(齿轮形状)。

    编辑设置

  5. 提供已在其中创建演示站点的 AEMaaCS 创作和发布实例的 URL,并单击​保存。

    Screens 设置

  6. 连接到您的演示实例后,Screens 会拉入您的渠道内容。单击左侧面板中的​渠道​查看发布的渠道。填充信息可能需要一些时间。您可以单击屏幕右上方的蓝色​同步​按钮以更新信息。

    演示渠道信息

  7. 单击左侧面板中的​显示。您尚未为您的演示创建任何显示。您可以通过为每个显示创建文件夹来模拟 We.Cafe 的位置。单击屏幕右上方的​创建,并选择​文件夹

    创建显示

  8. 在对话框中,提供文件夹名称,例如 San Jose,然后单击​创建

  9. 通过单击文件夹以将其打开,然后单击右上方的​创建​并选择​显示

  10. 提供显示名称,然后单击​创建

    创建显示

  11. 创建显示后,单击显示屏的名称以打开显示详细信息屏幕。 必须为显示分配一个已从您的演示站点同步的渠道。单击屏幕右上方的​分配渠道

    渠道详细信息

  12. 在对话框中,选择渠道并单击​分配

    分配渠道

您可以对其他位置和显示重复这些步骤。完成后,您的演示站点便与 AEM Screens 链接并且已完成必要的配置。

您可以在 AEMaaCS 上的渠道编辑器中预览演示。

使用 Screens 播放器

要在实际屏幕上查看内容,您可以下载播放器并在本地进行设置。AEM Screens as a Cloud Service 会将内容交付给播放器

生成注册码

首先,您必须创建一个注册码以将播放器安全地连接到 AEM Screens as a Cloud Service。

  1. https://experience.adobe.com/screens 上导航到 Screens as a Cloud Service 并登录。

  2. 在屏幕的右上方,确保您在正确的组织中。

    查看 Screens 组织

  3. 在左侧面板中,单击​播放器管理 -> 注册码,然后单击屏幕右上方的​创建代码

注册码

  1. 输入此代码的名称,然后单击​创建

    创建代码

  2. 创建此代码后,它将显示在列表中。单击以复制此代码。

    注册码

安装和配置播放器

  1. https://download.macromedia.com/screens/ 下载并安装平台的播放器。

  2. 运行播放器,然后切换到​配置​标签。

  3. 滚动到底部,然后点击并确认​恢复出厂设置​和​更改为云模式​选项。

    播放器设置

  4. 播放器会自动变为​播放器注册​选项卡。输入您之前生成的代码,然后单击​注册

    播放器注册

  5. 切换到​系统信息​选项卡以确认播放器已注册。

    已注册的播放器

将播放器分配给显示

  1. https://experience.adobe.com/screens 上导航到 Screens as a Cloud Service 并登录。

  2. 在屏幕的右上方,确保您在正确的组织中。

    查看 Screens 组织

  3. 在左侧面板中,单击​播放器管理 -> 播放器,您会看到之前安装并注册的播放器。

    播放器

  4. 单击播放器名称,即可打开其详细信息。点击​分配,以在屏幕右上角显示。

    将播放器分配给显示

  5. 在对话框中,选择您之前创建的显示,然后单击​选择

    分配显示

播放!

将显示分配给播放器后,AEM Screens as a Cloud Service 会将内容投放给可显示它的播放器。

入口显示(纵向)

入口显示(横向)

后续内容

现在您已完成 AEM 参考演示加载项历程的这一部分,您应:

  • 了解 AEM Screens 的基础知识。
  • 了解 We.Cafe 演示内容。
  • 了解如何为 We.Cafe 配置 AEM Screens。

您现在可以使用自己的演示站点来探索 AEM Screens 的功能。 继续历程的下一部分,即管理您的演示站点,了解可用于帮助您管理演示站点的工具以及如何移除它们。

您也可以查看“其他资源”部分中的一些其他资源,详细了解您在此历程中看到的功能。

其他资源

在此页面上