这是 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 的原创文章，尽在：” 汪子熙 ”: