Experience League

Exit search

为演示站点启用 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 模板

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

We.Cafe 内容

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

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

动态更改 Screens 内容

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

创建模拟数据源

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

创建 Google API 密钥

首先，我们需要创建一个 Google API 密钥来促进数据交换。

登录 Google 帐户。
使用以下链接打开 Cloud Console：https://console.cloud.google.com。
通过单击 Google Cloud Platform 标签后面的工具栏左上方的当前项目名称来创建新项目。
在项目选择器对话框中，单击新建项目。
为项目命名，然后单击创建。
确保已选择您的新项目，然后在 Cloud Console 的仪表板中的汉堡菜单中，选择 API 和服务。
在“API 和服务”窗口的左侧面板中，单击窗口顶部的凭据，然后单击创建凭据和 API 密钥。
在对话框中，复制新的 API 密钥并将其保存以供将来使用。单击关闭以关闭对话框。

启用 Google Sheets API

要允许使用 API 密钥交换 Google Sheets 数据，您需要启用 Google Sheets API。

返回项目的 Google Cloud Console，网址为 https://console.cloud.google.com，然后使用汉堡菜单选择 API 和服务 -> 库。
在“API 库”屏幕中，滚动以查找对 Google Sheets API 的搜索。单击它。
在 Google Sheets API 窗口中，单击启用。

创建 Google Sheets 电子表格

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

转至 https://docs.google.com 并创建新的 Google Sheets 电子表格。
在单元格 A2 中输入 32 来定义温度。
通过单击窗口右上方的共享来共享文档，并在获取链接下，单击更改。
复制链接以进行下一步。
找到表 ID。
- 表 ID 是您在 d/ 之后和 /edit 之前复制的表链接中的随机字符串。
- 例如：
  - 如果您的 URL 为 https://docs.google.com/spreadsheets/d/1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30/edit#gid=0
  - 表 ID 为 1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30。
复制表 ID 以供将来使用。

测试您的天气服务

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

打开 Web 浏览器。

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

https://sheets.googleapis.com/v4/spreadsheets/<yourSheetID>/values/Sheet1?key=<yourAPIKey>

如果您收到类似于以下内容的 JSON 数据，则说明您已正确设置。

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

AEM Screens 可以使用此同一服务来访问模拟的天气数据。这将在下一步中进行配置。

配置 ContextHub

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

小贴士

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

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

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

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

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

测试动态数据

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

访问您的沙盒创作实例。
通过全局导航 -> 站点 导航到站点控制台，然后选择以下页面 Screens -> <project-name> -> 渠道 -> 入口早上显示(纵向)。
单击工具栏中的“编辑”或键入快捷键 e 以编辑页面。
在编辑器中，您可以查看内容。请注意，一个图像以蓝色突出显示，角落有一个定位图标。
将您在电子表格中输入的温度从 32 更改为 70，然后观察内容变化。

根据温度从冰冷的 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 并配置该服务。

发布演示 Screens 项目的内容。
在 https://experience.adobe.com/screens 上导航到 Screens as a Cloud Service 并登录。
在屏幕的右上方，确保您在正确的组织中。
单击左上方的齿轮型编辑设置图标。
提供已在其中创建演示站点的 AEMaaCS 创作和发布实例的 URL，并单击保存。
连接到您的演示实例后，Screens 将拉入您的渠道内容。单击左侧面板中的渠道查看发布的渠道。填充信息可能需要一些时间。您可以单击屏幕右上方的蓝色同步按钮以更新信息。
单击左侧面板中的显示。您尚未为您的演示创建任何显示。我们将通过为每个显示创建文件夹来模拟 We.Cafe 的位置。单击屏幕右上方的创建，并选择文件夹。
在对话框中，提供文件夹名称，例如 San Jose，然后单击创建。
通过单击文件夹以将其打开，然后单击右上方的创建并选择显示。
提供显示名称，然后单击创建。
创建显示后，单击显示屏的名称以打开显示详细信息屏幕。必须为显示分配一个已从您的演示站点同步的渠道。单击屏幕右上方的分配渠道。
在对话框中，选择渠道并单击分配。