如何在浏览器里开发并运行 SAP UI5 应用

除了 SAP 公司官方支持的 WebIDE，SAP Business Application Studio 这些运行在浏览器端的开发工具，可以进行 SAP UI5 的开发之外，我们还可以使用 StackBlitz 这款在线 web 应用的开发工具，来开发 SAP UI5 应用。

我这里做了一个例子，大家可以通过这个链接 访问。

我们打开这个页面，观察到的屏幕可以分成四个区域，下面逐一介绍。

用过 Visual Studio Code 这款编辑器的朋友们不难发现，这其实就是 Visual Studio Code 的浏览器版本。

(1) 显示一个文件树结构，包含了该 SAP UI5 工程的所有资源文件，包含 xml 视图实现和控制器实现(JavaScript 代码)。Jerry 提供的这个例子，SAP UI5 应用采取了 ui5 cli 这个开源的构建工具来构建和启动，而 ui5 cli 基于 Node.js，因此上图还能观察到 ui5 cli 的配置文件 ui5.yaml 和 Node.js 项目所需的 package.json 文件。

(2) StackBlitz 在线开发环境里编辑文件的主要区域。

(3) StackBlitz 的终端控制台，我们可以在此处执行各种命令行。
(4) SAP UI5 应用一旦启动后，渲染的页面会出现在这个区域。

目前上图区域 4 显示的是 botting webcontainer. 在浏览器编辑环境的上下文里，Web Container 技术能够让 Node.js 应用在浏览器环境里以原生方式运行。

我们在区域 3 的终端里，输入命令行 ui5 serve:

首先会看到 StackBlitz 自动去下载 ui5 cli 的 package，相当于为我们执行了 npm install：

紧接着， 区域 4 显示了当前这个 SAP UI5 工程的所有文件夹列表。

我们将这个 url 拷贝下来：
https://jerry-ui5-app--8080.l...

新开一个浏览器窗口，在末尾添加上 index.html，就可以访问到这个 SAP UI5 应用了：

https://jerry-ui5-app--8080.l...

关于运行在 StackBlitz 上的 SAP UI5 应用的调试，同运行在其他环境的并无区别，ctrl+alt+shift+p，在弹出的对话框里启用调试模式，刷新浏览器，即可加载调试版本的 JavaScript 源代码进行调试。

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