在开始本练习之前,请确保已在计算机上安装和设置NodeJS和Adobe I/OCLI。 有关详细信息,请参阅练习2.1 — 设置环境。
为了开始使用Project Firefly,我们将使用Adobe I/O的控制台来设置我们的个人项目。
使用您的Adobe ID登录到Adobe开发人员控制台。
如果欢迎使用新的欢迎使用新的Adobe开发人员控制台向导,请单击跳过或单击下一步以逐步完成该向导。
确保在右上方选择正确的组织:--envName--
。
单击从模板创建项目。
在浏览模板向导屏幕中,选择项目Firefly。
在设置模板项目向导屏幕中,提供以下详细信息:
[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
.
单击Save以保存新工作区。
单击保存以保存项目。
您的项目将被创建,一段时间后,您将在概述屏幕中看到它。
单击“开发”拼贴中的Development,查看有关为项目Firefly应用程序创建的特定运行时环境的更多详细信息。
您可以看到作为应用程序的一部分创建的运行时命名空间环境;在示例中为133309-rmaurexpnews-development
我们现在已完成创建Adobe I/O运行时环境,Project Firefly应用程序需要该环境。
要构建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
登录后,您可以关闭浏览器窗口并返回到“终端”。 你会在终端上看到一个字符串。 这是您的用户令牌。 它会自动存储在您的配置中,从而允许项目Firefly使用令牌与Adobe开发人员控制台进行通话。
在Mac OS的“终端”或Windows的命令提示符下,开始创建新应用程序,您将其命名为[ldap]HelloWorld
。
示例:
% aio app init rmaurHelloWorld
系统将提示您一些有关您希望如何引导和配置应用程序的问题:
--envName--
,请键入选择组织后面的首个字符。 然后,从结果列表中选择--envName--
。rmaur
,然后从结果列表中选择rmaur Realtime Dashboard for EXP News
。选择工作区。选择在练习22.2.1中创建的Development
工作区。
您希望为此项目启用哪些Adobe I/O应用程序功能?
选择要包含的组件。选择 Actions: Deploy Runtime actions
。
要创建哪种类型的示例操作?
选择要生成的操作类型。选择 Generic
。
要将哪种类型的UI添加到项目中?
选择要生成的模板。选择 React Spectrum 3
。这表示我们将使用我们的设计系统Adobe频谱来构建应用程序。
我们将创建一个新的示例操作,以展示如何访问外部API。
要如何命名此操作?的问题。按返回以接受默认的(generic)
。
我们将创建一个新的示例操作,该操作将以云事件格式创建消息并发布到Adobe I/O事件。
要如何命名此操作?的问题。按返回以接受默认的(publish-events)
。
向导现在将为您的应用程序生成必需的代码,并应指示✔ App initialization finished!
成功完成。
转到新创建的应用程序目录[ladp]HelloWorld
并列出生成的文件。
% cd rmaurHelloWorld
% ls
(Mac OS)或(
> dir
Windows)
构建/测试/部署应用程序的方法有很多,但为实现此目的,我们保持其简单性,并将使用Experience CloudShell立即部署应用程序。
要构建和部署应用程序,请执行以下操作:
在Mac OS的“终端”或Windows的命令提示符下,确保您位于作为应用程序的一部分创建的目录([ldap]rmaurHelloWorld
)中,然后键入:
% aio app deploy
输出内容可能因您的情况和项目Firefly中发生的更改而有所不同,但您必须首先看到消息构建成功,您的应用程序已准备好部署??,稍后会部署,最终消息为完善,您的应用程序现在处于在线状态??。
部署应用程序后,您的确有2个URL来查看最终应用程序。
复制使用Experience CloudShell的URL(如所示),以在Experience CloudShell中查看已部署的应用程序:…。 该URL将使用您的Adobe I/O开发工作区名称作为唯一标识符。
打开新的隐身浏览器并浏览到https://experience.adobe.com。 登录后,请确保在右上方选择正确的组织:--envName--
。
在浏览器中粘贴步骤2中的URL。 如果一切正常,您将看到以下屏幕。
从左边栏中选择您的应用程序操作。 在运行应用程序后端操作中
现在,您已成功部署了您的第一个项目Firefly应用程序,并完成了本练习。
下一步:22.3构建EXP新闻实时仪表板