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：

開啟一個呼叫名片掃描外掛的資料夾，我們發現與開發的時候檔案目錄基本一致， /platforms/android/assets/

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