SAP-Cloud-for-Customer的Container应用设计原理

58次阅读

共计 1792 个字符,预计需要花费 5 分钟才能阅读完成。

来自 Jerry 的同事,Yang Joey。

相信大部分 C4C 的 UI developer 包括我刚开始的时候都会比较好奇我们平时写的 javascript 代码是如何运行在移动设备上的,同样的,我也对这个问题十分感兴趣。于是,以安卓为例子,我把我们发布到安卓应用市场的 app 解压出来研究了一下。

上图是一个 cordova 的总体框架的描述,可以看到 cordova 主要由两部分构成。
第一部分:Cordova Application 是 Cordova 框架独立于不同手机操作系统的一个封装层。具体包括
1)Web app(包括具体的 app 的 HTML/JS/CSS 代码等);
2)Cordova 框架已经封装好的核心插件(如相机、存储等系统调用),这块是 Cordova 的核心部分。当然,开发者也可以基于它的插件体系,扩展出新的插件;
第二部分:Mobile OS 就是具体的手机操作系统层了,Cordova 目前支持大部分的手机 OS:ios、android、wp、blackberry 等等

第二部分我们在这里就不赘述,都是 mobile OS 的各种原生功能。

那么我们先来看第一部分的 webapp 这一部分,我们将下载下来的 apk 文件解压缩,如下所示是一个很经典的安卓 app 的 apk 包的结构:

上文中讲过,用 Cordova 工具将 C4C Aurora 的项目文件打包成 Android 或者 iOS 原生应用后,以 Android 平台为例,客户安装 apk 在安卓设备上后,运行在安卓手机上的 C4C 应用实际运行在 WebView 中。
WebView 里加载的 JavaScript 和 HTML 文件实际上已经保存在了 Cordova 构建出来的项目包 (即 apk 文件)里。在运行时,这些资源文件通过 Embedded server 加载到 WebView 里。
当然,手机 C4C 应用上所有需要显示的 Transaction 数据,比如在手机 C4C 应用上打开 Account 工作中心,看到的所有 Account 数据都来自对应的 C4C tenant,这些数据的读取请求通过 embedded Server 发送到 C4C tenant 的后台 ABAP 系统上去。

Jerry 在博客(https://blogs.sap.com/2017/08…)中有写到如何用 cordova 创建一个 fiori 风格 app, 文中有讲到我们在开发这样一个 app 的时候会有一个默认的 index.js 生成,我们基于这个文件为入口进行开发 cordova 的应用,我们在 assets->www 下面找到了这个 index.js 文件,同时我们看到了几个 zip 包,这几个 zip 分别来自我们 C4C 开发组所开发的 oberon 和 lead cod,里面包含了我们开发的 javascript 代码和样式表文件,这些文件即是上文提到的保存在 cordova 构建出来的项目包里的代码和 html 文件。

我们打开一个 oberon.zip 看一看里面的内容,比如我现在打开的是我们开发的 RUI client 下面的所有 javascript 代码和样式表文件的目录,library-preload.js 就是我们开发的 javascript 代码压缩之后的合集, 其中也包括一些我们会用到的 UI5 的类库。

通过 jerry 的博客我们得知应用运行时会先加载这个 js 文件,那么打开这个文件看一下上文提到的 oberon.zip 等 zip 里面的代码是如何被加载和运行的。

可以看到这里加载了两个 js 文件,运行了一个 app.initialize()方法. 这个方法被定义在加载的第二个 js 文件 js/index.js 里面,打开这个 index.js 文件之后发现的确是这里的 initialize 方法加载了 sap 的 UI 标准库,主题库,语言等。

上文中讲了第一部分中的 webapp,那么我们来看看开发者自己开发的插件这一部分,在 Jerry 的博客中有写到如何用 java 开发一个自定义的 cordova 插件:https://blogs.sap.com/2017/08…,文中有提到我们如何在 UI5 的 application 中去调用我们开发的 cordova 插件,我们在这个解压出来的包里面也可以看到这些去消费插件的这些 js class:

打开一个调用名片扫描插件的文件夹,我们发现与开发的时候文件目录基本一致,<project folder>/platforms/android/assets/

要获取更多 Jerry 的原创文章,请关注公众号 ” 汪子熙 ”:

正文完
 0