22.2 Firefly项目简介

目标

  • 了解萤火虫计划。
  • 了解如何使用Project Firefly设置示例项目。

先决条件

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

22.2.1设置您的个人项目

为了开始使用Project Firefly,我们将使用Adobe I/O的控制台来设置我们的个人项目。

使用您的Adobe ID登录到Adobe开发人员控制台

如果欢迎使用新的​欢迎使用新的Adobe开发人员控制台​向导,请单击​跳过​或单击​下一步​以逐步完成该向导。

欢迎向导

确保在右上方选择正确的组织:--envName--

组织

单击​从模板创建项目

在​浏览模板​向导屏幕中,选择​项目Firefly

模板萤火虫

在​设置模板项目​向导屏幕中,提供以下详细信息:

模板1

  • 项目标题: [ldapname] Realtime Dashboard for EXP News 将替换 [ldapname] 为您自己的AdobeLDAP名称,例如 rmaur Realtime Dashboard for EXP News.
  • 应用程序名称: [ldapname]EXPNews 将替换 [ldapname] 为您自己的AdobeLDAP名称,例如 rmaurEXPNews.
  • 确保选中了每个工作区​的“包含运行时”。

单击​+添加工作区​以添加其他工作区。

为工作区提供以下详细信息:

  • 工作区名称: Development.

  • 工作区描述: Development workspace for EXP News RT Dashboard.

模板2

单击​Save​以保存新工作区。

单击​保存​以保存项目。

您的项目将被创建,一段时间后,您将在概述屏幕中看到它。

概述

单击“开发”拼贴中的​Development,查看有关为项目Firefly应用程序创建的特定运行时环境的更多详细信息。

概述开发

您可以看到作为应用程序的一部分创建的运行时命名空间环境;在示例中为133309-rmaurexpnews-development

我们现在已完成创建Adobe I/O运行时环境,Project Firefly应用程序需要该环境。

22.2.2从Adobe I/OCLI登录

要构建Project Firefly应用程序示例,我们必须在Windows或Mac OS中使用命令行。 下面使用的屏幕截图基于Mac OS X,但执行的命令是相同的。

在Mac OS上打开终端或在Windows上打开命令提示符

转到驱动器上要创建第一个项目的特定位置。 例如,开发

% cd Development

登录,使用

% aio login

终端登录

应会打开一个浏览器窗口,要求您使用Adobe ID登录。 如果窗口未自动打开,您还可以复制粘贴浏览器中打印的URL以登录。

% aio login
Visit this url to log in: 
https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx

BrowserLoggedIn

登录后,您可以关闭浏览器窗口并返回到“终端”。 你会在终端上看到一个字符串。 这是您的用户令牌。 它会自动存储在您的配置中,从而允许项目Firefly使用令牌与Adobe开发人员控制台进行通话。

TerminalLoggedIn

22.2.3从Adobe I/OCLIBootstrap新应用程序

在Mac OS的“终端”或Windows的命令提示符下,开始创建新应用程序,您将其命名为[ldap]HelloWorld

示例:

% aio app init rmaurHelloWorld

系统将提示您一些有关您希望如何引导和配置应用程序的问题:

  • 选择组织。要快速搜索组织--envName--,请键入​选择组织​后面的首个字符。 然后,从结果列表中选择--envName--

步骤 1

  • 选择项目。要快速搜索项目,请键入LDAP名称,然后选择在练习22.2.1中创建的项目。例如,搜索rmaur,然后从结果列表中选择rmaur Realtime Dashboard for EXP News

步骤 1

选择工作区。选择在练习22.2.1中创建的Development工作区。

步骤 1

您希望为此项目启用哪些Adobe I/O应用程序功能?

选择要包含的组件。选择 Actions: Deploy Runtime actions

步骤 1

要创建哪种类型的示例操作?

选择要生成的操作类型。选择 Generic

步骤 1

要将哪种类型的UI添加到项目中?

选择要生成的模板。选择 React Spectrum 3。这表示我们将使用我们的设计系统Adobe频谱来构建应用程序。

步骤 1

我们将创建一个新的示例操作,以展示如何访问外部API。

要如何命名此操作?​的问题。按返回以接受默认的(generic)

步骤 1

我们将创建一个新的示例操作,该操作将以云事件格式创建消息并发布到Adobe I/O事件。

要如何命名此操作?​的问题。按返回以接受默认的(publish-events)

步骤 1

向导现在将为您的应用程序生成必需的代码,并应指示✔ App initialization finished!成功完成。

步骤 1

转到新创建的应用程序目录[ladp]HelloWorld并列出生成的文件。
% cd rmaurHelloWorld
% ls (Mac OS)或(
> dir Windows)

步骤 1

21.2.4构建和部署应用程序

构建/测试/部署应用程序的方法有很多,但为实现此目的,我们保持其简单性,并将使用Experience CloudShell立即部署应用程序。

要构建和部署应用程序,请执行以下操作:

在Mac OS的“终端”或Windows的命令提示符下,确保您位于作为应用程序的一部分创建的目录([ldap]rmaurHelloWorld)中,然后键入:
% aio app deploy

步骤 1

输出内容可能因您的情况和项目Firefly中发生的更改而有所不同,但您必须首先看到消息​构建成功,您的应用程序已准备好部署??,稍后会部署,最终消息为​完善,您的应用程序现在处于在线状态??

部署应用程序后,您的确有2个URL来查看最终应用程序。

复制使用Experience CloudShell的URL(如​所示),以在Experience CloudShell中查看已部署的应用程序:…。 该URL将使用您的Adobe I/O开发工作区名称作为唯一标识符。

打开新的隐身浏览器并浏览到https://experience.adobe.com。 登录后,请确保在右上方选择正确的组织:--envName--

在浏览器中粘贴步骤2中的URL。 如果一切正常,您将看到以下屏幕。

步骤 2

从左边栏中选择​您的应用程序操作。 在​运行应用程序后端操作​中

  • 从​操作(必需)​下拉列表中选择​常规
  • 单击​调用
  • 将在​results​框中看到此调用的结果。 您可以放大它以查看更多内容。

步骤 3

现在,您已成功部署了您的第一个项目Firefly应用程序,并完成了本练习。

下一步:22.3构建EXP新闻实时仪表板

返回到模块22

返回到所有模块

在此页面上