如何在浏览器里开发并运行 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.local.webcontainer.io

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

https://jerry-ui5-app–8080.local.webcontainer.io/index.html

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

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

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

Windows环境下，如何在Docker里运行SAP UI5应用
本文面向的读者是对Docker技术有一些基本概念,但因为没有测试环境,所以没有动手操作过的朋友们. 最近Jerry因为要做一个新的SAP云产品开发,得搭各种开发环境,其中之一就是Docker. Jer ...
在Kubernetes上运行SAP UI5应用(下): 一个例子体会Kubernetes内容器的高可用性和弹性伸缩...
2019独角兽企业重金招聘Python工程师标准>>> 上一篇文章在Kubernetes上运行SAP UI5应用(上),我介绍了如何在Docker里运行一个简单的SAP UI5应用 ...
在Kubernetes上运行SAP UI5应用(下): 一个例子体会Kubernetes内容器的高可用性和弹性伸缩
上一篇文章在Kubernetes上运行SAP UI5应用(上),我介绍了如何在Docker里运行一个简单的SAP UI5应用,并且已经成功地将一个包含了这个UI5应用的docker镜像上传到Dock ...
如何在阿里云上运行SAP UI5应用
本来Jerry觉得这个知识点太简单了完全不值得写成微信公众号文章,但转念一想,可能网络上有一些刚刚初学UI5的朋友们可能会问到,所以还是写了. 今天一个成都同事问我这个问题,因为SAP WebIDE可 ...
使用 SAP UI5 CLI 命令行工具构建和运行 SAP UI5 应用
源代码 Github 地址:https://github.com/wangzixi-diablo/ui5-for-kyma 本地路径:C:\Code\frontend-ui5-mssql 本文介绍 S ...
使用Eclipse本地运行SAP UI5时, UI5库文件的js文件是从本地哪里加载的
what is the location of js when using run as server in Eclipse
在Kubernetes上运行SAP UI5应用
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
SAP UI5 应用开发教程之四十八 - 如何在 SAP UI5 应用里开发条形码扫描功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

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

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

最新文章

热门文章