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

來自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/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文件。

咱們打開一個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/18/step-by-step-to-create-a-custom-cordova-plugin-for-android-and-consume-it-in-your-ui5-application/，文中有提到咱們如何在UI5的application中去調用咱們開發的cordova插件，咱們在這個解壓出來的包裏面也能夠看到這些去消費插件的這些js class：

打開一個調用名片掃描插件的文件夾，咱們發現與開發的時候文件目錄基本一致， <project folder>/platforms/android/assets/

要獲取更多Jerry的原創文章，請關注公衆號"汪子熙":