通过SAP WEBIDE快速构建一个UI5 应用

SAP WEBIDE

SAP WebIDE是SAP云平台上的一项服务，通过WEBIDE可以非常方便迅速的开发各种企业级云应用。

对于前端应用来说，webide提供了很多的模板来创建项目，比如基于Fiori设计语言的List report, worklist, master-detail, 还有Fiori element应用。

今天通过一个简单的例子来创建一个Master-detail的UI5应用。

Backend Service

后台服务使用了一个免费的odata服务：
http://services.odata.org/V2/Northwind/Northwind.svc/

准备-Destination

首先登录SCP在操作台创建一个Destination:

Destination服务可以连接到其它的api，避免cors的跨域问题，具体配置如下：

通过模板创建UI5应用

进入WebIDE服务，然后选择通过模板来创建项目：

选择Master-detail模板类型：

输入项目信息：

选择Destination:

选择主要的数据字段：

webide会自动生成项目代码：

对manifest.json做一个小的修改，设置useBatch为false：

"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "demo.sap.Orders.i18n.i18n"
				}
			},
			"": {
				"dataSource": "mainService",
				"preload": true,
				"settings": {
					"useBatch": false
				}
			}
		},

通过mock数据来测试应用

运行mockServer.html：

结果如下：

运行真实数据的应用

运行index.html：

结果如下：

小结

从零开始构建一个UI5应用非常麻烦，但是webide服务提供了超级方便迅速的方式来快速生成项目代码。快速的构建可以直接运行的UI5应用。