作為全球最傑出的企業管理軟體提供商之一，SAP 的解決方案涵蓋了從 PC 端到移動裝置等多個平臺。筆者在 SAP 成都研究院工作了 15 年，對企業管理軟體領域內的移動開發也有所涉獵。本文將我過去工作中關於移動開發中積累的一些經驗和大家交流，請社群內移動開發的專家們不吝賜教。

本文透過以下三部分，分享筆者在 SAP 經歷過的移動應用開發的專案經驗：

(1) 基於 Java 的 Android 原生移動應用開發
(2) 基於 UI5 + Cordova 的混合移動應用開發
(3) 基於 SAP BTP 平臺 Mobile Service 的移動應用開發

移動作業系統裡的最耀眼的兩顆明星，iOS 和 Android，於 2007 年先後誕生。SAP 隨後也推出了一系列基於 iOS 和 Android 平臺的原生移動應用。以 2011年筆者所在的 CRM 開發團隊，負責開發的名為 SAP Customer Briefing 的一款 Android 原生應用為例，該應用能幫助使用者，高效快速地瀏覽應用連線遠端的 CRM 系統裡儲存的客戶主資料，顯示每個客戶的 Company Profile, 歷史業務資料，Key People，銷售機會，社交媒體相關資訊等維度的資料。

![](https://img-blog.csdnimg.cn/img_convert/3dee390593f16327f2d1f8acb4e1f5d0.png)

CRM 系統裡的客戶主資料資訊，透過 OData 暴露給 Android 原生應用消費。OData 是一種描述如何建立和訪問 Restful 服務的 OASIS 標準，我們採取 ABAP 這門程式語言來實現供 Customer Briefing 應用消費的 OData 服務，具體原始碼位於 CRM 系統名為 CRM_ODATA 開發包內。

![](https://img-blog.csdnimg.cn/img_convert/7bd18aecf2ca24b5aa352eb827f12a16.png)

對於這種典型的 iOS/Android 移動原生應用連線遠端 CRM 系統的應用場景，因為 CRM 系統部署在企業內網受防火牆保護，移動原生應用無法透過 HTTP 直接消費防火牆後面的 OData 服務。

為了解決內外網穿越問題，我們採用了 SUP 和 SAP Netweaver Gateway 的組合方案，將位於公網的原生移動應用的 OData 請求，轉發到內網防火牆後的 ABAP On-Premises 系統進行業務處理。

SUP 即 Sybase Unwired Platform 的縮寫，是一個移動企業應用程式平臺 (Mobile Enterprise Application Platform, 簡稱 MEAP)。SUP 是一種用於管理移動應用程式的中介軟體，主要用於在 移動裝置和 SAP 系統之間儲存和傳遞資料。

![](https://img-blog.csdnimg.cn/img_convert/183fef2f7377bc2c612977efb509a55e.png)

基於 UI5 + Cordova 的混合移動應用開發

採用移動原生應用開發方式釋出的移動應用，企業需要為同一個業務場景分別維護 iOS 和 Android 兩套不同的程式碼線。隨著 SAP 自研的前端開發框架 UI5 的誕生，以及 Cordova 開源專案的不斷成熟，我們在 2014 年起開始 SAP CRM Fiori 移動應用開發時，選擇了 UI5 + Cordova 的技術解決方案。

SAP UI5 是 SAP UI Development Toolkit for HTML5 的簡稱，是 SAP 為了快速開發具有 Fiori 設計語言風格的 UI，構建企業級 Web 應用而推出的一款前端開發框架，包含豐富的介面控制元件、CSS 頁面展示模板、數百個工業圖示，以及支援控制元件的擴充套件功能。

Cordova 是一個開源的移動開發框架，透過 Cordova，開發人員可以用 HTML5 和 JavaScript 等通用的 Web 開發技術，完成跨平臺的移動應用開發，即達到類似 Java 的 "一次編譯，到處執行" 的效果。

![](https://img-blog.csdnimg.cn/img_convert/cf1a345d4fd8cd810c3085b732914836.png)

SAP CRM Fiori 移動應用採取 UI5 + Cordova 組合方案後，作為應用開發人員，我們使用 UI5 完成了 Web 應用的開發，然後再使用 Cordova 提供的 build 工具，將開發好的前端應用，打包成能夠安裝到 iOS 和 Android 平臺上去的混合移動應用(Hybrid Mobile Application )。所謂混合移動應用，是為了同使用原生開發手段得到的 native 應用相區分。對混合移動應用的終端使用者來說，其使用者體驗同原生移動應用幾乎沒有太大差別。

下圖是 Cordova 官網上的架構圖。圖中上半部分橘色的 Cordova Application，即前端 Web 應用使用 Cordova 工具打包後的生成的混合應用。執行時，這個混合應用裡的前端資原始檔被載入，渲染並且執行在一個嵌入的 HTML Rendering Engine，即 WebView控制元件內部。這個嵌入的 WebView 透過 Cordova 框架提供的外掛(Plugins)，能夠訪問移動作業系統的 Native API，比如相機，陀螺儀，本地儲存等系統呼叫。

另一方面，Cordova 也具有極佳的可擴充套件性。如果混合移動應用裡需要使用的某些移動作業系統提供的 API，並不被 Cordova 現有外掛支援，此時還可以直接在 iOS 或者 Android 等移動開發平臺上，自行開發自定義 Cordova 外掛(即下圖藍色的 Custom Plugins)，在該外掛裡使用 iOS 的 Object C & Swift，Android 系統的 Java & kotlin 等程式語言，呼叫移動作業系統的 API，然後透過JavaScript 介面，將這些 Custom Plugin 暴露給前端應用消費。

![](https://img-blog.csdnimg.cn/img_convert/1262c58e4ca1047a76a681dacfcf0bd3.png)

對混合移動應用的終端一旦用 UI5 結束 Web 應用的開發之後，將其打包成特定移動平臺上可以安裝並執行的混合移動應用，採取簡單的命令列即可完成。

如下圖所示，這是我用 UI5 完成的一個服務訂單列表的應用。下面我將展示如何使用 Cordova 的構建工具，生成一個可以在 Android 平臺安裝的 APK 檔案。

![](https://img-blog.csdnimg.cn/img_convert/1e165f85cdc8d55c308a1e3efbd4a452.png)

首選使用命令列安裝 Cordova：

npm -g install cordova:

然後新建一個資料夾，進入該資料夾內部，使用命令列建立一個新的 Cordova 專案：

cordova create JerryUI5HelloWorld

![](https://img-blog.csdnimg.cn/img_convert/2255debf934f80fed0cd08c6f4df372d.png)

cordova 命令列為我們自動建立瞭如下的資原始檔。此時 platforms 資料夾還是空的，因為我們尚未新增該Cordova 專案支援的目標移動平臺。
![](https://img-blog.csdnimg.cn/img_convert/4ef5b4af6e2fdfff19acbd4ee2d6f9ef.png)

使用命令列新增對 Android 平臺的支援：

cordova platform add android

![](https://img-blog.csdnimg.cn/img_convert/5c92596511a69be1c49edc98f59c8b20.png)

之後 platforms 資料夾內就會多出一個 android 資料夾，裡面包含的資原始檔都是生成 Android APK 安裝檔案所必需的。

![](https://img-blog.csdnimg.cn/img_convert/4e8b1d55f1a2ff66a1defd2a33f8e545.png)

將完成開發的 UI5 應用複製到 Cordova 專案根目錄下的 www 檔案裡，然後執行命令列 cordova prepare，根目錄下 www 檔案內的資源自動被複製到 platforms/android 資料夾內。

最後使用命令列 cordova compile 進行打包，生成的針對 Android 平臺的混合移動應用的 APK 檔案，就出現在資料夾 platforms/android/build/output/apk 裡了。

![](https://img-blog.csdnimg.cn/img_convert/a3a13ef31baed98483a9b66f49d41403.png)

把這個 APK 檔案複製到我的 Android 手機上進行安裝後執行，效果如下：

![](https://img-blog.csdnimg.cn/img_convert/a2fe1ec868b9236d5eb86f38f2f3edbb.png)

Cordova 有著極佳的可擴充套件性，即 Cordova 的官方架構圖裡提到的 Custom Plugin，自開發外掛，如下圖紅色高亮區域所示。

假設我們需要開發的混合移動應用，需要使用到 Android 系統一些硬體裝置比如陀螺儀。傳統的 Web 應用裡是無法透過 JavaScript 程式碼直接呼叫移動作業系統提供的原生 API，因此需要開發 Custom Plugin，作為溝通 Cordova 混合移動應用中的 JavaScript 程式碼和 移動作業系統中原生 API 的橋樑。

![](https://img-blog.csdnimg.cn/img_convert/35c69d2e1894bba1f608dae3ab4db9bd.png)

我們看一個具體的例子。以 Android 平臺為例，用 Java 實現兩個整數相加，來模擬平臺上的原生 API。我們在 Android 平臺以 Custom Plugin 的形式用 Java 實現一個加法器，然後用 Web 應用的 JavaScript 程式碼消費這個 Custom Plugin.

首先使用 npm 安裝 Cordova 外掛管理器。

命令列：npm -g install plugman

![](https://img-blog.csdnimg.cn/img_convert/3232f0f9a8b5132658bfd1af3051c0dc.png)

成功安裝外掛管理器後，用它建立一個 Custom Plugin:

命令列：plugman create -name Adder -plugin_id jerry.adder -plugin_version 1.0.0

![](https://img-blog.csdnimg.cn/img_convert/46b1e77a864d5a9aaad0fb13441528e5.png)

這個命令會自動建立一個名叫Adder的外掛，外掛id為jerry.adder, 版本號為1.0.0。

plugman 會自動生成一個名為 Adder 的資料夾，該 Custom Plugin 的實現原始碼就寫在 Adder 資料夾內：

![](https://img-blog.csdnimg.cn/img_convert/b4d1485accb95a33a72d8ee2fb6b381c.png)

進入 Adder 資料夾，為該外掛新增對 Android 平臺的支援：plugman platform add –platform_name android

![](https://img-blog.csdnimg.cn/img_convert/04a5d991f8c4a5287fef6adae0f9d354.png)

該命令會自動生成子資料夾 src/android 和外掛實現檔案Adder.java。現在可以動手編寫 Java 程式碼了。

用 Java 實現兩個整數的加法運算，運算元透過Web 應用的 JavaScript 程式碼透過引數 args 傳入，計算結果透過回撥上下文 CallbackContext 返回給呼叫端。

![](https://img-blog.csdnimg.cn/img_convert/48f5f3b6120d29f8be2422f6bec80ffb.png)

完成 Custom Plugin 開發之後，為其建立一個 package.json 檔案：

plugman createpackagejson ./

![](https://img-blog.csdnimg.cn/img_convert/308b42dbe1afaaa823ed07976d84b700.png)

自動生成一個 package.json 檔案。

![](https://img-blog.csdnimg.cn/img_convert/2428d753c30070f8346741fe5af1c9ca.png)

最後使用命令列將開發好的 Custom Plugin，安裝到混合移動應用中。

cordova plugin add Adder。

一切正常的話，能看到 BUILD SUCCESSFUL 的提示，意味著該外掛可以被 Web 應用的 JavaScript 程式碼消費了。

![](https://img-blog.csdnimg.cn/img_convert/fc3e319f28ef9493c854642b117eb891.png)

在移動混合應用資料夾 /platforms/android/assets/www/js 的 index.js 檔案裡，使用下面的 JavaScript 程式碼消費 Custom Plugin：

![](https://img-blog.csdnimg.cn/img_convert/63df47814eee01d9e4a18d6dd68d6401.png)

JavaScript 呼叫程式碼裡傳入的 action 名稱 performAdd, 必須和 Custom Plugin 實現 Java 程式碼裡接收的 action 名稱保持一致。Custom Plugin 的執行結果，透過上圖程式碼裡的 success 回撥函式，返回給 JavaScript 呼叫端。

上圖程式碼我在 JavaScript 程式碼裡傳入了 10 和 20 作為加數，傳遞給 Custom Plugin，在手機上執行這個混合移動應用，得到了加法器的計算結果 30.

![](https://img-blog.csdnimg.cn/img_convert/7264c81fb26d0c0737ce944a73109622.png)

Cordova 混合移動技術的出現，使得企業無需專門組建具有 iOS 和 Android 原生移動應用開發技能的團隊，只需維護一套 Web 應用的程式碼庫，就能交付跨平臺且使用者體驗不遜色於原生移動應用的混合移動應用，降低了應用的開發和維護成本。

SAP CRM 和 SAP Cloud for Customer 的移動應用，均是採取本文所述的 UI5 + Cordova 的技術方案開發而成。

![](https://img-blog.csdnimg.cn/img_convert/580505d1de6bad7d0f10666ece6edd84.png)

基於 SAP BTP 平臺 Mobile Service 的移動應用開發

隨著雲時代的到來，SAP 也推出了自己的雲原生應用開發平臺：SAP 業務技術平臺(SAP Business Technology Platform，下文簡稱 SAP BTP).

SAP BTP 將智慧企業應用程式與資料庫和資料管理、分析、整合和擴充套件功能整合到一個平臺中，適用於雲環境和混合環境，包括數百個用於 SAP 和第三方應用程式的預構建整合。

SAP BTP Service Marketplace 裡提供了各種類別開箱即用的服務，其中之一就是 Mobile Service，其底層基於 NativeScript，一個使用 JavaScript 構建原生移動應用的開源框架：
![](https://img-blog.csdnimg.cn/img_convert/6bf4e6a02b3245a65d6a3dd1dd8c9a56.png)

![](https://img-blog.csdnimg.cn/img_convert/25992862cf8e3c558c67ee6def8b6efb.png)

本文剛剛介紹過的基於 Cordova 開發而成的混合移動應用，其本質是一個執行在移動平臺 Webview 控制元件裡的 Web 應用，這也是其名稱中"混合(Hybrid)"的由來。

業界另一個流行的框架 React Native，構建出的是一個真正的原生移動應用，其使用的基礎 UI 元件與用 Object C或 Java 編寫的原生移動應用相比並無差異，只不過 React Native 應用裡的 UI 元件，是由 Web 開發人員透過 JavaScript 語言和 React 進行操縱，最後被編譯器轉換成原生元件罷了。

![](https://img-blog.csdnimg.cn/img_convert/291d395d94e7f8ad7f0971b1876016f1.png)

SAP BTP Mobile Service 基於的 NativeScript 框架的工作原理，和 React-Native 又有所不同。React Native 透過 Bridge 概念實現了 JavaScript 和移動作業系統原生 API 的雙向互動，而 NativeScript 編寫的JavaScript 程式碼，在一個稱之為 NativeScript Runtime 的環境中執行，後者負責 JavaScript 程式碼同移動平臺原生 API 互動。NativeScript Runtime 本質是一個 JavaScript 虛擬機器，在 Android 平臺上採用 Google V8 引擎實現，在 iOS 上基於 WebKit JavaScriptCore 實現。

![](https://img-blog.csdnimg.cn/img_convert/bde28be9cc3bfcc18d68648004e989ed.png)

我們登入 SAP BTP 控制檯，在 Service Marketplace 裡找到 Mobile Services，點選 Support 進入服務控制檯：

![](https://img-blog.csdnimg.cn/img_convert/f01073e8a28a0d611f9df4b6ca6f74ac.png)

新建一個應用：

![](https://img-blog.csdnimg.cn/img_convert/22bc18aa7df6cb954cd2ce1910eafe11.png)

維護應用的 ID 和 Name 欄位：
![](https://img-blog.csdnimg.cn/img_convert/708caab7f20243a9fad006ce99896368.png)

給該移動應用分配 Features：

![](https://img-blog.csdnimg.cn/img_convert/a1facfce9d8c05f6f7f1778ec73d1c20.png)

這些 Features 可以理解成 SAP 對企業級移動應用所需滿足的最基本功能集合所抽象出的一些最佳實踐。根據專案實際需要分配 Features 之後，我們用WebIDE生成的移動應用工程專案，將自動包含對應的模板實現。

其中一個名叫 Mobile Sample OData ESPM 的 Feature，扮演的是類似 UI5 開發中 Mock Server 的角色，可以讓移動應用在開發過程中，不需要連線遠端的 OData 服務實現。ESPM 即 Enterprise Sales Procurement Model 的縮寫, 包含 SalesOrder，Customers，Products 等一系列業務資料的集合。

![](https://img-blog.csdnimg.cn/img_convert/83a2b3f7b77219d3788b4db1ddde069a.png)

![](https://img-blog.csdnimg.cn/img_convert/d88d70b5ddfc4ae5d92c54b43a1856ca.png)

給移動應用分配好需要的 Features 之後，開啟 SAP WebIDE，啟用 Mobile Service Development Tools這個擴充套件：

![](https://img-blog.csdnimg.cn/img_convert/ae1c747952674cb3ab7058096c404c19.png)

成功啟用後，在 SAP WebIDE 左側會多出一個 MDK Development 的標籤：

![](https://img-blog.csdnimg.cn/img_convert/3e7795142c5b220915cec7f903b57167.png)

建立一個新的 MDK 專案：

![](https://img-blog.csdnimg.cn/img_convert/698c216dcb985dad542defda145ab797.png)

![](https://img-blog.csdnimg.cn/img_convert/75fc3dec263f8dcbccc7b90dd4f219f5.png)

在 Application ID 下拉選單裡，選擇剛才在 Mobile Service 控制檯裡建立並分配了 Features 的應用 ID com.sap.jerry.demo:

![](https://img-blog.csdnimg.cn/img_convert/c30b95050f8fc5337e50c28721a58f5e.png)

Mobile Service Development Tools 擴充套件自動生成的專案如下圖所示，其中檔案 Application.app 所起的作用，類似 Android原生開發專案中的 manifest.xml 配置檔案：

![](https://img-blog.csdnimg.cn/img_convert/8d29d01adb2ac47d26d443592a4b5f60.png)

如何將這個 WebIDE 裡的移動應用工程，部署到 Android 裝置上呢？右鍵選單裡選擇 MDK Deploy and Activate：

![](https://img-blog.csdnimg.cn/img_convert/bcbd6686bfaf29a4d6c840daa9b3cc18.png)
![](https://img-blog.csdnimg.cn/img_convert/c237541ebb73c16a630ea79021a7b905.png)

WebIDE 控制皮膚裡列印出部署成功的訊息：

![](https://img-blog.csdnimg.cn/img_convert/b15bb029bb175f1680e22c11eac6e594.png)

透過 WebIDE 部署成功後，會生成一個二維碼。此時 Android 移動裝置上若已安裝 SAP Mobile Services Client，掃描該二維碼，會自動在 Android 裝置上剛剛部署好的應用。

![](https://img-blog.csdnimg.cn/img_convert/36f330e4a187908e16acf820be4f45db.png)

SAP WebIDE 裡建立的 MDK 專案，生成的實際是 JSON 格式的後設資料。使用 Android 移動裝置上的 SAP Mobile Services Client 連線 SAP BTP Mobile Service 後，前者會從 Mobile Services 接收這些後設資料，繪製出 Android 原生應用的 UI，完成初始化動作。

筆者使用的 Android 手機，安裝 SAP Mobile Services Client 後，掃描二維碼，彈出登入提示視窗。輸入 SAP BTP 的使用者名稱和密碼登入：

![](https://img-blog.csdnimg.cn/img_convert/86f73f400be947c564afc489d03726a3.png)

之後點選 Get Started 按鈕：

![](https://img-blog.csdnimg.cn/img_convert/6325841701725c8dac90aa4f0c187137.png)

SAP Mobile Services Client 會連線 SAP BTP Mobile Service，下載 WebIDE 裡生成的 JSON 格式的應用後設資料並完成應用初始化操作。

![](https://img-blog.csdnimg.cn/img_convert/4af0b2ee1f7bf11b63645fd1a23c9105.png)

最後，成功在 Android 手機上顯示出之前在 WebIDE 裡分配 Features 時選中的 Mobile Sample OData ESPM 裡包含的本地測試資料，效果如下：

![](https://img-blog.csdnimg.cn/img_convert/4596e03485fb56a4eb8f24536e2d77bd.png)
![](https://img-blog.csdnimg.cn/img_convert/cfc649966528cb461685877bb8a9bb5a.png)
![](https://img-blog.csdnimg.cn/img_convert/a7f4ec5af73106fb11c79df3803d7236.png)

# 總結

本文依次分享了筆者在 SAP 成都研究院從事開發工作中，先後使用過的三種不同的開發移動應用的思路和技術。

如果您的公司也在開發面向企業級使用者的移動應用，並且具有原生移動開發技術能力很強的團隊，能夠承受分別為 iOS 和 Android 二者維護兩套不同的程式碼線，那麼當然可以選擇原生移動開發的技術路線。

如果移動應用的需求裡對移動作業系統原生 API 的依賴不高，並且希望充分利用開發團隊的 Web 開發技能，或者不希望為不同的移動平臺分別維護不同的程式碼線，則可考慮選擇基於 Cordova 的混合移動應用技術路線。

如果企業本身就已經在採取 SAP BTP 同其他 SAP 應用進行整合，願意直接重用 SAP BTP Mobile Services 提供的眾多開箱即用的 Mobile Features，可以考慮採取 SAP BTP Mobile Services 來進行移動應用開發。

![](https://img-blog.csdnimg.cn/img_convert/7a4a739023b5346e5d43bbbda081d7a0.png)

SAP 移動開發技術綜述

相關文章