将移动 UI 应用程序添加到您的项目

学习目标

  • 将移动 UI 应用程序添加到您的项目

业务场景

在我们继续开发之前，我们希望保留后续开发的起点，即第 2 单元：Developing a Risk Management Application to Extend SAP S/4HANA 的最终状态。我们将使用分支来开始第 3 单元中各个用例的开发。让我们开始吧！

注意

如果您完成 Developing a Risk Management Application to Extend SAP S/4HANA 单元已有一段时间，并且您不再拥有可用的开发空间，那么如果您的 Git 仓库中仍保留着该项目，您可以将项目从 Git 仓库克隆到新的开发空间。注意：如果从 Git 仓库克隆项目，可能会出现自您最初创建项目以来产品侧引入的变更。在这些情况下，重用旧项目可能会遇到困难，因此我们建议重做 Accelerating Development With SAP Business Application Studio 单元和 Developing a Risk Management Application to Extend SAP S/4HANA 单元。

任务 1：执行前提条件

步骤

  1. 如果尚未完成，请设置您的开发环境。

  2. 按照 Accelerating Development With SAP Business Application Studio 单元中练习 Set Up Your Account for Full-Stack Application Development 所提供的步骤设置您的开发环境。

  3. 创建项目的克隆。

  4. 在 SAP Business Application Studio 中，选择 Simplified Git。 如果您在开发空间中已经拥有在 Developing a Risk Management Application to Extend SAP S/4HANA 单元中创建的项目，可以跳过在 GitHub 中创建项目克隆的第一步，直接继续第二步。

  5. 在 Simplified Git 窗格中，选择 Clone Repository。 系统将提示您输入仓库的 URL。 系统截图

  6. 选择您要克隆项目到的文件夹。例如：**/home/user/projects**。

  7. 选择 OK。 系统截图

  8. 输入您的 Git 凭据、用户名和令牌/密码。

  9. 选择 Open 以打开已克隆的仓库。 等待您的工作区打开。 系统截图 现在您拥有一个开发空间，其中包含截至 Developing a Risk Management Application to Extend SAP S/4HANA 单元的全部进度。

  10. 部署应用程序。

  11. 打开 Project Overview。

  12. 选择项目名称旁边的三个点以打开上下文菜单。

  13. 选择 Deploy Project。

  14. 检查您的应用程序是否完成部署。 这可能需要几分钟。

  15. 检查角色集合是否与您的应用程序关联。

  16. 不要忘记分配与您的应用程序关联的角色集合：RiskManagement-RiskManager-dev 和 RiskManagement-RiskViewer-dev。

任务 2：创建分支

步骤

  1. 创建用于开发移动应用程序的分支。 现在，让我们开始创建一个分支，以继续本单元的各项活动。

  2. 在 Simplified Git 窗格中，选择分支（main），然后选择 Add New Branch。 系统截图

  3. 为新分支提供名称。例如：MobileApp。 系统截图

  4. 选择以 main 为基础的分支。不要选择 origin/main，因为 Git 不允许在远程仓库上创建分支。 系统截图 在您的 Simplified Git 窗格中，现在应该可以看到您在本地创建的分支。

  5. 要将此分支发布到您的仓库，请选择 Publish Branch 按钮。 系统截图

  6. 系统提示时，输入您的 Git 用户名和令牌。 在接下来的步骤中，您将创建移动应用程序。当您将更改提交到 Git 仓库时，它们将位于新分支中。

任务 3：创建移动应用程序用户界面

在本任务中，我们将为在 Developing a Risk Management Application to Extend SAP S/4HANA 单元中创建的应用程序再创建一个用户界面（UI）。我们将使用已经创建并部署的相同数据服务。该 UI 将采用面向 iOS 和 Android 平台的跨平台移动应用程序形式，并使用原生 UI 控件。

步骤

  1. 创建移动应用程序用户界面。

  2. 导航到故事板的 UI Applications 磁贴，选择 + 图标以添加新的用户界面。 您可以在应用程序中定义的数据服务之上创建多个 UI。 系统截图 将显示一个新页面。

  3. 将 Display 名称改为：RisksMobile。输入您自行选择的描述。

  4. 选择 Data source 字段，然后从下拉列表中选择 RiskManagementService。这与我们在 Developing a Risk Management Application to Extend SAP S/4HANA 单元中为所创建的 UI 应用程序使用的是同一数据源。选择 Next。 系统截图

  5. 作为 UI Application Type，选择 Mobile-Centric, Freestyle Application。 此选项使您能够为 Android 和 iOS 系统创建具备多项设备特定功能的原生移动应用程序。

  6. 选择 Next。 系统截图

  7. 作为 UI Application Template，选择 CRUD。 CRUD 代表创建（Create）、读取（Read）、更新（Update）和删除（Delete）。CRUD 模板使您能够在应用程序的页面中编辑数据。

  8. 选择 Next。 系统截图

  9. 作为 Data Objects，选择 Mitigations 和 Risks。 数据对象定义了要在移动应用程序中显示的数据类型（实体）。

  10. 选择 Next。 系统截图

  11. 作为 List Picker，从下拉列表中选择 BusinessPartnerFullName。 这决定了在您的移动应用程序中作为选择选项显示的属性，用于您在上一步中选择的数据对象（Risks 和 Mitigations）。

  12. 选择 Finish。 系统截图

  13. 等待移动 UI 应用程序的 Page Map 在屏幕上打开。 此图展示了使用 SAP Mobile Development Kit（MDK）开发的移动 UI 应用程序的整体结构。它是一个基于元数据的应用程序开发平台，支持开发多通道应用程序，这些应用程序既可以在移动设备上原生运行，也可以作为浏览器中的 Web 应用程序运行。有关 MDK 应用程序的更多信息，请参阅 Mobile Development Kit。 系统截图

  14. 导航到页面图上的 Main 实体，选择（Configure Page）图标以配置该页面。 系统截图 在 Page Editor 中，您可以看到为移动 UI 应用程序选择的数据对象：Risks 和 Mitigations。

  15. 在 Properties 选项卡下，将 Caption 从 Main 重命名为 Risk Management。

  16. 同样，将 Name 改为 RiskManagement。 您的移动 UI 应用程序现在有了应用标题。 系统截图

任务 4：预览您的应用程序

Preview 功能允许您在工作区内运行应用程序的同时快速评估它。对于快速迭代开发，建议使用 Preview 功能，因为它不需要部署。

步骤

  1. 预览您的应用程序。

  2. 导航到活动栏，选择（Run Configurations）图标。

  3. 选择 + 图标以创建新的运行配置，用于预览您的移动 UI 应用程序。

  4. 从下拉列表中，选择 Risk Management (PT)。 系统截图

  5. 在 Create Run Configuration 页面中，由于我们要预览移动 UI 应用程序，请将运行配置重命名为 Run RiskManagement-Mobile。

  6. 其余选项保持原样，选择 Create。

  7. 我们有了一个新的运行配置来预览我们的移动 UI 应用程序。 系统截图

  8. 为 Run RiskManagement-Mobile 选择 Run Module 图标以执行该运行配置。 系统截图 如 Developing a Risk Management Application to Extend SAP S/4HANA 单元所述，该过程首先在工作区底部启动一个终端，然后是调试控制台，最后在新选项卡中打开预览页面。

  9. 在新选项卡中，选择 RisksMobile 磁贴以预览移动 UI 应用程序。 系统截图 您现在可以看到移动应用中显示的 Risks and Mitigations 选项卡，与我们在 Page Editor 中看到的一致。

  10. 选择 Risks 选项卡，查看 Risks 的条目列表。 系统截图

  11. 让我们编辑一个条目以验证该应用程序的 CRUD 功能。选择一个条目以查看其详细信息，然后选择 Edit。 系统截图 将打开一个弹出表单，其中 Risks 条目的各字段均可编辑。

  12. 按您的意愿修改该条目，然后选择 Save。 系统截图

  13. 返回列表视图，您现在可以看到更新后的条目。

注意

由于预览使用的是本地存储的模拟数据，您对条目所做的更改仅在当前预览会话中持久保存。开始新的预览会话时，（本地）数据库中的数据将被重置。 系统截图

  1. 关闭预览页面，然后在 SAP Business Application Studio 工作区中选择（Stop）图标以停止预览操作。 系统截图

任务 5：将应用程序部署到 Mobile Services

一旦您对应用程序的功能感到满意，就可以在移动设备上试用它。要在移动设备上运行应用程序，请将所有相关的应用程序元数据打包到一个包中，并将它部署到 SAP BTP 子账户中可用的 Mobile Services 实例。Mobile Services 充当移动设备与已部署数据源之间的代理。

注意

  • 数据源必须部署到云端；（工作区中）本地运行的数据服务无法被移动设备上运行的应用程序使用。- 如果对数据模型或服务应用了更新，请确保重新部署该服务。否则，您的应用程序可能与数据源不同步。

步骤

  1. 将您的应用程序部署到 Mobile Services。

  2. 导航到活动栏，选择 Project Overview 图标以打开 Project Overview。

  3. 展开 User Interface。

  4. 选择 RisksMobile 旁边的三个点（...）以打开上下文菜单，然后选择 Deploy to Mobile Services。 这可能需要几分钟。 系统截图 SAP Mobile Services 是一项基于云的解决方案，包含 MDK 等各种开发工具，为移动应用开发项目提供可复用的服务。这些服务帮助开发人员专注于交付业务需求，而不必为每个移动项目反复构建基础设施功能。有关更多信息，请参阅 SAP Mobile Services Documentation。

注意

您需要登录 Cloud Foundry 才能部署应用程序。如果您尚未登录 Cloud Foundry，请在部署应用时出现的通知弹窗上选择 Login，然后重新部署。

系统截图

  1. 导航回 Project Overview 并展开 RisksMobile。

  2. 选择 Map 以打开移动 UI 应用程序的 MDK Application Editor 页面，您可以在其中编辑与应用程序关联的属性和设置。

  3. 选择 Application QR Code。 您现在可以看到有助于您加入移动 UI 应用程序的 QR 码。 系统截图

任务 6：在移动设备上验证您的移动应用程序

应用程序部署到 Mobile Services 后，即被配置为使用部署到云端的数据服务。这些都在服务器端处理。但是，您仍然需要一个在设备上运行的移动客户端应用。通用移动客户端应用可在 Apple App Store 以及 Google Play Store 中获取。在设备上安装 SAP Mobile Services Client 后，需要对其进行设置以与您的 Mobile Service 实例对接。这通过以 QR 码形式发布的 URL 完成。配置移动客户端应用的过程也称为“客户端加入”。

步骤

  1. 在移动设备上验证您的移动应用程序。

  2. 拿起您的移动设备（无论是 Android 还是 iOS），打开 App/Play Store。

  3. 搜索 SAP Mobile Services Client 应用，下载并安装到您的移动设备上。

注意

如果您在使用移动服务应用时遇到问题，建议重新安装它。 系统截图

  1. 打开该应用并选择 Scan。 系统截图

  2. 用您的手机扫描 SAP Business Application Studio 中 MDK Application Editor 上的 QR 码，以将您的移动 UI 应用程序加入到移动设备。

  3. 选择 Continue。

  4. 使用您的 SAP 凭据登录该应用。 系统截图

  5. 选择一个至少八个字符的密码，用于解锁您的应用。此密码是企业安全策略的一部分。 系统截图

  6. 选择 Next 并重新输入密码。

  7. 选择 Done。 系统截图 您现在将看到一个弹窗，告知您的应用有新版本可用。在这种情况下，您所指的应用是您已部署到 Mobile Services 的应用程序，而不是客户端应用本身。

  8. 选择所需的选项以更新到新版本。 系统截图 恭喜！您现在可以看到移动 UI 应用程序已下载到您的移动设备。

  9. 选择 Risks 选项卡，查看 Risks 的条目列表。 系统截图 您可以看到这些条目使用的是实时数据，这与您之前看到的移动 UI 应用程序预览不同。这是因为您无法将工作区内运行的数据服务与 Mobile Services 一起使用。

  10. 选择一个条目以查看其详细信息，然后选择 Edit。 系统截图

  11. 更新 Risks Detail 页面。 使用以下数据：FieldValueTitleDeployment failureprio1descr:Deployment failure occurring frequentlyimpact100criticality3supplier_BusinessPartnerChoose any from the list

  12. 在 Update Risks Detail 页面中，按您的意愿修改该条目，然后选择 Save。 系统截图

  13. 返回列表视图，您现在可以看到更新后的条目。 系统截图

  14. 回到您的 SAP Business Application Studio 工作区。

  15. 通过打开 Project Actions，从 Project Overview 中选择 View Last Deployed 条目。 这将带我们进入我们最后部署到 Web 服务器的应用程序。 系统截图

注意

前面的屏幕截图显示了一个条目 Home。也可能出现 Home 在您的环境中不显示的情况。

  1. 选择 Risks 磁贴。 系统截图

  2. 选择 Go。 您现在可以看到您在移动应用上编辑的 Deployment failure 条目。 系统截图

  3. 创建一个新的风险条目。 使用以下数据：FieldValuetitleFile corruptionprio2descrBacklog files are corruptedimpact500criticality4supplier_BusinessPartnerChoose any from the list

  4. 选择 Create。 系统截图

  5. 使用一个 miti ID。 我们的条目没有 miti_ID，而它有助于为给定风险关联适当的缓解措施。出于演示目的，我们只需从另一个 Risk 条目中复制一个。

  6. 回到列表视图。

  7. 选择 Keep draft 并选择 OK 以保存条目的草稿。 系统截图

注意

只有在您尚未在步骤 3 中选择 Create 时，才需要执行此步骤。

  1. 打开另一个具有有效 miti_ID 的风险条目并复制它。

  2. 回到您的草稿风险条目，将 miti_ID 粘贴到相关字段中。

  3. 选择 Create。 系统截图

  4. 回到移动设备上的移动应用。

  5. 选择 Mitigation 选项卡。

  6. 根据您复制的 miti_id 搜索并选择该缓解措施条目，以打开详细信息页面。 系统截图

  7. 向下滚动到风险部分。 您现在可以看到与此缓解措施条目关联的 File corruption 风险。 您现在已经验证了移动应用的 CRUD 功能及其与 Web 应用程序的实时互操作性。您的数据持久保存在 HANA Cloud 数据库中。 系统截图