移動開發(fā)中間件平臺的設(shè)計(jì)與實(shí)現(xiàn)

武友新 江斌 張奎 陳軼

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

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

中圖分類號： TN911?34; TP311? ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識碼： 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ā)展和迅速普及，移動應(yīng)用APP呈現(xiàn)出爆炸式增長的態(tài)勢[1]。隨之而來的是，由于移動終端的設(shè)備類型、操作系統(tǒng)的巨大差異性，導(dǎo)致每種操作系統(tǒng)（Android，iOS等）的客戶端軟件都需要單獨(dú)開發(fā)[2]。傳統(tǒng)的移動應(yīng)用APP開發(fā)模式如圖1所示，這樣的開發(fā)方式導(dǎo)致項(xiàng)目技術(shù)難度大、開發(fā)周期長、開發(fā)費(fèi)用高、系統(tǒng)維護(hù)困難等問題。

如何研制出一個移動開發(fā)中間件平臺，能夠屏蔽不同用戶、不同操作系統(tǒng)、不同機(jī)型、不同移動通信網(wǎng)絡(luò)的差別，通過集成的、可視化的開發(fā)環(huán)境，生成對應(yīng)設(shè)備的客戶端軟件，方便軟件開發(fā)人員在較短時間內(nèi)開發(fā)出用戶需要的APP應(yīng)用軟件，這就是本文要解決的任務(wù)。采用移動開發(fā)中間件平臺開發(fā)APP應(yīng)用如圖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(xué)開發(fā)軟件的過程，是一個主動的、多次反復(fù)迭代的演化過程[5?6]。面向?qū)ο蠓椒ㄔ诟拍詈捅硎痉椒ㄉ系囊恢滦裕ＷC了在各項(xiàng)開發(fā)活動之間的平滑和無縫過渡[7?8]。

2? 需求分析與設(shè)計(jì)

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

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

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

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

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

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

2.1? 設(shè)計(jì)器

設(shè)計(jì)器是移動開發(fā)中間件平臺的核心功能模塊，它為用戶提供開發(fā)移動應(yīng)用的模板以及可視化的UI設(shè)計(jì)環(huán)境。要完成這樣的功能，需要設(shè)計(jì)器能對移動應(yīng)用模板及UI界面進(jìn)行頁面管理和控件管理。其中頁面管理包括添加頁面、刪除頁面、重命名頁面、編輯頁面等功能。通過對頁面的管理，平臺的用戶可以快速實(shí)現(xiàn)跨平臺移動應(yīng)用軟件UI的設(shè)計(jì)和調(diào)用?？丶芾碇饕ㄌ砑涌丶h除控件、編輯控件和控件重命名等功能。設(shè)計(jì)器用例圖如圖3所示。

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

2.2? 渲染器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.3? 主要界面

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

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

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

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

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

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

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

4? 結(jié)? 語

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

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

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

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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

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