Technical Articles
HTML5应用通过standalone approuter消费OData数据源
在上一篇文章中，我们简单实现了一个静态页面index.html去获取当前登陆的用户，以及通过Standalone Approuter去访问建立在企业内网的OnPremise上OData数据源的小APP。
通过Standalone Approuter 消费OnPremise数据源
目前SAP业务技术平台（以下简称SAP BTP）支持多种HTML5应用：包括SAPUI5，VUE，React以及AngularJS。本文以SAPUI5 Free Style应用为示例，其他技术架构在项目部署时是类似的。在SAP BTP上，所有的HTML5应用都将被部署到HTML5仓库中，然后配合Approuter来访问，Approuter分为SAP Managed Approuter和Standalone Approuter两种不同的形式。
SAP Managed Approuter是SAP管理的，所有绑定SAP Managed Approuter的HTML5应用都能在BTP控制台里的HTML5 Applications中直接可见。一般配合SAP Build Work Zone来使用，开发人员是不能控制SAP Managed Approuter的；所有开发好的应用都会以磁贴的形式在SAP Build Work Zone上呈现。
Standalone Approuter是可以由开发人员自己控制，虽然前端应用也是部署在HTML5仓库中，但是在BTP控制台里的HTML5 Applications中看不见我们的应用，在Cloud Foundry的组织/空间中可以看到我们部署上去的应用（Standalone approuter）。Standalone approuter通过HTML5-repo-runtime来访问HTML5-repo-host中的UI应用。同时可以根据自己的需要，为不同的应用配置不同的访问链接。
总体来讲，在approuter的功能上，两者并没有什么区别，客户完全可以根据自己的业务需求选择适合自己的方案。SAP Managed Approuter配合SAP Build Work Zone使用，方便快捷，开发人员只需要专注于开发自己的业务需求就可以了。如果有多个应用要发布，可以保持统一的风格布局，可以很快就在SAP Build Work Zone上看到自己的APP展现，而Standalone approuter具有更高的灵活性，客户可以定制自己的前端界面风格。
架构图
简要描述
本文中会有两个应用，一个是简单应用helloworld，直接通过connectivity服务配合Destination服务访问在企业内网的OnPremise数据资源。第二个productslist会访问云端Northwind上的OData数据源。
前期准备
安装并配置SAP云连接器
-
安装并配置好SAP云连接器(SAP Cloud Connector)，您可以参考这里 install SAP Cloud Connector with Docker, 或者在这里下载可安装版本。
-
在本项目中，我们使用 ES5 作为我们后端基于ABAP的OData数据源. Configure OP system in SAP Cloud Connector, 在SAP Cloud Connector里您需要配置自己的Location ID(任何利于区分的字符串即可).
项目配置
-
在文件mta.yaml中配置Destination属性
定义名称为es5，可以从您配置好的SAP云连接器中获取到OData数据源的URL。将User和Password更新为您在es5系统上的用户名和密码，另外添加附加属性sap-client: “002“,注意这里002必须用绰号括起来，否则会被识别成数字2。同时，可以为您的app router配置自定义的hostname，前提是您在SAP BTP上已经有可用的合法域名了。
由于使用Standalone Approuter，要想正常访问HTML5 仓库中的应用的话，还需要借助html5-repo-runtime服务才可达成，而对于SAP managed approuter来说，是不需要依赖于html5-repo-runtime的。ID: standalone-op-es5 _schema-version: "2.1" version: 1.0.0 modules: - name: html5_app_router type: approuter.nodejs path: app/approuter parameters: disk-quota: 256M memory: 256M routes: - route: opes5.<YOUR.CUSTOM.DOMAIN.COM> requires: - name: h5app_repo_runtime - name: html5_destination - name: html5_uaa - name: html5_connectivity - name: html5_deployer type: com.sap.application.content path: . requires: - name: html5_repo_host parameters: content-target: true build-parameters: build-result: resources ignore: ["*.DS_Store"] requires: - artifacts: - helloworld.zip name: helloworld target-path: resources/ - artifacts: - freeuiappproductslist.zip name: freeuiappproductslist target-path: resources/ - name: helloworld type: html5 path: app/helloworld build-parameters: build-result: dist builder: custom commands: - npm install - npm run build supported-platforms: [] - name: freeuiappproductslist type: html5 path: app/productslist build-parameters: build-result: dist builder: custom commands: - npm install - npm run build:cf supported-platforms: [] resources: - name: html5_repo_host type: org.cloudfoundry.managed-service parameters: service: html5-apps-repo service-plan: app-host - name: html5_connectivity type: org.cloudfoundry.managed-service parameters: service: connectivity service-plan: lite - name: h5app_repo_runtime parameters: service-plan: app-runtime service: html5-apps-repo type: org.cloudfoundry.managed-service - name: html5_uaa parameters: path: ./xs-security.json service-plan: application service: xsuaa type: org.cloudfoundry.managed-service - name: html5_destination type: org.cloudfoundry.managed-service parameters: config: HTML5Runtime_enabled: true init_data: instance: destinations: - Authentication: BasicAuthentication Name: es5 ProxyType: OnPremise Type: HTTP URL: http://<Your.OnPremise.OData.Service> User: <i000000> Password: <xxxxxxxxxxxxx> sap-client: "002" - Authentication: NoAuthentication Name: ui5 ProxyType: Internet Type: HTTP URL: https://ui5.sap.com - Authentication: NoAuthentication Name: northwind ProxyType: Internet Type: HTTP URL: https://services.odata.org/ existing_destinations_policy: update version: 1.0.0 service: destination service-name: html5_destination service-plan: lite -
{ "xsappname": "html5_app_repo_router", "tenant-mode": "dedicated", "description": "Security profile of called application", "scopes": [ { "name": "uaa.user", "description": "UAA" } ], "role-templates": [ { "name": "Token_Exchange", "description": "UAA", "scope-references": [ "uaa.user" ] } ], "oauth2-configuration": { "redirect-uris": [ "https://*.<YOUR.CUSTOM.DOMAIN.COM>/**" ] } } -
配置standalone approuter 路由信息。所有前端应用的路由都会通过我们此approuter来转发到正确地址。打开文件
app/approuter/xs-app.json，确认配置信息。- Destination htm5apphello
此路由为应用helloworld使用。在这里该名称需要匹配到您在应用helloworld中定义的"id": "htm5.app.hello"名称，但是需要去除非字符符号，该id定义在文件app/helloworld/manifest.json中，实际工作时，系统会自动识别并实现路由功能。另外，“sap.cloud”结点是必配内容，只有将public属性设置成true的时候，该应用才能被正常访问和启用。
- Destination htm5apphello
{
"_version": "1.12.0",
"sap.app": {
"id": "htm5.app.hello",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.cloud": {
"public": true,
"service": "h5app.service"
}
}- Destination odata
此destination是为helloworld所用。主要是用来访问OnPremise端的内网OData数据源。 此路由对应到 destination es5。 - Destination northwind
此路由配置为productslist应用所使用。所有URL中包含”northwindodata“的请求都会自动转发到Destination northwind
{
"welcomeFile": "/index.html",
"authenticationMethod": "route",
"routes": [
{
"source": "/user-api/currentUser$",
"target": "/currentUser",
"service": "sap-approuter-userapi"
},
{
"source": "^/htm5apphello/(.*)$",
"target": "/htm5apphello/$1",
"service": "html5-apps-repo-rt"
},
{
"source": "/odata/(.*)$",
"target": "/$1",
"destination": "es5",
"csrfProtection": false
},
{
"source": "^/northwindodata/(.*)$",
"target": "/$1",
"destination": "northwind",
"csrfProtection": false
}
]
}
HTML5 应用配置
通过standalone approuter消费OnPremise数据源
浏览到 app/helloworld, 我们创建了个简单的index.html页面来获取当前登陆用户，通过最简单的URL更新即可验证我们路由功能是否能正常工作。
<html>
<header>
<title>Welcome</title>
<meta charset="UTF-8">
</header>
<script>
setTimeout(() => {
fetch("/user-api/currentUser").then((res) => {
return res.json();
}).then((user) => {
document.getElementsByTagName("body")[0].innerText = `Hi ${user.firstname} 👋`
});
}, 1000);
</script>
<body>
Hi there 👋
</body>
</html>HTML5仓库中的UI应用配合standalone approuter运行
通常，我们将HTML5的应用包括SAPUI5，VUE，React以及AngularJS部署到SAP HTML5仓库中，然后SAP Build Work Zone配合SAP Managed Approuter来消费这些应用。开发人员登陆到SAP BTP子账户中，在HTML5 Applications仓库中可以看见自己部署上去的应用。在使用SAP Managed Approuter时，客户是无法完全控制approuter的，在Cloud Foundry的组织/空间/应用中也不会看到自己的应用。
在这里，我们不希望使用SAP Build Work Zone来集成我们的应用，希望有自己的整体风格。我们仍然将APP部署到HTML5仓库中，然后绑定到一个standalone Approuter，开发人员具有此Approuter的完全控制权。部署好后，在SAP BTP控制台中HTML5 Applications检查，并不能看见部署上去的standalone应用,实际上该应用已经在HTML5仓库中了。当浏览到Cloud Foundry的组织/空间/应用中时，会发现我们的APP应用html5_app_router显示在这里。
在app/productslist/webapp/manifest.json中，将dataSource指向正确的Destination，通过关键字/northwindodata将会被自动路由到正确的OData服务地址：
"dataSources": {
"mainService": {
"uri": "/northwindodata/V3/Northwind/Northwind.svc/",
"type": "OData",
"settings": {
"annotations": [],
"localUri": "localService/metadata.xml",
"odataVersion": "2.0"
}
}
}应用编译与部署
-
编译整个项目为mtar文件：
mbt build -t ./ - 部署项目到Cloud Foundry运行时:
cf deploy standalone-op-es5_1.0.0.mtar - 部署成功后的配置
登陆到您的SAP BTP子账户，浏览到Instances and Subscriptions，点击html5_destination链接进入Destination实例。从左侧菜单中选择Destination，选中destination es5, 将Location ID添加进去并保存。Location ID可以在配置SAP云连接器（SCC）的Cloud To On-Premise配置信息中找到。
当部署成功后，浏览到Cloud Foundry 组织/空间/应用，就能看到我们的应用html5_app_router，或者通过命令行 cf apps也可以查看到我们部署的应用。
检验结果
检验应用helloworld
登陆到您的SAP BTP控制台，浏览到Cloud Foundry 组织/空间。打开应用html5_app_router。点击URL打开，您将看到个Not Found的空页面，不要着急，我们继续往下。
检查获取当前用户
检查es5 OnPremise数据源
