校园信息聚合App的设计及实现

王玉峰

（华北水利水电大学软件学院，郑州 450045）

校园信息聚合App的设计及实现

王玉峰

（华北水利水电大学软件学院，郑州 450045）

开发校园信息聚合App，旨在提供移动端访问校园信息的便捷渠道而无需改造现有的校园网站。移动客户端App采用混合移动开发技术，使用了Framework7框架；服务端采用Node.js技术，使用Express框架。服务端将爬取的校园信息存储起来，客户端以适合移动端的形式呈现给用户。客户端和服务端都使用JavaScript技术，极大提高开发的便捷性，为类似系统开发提供思路。

校园App；混合移动开发；Framework7；Node.js

0 引言

学校网站是师生获取信息的重要渠道，在移动手机普及的今天，通过手机获取校园信息成为一种重要方式。但学校网站通常是针对桌面浏览器开发的，对移动浏览器的支持并不好。对现存的学校网站进行重新开发来提供良好的移动端浏览器支持，成本较高。

基于现存的学校网站信息，开发信息聚合App，来提供移动端访问是另一个改造途径。作为移动端的助手App，校园信息聚会App应当提供如下功能：

（1）校园网站发布的静态页面信息，包括学校通知、学校新闻、学术活动、媒体报道、团委信息、教务信息、就业信息等。信息版块可以弹性增加，灵活扩展功能范围，同时允许用户订阅信息版块，从而只关注感兴趣的信息。

（2）学校通知等重要信息发布后，可以推送到移动端，及时提醒用户查看，而不用用户频繁刷新；提供收藏功能，帮助用户更快查看重要信息；提供优化的移动端搜索功能，支持模糊搜索和智能排序。

（3）访问教务系统信息，包括教师课表、班级课表、课程课表、成绩查询等；提供生活辅助信息，包括校园活动、失物招领等；查看教务、就业、宣传、图书等部门的公众号信息。校园信息聚合App，实际上大部分是校园信息的精简“拷贝”，同时针对移动终端的的特点作了优化及扩展，相关的开发技术包括了移动端App开发、服务端网络爬虫及数据处理等。

1 基于Framework7开发移动端混合应用

移动App开发模式主要包括Native App（原生开发模式）和Web App（网页开发模式）两大类，以及在这两大类基础上衍生出的Hybrid App（混合开发模式）[1]。原生应用功能全面，运行效率较高，但是开发成本较高。混合应用的全部视图或者部分视图是网页，使用HTML/CSS/JavaScript来开发，通常模仿原生UI（用户界面）组件。混合应用可以使用Cordova将制作的Web页面打包到原生App容器中，另外，Cordova的插件机制使得Web页面能够用JavaScript访问原生的设备功能，如摄像头、麦克风等。混合应用模式极大提高了开发效率。

移动Web框架为开发混合应用提供了便利，Framework7是一个开源免费的移动Web框架，可以用来开发混合移动应用，或者开发iOS&Android风格的Web App[2]。其突出特点有：（1）支持 Android和 iOS两种风格的UI（用户界面）；支持众多UI组件；（2）支持下拉刷新和向下无限滚动；（3）默认使用AJAX加载页面，也支持运行时创建动态页面，还支持内联页面；（4）内置与jQuery类似的DOM（文档对象模型）库Dom7，内置轻量高效的模板库Template7。

总体上，Framework7是开箱即用的，功能强大，运行流畅，而且官方支持中文文档。校园信息聚合App的业务逻辑并不复杂，也没有特殊的渲染需求，所以采用了基于Framework7的混合移动开发技术。

2 基于Node.js和Express开发服务端

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它运行在服务端，使用它的核心模块可以进行进程管理、网络通信、文件读写等。Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效，擅长处理庞大的并且高吞吐量的并发连接[3]。Node.js的包管理器npm（Node包管理器），构造了庞大的开源生态系统，使用Node.js开发应用，便于利用各种开发库，加快开发速度。

Express是基于Node.js的快速、开放、极简的Web开发框架，它提供一系列强大的特性，帮助创建各种Web和移动设备应用。Express为开发者提供了多种功能，例如模板解析、中间件、路由解析等，通过这些功能可以快速搭建具有完整功能的网站。校园信息聚合App使用Node.js和Express开发服务端，其也采用Ja⁃vascript来开发，这样前端App、后端Web服务器就采用了统一的技术体系，方便快捷。

3 系统设计及实现

基于Framework7和Node.js的校园信息聚合App的系统框图如图1所示：

图1 校园信息聚合App系统框架

从上图可知，数据源是校园网站页面，数据持久化到MySQL数据库。共有两条数据流，一条是Node.js网络爬取学校网站页面并存储数据到数据库，另一条是从数据库中取出数据并以JSON（JavaScript对象表示）格式返回给App，交由Framework7处理并呈现。

3.1 网络爬虫及数据存储

学校网站通常具有静态的导航页面，并链接到具体信息页面，网络爬虫从导航页面开始。例如学校通知页面，其信息处理过程如下：

（1）每3分钟爬取一次学校通知导航页，获得导航页面的文本。在项目中集成node-schedule包，实现定时运行函数；在项目中集成superagent包，基于给定的地址获得页面的HTML文本。

（2）HTML具有相对规范化的文本层次结构，从中提取每条学校通知的标题、发布部门、发布时间、详情页面地址。在项目中集成cheerio包，在HTML DOM中定位每条通知，提取其中的细节信息。

（3）查看通知是否已经存储到数据库，如果没有，则将通知存储到MySQL数据库的表中。在项目中集成mysql包，进行记录的查询及插入操作。

众多页面信息，不同页面的爬取频率不一；每一信息版块，数据库中都对应一张表。在爬取访问受限的页面时，可以使用无头浏览器（headless browser）如PhantomJS、Zombie.js来模拟用户访问页面，从而破除限制。系统实现时使用了PhantomJS来爬取用户的教务系统信息以及学校部门的微信公众号信息。

3.2 App和服务器之间的数据交互

App和服务器之间是通过JSON来进行通信的，JSON是轻量级的文本数据交换格式。以在App中查看学校通知为例，其处理过程如下所示：

（1）在Express中注册查看学校通知的路由，当匹配到约定的请求学校通知对应的URL时，执行回调函数；

（2）用户启动App页面，或者刷新页面时，App页面使用Ajax（异步JavaScript和XML）向约定的URL发出请求，并携带必要的数据，数据格式为JSON。

（3）在路由对应的回调函数中，使用MySQL包访问MySQL数据库，取出数据，并将结果以JSON格式返回；

（4）Framework7对返回的JSON格式数据进行处理，将数据和预先使用Template7编译的模板进行绑定，之后将列表项通过Dom7模块插入到页面列表中，页面得以更新。

在服务端，主要工作是使用Express注册每一信息版块的路由，定义路由的回调函数，回调函数中主要是访问数据库并转换数据格式；在App端，主要工作是设计每一版块的列表模板，并发起AJAX请求，将AJAX返回的JSON数据填充到模板，最后更新页面DOM。

3.3 集成极光推送

为了实现消息推送，系统实现时集成了极光推送[4]，极光推送为免费用户提供基础推送服务，而且不限定消息数和用户数。当服务端抓取到新的重要信息，例如学校通知时，服务端将要推送的消息转发至极光推送的服务器，再推送给客户端手机系统，具体操作及使用流程如下所示：

（1）在极光推送网站注册用户，并注册App得到AppKey和 masterSecre；

（2）服务端集成Node.js SDK，使用AppKey和mas⁃terSecre得到JPush对象，使用它发送通知；

（3）Cordova集成 JPush PhoneGap/Cordova推送插件，此插件负责与极光推送服务器、手机系统通知模块，以及App之间的通信；

（4）App的页面中使用JavaScript注册收到通知或者用户单击手机通知栏项目时的回调函数。

3.4 系统运行效果图

使用Cordova可以将制作的页面打包成Android/iOS应用，其中Android应用（如下图2、3所示）采用了Material风格。App的主要信息版块有学校通知、学术动态、学生活动、新闻报道、微信动态、媒体华水、教学助手、生活助手等，导航页面都是静态的页面（如下图2所示），动态页面如学校通知（如下图3所示），需要从服务端取得，并且支持下拉刷新和向下加载更多。

图2 导航页面功能列表

图3 学校通知页面下拉刷新

4 结语

本文给出了基于移动Web框架Framework7开发的移动混合校园信息聚合App，其中服务端是基于Node.js的服务端Web框架Express。服务端通过网络爬虫获得学校网站信息，解析并存储到数据库中，以REST风格来提供数据访问，后供App来拉取。系统开发中还集成了极光推送，可以把重要信息及时推送到App。

基于混合移动开发技术和Node.js开发的校园信息移动端App框架清晰，容易扩展，前后端均采用了统一的Javascript技术，容易上手，开发速度较快，为低成本开发校园信息App提供了思路。当App运营测试成熟后，可以考虑直接接入学校网站信息相关的数据源。

[1]蒋健健.移动APP开发模式探讨[J].数字技术与应用,2017(02):202-203.

[2]邝洪胜.基于Python的电商导购APP设计与实现[D].华南理工大学,2015：19-21.

[3]骆文亮.Node.js服务器技术初探[J].无线互联科技,2014(03):227.

[4]周兵.基于Android数据交互系统的研究与实现[J].湖南工程学院学报(自然科学版),2015(03):47.

Abstract：The development of campus information syndication App is to provide mobile users with easy access to campus information without having to remodel existing campus sites.The mobile client App uses hybrid mobile development technology and the Framework7 framework.The server side uses Node.js technology and the Express framework.The server side stores the crawled campus information and the client pres⁃ents it to the user in a suitable form for the mobile end.Both the client and the server use JavaScript technology,which greatly improves the development convenience and provides an idea for similar system development.

Keywords：Campus App;Hybrid Mobile Development;Framework7;Node.js

Design and Implementation of the Campus Information Syndication App

WANG Yu-feng
（College of Software,North China University of Water Resource and Eletric Power，Zhengzhou 450045）

1007-1423（2017）25-0081-04

10.3969/j.issn.1007-1423.2017.25.020

王玉峰（1982-），男，河南南阳人，硕士研究生，助教，研究方向为游戏开发、全栈开发

2017-08-01

2017-08-30