天天看點

SAP Cloud for Customer的Container應用設計原理

來自Jerry的同僚,Yang Joey。

相信大部分C4C的UI developer包括我剛開始的時候都會比較好奇我們平時寫的javascript代碼是如何運作在移動裝置上的,同樣的,我也對這個問題十分感興趣。于是,以安卓為例子,我把我們釋出到安卓應用市場的app解壓出來研究了一下。

SAP Cloud for Customer的Container應用設計原理

上圖是一個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包的結構:

SAP Cloud for Customer的Container應用設計原理

上文中講過, 用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/17/step-by-step-to-package-a-fiori-application-into-your-android-device-using-cordova/

)中有寫到如何用cordova建立一個fiori 風格app, 文中有講到我們在開發這樣一個app的時候會有一個預設的index.js生成,我們基于這個檔案為入口進行開發cordova的應用,我們在assets->www下面找到了這個index.js檔案,同時我們看到了幾個zip包,這幾個zip分别來自我們C4C開發組所開發的oberon和lead cod,裡面包含了我們開發的javascript代碼和樣式表檔案,這些檔案即是上文提到的儲存在cordova建構出來的項目包裡的代碼和html檔案。

SAP Cloud for Customer的Container應用設計原理

我們打開一個oberon.zip看一看裡面的内容,比如我現在打開的是我們開發的RUI client下面的所有javascript代碼和樣式表檔案的目錄,library-preload.js就是我們開發的javascript代碼壓縮之後的合集,其中也包括一些我們會用到的UI5的類庫。

SAP Cloud for Customer的Container應用設計原理

通過jerry的部落格我們得知應用運作時會先加載這個js檔案,那麼打開這個檔案看一下上文提到的oberon.zip等zip裡面的代碼是如何被加載和運作的。

SAP Cloud for Customer的Container應用設計原理

可以看到這裡加載了兩個js檔案,運作了一個app.initialize()方法. 這個方法被定義在加載的第二個js檔案js/index.js裡面,打開這個index.js檔案之後發現的确是這裡的initialize 方法加載了sap的UI标準庫,主題庫,語言等。

SAP Cloud for Customer的Container應用設計原理

上文中講了第一部分中的webapp,那麼我們來看看開發者自己開發的插件這一部分,在Jerry的部落格中有寫到如何用java開發一個自定義的cordova插件:

https://blogs.sap.com/2017/08/18/step-by-step-to-create-a-custom-cordova-plugin-for-android-and-consume-it-in-your-ui5-application/

,文中有提到我們如何在UI5的application中去調用我們開發的cordova插件,我們在這個解壓出來的包裡面也可以看到這些去消費插件的這些js class:

SAP Cloud for Customer的Container應用設計原理

打開一個調用名片掃描插件的檔案夾,我們發現與開發的時候檔案目錄基本一緻, /platforms/android/assets/

SAP Cloud for Customer的Container應用設計原理