使用纯 ABAP 开发 SAP UI5 应用(一)：abap2UI5 开发环境搭建介绍

我从 SAP 社区博客上了解到一个开源项目，名叫 abap2UI5, 作者是 Oblomov Dev，这是 Github 项目地址：

https://github.com/abap2UI5/abap2UI5

这个项目最吸引 ABAP 开发人员之处在于：

1. 传统的 ABAP 搞定一切：仅仅依靠最基础的传统 ABAP 编程语言，就可以开发并运行 SAP UI5 应用。不需要学习 JavaScript 和 CDS view 等开发技术。
2. 通过 abap2UI5 生成的 SAP UI5 应用，运行时不需要 BSP，CDS，BOPF 或者 RAP 这些框架的支持。实际上，abap2UI5 只需要 ABAP 系统 SAP_BASIS 模块的 ICF(Internet Communication Framework) 框架即可运行。
3. 支持 ABAP On-Premises 系统和云端的 SAP BTP ABAP 编程环境。
4. 支持所有常见的 ABAP 系统版本，从 Netweaver 7.02 到 ABAP 2305.
5. 安装方便：使用 abapGit 即可轻松搭建开发环境，将本地开发所需的所有 ABAP 资源，从 Github 同步到本地 ABAP 系统。

实际上，当我首次得知该项目时，脑子里全是问号：为什么？为什么要用 ABAP 开发 SAP UI5 这种 Web 应用？谈到 Web 应用，我们会条件反射地将其同 JavaScript 和 HTML 联系在一起。尽管 ABAP 结合 BSP/WebClient UI/ABAP Webdynpro 这些 SAP 自研的工具和框架，也能胜任 Web 应用开发任务，但是 ABAP 的强项不在于此，而在于后台业务逻辑和服务的开发。

为什么要执意于使用 ABAP 来开发 SAP UI5 呢？

带着这个疑问，我阅读了该项目的文档，了解到了一个 HTML Over the Wire 的概念。原来是我孤陋寡闻了。abap2UI5 只不过是项目作者，贯彻 HTML Over the Wire 理念，做出的一次成功的尝试罢了。

本公众号会按照下列思路，通过一系列文章介绍 abap2UI5：

1. abap2UI5 开发环境的搭建
2. abap2UI5 的设计动机和背后的理念：什么是 HTML Over the Wire？
3. 用 abap2UI5 开发一个 Hello World 级别的 SAP UI5 应用
4. abap2UI5 的工作原理
5. 更多 abap2UI5 的高级技巧

本文介绍 abap2UI5 开发环境的搭建。其实说白了很简单——就是 abapGit 的简单使用而已。

按照 abapGit 官网的介绍，将 abapGit 的源代码拷贝下来，在本地 ABAP 系统新建一个 ABAP 报表，然后把代码粘贴进去，激活即可。

https://abapgit.org/

我下载的这个版本，总共十二万行左右的代码：

执行报表，点击 New Online 按钮，将下面这两个代码仓库的代码，同步到正在使用 abapGit 的系统里：

• https://github.com/abap2UI5/abap2UI5
• https://github.com/abap2UI5/abap2UI5-demos

按钮点击之后，会弹出一个对话框，要求我们指定 ABAP 开发包，用于存储同步到 ABAP 系统的 abap2UI5 代码。这里我分别指定的开发包是 $ZABAP2UI5 和 $ZABAP2UI5_DEMO.

代码同步完成后的 abapGit 首页如下图所示：

到 SE80 事务码里能看到成功同步到本地的 ABAP 代码：

下一步我们需要通过 ABAP SICF 事务码，将这些 ABAP 资源提供的功能暴露出来，让它们可以通过 HTTP 协议被消费。

关于 ABAP SICF 事务码的更多介绍，请参阅我之前的文章：

从 ABAP Netweaver 的 SICF 到 SAP Kyma 的 Lambda Function

我们首先创建 SICF handler class，取名 ZCL_ABAP_2_UI5，实现接口 IF_HTTP_EXTENSION 的 HANDLE_REQUEST 方法：

这个 HANDLE_REQUEST 方法的作用是，生成 abap2UI5 的脚手架界面。

然后启动 SICF 事务码，找一个合适的节点，给其创建子节点，随便起个名字，比如命名为 abap_ui5：

将之前创建的 ABAP handler class ZCL_ABAP_2_UI5 维护到该节点的 Handler 字段内。

最后选择 Test Service 启动脚手架应用：

下图就是 abap2UI5 的脚手架应用的首页界面。点击 Demo Section 区域的 Continue 按钮，能看到来自 https://github.com/abap2UI5/abap2UI5-demos 代码仓库的所有例子应用：

玲琅满目的 demo 应用：

随便点开一个，你能相信眼前这个 SAP UI5 应用，真的是纯 ABAP 开发的产物吗？

点击右上角的 Source Code 按钮，就能看到对应的 ABAP 源代码：

如大家所见，这些确确实实是正宗的 ABAP 代码。

如果你想知道这些 ABAP 代码是如何神奇地生成了可以运行的 SAP UI5 应用，敬请关注本公众号后续的系列文章介绍。

后续系列内容安排

1. abap2UI5 开发环境的搭建(本文)
2. abap2UI5 的设计动机和背后的理念：什么是 HTML Over the Wire？
3. 用 abap2UI5 开发一个 Hello World 级别的 SAP UI5 应用
4. abap2UI5 的工作原理
5. 更多 abap2UI5 的高级技巧