为演示网站启用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密钥,以便于数据交换。

  1. 登录Google帐户。

  2. 使用此链接打开云控制台 https://console.cloud.google.com.

  3. 通过单击工具栏左上角的当前项目名称(位于 Google Cloud平台 标签。

    Google Cloud Console

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

    新建项目

  5. 为项目指定名称并单击 创建.

    创建项目

  6. 确保已选择您的新项目,然后使用云控制台功能板中的汉堡包菜单,选择 API和服务.

    API和服务

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

    凭据

  8. 在对话框中,复制新的API密钥并保存以供将来使用。 单击 关闭 来关闭对话框。

启用Google工作表API

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

  1. 返回Google云控制台(位于 https://console.cloud.google.com ,然后使用汉堡包菜单选择 API和服务 — >库.

    API库

  2. 在API库屏幕中,滚动以查找我们的搜索 Google工作表API. 单击它。

    API库搜索

  3. Google工作表API 窗口单击 启用.

    Google工作表API

创建Google工作表电子表格

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

  1. 转到 https://docs.google.com 并创建新的Google工作表电子表格。

  2. 通过输入 32 单元格A2中。

  3. 通过单击 共享 窗口右上方和下方 获取链接 单击 更改.

    共享表

  4. 复制链接以用于下一步。

    共享链接

  5. 找到工作表ID。

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

测试您的天气服务

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

现在,您可以更改Google工作表电子表格中的温度值,ContextHub将在“看到天气变化”时动态更新Screens。

测试动态数据

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

  1. 访问沙盒创作实例。

  2. 通过导航到站点控制台 全局导航 — >站点 并选择以下页面 屏幕 — > <project-name> ->渠道 — >入口早晨(纵向).

    选择演示项目内容

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

  4. 在编辑器中,您可以看到内容。 请注意,一个图像以蓝色高亮显示,且角部带有定位图标。

    编辑器中的Screens内容

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

    编辑器中的Screens内容

根据温度从32°F(0°C)变为舒适70°F(21°C)的情况,特征图像从一杯暖茶变为一杯凉冰咖啡。

重要

仅将所述的Google工作表解决方案用于演示目的。 Adobe不支持在生产环境中使用Google工作表。

连接屏幕as a Cloud Service

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

或者,您也可以仅在AEMaCS的渠道编辑器中预览演示。

小贴士

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

配置AEM Screensas a Cloud Service

首先,您需要将Screens演示内容发布到AEM Screensas a Cloud Service并配置服务。

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

  2. 导航到as a Cloud Service于的屏幕 https://experience.adobe.com/screens 并登录。

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

    查看您的Screens组织

  4. 在左上角,单击 编辑设置 图标,形状像齿轮。

    编辑设置

  5. 提供AEMaaCS创作和发布实例的URL,您可在其中创建演示网站并单击 保存.

    屏幕设置

  6. 连接到演示实例后,Screens将提取您的渠道内容。 单击 渠道 来查看已发布的渠道。 填充信息可能需要一些时间。 您可以单击蓝色 同步 按钮以更新信息。

    演示渠道信息

  7. 单击 显示 中。 您尚未为演示创建任何内容。 我们将通过为每个We.Cafe创建文件夹来模拟We.Cafe的位置。 单击 创建 ,然后选择 文件夹.

    创建显示

  8. 在对话框中,提供文件夹名称,如 圣何塞 单击 创建.

  9. 单击以打开文件夹,然后单击 创建 ,然后选择 显示.

  10. 提供显示名称并单击 创建.

    创建显示

  11. 创建显示后,单击显示屏的名称以打开显示详细信息屏幕。 必须为显示屏分配从演示网站同步的渠道。 单击 分配渠道 中。

    渠道详细信息

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

    分配渠道

您可以对其他位置和显示内容重复这些步骤。 完成后,您将演示网站与AEM Screens链接起来,并完成了必要的配置。

您只需在AEMaCS的渠道编辑器中预览演示即可。

使用Screens播放器

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

生成注册代码

首先,您需要创建注册代码,以将播放器安全地连接到AEM Screensas a Cloud Service。

  1. 导航到as a Cloud Service于的屏幕 https://experience.adobe.com/screens 并登录。

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

    查看您的Screens组织

  3. 在左侧面板中,单击 播放器管理 — >注册代码 然后单击 创建代码 中。

注册代码

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

    创建代码

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

    注册代码

安装和配置播放器

  1. 从下载适用于您平台的播放器 https://download.macromedia.com/screens/ 然后安装它。

  2. 运行播放器并切换到 配置 选项卡,滚动到底部以单击并确认 重置为工厂 然后 更改为云模式.

    播放器设置

  3. 播放器将自动更改为 播放器注册 选项卡。 输入您之前生成的代码,然后单击 注册.

    播放器注册

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

    已注册的播放器

将播放器分配给显示屏

  1. 导航到as a Cloud Service于的屏幕 https://experience.adobe.com/screens 并登录。

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

    查看您的Screens组织

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

    播放器

  4. 单击播放器名称以打开其详细信息,然后单击 指定为显示 中。

    将播放器分配给显示

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

    分配显示屏

播放!

在您为播放器分配了显示屏后,AEM Screens as a Cloud Service会将内容交付到播放器中可见的位置。

入口纵向

入口景观

下一步

现在,您已完成AEM参考演示附加组件历程的这一部分,接下来您应该:

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

现在,您可以使用自己的演示网站探索AEM Screens的功能。 继续历程的下一节, 管理演示网站, 您将在此处了解可用于帮助您管理演示网站的工具以及如何删除这些工具。

您还可以在 “其他资源”部分 以进一步了解您在此历程中看到的功能。

其他资源

在此页面上