王玉峰

（華北水利水電大學(xué)軟件學(xué)院，鄭州 450045）

校園信息聚合App的設(shè)計(jì)及實(shí)現(xiàn)

王玉峰

（華北水利水電大學(xué)軟件學(xué)院，鄭州 450045）

開發(fā)校園信息聚合App，旨在提供移動(dòng)端訪問(wèn)校園信息的便捷渠道而無(wú)需改造現(xiàn)有的校園網(wǎng)站。移動(dòng)客戶端App采用混合移動(dòng)開發(fā)技術(shù)，使用了Framework7框架；服務(wù)端采用Node.js技術(shù)，使用Express框架。服務(wù)端將爬取的校園信息存儲(chǔ)起來(lái)，客戶端以適合移動(dòng)端的形式呈現(xiàn)給用戶?？蛻舳撕头?wù)端都使用JavaScript技術(shù)，極大提高開發(fā)的便捷性，為類似系統(tǒng)開發(fā)提供思路。

校園App；混合移動(dòng)開發(fā)；Framework7；Node.js

0 引言

學(xué)校網(wǎng)站是師生獲取信息的重要渠道，在移動(dòng)手機(jī)普及的今天，通過(guò)手機(jī)獲取校園信息成為一種重要方式。但學(xué)校網(wǎng)站通常是針對(duì)桌面瀏覽器開發(fā)的，對(duì)移動(dòng)瀏覽器的支持并不好。對(duì)現(xiàn)存的學(xué)校網(wǎng)站進(jìn)行重新開發(fā)來(lái)提供良好的移動(dòng)端瀏覽器支持，成本較高。

基于現(xiàn)存的學(xué)校網(wǎng)站信息，開發(fā)信息聚合App，來(lái)提供移動(dòng)端訪問(wèn)是另一個(gè)改造途徑。作為移動(dòng)端的助手App，校園信息聚會(huì)App應(yīng)當(dāng)提供如下功能：

（1）校園網(wǎng)站發(fā)布的靜態(tài)頁(yè)面信息，包括學(xué)校通知、學(xué)校新聞、學(xué)術(shù)活動(dòng)、媒體報(bào)道、團(tuán)委信息、教務(wù)信息、就業(yè)信息等。信息版塊可以彈性增加，靈活擴(kuò)展功能范圍，同時(shí)允許用戶訂閱信息版塊，從而只關(guān)注感興趣的信息。

（2）學(xué)校通知等重要信息發(fā)布后，可以推送到移動(dòng)端，及時(shí)提醒用戶查看，而不用用戶頻繁刷新；提供收藏功能，幫助用戶更快查看重要信息；提供優(yōu)化的移動(dòng)端搜索功能，支持模糊搜索和智能排序。

（3）訪問(wèn)教務(wù)系統(tǒng)信息，包括教師課表、班級(jí)課表、課程課表、成績(jī)查詢等；提供生活輔助信息，包括校園活動(dòng)、失物招領(lǐng)等；查看教務(wù)、就業(yè)、宣傳、圖書等部門的公眾號(hào)信息。校園信息聚合App，實(shí)際上大部分是校園信息的精簡(jiǎn)“拷貝”，同時(shí)針對(duì)移動(dòng)終端的的特點(diǎn)作了優(yōu)化及擴(kuò)展，相關(guān)的開發(fā)技術(shù)包括了移動(dòng)端App開發(fā)、服務(wù)端網(wǎng)絡(luò)爬蟲及數(shù)據(jù)處理等。

1 基于Framework7開發(fā)移動(dòng)端混合應(yīng)用

移動(dòng)App開發(fā)模式主要包括Native App（原生開發(fā)模式）和Web App（網(wǎng)頁(yè)開發(fā)模式）兩大類，以及在這兩大類基礎(chǔ)上衍生出的Hybrid App（混合開發(fā)模式）[1]。原生應(yīng)用功能全面，運(yùn)行效率較高，但是開發(fā)成本較高。混合應(yīng)用的全部視圖或者部分視圖是網(wǎng)頁(yè)，使用HTML/CSS/JavaScript來(lái)開發(fā)，通常模仿原生UI（用戶界面）組件。混合應(yīng)用可以使用Cordova將制作的Web頁(yè)面打包到原生App容器中，另外，Cordova的插件機(jī)制使得Web頁(yè)面能夠用JavaScript訪問(wèn)原生的設(shè)備功能，如攝像頭、麥克風(fēng)等?；旌蠎?yīng)用模式極大提高了開發(fā)效率。

移動(dòng)Web框架為開發(fā)混合應(yīng)用提供了便利，F(xiàn)ramework7是一個(gè)開源免費(fèi)的移動(dòng)Web框架，可以用來(lái)開發(fā)混合移動(dòng)應(yīng)用，或者開發(fā)iOS&Android風(fēng)格的Web App[2]。其突出特點(diǎn)有：（1）支持 Android和 iOS兩種風(fēng)格的UI（用戶界面）；支持眾多UI組件；（2）支持下拉刷新和向下無(wú)限滾動(dòng)；（3）默認(rèn)使用AJAX加載頁(yè)面，也支持運(yùn)行時(shí)創(chuàng)建動(dòng)態(tài)頁(yè)面，還支持內(nèi)聯(lián)頁(yè)面；（4）內(nèi)置與jQuery類似的DOM（文檔對(duì)象模型）庫(kù)Dom7，內(nèi)置輕量高效的模板庫(kù)Template7。

總體上，F(xiàn)ramework7是開箱即用的，功能強(qiáng)大，運(yùn)行流暢，而且官方支持中文文檔。校園信息聚合App的業(yè)務(wù)邏輯并不復(fù)雜，也沒(méi)有特殊的渲染需求，所以采用了基于Framework7的混合移動(dòng)開發(fā)技術(shù)。

2 基于Node.js和Express開發(fā)服務(wù)端

Node.js是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境，它運(yùn)行在服務(wù)端，使用它的核心模塊可以進(jìn)行進(jìn)程管理、網(wǎng)絡(luò)通信、文件讀寫等。Node.js使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式I/O的模型，使其輕量又高效，擅長(zhǎng)處理龐大的并且高吞吐量的并發(fā)連接[3]。Node.js的包管理器npm（Node包管理器），構(gòu)造了龐大的開源生態(tài)系統(tǒng)，使用Node.js開發(fā)應(yīng)用，便于利用各種開發(fā)庫(kù)，加快開發(fā)速度。

Express是基于Node.js的快速、開放、極簡(jiǎn)的Web開發(fā)框架，它提供一系列強(qiáng)大的特性，幫助創(chuàng)建各種Web和移動(dòng)設(shè)備應(yīng)用。Express為開發(fā)者提供了多種功能，例如模板解析、中間件、路由解析等，通過(guò)這些功能可以快速搭建具有完整功能的網(wǎng)站。校園信息聚合App使用Node.js和Express開發(fā)服務(wù)端，其也采用Ja?vascript來(lái)開發(fā)，這樣前端App、后端Web服務(wù)器就采用了統(tǒng)一的技術(shù)體系，方便快捷。

3 系統(tǒng)設(shè)計(jì)及實(shí)現(xiàn)

基于Framework7和Node.js的校園信息聚合App的系統(tǒng)框圖如圖1所示：

圖1 校園信息聚合App系統(tǒng)框架

從上圖可知，數(shù)據(jù)源是校園網(wǎng)站頁(yè)面，數(shù)據(jù)持久化到MySQL數(shù)據(jù)庫(kù)。共有兩條數(shù)據(jù)流，一條是Node.js網(wǎng)絡(luò)爬取學(xué)校網(wǎng)站頁(yè)面并存儲(chǔ)數(shù)據(jù)到數(shù)據(jù)庫(kù)，另一條是從數(shù)據(jù)庫(kù)中取出數(shù)據(jù)并以JSON（JavaScript對(duì)象表示）格式返回給App，交由Framework7處理并呈現(xiàn)。

3.1 網(wǎng)絡(luò)爬蟲及數(shù)據(jù)存儲(chǔ)

學(xué)校網(wǎng)站通常具有靜態(tài)的導(dǎo)航頁(yè)面，并鏈接到具體信息頁(yè)面，網(wǎng)絡(luò)爬蟲從導(dǎo)航頁(yè)面開始。例如學(xué)校通知頁(yè)面，其信息處理過(guò)程如下：

（1）每3分鐘爬取一次學(xué)校通知導(dǎo)航頁(yè)，獲得導(dǎo)航頁(yè)面的文本。在項(xiàng)目中集成node-schedule包，實(shí)現(xiàn)定時(shí)運(yùn)行函數(shù)；在項(xiàng)目中集成superagent包，基于給定的地址獲得頁(yè)面的HTML文本。

（2）HTML具有相對(duì)規(guī)范化的文本層次結(jié)構(gòu)，從中提取每條學(xué)校通知的標(biāo)題、發(fā)布部門、發(fā)布時(shí)間、詳情頁(yè)面地址。在項(xiàng)目中集成cheerio包，在HTML DOM中定位每條通知，提取其中的細(xì)節(jié)信息。

（3）查看通知是否已經(jīng)存儲(chǔ)到數(shù)據(jù)庫(kù)，如果沒(méi)有，則將通知存儲(chǔ)到MySQL數(shù)據(jù)庫(kù)的表中。在項(xiàng)目中集成mysql包，進(jìn)行記錄的查詢及插入操作。

眾多頁(yè)面信息，不同頁(yè)面的爬取頻率不一；每一信息版塊，數(shù)據(jù)庫(kù)中都對(duì)應(yīng)一張表。在爬取訪問(wèn)受限的頁(yè)面時(shí)，可以使用無(wú)頭瀏覽器（headless browser）如PhantomJS、Zombie.js來(lái)模擬用戶訪問(wèn)頁(yè)面，從而破除限制。系統(tǒng)實(shí)現(xiàn)時(shí)使用了PhantomJS來(lái)爬取用戶的教務(wù)系統(tǒng)信息以及學(xué)校部門的微信公眾號(hào)信息。

3.2 App和服務(wù)器之間的數(shù)據(jù)交互

App和服務(wù)器之間是通過(guò)JSON來(lái)進(jìn)行通信的，JSON是輕量級(jí)的文本數(shù)據(jù)交換格式。以在App中查看學(xué)校通知為例，其處理過(guò)程如下所示：

（1）在Express中注冊(cè)查看學(xué)校通知的路由，當(dāng)匹配到約定的請(qǐng)求學(xué)校通知對(duì)應(yīng)的URL時(shí)，執(zhí)行回調(diào)函數(shù)；

（2）用戶啟動(dòng)App頁(yè)面，或者刷新頁(yè)面時(shí)，App頁(yè)面使用Ajax（異步JavaScript和XML）向約定的URL發(fā)出請(qǐng)求，并攜帶必要的數(shù)據(jù)，數(shù)據(jù)格式為JSON。

（3）在路由對(duì)應(yīng)的回調(diào)函數(shù)中，使用MySQL包訪問(wèn)MySQL數(shù)據(jù)庫(kù)，取出數(shù)據(jù)，并將結(jié)果以JSON格式返回；

（4）Framework7對(duì)返回的JSON格式數(shù)據(jù)進(jìn)行處理，將數(shù)據(jù)和預(yù)先使用Template7編譯的模板進(jìn)行綁定，之后將列表項(xiàng)通過(guò)Dom7模塊插入到頁(yè)面列表中，頁(yè)面得以更新。

在服務(wù)端，主要工作是使用Express注冊(cè)每一信息版塊的路由，定義路由的回調(diào)函數(shù)，回調(diào)函數(shù)中主要是訪問(wèn)數(shù)據(jù)庫(kù)并轉(zhuǎn)換數(shù)據(jù)格式；在App端，主要工作是設(shè)計(jì)每一版塊的列表模板，并發(fā)起AJAX請(qǐng)求，將AJAX返回的JSON數(shù)據(jù)填充到模板，最后更新頁(yè)面DOM。

3.3 集成極光推送

為了實(shí)現(xiàn)消息推送，系統(tǒng)實(shí)現(xiàn)時(shí)集成了極光推送[4]，極光推送為免費(fèi)用戶提供基礎(chǔ)推送服務(wù)，而且不限定消息數(shù)和用戶數(shù)。當(dāng)服務(wù)端抓取到新的重要信息，例如學(xué)校通知時(shí)，服務(wù)端將要推送的消息轉(zhuǎn)發(fā)至極光推送的服務(wù)器，再推送給客戶端手機(jī)系統(tǒng)，具體操作及使用流程如下所示：

（1）在極光推送網(wǎng)站注冊(cè)用戶，并注冊(cè)App得到AppKey和 masterSecre；

（2）服務(wù)端集成Node.js SDK，使用AppKey和mas?terSecre得到JPush對(duì)象，使用它發(fā)送通知；

（3）Cordova集成 JPush PhoneGap/Cordova推送插件，此插件負(fù)責(zé)與極光推送服務(wù)器、手機(jī)系統(tǒng)通知模塊，以及App之間的通信；

（4）App的頁(yè)面中使用JavaScript注冊(cè)收到通知或者用戶單擊手機(jī)通知欄項(xiàng)目時(shí)的回調(diào)函數(shù)。

3.4 系統(tǒng)運(yùn)行效果圖

使用Cordova可以將制作的頁(yè)面打包成Android/iOS應(yīng)用，其中Android應(yīng)用（如下圖2、3所示）采用了Material風(fēng)格。App的主要信息版塊有學(xué)校通知、學(xué)術(shù)動(dòng)態(tài)、學(xué)生活動(dòng)、新聞報(bào)道、微信動(dòng)態(tài)、媒體華水、教學(xué)助手、生活助手等，導(dǎo)航頁(yè)面都是靜態(tài)的頁(yè)面（如下圖2所示），動(dòng)態(tài)頁(yè)面如學(xué)校通知（如下圖3所示），需要從服務(wù)端取得，并且支持下拉刷新和向下加載更多。

圖2 導(dǎo)航頁(yè)面功能列表

圖3 學(xué)校通知頁(yè)面下拉刷新

4 結(jié)語(yǔ)

本文給出了基于移動(dòng)Web框架Framework7開發(fā)的移動(dòng)混合校園信息聚合App，其中服務(wù)端是基于Node.js的服務(wù)端Web框架Express。服務(wù)端通過(guò)網(wǎng)絡(luò)爬蟲獲得學(xué)校網(wǎng)站信息，解析并存儲(chǔ)到數(shù)據(jù)庫(kù)中，以REST風(fēng)格來(lái)提供數(shù)據(jù)訪問(wèn)，后供App來(lái)拉取。系統(tǒng)開發(fā)中還集成了極光推送，可以把重要信息及時(shí)推送到App。

基于混合移動(dòng)開發(fā)技術(shù)和Node.js開發(fā)的校園信息移動(dòng)端App框架清晰，容易擴(kuò)展，前后端均采用了統(tǒng)一的Javascript技術(shù)，容易上手，開發(fā)速度較快，為低成本開發(fā)校園信息App提供了思路。當(dāng)App運(yùn)營(yíng)測(cè)試成熟后，可以考慮直接接入學(xué)校網(wǎng)站信息相關(guān)的數(shù)據(jù)源。

[1]蔣健健.移動(dòng)APP開發(fā)模式探討[J].數(shù)字技術(shù)與應(yīng)用,2017(02):202-203.

[2]鄺洪勝.基于Python的電商導(dǎo)購(gòu)APP設(shè)計(jì)與實(shí)現(xiàn)[D].華南理工大學(xué),2015：19-21.

[3]駱文亮.Node.js服務(wù)器技術(shù)初探[J].無(wú)線互聯(lián)科技,2014(03):227.

[4]周兵.基于Android數(shù)據(jù)交互系統(tǒng)的研究與實(shí)現(xiàn)[J].湖南工程學(xué)院學(xué)報(bào)(自然科學(xué)版),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-），男，河南南陽(yáng)人，碩士研究生，助教，研究方向?yàn)橛螒蜷_發(fā)、全棧開發(fā)

2017-08-01

2017-08-30