移動開發中間件平臺的設計與實現

武友新 江斌 張奎 陳軼

摘? 要： 在移動互聯網快速發展的大背景下，各種類型的移動終端操作系統（Android，iOS等）之間存在巨大差異性，使得各種APP應用都需要單獨開發，費時費力且成本高。因此基于HTML5，CSS3，PhoneGap等技術設計了一套跨平臺的、專注于客戶展現端的、與具體業務和數據無關的APP通用開發工具，即移動開發中間件平臺。實踐結果表明，該設計可以大大提高移動應用系統的開發效率和維護效率，降低開發成本，保證軟件質量。

關鍵詞： 中間件平臺; 跨平臺開發工具; 需求分析; 設計器管理; 平臺設計; 移動應用

中圖分類號： TN911?34; TP311? ? ? ? ? ? ? ? ? ?文獻標識碼： A? ? ? ? ? ? ? ? ? ? ? 文章編號： 1004?373X（2020）06?0097?04

Design and implementation of mobile development middleware platform

WU Youxin1， JIANG Bin1， ZHANG Kui2， CHEN Yi1

（1. College of Information Engineering， Nanchang University， Nanchang 330031， China; 2. Kuni Solutions BV， Enschede 7545 SJ， Netherlands）

Abstract： Under the background of the rapid development of mobile internet， there are huge differences among various types of mobile terminal operating systems （Android， IOS， etc.）， which make various kinds of App need to be developed independently， resulting in large time?consumption， labor waste and high cost. Therefore， a general development tool for App that is cross?platform， focuses on the client display terminal， but is irrelevant to the specific business and data is designed based on the HTML5， CSS3， PhoneGap and other technologies， namely mobile development middleware platform. The actual application results show that this design can greatly improve the development and maintenance efficiency of mobile application systems， reduce development cost， and ensure software quality.

Keywords： middleware platform; cross?platform development tool; demand analysis; designer management; platform design; mobile application

0? 引? 言

隨著移動互聯網的高速發展和迅速普及，移動應用APP呈現出爆炸式增長的態勢[1]。隨之而來的是，由于移動終端的設備類型、操作系統的巨大差異性，導致每種操作系統（Android，iOS等）的客戶端軟件都需要單獨開發[2]。傳統的移動應用APP開發模式如圖1所示，這樣的開發方式導致項目技術難度大、開發周期長、開發費用高、系統維護困難等問題。

如何研制出一個移動開發中間件平臺，能夠屏蔽不同用戶、不同操作系統、不同機型、不同移動通信網絡的差別，通過集成的、可視化的開發環境，生成對應設備的客戶端軟件，方便軟件開發人員在較短時間內開發出用戶需要的APP應用軟件，這就是本文要解決的任務。采用移動開發中間件平臺開發APP應用如圖2所示。

1? 開發方法

本文采用面向對象方法描述系統開發過程。采用面向對象方法開發軟件，通常需要從三個角度建立起三種不同的模型，它們分別是描述系統靜態結構的對象模型、描述系統控制結構的動態模型以及描述系統處理結構的功能模型[3]。面向對象方法使用統一建模語言UML的類圖來建立對象模型，使用UML的序列圖、協作圖、狀態圖和活動圖等來建立動態模型，使用UML的用例圖來建立功能模型[4]。

用面向對象方法學開發軟件的過程，是一個主動的、多次反復迭代的演化過程[5?6]。面向對象方法在概念和表示方法上的一致性，保證了在各項開發活動之間的平滑和無縫過渡[7?8]。

2? 需求分析與設計

從系統的功能性需求角度來分析，移動開發中間件平臺具體包括用戶管理、應用管理、設計器、渲染器、后臺管理等部分。

1） 用戶管理是系統管理員對使用平臺進行應用開發的用戶來進行管理，主要涉及用戶的創建、用戶的刪除、用戶信息編輯等功能。特別是用戶信息編輯實際上是實現用戶信息的配置，具體涉及到用戶基本信息的配置（如用戶名、聯系電話、郵箱等）和安全信息的配置（如賬號、密碼等）。

2） 應用管理是用戶為其開發的一個或多個APP應用進行管理，具體包括應用的創建、應用的配置、應用的備份以及應用的刪除。其中應用的備份是為了方便用戶在原有的應用基礎上新建應用，然后進行修改。

3） 設計器是移動開發中間件平臺的核心功能，它為用戶提供開發APP應用的模板以及可視化的UI設計環境，主要包括頁面管理和控件管理兩個部分。

4） 渲染器包括解析引擎、編譯引擎和服務引擎三個部分，它的功能是將用戶使用設計器設計的應用文件（包括HTML5文件、JavaScript文件和CSS文件）解析、編譯成移動應用APP。

5） 后臺管理是系統管理員根據系統運行實際情況來對系統進行動態調整和維護，具體包括系統管理、日志管理、管理員管理和災備管理等模塊。

2.1? 設計器

設計器是移動開發中間件平臺的核心功能模塊，它為用戶提供開發移動應用的模板以及可視化的UI設計環境。要完成這樣的功能，需要設計器能對移動應用模板及UI界面進行頁面管理和控件管理。其中頁面管理包括添加頁面、刪除頁面、重命名頁面、編輯頁面等功能。通過對頁面的管理，平臺的用戶可以快速實現跨平臺移動應用軟件UI的設計和調用。控件管理主要包括添加控件、刪除控件、編輯控件和控件重命名等功能。設計器用例圖如圖3所示。

用例圖和類圖分別描述了系統的功能模型和對象模型，而時序圖、活動圖、狀態圖則描述了系統的動態模型。通常動態模型數量較多，為節省文章篇幅，分別用圖4和圖5描述設計器的頁面添加時序圖和活動圖。

2.2? 渲染器

渲染器工作流程如圖6所示，主要分為三個步驟：首先用戶設計文件通過解析引擎轉換輸出為HTML5，JavaScript和CSS文件;然后這些輸出文件經由編譯引擎打包生成針對具體平臺（Android，iOS等）的應用文件;最后通過服務引擎為終端用戶提供下載和安裝等服務。

渲染器中解析引擎主要是將用戶設計的文件解析生成對應的HTML5文件、CSS文件和JavaScript文件，具體包括獲取模板UI和獲取模板數據，以及解析模板UI和解析模板數據;編譯引擎的主要功能是將解析引擎生成的HTML5文件、CSS文件、JavaScript文件通過PhoneGap進行編譯和打包;服務引擎為終端用戶提供下載、安裝等服務。

渲染器用例圖如圖7所示。

3? 系統實現

3.1? 系統架構

移動開發中間件平臺在邏輯上分為四個層次，其系統架構如圖8所示。

1） 基礎軟硬件層分為兩個層次，底層為主機、服務器系統、存儲備份系統和網絡系統，它們為系統的運行提供硬件支持。在此之上，是操作系統、數據庫管理系統和中間件系統，它們為系統運行提供基礎軟件支撐。

2） 數據層包括數據管理、目錄管理以及相應的數據服務，主要承擔數據存儲的支撐服務和與Web Service通信。

3） 移動開發中間件平臺包括用戶管理、應用管理、設計器、渲染器和后臺管理五個部分。其中用戶管理主要是對平臺用戶進行管理;應用管理主要是對用戶開發的具體APP應用進行管理和維護;設計器主要是為用戶提供開發移動應用的前端頁面模板;渲染器主要是負責解析、編譯由設計器生成的前端界面;后臺管理主要承擔整個平臺的管理功能和維護功能。

4） 應用層通過移動開發中間件平臺為用戶創建并適配生成各類APP移動應用。

整個系統采用B/S架構，用戶操作以HTTP 方式提交給應用服務器。應用服務器根據不同用戶請求通過控制器來進行分發，執行對應操作，然后通過業務層寫入數據庫并返回最終響應到終端用戶。

3.2? 開發環境

本文使用NodeJS作為應用服務器，JavaScript和Java作為主要開發語言，MariaDB數據庫作為存儲工具，系統搭建在以Centos為操作系統的后臺服務器中。

NodeJS是一個采用C++編寫的JavaScript的運行環境[9]。JavaScript一直是用于前端開發的語言，而借助NodeJS可以讓后端服務器來運行JavaScript代碼，其采用Google Chrome瀏覽器的V8引擎，性能良好，同時提供很多系統級API，如文件操作、網絡編程等。NodeJS采用時間驅動、異步編程，為網絡服務提供了很好的支持，特別是在多用戶并發環境下，系統性能比Apache服務器更加優異和穩定[10]。

3.3? 主要界面

系統設計器及渲染器界面如圖9所示。界面左欄為功能模塊欄目，包括：用戶中心、應用管理、模塊管理、版本管理。界面右欄分為三個部分，從左至右分別為：組件欄、設計主窗口、組件的屬性設置。其中，組件欄中包含豐富的組件，包括容器組件、UI組件、硬件組件。設計主窗口包括兩個部分：設計窗口（左）和渲染窗口（右），用戶將需要的組件拖動到設計窗口中，完成UI設計，啟動編譯之后，系統會將編譯過程以及結果輸出到渲染窗口中，以便用戶查看。組件的屬性設置在界面的最右側，主要是為了幫助用戶調整組件的屬性，如顏色、大小、高度等。

3.4? 解決的關鍵技術問題

1） 提供集成、可視化的環境便于界面設計。現有跨平臺移動應用開發框架，如PhoneGap，Cordova等都只是應用開發框架，能幫助用戶生成項目文件、完成編譯打包等功能，但還沒有一個完善可用的集成化軟件來進行界面設計，這樣用戶就不能很直觀高效地進行移動應用開發。本文設計實現了一個基于Web的IDE開發環境，可以幫助移動開發人員無需任何原生環境輔助即可完成APP應用的開發、調試、跟蹤和模擬，并可借助內嵌的應用打包功能，創建可直接安裝到手機的本地應用安裝包，以便后續測試應用。

2） 采用基于Web的開發技術屏蔽移動終端對操作系統的依賴性。目前智能終端有多個操作系統，如iOS，Android，Windows Phone等。為方便用戶使用，開發人員需要開發多個不同版本的應用。為解決平臺依賴性問題，本文采用基于Web的解決方案，使得相同APP應用能夠運行在不同操作系統之上，而不需要針對不同的操作系統進行多次重復開發。采用基于Web的開發技術，移動開發人員遵循基于標準CSS技術的移動開發UI參考框架，即可完成一次開發、多平臺適配的目標。

3） 異步調用提高應用執行效率。該平臺采用Web的方式來達到跨平臺的效果，但是基于Web的方式存在明顯的效率問題。因為應用接口全部通過JavaScript來實現，這樣應用開發效率就局限于Webview的效率，特別是對一些計算密集型的應用或者模塊，效率問題更加突出。本文采用本地化的方式進行異步調用，從而避免Webview帶來的性能瓶頸。但是，本地化的異步調用會帶來平臺兼容性的問題，因此用戶需要在跨平臺和應用效率二者中找到一個合適的平衡點，這樣使得應用本身跨平臺性和執行效率都能滿足要求。

4） CSS中使用em解決UI分辨率適配問題。每個移動APP應用都有可能需要在眾多移動終端上保持一致效果，UI適配是工作的重中之重。本文設計原則是為不同分辨率的系統選取最貼近于人直觀感受舒適度的一個字體大小作為參考。為解決UI分辨率適配問題，平臺在CSS中使用em作為相對長度單位。em是相對于當前對象內文本的字體尺寸。如果當前對行內文本的字體尺寸未被人為設置，則系統采用默認的字體尺寸。例如在320×480分辨率的手機上，采用16 px大小字體作為參考量，一切元素的大小都是以參考量的相對比值（em）來定義，例如，在320×480分辨率下1 em= 16 px，在480×800分辨率下1 em=24 px。

通過這種方式可以保證同樣的界面代碼在不同分辨率下都能夠保持最貼近用戶的交互效果。UI中，在中間件中為不同屏幕密度（單位尺寸中可顯示的點數）默認定義好了字體，即使有新的分辨率手機出現，也會自動適配。目前參照Android屏幕密度劃分為低密度、普通密度、高密度、超高密度、超超高密度，分別定義字體14 px，16 px，24 px，32 px，48 px。

4? 結? 語

本文介紹了移動開發中間件平臺的設計與實現，該平臺主要由用戶管理、應用管理、設計器、渲染器以及后臺管理五大模塊組成。平臺具有三大特點：

1） 通過使用該平臺，用戶只需要對應用系統進行一次開發或遷移適配，就能夠自動生成不同種類操作系統（Android，iOS等）的客戶端軟件，可以大大提高移動APP應用的開發和維護效率，降低開發成本;

2） 該平臺為用戶提供可視化的集成開發環境，能實現項目的開發、調試、部署等全程功能，而且很多時候用戶只需要使用鼠標簡單地拖曳就可以完成應用的UI設計與數據綁定，進一步縮短項目實施周期;

3） 平臺內置了幾款通用的界面模版、常用布局（如九宮格、十二宮格、列表、正文、對話等）和豐富的UI控件（如文本輸入框、下拉選擇框、復選框、按鈕等），基本上可以滿足大多數的移動應用需求。

參考文獻

[1] 朱宇翔.基于HTML5的移動中間件的研究與[D].北京：北京郵電大學，2014.

[2] 劉麗.基于Html5+Phone?Gap架構的跨平臺移動驗票系統的設計與實現[D].武漢：湖北大學，2016.

[3] 肖敏.基于Apache Cordova的跨平臺智能家居終端應用研發[D].廣州：華南理工大學，2015.

[4] 李麗平，薛玉倩.基于HTML5跨平臺移動應用開發的研究與實踐[J].河北軟件職業技術學院學報，2017（2）：35?38.

[5] 張玉晴，黃瑾娉.基于HTML5的跨平臺移動應用關鍵技術的研究與實現[J].工業控制計算機，2013（3）：56?58.

[6] 杜帥.面向PhoneGap移動中間件的研究及開發[D].北京：北京郵電大學，2016.

[7] 潘春華，李俊杰，向花，等.基于Phone Gap的智能手機跨平臺應用[J].計算機系統應用，2014（7）：106?109.

[8] 李張永，陳和平，顧進廣.跨平臺移動Web開發框架與數據交互方法[J].計算機工程與設計，2014（5）：1827?1832.

[9] 潘曉夢，鄧建華，蘇厚勤.一種跨平臺移動應用方案的研究與實踐[J].計算機應用與軟件，2013（1）：180?182.

[10] 彭文沖，耿煜.跨平臺移動應用中間件的設計與實現[J].大眾科技，2015（3）：9?10.