武友新 江斌 張奎 陳軼

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

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

中圖分類號： 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? 引? 言

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

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

1? 開發(fā)方法

本文采用面向?qū)ο蠓椒枋鱿到y(tǒng)開發(fā)過程。采用面向?qū)ο蠓椒ㄩ_發(fā)軟件，通常需要從三個角度建立起三種不同的模型，它們分別是描述系統(tǒng)靜態(tài)結(jié)構(gòu)的對象模型、描述系統(tǒng)控制結(jié)構(gòu)的動態(tài)模型以及描述系統(tǒng)處理結(jié)構(gòu)的功能模型[3]。面向?qū)ο蠓椒ㄊ褂媒y(tǒng)一建模語言UML的類圖來建立對象模型，使用UML的序列圖、協(xié)作圖、狀態(tài)圖和活動圖等來建立動態(tài)模型，使用UML的用例圖來建立功能模型[4]。

用面向?qū)ο蠓椒▽W開發(fā)軟件的過程，是一個主動的、多次反復迭代的演化過程[5?6]。面向?qū)ο蠓椒ㄔ诟拍詈捅硎痉椒ㄉ系囊恢滦?，保證了在各項開發(fā)活動之間的平滑和無縫過渡[7?8]。

2? 需求分析與設計

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

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

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

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

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

5） 后臺管理是系統(tǒng)管理員根據(jù)系統(tǒng)運行實際情況來對系統(tǒng)進行動態(tài)調(diào)整和維護，具體包括系統(tǒng)管理、日志管理、管理員管理和災備管理等模塊。

2.1? 設計器

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

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

2.2? 渲染器

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

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

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

3? 系統(tǒng)實現(xiàn)

3.1? 系統(tǒng)架構(gòu)

移動開發(fā)中間件平臺在邏輯上分為四個層次，其系統(tǒng)架構(gòu)如圖8所示。

1） 基礎軟硬件層分為兩個層次，底層為主機、服務器系統(tǒng)、存儲備份系統(tǒng)和網(wǎng)絡系統(tǒng)，它們?yōu)橄到y(tǒng)的運行提供硬件支持。在此之上，是操作系統(tǒng)、數(shù)據(jù)庫管理系統(tǒng)和中間件系統(tǒng)，它們?yōu)橄到y(tǒng)運行提供基礎軟件支撐。

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

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

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

整個系統(tǒng)采用B/S架構(gòu)，用戶操作以HTTP 方式提交給應用服務器。應用服務器根據(jù)不同用戶請求通過控制器來進行分發(fā)，執(zhí)行對應操作，然后通過業(yè)務層寫入數(shù)據(jù)庫并返回最終響應到終端用戶。

3.2? 開發(fā)環(huán)境

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

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

3.3? 主要界面

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

3.4? 解決的關(guān)鍵技術(shù)問題

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

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

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

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

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

4? 結(jié)? 語

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

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

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

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

參考文獻

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

[2] 劉麗.基于Html5+Phone?Gap架構(gòu)的跨平臺移動驗票系統(tǒng)的設計與實現(xiàn)[D].武漢：湖北大學，2016.

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

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

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

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

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

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

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

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