基于Hybrid的高校移动门户设计与开发

时东晓 罗伟雄 刘岚

摘  要： 需求决定了信息系统的技术路线选择与方案设计。高等职业院校在办学规模、人才培养目标、资源条件等方面有其自身特点，本文从高职院校的需求出发，通过分析移动App的三种开发模式，探讨了各种开发模式的优缺点，提出了以混合开发模式构建高职移动门户平台App，并与以中间件模式开发的校园移动门户融合，以低门槛、跨平台的方式构建高职移动门户App的解决方案。该方案已在广州城市职业学院成功应用，证明了混合App开发模式在高职移动校园建设上的可行性。

关键词： 信息技术;混合开发模式;移动门户;移动中间件

中图分类号： TP311    文献标识码： A    DOI：10.3969/j.issn.1003-6970.2019.05.027

本文著录格式：时东晓，罗伟雄，刘岚，等. 基于Hybrid的高校移动门户设计与开发[J]. 软件，2019，40（5）：140146

【Abstract】： Demand determines the technical route selection and design of information system. Vocational colleges in scale， personnel training target， resource conditions， such as has its own characteristics， in this paper， starting from the demand of higher vocational colleges， through the analysis of the three development modes of mobile App， this paper discusses the advantages and disadvantages of various patterns of development， put forward how to set up mobile portal platform App mixed development mode， and with the development of the campus mobile portal integration middleware model， built in the form of low threshold， cross-platform mobile portal App solution in high vocational colleges. The scheme has been applied to Guangzhou City Polytechnic success， proved that the hybrid App development mode in higher vocational moves the feasibility on the campus construction.

【Key words】： Information technology; Mixed development mode; Mobile portal; Mobile middleware

0  引言

隨着无线网络、4G/5G、智能手机终端、云计算等技术的发展，各种依托智能移动终端的APP凭借其不受时空约束、交互功能强大、使用便利、学习资源丰富、用户体验良好等优势，迅速被广大师生所乐于接受。而传统数字校园必须依托接入宽带互联网的电脑为用户终端，师生访问数字校园办理事务、获取服务或资源必定受到时间、空间的限制，便利性大打折

扣，高效率无从谈起。于是，将传统数字校园通过移动终端为师生们提供便捷服务，成为高职院校信息化建设的迫切需求和必选项目。但这并不是简单地复制和迁移，而是必须充分利用云计算技术和移动软件开发技术，开发出基于云端资源、适合移动终端运行，并且与PC端数字校园门户同步访问数字校园共享资源的APP，从而使广大师生与时俱进地享受到技术发展带来的便利与高效。本文就如何开展移动校园门户的设计与开发做了一些探索。

1  高职高专院校对移动门户应用的要求

高等职业院校移动门户应用指高职高专院校利用移动互联网技术，建设为用户在移动终端场景下使用的门户信息系统。高职高专院校利用该系统实现促进自身建设、使之适应在“互联网+”环境下对高职教育的新要求，为其人才培养目标服务。高职院校移动门户，既有“教育”属性，又有“技术”属性。

1.1  “教育”属性要求移动门户应用广而全

高等职业教育，在教育上一方面强调“职业”性，另外一方面区别于其他职业教育需要体现“高等”性。在就业导向的指挥棒下，高职院校在办学实践中均非常强调“职业性”，重视职业技能培养，并为之配套了学习系统、实训系统、实验仿真系统、教学资源系统、图书馆系统等信息化手段。区别于其他职业教育，高等职业教育还需要培养学生的综合素质和未来发展能力。社团活动、校园文化、心理健康等人文素质培养，也大量使用了信息化手段。

高职院校移动门户承载着在移动场景下，学校应用的集成与分发功能，是学校教学平台、服务平台和管理平台的集合体。这对移动门户应用的集成能力提出了很高的要求，需要能够支持各式各样的垂直领域内的移动应用。

1.2  “技术”属性要求移动门户小而灵

根据《高等教育信息化发展研究报告（2015）》，2014年度高职高专在校园网建设方面投入平均数为323万元，远低于一般本科院校的863万及211院校的1433万。高职高专院校在信息化建设中面临资源有限、人才不足、师生应用水平较低的情况。以何种技术构建高职院校移动应用门户，同时满足学习曲线平滑、开发成本低、能够快速迭代、广泛支持各种技术路线的移动应用的集成与分发则尤为重要。低门槛、跨平台、模块化、松耦合、接口集成、各子应用可以独立迭代，均是在技术上对移动门户应用的重要要求。

本文旨在结合广州城市职业学院移动门户项目，通过应用场景分析及功能需求分析，采用混合开发模式，并与移动门户中间件相融合，以一种低门槛、跨平台的混合移动开发策略对校园移动门户APP进行设计与开发。

2  主流移动应用开发模式

目前主流的开发模式包括原生应用程序、基于HTML5的WebAPP及基于第三方移动应用框架的混合开发模式[1]。三种方式各有利弊，在不同的应用场景各有所长：

2.1  原生应用程序开发模式

这是官方的开发方式，采用官方指定的开发语言（ObjectC/Swift、Java）、指定的SDK、指定的API开发符合规范的APP[2]。此类应用优点是：可调用几乎所有的手机硬件计算资源（GPS、摄像头、通讯录、文件系统等）;APP运行速度快、性能高、用户体验好;可离线使用;可发布到应用商店。缺点：原生虽然应用在用户体验上有着良好的表现，但是原生应用存在着开发困难、更新维护周期长等问题使得不能在短时间内快速推出不同功能的产品来适应用户的需求和变化，这成了移动信息化的瓶颈和难题[3]。

2.2  Web App开发模式

Web App是基于Web的系统和应用，是指通过使用Web和Web浏览器技术，跨越网络（互联网或内联网）完成一个或多个任务的应用程序，通常需要使用Web浏览器[4]。Web技术包括有：HTML5、CSS3、Javascript等。Web APP的优势：开发成本较低;学习门槛不高，一般會开发网页的程序员都能够开发Web APP;适配多种移动设备;成本低;跨平台和跨终端;迭代更容易;无需安装成本。缺点：Web APP自身的能力不全面;无法全部调用手机的全部硬件功能，会受到权限限制;用户很难沉淀下来建立较为稳固的联系。

2.3  Hybrid APP开发模式

Hybrid App混合开发模式是指，采用Web技术开发的Web App，通过打包程序封装成原生App，同时也可以通过开发原生插件的方式调用移动设备上的硬件资源。Hybrid App 综合使用了原生技术与Web技术，既实现了设备功能的调用，又在一定程度上保证了跨平台的特性[5]，因此Hybrid App在当今App开发解决方案中得到了广大开发者的青睐。Hybrid的优点是：主要采用Web技术（HTML5、CSS、Javascript）开发，开发门槛较低，基本懂得开发网页的程序员都可以参与开发;几乎拥有原生应用的所有特性;具有跨平台特性;开发成本较低，只需要一次开发;容易维护等。缺点：性能没有原生应用高;用户体验略低于原生应用。

3  高职院校移动门户APP设计与实现

移动门户是指以校园网与移动通信网协同为基础，将学校原有信息子系统的服务职能进行有效的转型，利用已建设的校园数据中心，以手机为移动终端为高校师生提供全方位的服务和管理。移动校园的服务功能包括从吃饭到上课、自修到住宿所有工作学习生活娱乐社交，从入校报到至离校就业的全程校园服务，为提高校园管理和服务水平搭建平台，实现“一人一机，走遍校园”便捷的、一站式、全方位、个性化、主动式的现代化高校服务管理理念。移动校园以手机为移动终端充分发挥其随身携带的特点，在一定程度上突破了时域和地域的限制，真正做到任何时间、任何地点。

鉴于学校自身的技术能力、维护能力、运维能力，移动校园APP采用Hybrid App开发模式无疑是一个较为合适的开发模式。目前主流的Hybrid App一般由前端UI框架开发结合打包工具来实现，前端UI框架包括有SenchaTouch、jQueryMobile、Angular ionic、Framework7、React等，而打包工具主要有AppCan、PhoneGap、Cordova、Hbuilder等。

下面以广州城市职业学院移动门户App为例，探讨移动门户APP设计与实现。广州城市职业学院移动门户App采用了SenchaTouch作为前端开发框架，结合了PhoneGap作为打包应用开发工具，而内容提供方面在校园应用与App客户端之间架设了Kurogo移动中间件，通过中间件把来自各个校园应用所提供的数据接口（通常是JSON格式的数据）汇聚在一起，最终呈现在移动门户App上。以下是移动移动门户APP包含的各种技术框架、技术路线介绍（图1）。

3.1  总设计框架

3.1.1  智能终端访问层

智能终端访问层包含iPhone、AndroidPhone富客户端应用程序，并支持主流的智能手机平台如Windows Phone、BlackBerry等以Web浏览的方式来获取平台的服务。该层提供了新生报到、校园新闻、学院概况、校园地图、校园分光、图书馆等应用模块，充分发挥移动的优势，满足师生教学、学习、生活等需求。

3.1.2  网络接入层

网络接入层是智能终端和应用服务平台通讯的物理基础，目前可以利用运营商移动网络或校园网wifi接入。

3.1.3  平台服务层

平台服务层涵盖了用户身份认证、手机信息维护、权限分配管理、应用升级发布、通知实时传递、OA办公、社区应用、财务应用、教学应用、迎新应用、综合校情、科研应用、宿舍管理、资助奖评、毕业就业、人事管理、教学分析、校外特色应用等丰富的功能，使学院领导、广大学生、教师以及相关的校友或家长在这些领域内享受丰富的信息化服务以及生动有趣的特色增值服务。

3.1.4  数据持久/支撑层

数据持久/支撑层为平台核心组件、业务应用、增值应用一个高层、统一、安全和并发的数据持久机制。完成对各种数据进行持久化的编程工作，并为平台服务层提供服务。

移动校园门户的主要目的是在移动平台上提供学院现有数字校园的各种服务，在上述框架图中，第三层和第四层采用私有云（Private Cloud）的部署模型。私有云具备许多公用云环境的优点，例如弹性、适合提供服务，两者差别在于私有云服务中，数据与程序皆在组织内管理，不会受到网络带宽、安全疑虑、法规限制影响;此外，私有云服务让供应者及用户更能掌控云基础架构、改善安全与弹性[6]。

通过数据持久/支撑层，我们可以将学院现有数字校园中各种业务系统提供的各项服务进行拆分重组，以WebService、DB、XML等各种接口方式向平台服务层提供访问服务。

3.2  移动门户APP客户端设计与实现

3.2.1  Web App前端开发框架SenchaTouch

广州城市职业学院移动门户APP采用了SenchaTouch作为前端UI开发框架[7]。Sencha Touch是一个集用户界面与交互组件Javascippt UI库，能够构建类似原生APP应用，它提供了优秀的MVC编程模式[8]、模块化、及JavaScript类系统等特性，有利于团队协作开发与快速构建类App应用风格的可交互式界面。这些特性全部都是基于HTML5和CSS3的WEB标准，能够全面兼容Android和iOS移动设备。

其特点特性包括：

1）基于最新的WEB2.0标准：HTML5，CSS3，JavaScript。

2）良好的跨平台支持，能够支持Android和iOS系统的移动设备。

3）丰富的前端组件：日历、菜单、App布局、标签等，开发时只需要适当的配置便能投入使用。

4）数据集成，提供了强大的数据包，能够通过Ajax、jsonP、YQL等方式绑定到组件模板，写入本地离线存储[9]。

3.2.2  打包工具PhoneGap

PhoneGap是目前最受欢迎的跨平台开发工具之一，它能够让Web开发者使用HTML5、JavaScript和CSS快速开发出跨平台移动应用程序。它几乎覆盖了所有主流智能终端平台，包括iOS、Android、Blackberry、Symbian、Bada以及Windows Phone等[10]。PhoneGap最初是来自于开源项目Cordova，目前由著名的软件公司Adobe公司收购，因此在后来的发展上得到了很好的支持，并提供了很多调用原生移动操作系统计算资源的插件。

移动门户APP通过了PhoneGap的封装打包，转换成适合安装在各种手机操作平台的APP应用，目前主要是Android和iOS两个主流平台，并能发布到应用市场，提供给广大的师生下载与使用。

3.3  移动中间件平台

上面3.2提到的两点主要是Hybrid APP的客户端部分的实现，下面看一下客户端数据支撑部分是如何实现的。

移动门户的数据支撑部分，主要采用了移动中间件Kurogo。Kurogo来自于2008年MIT的移动校园项目。Kurogo提供灵活的架构，用以驱动内容丰富、多方位的移动网站和本地移动应用。移动中间件强调干净的整合、卓越的跨平台用户体验和深度的定制性。经过多年的开发，Kurogo 框架已经帮助国内外例如哈佛、清华等多所院校建立了移动门户。

Kurogo是基于PHP语言开发，PHP的特点是安全性高、容易上手、执行速度快、跨平台、模板化，例如kurogo当中的模块就是使用了PHP的Smarty模版语言。kurogo是一个轻量级应用，只需要简单的搭建一个Apache服务器就能运行起来。

移动门户系统整体的结构由数据层、业务逻辑层、表示层三部分组成。下面是移动中间件平台的整体设计图（图2）。

由整体设计图可以看出，移动门户中间件平台分为了三个组成部分：表示层、业务逻辑层、数据层。

3.3.1  中间件表示层

中间件通过HTML模板转换引擎，以及设备检测技术，能够生成适应不同终端的响应式Web Apps，同时，这些Web App能够无缝地在社交网络App中显示与传播，此外，中间件也提供了支持移动应用App的接口，让App能够与中间件进行数据的交换。

3.3.2  中间件业务逻辑层

业务逻辑层中间件的核心部分，主要功能有：接收从各个业务系统中的提供的标准数据源（例如是xml、json），通过模块解析机制转换成展现内容;提供了众多的基础模块支持，例如校园地图、人物简介、新闻、相册等等，通过这些基础模块支持，让整个平台能够快速的搭建起来，通过简单的配置就能够投入使用;它提供了认证与授权功能，能够对接CAS、LDAP等认证与用户数据库，并根据用户信息提供模块访问控制;提供模板引擎、设备检测技术以及App接口，对表示层进行有效的支援。

3.3.3  中间件数据层

在数据层这里，我们可以看到中间件本身不处理数据，数据大部分都是来源于各个子的业务系统，中间件把这些从各个业务系统提供的标准数据源汇聚起来，通过自身的模块转换并呈现给用户。

3.4  消息推送

移動门户APP消息推送采用了百度云推送平台[11]，开发第三方消息管理平台用于消息管理以及对接百度云推送平台，实现消息的推送，百度云推送框架图如下（图3）：

消息推送包括以下功能：消息管理：管理与发布消息;标签设备管理：提供对设备组的管理，用于组播;设备登记管理：能够查看用户的设备对接情况，以及了解用户拥有的设备数等;订阅管理：管理消息订阅内容;日志管理：查看消息日志情况。

3.5  移动化集成

只有不断的增加新的应用系统，才能保持学校移动门户的生命力。移动中间件为移动化集成提供了快捷、高效的支持。移动化的集成包括三种方式：模块复用、引入链接、唤醒第三方App。模块复用：通过配置默认模块即可投入使用;引入链接：把WebApp（轻应用）URL直接接入到移动校园;唤醒第三方App：调用SchemeURL即唤醒第三方App。

4  应用实例及部署效果

4.1  应用实例展示

“广州城市职业学院移动门户”是学校面向全校师生提供的移动门户服务系统。该系统由And?roid、iOS及Web APP三个客户端，移动中间件及数据接口构成。系统集成了校园新闻、校务通知、学校概况、招生信息、课程表、新生报到、迎新统计、交通图、周程表、校园黄页、移动邮箱、个人信息、教学信息、校园卡、移动学习、移动图书、移动公文、云存储等业务功能。

通过Hybrid APP开发模式，广州城市职业学院移动门户APP能够快速封装成iOS和Android两个平台版本，也因为基于Web技术开发，因此应用也能够快速开发出兼容浏览器浏览的Web APP，能够在社交网络中分享。

以下是实际部署效果界面展示（图4）：可以看到应用被部署在多个设备平台仍然保持着良好的用户体验，这些都归功于Hybrid APP开发模式。

4.2  移动校园APP的实际使用情况

下面通过分析广州城市职业学院移动校园APP的统计数据，来了解移动校园APP实际使用情况。图5是百度移动统计。

从百度统计的数据看出，App从上线1年以来，累计使用过的用户有5011人，平均每周活跃用户是1000人，每月用户留存率是58.82%，人均每日的使用次数是1.81次。作为一个校园App应用，周活跃用户数有1000人，平均每人每天打开1.81次，说明广大师生每天都在使用App并认可了App对他们的帮助，使用频次尽管不能与社交类App相比，但是作为校园类应用来说已经是很不错了。

5  结语

通过三种APP开发模式的优缺点对比，以及对“广州城市职业学院移动门户”APP的设计与实践进行了介绍与分析，不难看出，基于Hybrid开发模式的高职移动门户APP在实际的应用中是可行的。通过Hybrid开发的APP能够大大地简化APP开发过程，缩短APP开发时间，Hybrid APP开发对于不断增加的用户需求、不断变化、不断发展的校园应用来说，起到了重大的促进作用，是一种切实可行的开发模式。

参考文献

[1] 董恒竞. 一种企业移动应用平台架构设计[J]. 软件， 2016， 37（01）： 136-138.

[2] 吕媛媛， 李可. 移动端应用设计中的响应式实现方法[J]. 软件， 2016， 37（02）： 107-109.

[3] 杜帅， 鄂海红， 许可. 混合移动应用开发模式的新策略[J]. 软件， 2015， 36（06）： 12-17.

[4] 周森鹏， 陆正球， 张城， 王溢达. 基于HTML5的企业WebApp设计与实现[J]. 现代计算机（专业版）， 2015（07）： 49-52.

[5] 钟迅科. 基于HTML5的跨平台移动Web应用与混合型应用的研究[J]. 现代计算机（专业版）， 2014（19）： 32-36.

[6] 罗伟雄， 时东晓， 曾纪霞， 等. 基于云计算以HJO为架构的企业共享型移动通讯录[J]. 软件， 2015， 36（7）： 87-100.

[7] 周秀媛， 陈娜， 李晓斌. 基于““HTML”5”的“Web”交互界面设计[J]. 科技展望， 2016， 26（18）： 6.

[8] 吕海东. 基于WebSocket和SenchaTouch的移动Web应用设计与实现[J]. 电脑知识与技术， 2014， 10（05）： 942-945.

[9] 亢华爱. 用HTML5开发移动应用[J]. 科技创新导报， 2012（07）： 30-31+33.

[10] 楊叶， 陈琳， 董启标. 基于PhoneGap的跨平台移动学习资源设计与开发探究[J]. 现代教育技术， 2014， 24（02）： 100-107.

[11] 代超， 邓中亮. 基于Netty的面向移动终端的推送服务设计[J]. 软件， 2015， 36（12）： 1-4+21.