对 SAP UI5 一无所知的新手，从哪些材料开始学习比较好？

这是 Jerry 2021 年的第 32 篇文章，也是汪子熙公众号总共第 308 篇原创文章。

我常常收到很多朋友这样的问题：若是对 SAP UI5 一无所知的新手，想学习 SAP UI5，从哪些材料开始学习比较好？有没有一些推荐的书？

我本身 2014 年末，出于工做须要学习 SAP UI5 时，把 SAP UI5 官网上提供的一套 Walkthrough (这个词的中文翻译应该是教程，辅导，攻略) 认真作了一遍，其中的代码一个字符一个字符照着敲了一遍，很快就能够上手工做了。后来有新同事入职到咱们团队时，我也推荐这套教程让新同事们学习。

这是 SAP 官网例子程序的网址，包含了大量 SAP UI5 例子程序可供下载：

滑动屏幕到下方，就能看到 Walkthrough 这套教程了。

该教程包含 38 个步骤，涵盖了 SAP UI5 开发和单元测试的方方面面，按照教程最终能作出一个 SAP UI5 应用。

每一个步骤均是在前一步骤的基础上，添加新的特性，实现一个新目标。既有文字描述，也有较以前一步骤，须要新开发的代码块, 这些代码块经过黄色高亮显示以下图所示：

若是火烧眉毛想查看，根据这 38 个步骤作完以后的 SAP UI5 长什么样，能够从官网直接下载最终的完成版：

Jerry 的技术交流群里，有朋友提了一个问题：从 SAP 官网下载的这些 SAP UI5 示例工程文件，如何在本地 IDE 好比 Visual Studio Code 里启动？

以前从事 ABAP 开发的朋友，刚接触 SAP UI5，可能会遇到相似问题：SAP UI5 官网下载的例子，不知道如何本地运行。

本文就来帮助这些只有 ABAP 背景的朋友们来解决这个不少 SAP UI5 初学者都会遇到的问题。

首先解压官网下载的工程文件压缩包，发现包含 webapp 文件夹，和两个文件 package.json 以及 ui5.yaml.

webapp 文件夹里的目录结构：

咱们直接用浏览器打开 SAP UI5 应用的入口页面 index.html, 是没法看到指望的应用正常运行的，由于 SAP UI5 应用须要部署在本地或者远端的 Web 应用服务器里运行。

我在本身的技术交流群里，曾建议想在本地进行 SAP UI5 开发的朋友们，学一点简单的 nodejs 基础，至少会用 npm 和 node 的基本命令。

在本地安装好 npm 和 node 工具，在命令行里使用它们。

下面介绍两种将下载的 SAP UI5 应用在本地启动的方式。

方法1：使用 Visual Studio Code 启动 SAP UI5 应用

把 Visual Studio Code 的目录添加到 Path 环境变量里，这样咱们能够在命令行里，使用 code 命令启动它了：

进入下载并解压的 Walkthrough 文件夹里，使用 code . 命令启动 Visual Studio Code (其中 . 表明当前目录)。

安装名为 UI5-Tools 的 Visual Studio Code 扩展：

这个扩展提供了一个嵌入的 Web 服务器，默认名称为 UI5 Server, 端口号为 3000. 在扩展配置里可以对这些默认设置作修改。

选中 webapp 文件夹下的 index.html, 点击下图红色高亮图标，启动该嵌入 Web 服务器：

由于目前该嵌入服务器上只部署了 Walkthrough 这一个应用，因此单击惟一的 tile，便可打开 Walkthrough 应用：

启动的 Walkthrough 应用以下图所示：

方法2：使用 nodejs express

express 是基于 nodejs 平台的一个 web 开发框架，只需短短几行语句就能实现一个简单的 web 服务器。

若是不想使用 UI5-Tools 提供的嵌入 Web 服务器，咱们能够用 nodejs express 来代替。

从 Jerry 文章 一个用于SAP UI5学习的脚手架应用，没有任何后台API的依赖 提到的代码仓库，下载该应用到本地：

https://github.com/wangzixi-d...

这个 nodejs 应用的核心代码，位于文件 local.js 里，下图高亮区域的语义是：

• 若是 localhost:3002 后面加上 /ui5，就用 express 加载 webapp 文件夹里的 index.html 文件
• 若是 localhost:3002 后面加上 /wt，就用 express 加载 walkthrough 文件夹里的 index.html 文件
• 以此类推。

所以，对于方法2，咱们先把 Jerry 的脚手架应用下载到本地，而后进入其目录，新建一个 forwechatblogs 文件夹，最后把 SAP UI5 官网下载的例子工程的 webapp 文件夹里所有的内容，拷贝到 forwechatblogs 文件夹里便可。

别忘了在 Jerry 脚手架应用的 local.js 文件里，增添一行如上图第12行代码，告诉 express，当 url /wechatexample 被访问时, 加载 forwechatblogs 文件夹里的 index.html 文件。

最后，用命令行启动脚手架应用：

node local.js

使用 localhost:3002/wechatexample 便可访问 SAP UI5 应用了：

经过观察浏览器地址栏可以看出，经过 express，能够自定义访问 SAP UI5 应用的 url.

SAP 官网还提到了另一个 SAP UI5 本地开发工具，即 SAP WebIDE Personal Edition, 不过 Jerry 没有用过。欢迎尝试过该工具的朋友留言，分享使用体验。

https://tools.hana.ondemand.c...

此外，若是想使用在线工具，SAP Business Technology Platform (即之前的 SAP云平台) 提供的 Full-Stack WebIDE 和 Business Application Studio，也能够用来开发 SAP UI5 应用。由于本文着重介绍的是本地开发，因此这里略过。想尝试 Business Application Studio 的朋友，请参考这个连接里的步骤。

感谢阅读。

更多阅读

(0) SAP UI5应用开发人员了解UI5框架代码的意义

(1) SAP UI5 module懒加载机制

(2) SAP UI5 控件渲染机制

(3) HTML原生事件 VS SAP UI5 Semantic事件

(4) SAP UI5控件元数据的元数据实现

(5) SAP UI5控件的实例数据修改和读取逻辑

(6) SAP UI5控件数据绑定的实现原理

(7) SAP UI5控件数据绑定的三种模式：One Way, Two Way和OneTime实现原理比较

(8) 谈谈 SAP UI5 的视图控件 ID，以及其和 Angular 视图的异同

(9) SAP UI5控件的多语言(国际化,Internationalization,i18n)支持的实现原理

(10) XML视图里的button控件

(11) button控件和它背后的DOM元素

更多Jerry的原创文章，尽在："汪子熙":