Experience League

Exit search

为演示网站启用AEM Screens

了解在演示网站上启用完整的AEM Screensas a Cloud Service体验的步骤。

迄今为止的故事

在AEM参考演示附加组件历程的上一文档中，创建演示网站、您基于“参考演示加载项”的模板创建了一个新的演示网站。您现在应该：

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

现在，您拥有自己的演示网站来探索和了解可用于帮助您管理演示网站的工具，接下来，您便可以为演示网站启用完整的AEM Screensas a Cloud Service体验。

目标

AEM参考演示附加组件包含适用于We.Cafe（一家咖啡店垂直业务）的AEM Screens内容。本文档可帮助您了解如何在AEM Screens上下文中执行We.Cafe演示设置。阅读后，您应该：

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

了解屏幕

AEM Screensas a Cloud Service是一款数字标牌解决方案，允许营销人员大规模创建和管理动态数字体验。借助AEM Screensas a Cloud Service，您可以创建引人入胜的动态数字标牌体验，以便在公共空间中使用。

小贴士

有关AEM Screensas a Cloud Service的完整详细信息，请参阅其他资源文档末尾的章节。

通过安装AEM参考演示附加组件，您可以在演示创作环境中自动为您提供AEM Screens的We.Cafe内容。中描述的步骤部署Demo Screens项目允许您通过发布该内容并部署到媒体播放器等来启用完整的AEM Screens体验。

了解演示内容

We.Cafe咖啡店由位于美国三个地点的三间咖啡店组成。这三家店都有三种相似的体验：

计数器上方的菜单板，带有两个或三个垂直面板
面向街道的入口显示屏，带有一个水平或垂直面板，邀请顾客进入商店
一个快速的自订亭亭，用一台垂直平板电脑绕过排队

注意

只有进入显示屏才能在当前版本的演示中进行测试。其他显示将在未来版本中显示。

演示的当前版本中未包含网亭。它将包含在未来版本中。

纽约的地点被认为是小店，空间不大，因此：

在旧金山和圣何塞，菜单板只有两个垂直面板，而不是三个
入口显示器垂直放置而不是水平放置

注意

如果您决定在连接屏幕as a Cloud Service 部分，请在显示下将位置创建为文件夹。请参阅其他资源部分，以了解有关显示屏的详细信息。

咖啡馆布局

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

We.Cafe布局

注意

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

入口

入口展会分开一天，从早到下午只会改变第一张图像。在序列的每次传递中，它还将宣传不同的特殊咖啡配方，每次使用按量计费的嵌入式序列来播放不同的产品。

在入口通道上的最后一幅图像也基于外部温度被定位（即动态改变），该图像可以如创建模拟数据源中。

部署Demo Screens项目

要在创建程序步骤中，必须基于模板创建网站。

如果您尚未创建We.Cafe演示网站，则只需按照创建演示网站中。选择模板时，只需选择 We.Cafe网站模板.

We.Cafe模板

向导完成后，您将在站点下找到部署的内容，并且可以像浏览任何其他内容一样进行导航和浏览。

We.Cafe内容

现在，您已拥有We.Cafe演示内容，接下来可以选择如何测试AEM Screens:

如果您只想在AEM Sites控制台中浏览内容，则只需在其他资源截！无需再执行任何操作。
如果您想要体验AEM Screens的完整动态功能，请继续下一部分，动态更改屏幕内容。

动态更改屏幕内容

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

创建模拟数据源

由于在演示期间或测试期间很难改变天气，因此必须模拟温度变化。我们将模拟天气服务，方法是将温度值存储在Google工作表电子表格中，AEM ContextHub将调用该电子表格来检索温度。

创建Google API密钥

首先，我们需要创建Google API密钥，以便于数据交换。

登录Google帐户。
使用此链接打开云控制台 https://console.cloud.google.com.
通过单击工具栏左上角的当前项目名称(位于 Google Cloud平台 标签。
在项目选择器对话框中，单击 新建项目.
为项目指定名称并单击创建.
确保已选择您的新项目，然后使用云控制台功能板中的汉堡包菜单，选择 API和服务.
在API和服务窗口的左侧面板中，单击凭据，然后单击 创建凭据 和 API密钥.
在对话框中，复制新的API密钥并保存以供将来使用。单击关闭来关闭对话框。

启用Google工作表API

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

返回Google云控制台(位于 https://console.cloud.google.com ，然后使用汉堡包菜单选择 API和服务 — >库.
在API库屏幕中，滚动以查找我们的搜索 Google工作表API. 单击它。
在 Google工作表API 窗口单击启用.

创建Google工作表电子表格

现在，您可以创建一个Google工作表电子表格来存储天气数据。

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

测试您的天气服务

现在，您已将数据源创建为Google工作表电子表格并启用通过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网站模板.
选择 配置 — > ContextHub配置 — > Google工作表 然后单击 下一个 在右上方。
配置应已预配置JSON数据。有两个值需要更改：
1. 替换 [your Google Sheets id] 和工作表ID 您之前保存过。
2. 替换 [your Google API Key] 和API密钥您之前保存过。
单击保存。