王玉峰

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

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

王玉峰

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

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

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.3 集成極光推送

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

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

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

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

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

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

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

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

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

4 結(jié)語

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

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

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

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

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

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

2017-08-01

2017-08-30