移动开发中间件平台的设计与实现

武友新 江斌 张奎 陈轶

摘  要： 在移动互联网快速发展的大背景下，各种类型的移动终端操作系统（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.