Jerry之前的一篇文章 SAP Fiori應用的三種部署方式 曾經提到SAP Fiori應用的三種部署方式：
- On Premise環境下以ABAP BSP應用作為Fiori應用部署和運作的載體
- 部署并運作在On Cloud環境下，比如SAP雲平台
- 用Cordova打包成平台原生應用安裝在移動裝置上
今天這篇文章我們就來專門聊聊第三種方式，也就是SAP移動應用的解決方案之一: 使用Cordova将前端應用打包成一個和移動平台相關的混合移動應用。
本文首先由Jerry向大家對Cordova做一個總體介紹，然後由Jerry的同僚，SAP成都研究院Cloud for Customer開發團隊的Yang Joey(他的背景介紹可以在這篇文章SAP成都研究院C4C光明左使：SAP Cloud for Customer使用SAP UI5的獨特之處找到)向大家介紹Cordova是如何應用在SAP C4C移動應用裡的。
除了Cordova外，業界還有很多其他的移動開發架構，比如Facebook的React Native，雖然據我所知SAP的标準産品沒有用到它，但我從我的同僚，擁有“集産品經理，開發人員和架構師三者于一身”稱号的彭宇飛那裡了解到，SAP很多客戶定制化開發項目也使用到了React Native。除此之外還有阿裡的Weex，Angular Mobile UI等架構，這些Jerry都沒有用過，不在本文讨論範疇内。
按照傳統的移動開發方式，iOS和Android開發人員需要學習和移動平台相關的程式設計語言和程式設計環境，在平台A上開發的代碼完全不可能直接應用到另一個平台B去。比如SAP曾經釋出過一款基于iOS的原生移動應用，SAP Customer Briefing。2011年時，Jerry所在的開發小組接到任務，需要把這款應用移植到Android平台。Jerry和開發小組的其他三位同僚，一邊啃着iOS版Object C的源碼來了解該應用的邏輯，一邊用Java全部重寫，曆經整整7個月的時間才完成移植。
另一方面，一個不具備移動應用開發知識的Web開發人員，在Cordova的幫助下，也能打造出能夠直接安裝到移動裝置上的移動應用。這種應用的使用者體驗，和用原生程式設計工具(比如XCode和Android Studio)和程式設計語言開發出的應用幾乎沒有差别。為了區分，有時候我們将用Cordova加上Web應用生成的移動應用稱為混合應用(Hybrid App)。
Cordova的神奇之處在哪裡？
學習Cordova，最好的管道莫過于其官網，上面有詳細的從入門到進階的文檔。
https://cordova.apache.org/docs/en/latest/
Cordova是一個開源的移動開發架構，允許開發人員用标準的Web技術，即HTML5,CSS3和JavaScript完成跨平台的移動應用開發。所謂跨平台，即類似Java的“一次編譯，到處執行”，我們隻需要專注于前端應用的開發，完畢之後，根據實際需要，再使用Cordova提供的build工具，将開發好的前端應用打包成能夠安裝到移動平台上去的混合應用。
下圖是Cordova官網上的架構圖。其中橘色的Cordova Application即前端應用使用Cordova工具打包後的混合應用。在運作時，這個混合應用裡的前端資源被加載，渲染，運作在一個嵌入的WebView控件裡。這個嵌入的WebView通過Cordova架構提供的插件(Plugins)通路移動作業系統的核心功能，比如相機，存儲等系統調用。如果您的混合應用裡需要使用的某些移動作業系統提供的API，Cordova現有插件無法支援，您還有另一種方式可以選擇：直接在移動開發平台上開發您自己的Cordova插件(即下圖藍色的Custom Plugins)，在該插件裡調用移動作業系統的API，然後通過JavaScript接口暴露給您的前端應用消費。
SAP Cloud for Customer和SAP Mobile Platform解決方案裡包含了很多SAP開發的Cordova插件。其中C4C的Cordova插件将由Joey在下文做介紹，而SMP的Cordova插件集合，SAP稱之為Kapsel Plugins：
https://help.sap.com/saphelp_smp305sdk/helpdata/en/5e/ace0a880431014b0d1a04ab6335d4e/frameset.htm 以前做Fiori開發時，Jerry曾經對Kapsel插件裡的OData Offline插件的工作原理非常好奇。因為我是Android手機的死忠粉絲，是以仔細研究過Offline插件在Android平台上的源碼和工作原理：
- How is OData request routed to Offline data store by Odata offline plugin
- https://blogs.sap.com/2016/08/04/how-is-odata-request-routed-to-offline-data-store-by-odata-offline-plugin/
- How is JavaScript code in OData offline plugin delegated to native Java code in Android
- https://blogs.sap.com/2016/08/04/how-is-javascript-code-in-odata-offline-plugin-delegated-to-native-java-code-in-android/
- How is OData offline store opened in Android platform
- https://blogs.sap.com/2016/08/05/how-is-odata-offline-store-opened-in-android-platform/
Talk is cheap, show me the code. 現在我們來看看将一個Fiori應用用Cordova打包成混合應用的具體步驟。這個混合應用最後運作在我的三星手機上的界面如下圖所示：
指令行npm -g install cordova安裝Cordova：
指令行cordova create建立一個Cordova項目：
這個指令行已經幫助我們自動生成了很多稍後打包成混合應用所必需的資源檔案。
假設我想生成基于Android平台的混合應用，那麼用指令行添加對Android平台的支援：
cordova platform add android
現在在Cordova項目下platforms檔案夾裡，會多出一個android檔案夾，裡面包含的是運作于Android平台的混合應用所必需的資源。
把你的Fiori應用的整個項目全部拷貝到Cordova項目檔案夾下的www目錄内。執行指令行cordova prepare，www目錄内的所有Fiori應用的資源檔案會自動被拷貝到檔案夾platformsandroidassetswww下面。
最後執行指令cordova compile，生成可以安裝到Android裝置上的apk檔案。
整個過程就是這樣。總結一下，Fiori應用開發好之後，隻需四個指令行，就能把該Fiori應用打包成一個能在Android平台上運作的混合應用，确實展現了Cordova降低移動開發成本和提高跨平台開發效率的優勢。
- cordova create
- cordova prepare
- cordova compile
如果要在某移動平台上開發一個新的Cordova插件，步驟也很簡單。
我用Java實作一個加法器，用來模拟Android平台提供的API，然後用JavaScript暴露給前端應用。
指令行建立一個名稱為Adder，id為jerry.adder的插件：
plugman create -name Adder -plugin_id jerry.adder -plugin_version 1.0.0
建立完畢後，會生成一個同名檔案夾Adder:
用指令行聲明這個插件是為Android平台服務的：
plugman platform add –platform_name android
這個指令會自動生成一個Adder.java。下一步就是Java程式設計。JavaScript端傳入的兩個操作數通過輸入參數args獲得，在Java端執行加法，結果再通過CallbackContext傳回給JavaScript端，後者通過一個回調函數擷取Java端的加法計算結果。
Java開發結束後，通過下面的指令行将插件添加到混合應用中，再使用cordova compile就能得到最新的包含了這個自定義插件的apk。
cordova plugin add Adder
在前端JavaScript代碼裡，使用Cordova提供的接口，Cordova.exec來消費插件，見下圖第15行，執行加法的兩個操作數10和20通過數組傳入。
這個加法在Java端執行，通過回調函數傳回給前端，通過第11行的alert列印出來：
詳細步驟參考我的部落格：
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/這個Android插件當然是可以調試的，用Android Studio即可。詳細的環境配置和調試方法，參考我的部落格：
https://blogs.sap.com/2017/08/18/how-to-debug-ui5-application-packaged-into-a-mobile-device-via-cordova-with-a-custom-plugin/基于Cordova的SAP Cloud for Customer移動解決方案 - Yang Joey
大家好，我是Joey。SAP Cloud for Customer的移動解決方案，我們内部簡稱為Aurora。Aurora就是張韶涵的專輯《歐若拉》裡提到的，北歐神話中掌管黎明和曙光的女神。
很有意思的是，SAP C4C美國開發團隊的同僚們，以程式員特有的幽默感，在我們C4C本地開發環境的啟動腳本裡，加入了在控制台裡輸出Aurora女神的邏輯，讓我們每一位C4C開發人員每天都會一睹這位女神的尊容。給這些有情懷的同僚們點贊！
我2017年夏天加入SAP成都研究院C4C開發團隊時，非常好奇我每天工作中寫的Javascript代碼是如何運作在移動裝置上的。于是，以Android平台為例，我把SAP釋出到Android應用市場的應用解壓出來研究了一下。
我将從Android應用市場下載下傳下來的apk檔案字尾名改成zip，然後解壓縮。得到如下的檔案夾，這是一個經典的Android應用apk包的結構：
前面Jerry已經介紹過，用Cordova工具将C4C項目檔案打包成Android混合應用後，客戶安裝apk在Android裝置上後，該混合應用實際上運作于Android平台的WebView中。
WebView裡加載的JavaScript和HTML檔案來自于Cordova compile指令行建構出來的apk檔案裡。運作時，這些資源檔案通過apk内一個嵌入的Web伺服器加載到WebView裡。
當然，C4C移動應用上需要顯示的C4C業務資料，比如在手機上的C4C應用裡打開Account工作中心，看到的所有Account資料都來自對應的C4C背景系統。這些資料的讀取請求通過apk内部的嵌入Web伺服器發送到C4C背景 ABAP系統上去。
我們打開apk解壓而成的檔案夾下面的子檔案夾assets/www, 看到如下這些檔案結構：
其中最醒目的是好幾個zip包：
- cod.zip
- oberon.zip
- oberon.ui5.zip
這幾個zip即是整個C4C前端實作的完整代碼，包含JavaScript代碼和CSS樣式表檔案。我們可以打開oberon.zip看看裡面的具體内容。
下圖左邊是登入某個C4C系統後在Chrome開發者工具的Sources标簽頁裡觀察到的加載的JavaScript檔案，右邊是混合應用的apk檔案裡包含的oberon.zip裡的内容。
做過Fiori應用的朋友們還記得，Fiori應用的入口，如果是配置到Fiori Launchpad作為一個Tile來通路，那麼入口就是Component.js, 否則作為一個standalone的應用，入口是包含了sap-ui-core.js的網頁，通常是index.html。
C4C應用的入口是後者，讓我們看看index.html的内容：
可以看到index.html加載了兩個js檔案，運作了app.initialize()方法，該方法被定義在加載的第二個js檔案js/index.js裡面，打開這個index.js檔案之後發現的确是該initialize 方法加載了SAP的UI标準庫，主題庫，語言等:第27行的sap-ui-core.js就是我們的老朋友了。
而loadOberon和前面多次提及的oberon.zip, 這個oberon是什麼意思？實際就是SAP C4C的UI架構名稱，該架構包含了使用UI Designer開發的XML View，背景存儲這些View的XRepository，以及渲染這些View的JavaScript代碼等等。整套架構在我之前的文章 SAP成都研究院C4C光明左使：SAP Cloud for Customer 使用SAP UI5的獨特之處 裡也有介紹。
Jerry之前以Java端的加法器為例，介紹了如何開發一個新的Cordova插件。Jerry也提到了SAP Mobile Platform裡開發的Cordova插件的集合稱為Kapsel。同樣，在C4C基于Android平台的apk檔案解壓出來的檔案夾中，我們也能發現很多SAP C4C Cordova插件：
這些檔案夾裡存放的都是C4C 在Android平台的Cordova插件對應的JavaScript接口。C4C移動正是通過這些JavaScript接口來消費用Java開發的Cordova插件。
随便打開一個檔案夾com.sap.byd.cod.businessCardScanner裡的JavaScript檔案，從下圖第13行能看出，同之前Jerry在他的測試前端應用裡消費自開發的Java加法器插件一樣，用JavaScript消費Java插件的方法仍然是調用Cordova架構提供的方法cordova.exec，第三個參數BusinessCardScanner即對應插件實作的Java類名稱，scan即這個Java類的一個public方法名稱，用于實作插件的業務邏輯。
要擷取更多Jerry的原創技術文章，請關注公衆号"汪子熙"或者掃描下面二維碼: