SAP Build Apps 实战系列之二：低代码开发的核心概念 - 逻辑控制流和数据流

本文阅读目录：

• 低代码开发的核心概念：逻辑控制流和数据流
• 绘制允许用户输入产品 ID 的输入控件
• 给产品 ID 输入控件完成数据绑定
• Restful API 的调用设计
• 如何通过 Search 按钮触发 Restful API
• 如何显示 Restful API 调用结果

本系列前一篇文章，笔者已经向大家介绍了如何在 SAP BTP 上订阅免费的 SAP Build Apps 服务。

SAP Build Apps 实战系列之一：低代码开发环境的准备工作

大家按照我的文章动手操作之后，就能够在浏览器里打开 SAP Build Apps 的控制台页面了。

https://jerry-abap-never-die.us10.build.cloud.sap/lobby

点击上图的 Create 按钮，就能新建低代码应用了。

上图浏览器地址栏里 url 包含的片段 jerry-abap-never-die 是 SAP BTP Subaccount 的 SubDomain 名称，在 BTP 控制台里可以自定义：

本文会介绍如何使用 SAP Build Apps，不需编写一行代码，仅通过可视化拖拽的方式，就能开发出下面这个 GIF 动画里展示的应用效果。

这个应用逻辑比较简单：用户输入一个产品 ID，应用会调用一个 Restful API，通过 HTTP 请求，查询这个产品 ID 对应的产品明细数据，然后将产品名称显示在应用界面上。

低代码开发的核心概念：逻辑控制流和数据流

如果是前端开发人员拿到这个需求，通常情况下的开发流程是：

1. 思考并决定选择何种前端开发框架。一般根据项目实际情况决定框架选项，比如选择 SAP UI5 或者 Angular，Vue，React 等等。
2. 根据选择的前端框架，设计页面视图。选择 SAP UI5 的话，需要绘制 XML 视图。Angular 则是 HTML 模版。
3. 在 SAP UI5 的视图 Controller 或者 Angular 的 Component.ts 里编写业务逻辑。比如通过 JavaScript 和 TypeScript 编程，调用平台提供的 HTTP 库，发起 Restful API 请求，将响应结果绑定到页面输出产品名称的控件上。

上述就是 MVC 和 MVVM 模式的体现。

在低代码开发领域里，工具的使用者，看到的不再是一个个视图和控制器，而是更高抽象层次的流：逻辑控制流和数据流。

低代码应用开发人员，在实际动手开发之前，应该从最终用户的视角出发，模拟最终用户的实际操作，对需求进行拆解。

从逻辑控制流的视角分析，本应用的操作流能拆解为三部分。

1. 用户从 Product ID 的输入框开始工作。输入产品 ID 之后，控制权交给 Search 按钮。
2. 用户把鼠标移动到 Search 按钮上，点击后触发 Restful API 调用。此时按钮的使命也已经完成，控制权交给显示产品名称的输出控件。
3. Restful API 调用结束，结果通过输出控件显示到页面上。

从数据流的角度分析：

1. 用户输入产品 ID 值。
2. 产品 ID 值通过数据绑定，流动到 Restful API 调用模块内，成为其输入参数。
3. Restful API 向服务器端发起查询，查询出的产品名称值，流动到页面的输出控件上。

理清了逻辑控制流和数据流的步骤和方向之后，我们就可以动手开发了。

下面是具体的开发步骤。

绘制允许用户输入产品 ID 的输入控件

我在下图标注了四个图例。按顺序逐一进行讲解。

1. UI Canvas：低代码应用的页面元素都在这个区域进行设计。
2. View 和 Variables 的切换开关。我们使用 Variable（变量），让应用的数据在不同控件之间流动。使用这个开关，可以在页面元素和变量两种编辑器之间进行切换。
3. 屏幕左侧工具箱区域，提供了丰富的开箱即用的界面控件。鼠标单击一个控件，拖拽到编辑器里，就可以使用了。我们将 Input Field 即输入字段控件，拖拽到编辑器区域里。这个控件用来给用户提供产品 ID 的输入。
4. 前文已经介绍过，用户输入了 Product ID 之后，我们要将其传递给 Restful API 作为输入。这种数据的流动，通过 Variable 实现。图例4 我创建了一个名为 inputproductid 的变量，将其绑定到 Input Field 控件的 Value 属性。这意味着用户输入的产品 ID 值比如为 123，那么这个值会自动流动到名叫 inputproductid 的变量里去。

这其实就是前端框架 MVC 里的数据绑定概念，在低代码编辑器里的体现。

给产品 ID 输入控件完成数据绑定

还是按照下图图例的标号进行介绍。

切换到 Variables 开关，点击屏幕左侧的 Page Variables，然后单击 Add Page Variable.

给当前页面添加一个新的数据变量，取名叫 inputproductid.

给这个数据变量，设置数据类型为 Text 即文本类型。

保存这个变量，然后再点击 View-Variables 开关，切换回视图编辑器。

单击 Input Field 的 Value 属性。弹出绑定对话框，在 Select page variable 的下拉菜单里，选择刚刚创建好的 inputproductid 变量即可。点击 Save 完成保存。

至此产品 ID 的输入字段开发完毕。

Restful API 的调用设计

有了产品 ID 之后，我们要用它来作为输入参数，调用 Restful API.

切换到 Data 面板，点击 Create Data Entity，在下拉菜单里选择 Rest API direct integration.

Data Entity，就是 SAP Build Apps 里，对低代码应用里使用数据源读取业务数据的一个封装。

从这里能够看出，SAP Build Apps 支持的数据源比较丰富。除了 Restful API 之外，还有 OData，Google Firebase，以及通过 SAP BTP Destination 链接到其他 SAP 业务系统抽取数据。

本文我使用了一个免费调用的 OData 服务，url 如下：

https://world.openfoodfacts.org/api/v0

在 Base 面板里，维护 Data Entity 的 ID 值，描述信息，以及最关键的 url 字段。

因为一个产品 ID 值最多只对应一条产品数据，所以我们选择左侧的 GET RECORD(GET), 意思是这个 Data Entity 仅负责单条数据的读取操作。

在 Relative path 区域，维护 /product/{barcode}，这里的大括号语法，语义是大括号里的 barcode 仅仅是一个占位符，可以取任意的名称，比如改成 productID 也行。我这里取名为 barcode，是为了本系列后续介绍 BarCode 扫描控件做准备。

大括号里的占位符 barcode，它的值需要从上游的控件流动进来。

点击 Save Data Entity 按钮进行保存。

怎么知道我们这个 Restful API Data Entity 的设计是否正确呢？

点击 Test 面板，输入产品 ID 6416453061361，点击 Run Test 按钮。这会触发 Restful API 的真实调用，并在 Test API call response 区域看到期望的结果。

至此，Restful API Data Entity 的设计也已完成。

如何通过 Search 按钮触发 Restful API

万事俱备，只欠东风。

现在我们需要将到目前为止设计好的几个控件，通过流的概念，将它们串联起来，形成逻辑控制盒数据的流动。

选中 Search 按钮，然后点击 Add Logic to Button：

然后在屏幕下方的 Logic Canvas 即逻辑流编辑器里，按照下面图例 1 到 5 所示，完成逻辑流的编辑。

从屏幕左侧逻辑流工具箱里，拖拽一个 Get record 模块到编辑器正中。
选中图例 2 所示的 Get record 模块，用一根线将其与按钮的 click event 连接起来。这根线如图例 3 所示。这条线的语义是，当按钮有 click 事件发生时，控制流会流向 Get record 这个模块。
将 Get record 模块的 Resource name 绑定为我们前一步骤创建的 ID 为 OpenFoodFacts 的 Restful API Data Entity（图例 4），将这个 Data Entity 的输入参数，也就是 Barcode 占位符（图例5），绑定到也是由前面步骤创建的数据变量 inputproductid. 通过这个设计，用户在 Input Field 里输入的产品 ID 值，在 Search 按钮被点击之后，就会传递到 Restful API 的输入参数里，并触发 API 的调用。

如何显示 Restful API 调用结果

Restful API 的执行结果，我们也需要存储到一个变量里。

为此再创建一个名叫 OpenFoodFactsResult 的变量。

然后从左侧工具箱里，拖拽一个 Set data variable 模块到编辑器正中（图例 1），将该模块的输入，用一根线与前一个 Get record 也就是 Restful API 调用模块的输出连接起来（图例 2 和 3）。

这个操作的语义是，让 Restful API 执行的结果，流进 Set data variable 这个模块。

最后展示 Restful API 执行结果的控件设计就很简单了，从控件工具箱里拖拽一个 Title 控件出来，单击其 Content 属性，进行数据绑定：

绑定到我们之前创建的 id 为 OpenFoodFactsResult 的变量结构体里，对应的 product_name 字段即可。

最后我们点击 Launch 面板，进入应用预览页面。

输入产品 ID 之后，在 Chrome 开发者工具 Network 面板里，能观察到 Restful API 的 HTTP 调用。

并且在 HTTP 响应里，发现 product_name 的值，和我们最后在低代码应用里显示的值一致，应用运行成功。

总结

本文通过实际的例子，介绍了使用 SAP Build Apps 开发低代码应用的核心流程，强调了在动手开发之前，根据需求梳理清楚应用的逻辑控制流和数据流的重要性。

本系列下一篇文章，笔者会介绍将 SAP Build Apps 里开发好的低代码应用，进行本地部署，以及部署到 SAP BTP 等平台上的具体步骤，敬请期待。