SAP移動應用解決方案之一：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/

Take 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包：

這幾個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插件。

關於Cordova在SAP移動應用中的使用場景就介紹到這，感謝大家的閱讀。

更多閱讀

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！