22.3建立EXP新闻实时仪表板

目标

  • 了解Project Firefly如何提供显示AEP信息的自定义实时仪表板。
  • 了解如何构建和运行此示例仪表板。

先决条件

在开始本练习之前,请确保您已在计算机上安装并设置NodeJS和Adobe I/OCLI。 有关详细信息,请参阅练习21.1 —— 设置环境

22.3.1下载源代码

此项目的源代码可在https://git.corp.adobe.com/IODevEnablement/poc-aep-realtime-dashboard上内部获得,并由Adobe I/O团队的Duy Nguyen开发。
但是,为避免让所有人了解如何从github存储库克隆或下载代码,我们已将此代码作为ZIP文件直接从此支持模块提供。 如果您习惯使用github,还可以从此处克隆代码。

要从此启用模块中获取源代码,请执行以下操作:

  • 此处下载。
  • 将ZIP文件解压到计算机上的某个位置。

22.3.2构建实时仪表板

要构建实时仪表板Firefly应用程序,请执行以下操作:

转到在练习22.3.1中解压ZIP文件的目录,例如poc-aep-realtime-dashboard-master

在目录中,运行npm install以安装应用程序的所有必需包。

npminstall

从您在练习22.2中创建和部署的[ldap]HelloWorld项目中复制.env环境文件(包含Adobe I/O运行时环境的所有配置)。

例如:cp <rmaurHelloWorld directory>/.env .(对于Mac OS)
copy <rmaurHellowWorld directory>\.env .(对于Windows)。

请注意,环境文件是所谓的隐藏文件,您可能在Finder/资源管理器中看不到该文件,因此最好使用命令行复制该文件。

cp

您可以使用您最喜爱的文本编辑器或命令检查.env环境文件。 它应该定义您的Adobe I/O命名空间和身份验证代码

更多

使用aio app deploy部署应用程序。 同样,您看到的输出可能与下面的屏幕截图不同,但请等到您看到​完成后,您的应用程??序现在处于联机状态

部署

您的最终仪表板应用程序现在可在aio app deploy命令输出中最后一个URL上找到;例如https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://133309-rmaurexpnews-development.adobeio-static.net/index.html

  • 复制 URL.
  • 打开​新的incognito​浏览器窗口并登录https://experience.adobe.com。
  • 确保您位于正确的组织(选中右上角):--envName--
  • 粘贴URL。 仪表板应用程序将变为可用。

aep仪表板应用

Project Firefly EXP News Realtime仪表板应用程序尚未提供任何信息,因为我们尚未告知它从何处接收其信息。 这是Adobe启动服务器端转发上的前一个启用模块与下一个练习相关的位置。

您现在已完成此练习。

下一步:22.4将EXP新闻数据收集到您的EXP新闻实时仪表板

返回模块22

返回到所有模块

在此页面上