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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: