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

返回到所有模块

在此页面上