使用应用程序生成器创建 SAP Fiori 元素应用

学习目标

  • 使用应用生成器创建应用

准备用于开发的 SAP Business Application Studio

在本练习中,您将在 SAP Business Application Studio 中创建开发空间。在开始在 SAP Business Application Studio 中工作之前,需要执行此步骤。开发空间是一个环境,具有开发应用程序所需的工具、功能和资源。

前提条件

您已使用*"获取* ABAP RESTful 应用程序编程模型概览"单元入门练习中提供的详细信息在 SAP BTP 上创建免费试用账户。

观看模拟并执行步骤

此练习包含指导您完成详细步骤的模拟。模拟后可以找到所有步骤。您可以遵循模拟并使用自己的试用账户执行步骤。

练习开始练习(SAP 官方交互式练习)

步骤

  1. 通过访问 https://account.hanatrial.ondemand.com/ 打开 SAP BTP 主控室。

  2. 选择 SAP Business Application Studio

  3. 选择创建开发空间

  4. 选择 SAP Fiori 选项。

  5. 输入开发空间的名称,例如 UX406

  6. 从页面底部选择创建开发空间。您可以看到 UX406 开发空间已创建并且正在启动

  7. 状态更改为正在运行时,通过单击启动开发空间。

  8. 启动开发空间后,等待安装所有工具和模板。

结果

您已在 SAP Business Application Studio 中为您自己成功创建开发空间。您将在即将进行的练习中使用它。

创建管理差旅”应用

在本练习中,您将在 SAP Business Application Studio 的开发空间中创建应用。您将使用 ADT 使用在先前练习中创建的差旅服务。要从 SAP Business Application Studio 访问服务,您必须首先登录到 Cloud Foundry。

前提条件

您已完成本课中的 准备用于开发的 SAP Business Application Studio 练习。您还在"在后端配置 ABAP CDS 注释"单元(课程:创建对象页面)中完成了练习"向对象页面上的部分添加两个子部分"

观看模拟并执行步骤

此练习包含指导您完成详细步骤的模拟。模拟后可以找到所有步骤。您可以遵循模拟并使用自己的试用账户执行步骤。

练习开始练习(SAP 官方交互式练习)

步骤

  1. 使用 https://account.hanatrial.ondemand.com/ 链接打开 SAP BTP 主控室。

  2. 选择转到您的试用账户

  3. 全局账户视图的子账户标签中选择试用

  4. 复制 Cloud Foundry 环境中提到的 API 端点 URL。

  5. 打开 SAP Business Application Studio。

  6. 在 SAP Business Application Studio 中打开终端

  7. 从左侧菜单栏中选择第一个图标。

  8. 选择终端选项。

  9. 从后续菜单中选择新建终端。终端随即打开。

  10. 登录到 Cloud Foundry。

  11. 在终端中输入用户 $ 之后的 cf login。按键盘上的回车

  12. 终端中粘贴从 SAP BTP 主控室复制的 API 端点 URL。按键盘上的回车

  13. 在电子邮件选项中添加您的电子邮件地址。按键盘上的回车

  14. 输入密码。按键盘上的回车。您已登录到 Cloud Foundry。

  15. 根据现有模板中的 OData 服务生成项目。

  16. 在开发空间中选择从模板新建项目标签。

  17. 选择 SAP Fiori 应用程序选项,然后从视图底部选择开始

  18. 选择模板和目标位置步骤的可用模板中选择列表报表页面

  19. 从视图底部选择*"下一步"*。

  20. 为"数据源"字段生成的下拉列表中选择"连接到系统**"作为"**数据源和服务选择"选项。

  21. 选择 SAP Business Technology Platform 上的 ABAP 环境作为系统字段的选项。

  22. 选择 default_abap-trial 作为 ABAP 环境字段的选项。

  23. 要输入服务名称,请切换到 ADT。复制 ZUI_FE_TRAVEL_######_O4 作为服务绑定名称。

  24. 在服务字段中粘贴复制的服务名称。

  25. 单击页面底部的下一步

  26. 选择差旅作为数据源和服务选择部分的主要实体选项。

  27. 从视图底部选择*"下一步"*。

  28. 实体选择 视图中选择 主要**实体 作为 差旅

  29. 从视图底部选择*"下一步"*。

  30. 维护项目属性,例如 模块名称应用程序标题

  31. 向下滚动以添加部署配置、FLP 配置或配置高级选项。

  32. 从视图底部选择完成

  33. 从弹出对话框中选择选项将项目添加到工作区。项目随即生成,您可以看到应用程序信息

  34. 从左侧菜单栏中选择第二个图标浏览器

  35. 展开行程选项。您可以在浏览器视图中查看差旅项目。

结果

基于 OData 服务成功创建 SAP Fiori 元素应用。已选择清单报表页面作为应用的模板。

在 SAP Business Application Studio 中预览应用程序

在本练习中,您将从 SAP Business Application Studio 预览浏览器中的应用程序。

前提条件

您已完成本课中的练习创建管理差旅应用

观看模拟并执行步骤

此练习包含指导您完成详细步骤的模拟。模拟后可以找到所有步骤。您可以遵循模拟并使用自己的试用账户执行步骤。

练习开始练习(SAP 官方交互式练习)

步骤

  1. 打开 SAP Business Application Studio。

  2. 您已打开浏览器标签。

  3. 应用程序信息 中选择 预览**应用程序 选项。

  4. 预览选项中选择启动 fiori 运行 NPM 脚本。

  5. 应用预览将在浏览器中打开。

  6. 从列表报表页面中选择 执行 选项。

  7. 选择差旅。随即打开差旅的对象页面。

  8. 切换到 SAP Business Application Studio。在终端中,您可以查看已发送哪些请求。

  9. 通过在终端中按 CTRL+C 停止服务器。

  10. 服务器停止后,您可以看到另一个启动应用预览的选项。

  11. 从左侧菜单中选择资源管理器标签。

  12. 右键单击已展开差旅项目中的 webapp 文件夹。

  13. 从后续菜单中选择预览应用程序

  14. 从预览选项中选择启动 fiori 运行 NPM 脚本。

  15. 应用预览将在浏览器中打开。

结果

已在浏览器中成功启动应用预览。您还停止了服务器并再次启动了该服务器。