HTML5应用 + Cordova = 平台相关的混合应用
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 platform add android
- 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的原創技術文章，請關注公眾號”汪子熙”或者掃描下面二維碼:
總結
以上是生活随笔為你收集整理的HTML5应用 + Cordova = 平台相关的混合应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Cordova将您的前端JavaSc
- 下一篇： HTML语法分析