校園信息聚合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