素材巴巴 > 程序开发 >

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

程序开发 2023-09-03 21:07:34

我从 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 的系统里:

按钮点击之后,会弹出一个对话框,要求我们指定 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 的高级技巧

标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。