HTML5應用+Cordova=平臺相關的混合應用

JerryWangSAP發表於2018-09-09
HTML

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平臺上的原始碼和工作原理：

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


相關文章