徐麗君

（江蘇大學(xué) 計(jì)算機(jī)科學(xué)與通信工程學(xué)院， 江蘇 鎮(zhèn)江 212013）

隨著智能終端技術(shù)和3G 移動(dòng)技術(shù)的蓬勃發(fā)展， 移動(dòng)電話用戶數(shù)量和手機(jī)網(wǎng)民數(shù)量的迅速增長(zhǎng)， 基于3G 技術(shù)的移動(dòng)互聯(lián)網(wǎng)絡(luò)應(yīng)用也日漸增多。 尤其在作為新技術(shù)使用的前沿陣地——大學(xué)校園中，80%以上的師生使用Android 系統(tǒng)為代表的移動(dòng)智能終端系統(tǒng)。在此背景下，基于Android 的校園移動(dòng)信息門戶平臺(tái)應(yīng)運(yùn)而生[1-3]。 校園移動(dòng)信息門戶能夠滿足廣大師生對(duì)于隨時(shí)隨地獲取校園相關(guān)信息的需求，彌補(bǔ)了傳統(tǒng)數(shù)字校園的不便捷性和信息滯后性[4]的缺陷，為建立移動(dòng)數(shù)字校園做好鋪墊。

1 校園移動(dòng)信息門戶總體設(shè)計(jì)

1.1 校園移動(dòng)信息門戶總體架構(gòu)設(shè)計(jì)

當(dāng)移動(dòng)終端訪問系統(tǒng)時(shí)，首先進(jìn)行設(shè)備識(shí)別，根據(jù)識(shí)別結(jié)果進(jìn)行內(nèi)容和圖形適配， 并根據(jù)適配結(jié)果返回相應(yīng)的信息[4]。 校園移動(dòng)信息門戶的總體架構(gòu)如圖1 所示，系統(tǒng)從上到下依次是用戶層、表示層、業(yè)務(wù)應(yīng)用層和數(shù)據(jù)層。 用戶層就是移動(dòng)門戶的使用者； 表示層是指用戶使用的android 系統(tǒng)智能終端的種類； 業(yè)務(wù)應(yīng)用層即該平臺(tái)要提供的各類功能；數(shù)據(jù)層訪問各個(gè)部門和學(xué)院的數(shù)據(jù)，并進(jìn)行數(shù)據(jù)的整合提供給移動(dòng)門戶使用。

圖1 移動(dòng)門戶總體架構(gòu)圖Fig. 1 Structure diagram of the mobile portal

1.2 校園移動(dòng)信息門戶功能模塊設(shè)計(jì)

根據(jù)對(duì)我?，F(xiàn)有校園信息門戶的分析，參考國(guó)內(nèi)外大學(xué)移動(dòng)校園門戶的設(shè)計(jì)， 擬定了該移動(dòng)校園門戶的功能如圖2所示。 該移動(dòng)門戶提供的主要功能模塊如下：

1）用戶登錄：采用統(tǒng)一身份認(rèn)證方式認(rèn)證不同用戶，方便用戶查詢自身相關(guān)信息。

2）新聞資訊：顯示學(xué)校的新聞、公告、學(xué)術(shù)報(bào)告、就業(yè)信息等。

3）個(gè)人應(yīng)用：提供個(gè)人信息查詢、課程表查詢、成績(jī)查詢等信息。

4）校園地圖：整個(gè)校區(qū)的地圖，采用Google Map 作為后臺(tái)。

5）校園百科：提供學(xué)校概況、校園生活、班車查詢等信息。

6）APP 推薦：推薦一些學(xué)習(xí)娛樂APP 的下載。

7）選項(xiàng)：對(duì)移動(dòng)門戶的相關(guān)設(shè)置和操作。

圖2 移動(dòng)門戶功能模塊圖Fig. 2 Function block diagram of the mobile portal

1.3 技術(shù)選型

目前移動(dòng)應(yīng)用開發(fā)模式主要包括： 傳統(tǒng)的原生開發(fā)、基于HTML5[5]的Web 應(yīng)用開發(fā)以及Hybrid 混合應(yīng)用開發(fā)。 它們?cè)诠δ荛_發(fā)、用戶體驗(yàn)、設(shè)備兼容[6]等方面有較大的差異，了解每一種方法的優(yōu)劣將有助于做出更適合自己的選擇[7]。下面就通過開發(fā)難度、跨平臺(tái)性等方面對(duì)這3 種開發(fā)模式做個(gè)對(duì)比，見表1。

表1 移動(dòng)應(yīng)用開發(fā)模式的對(duì)比表Tab. 1 Test comparison of mobile application development pattern

通過對(duì)比不難發(fā)現(xiàn)將原生應(yīng)用和Web 應(yīng)用相結(jié)合的混合開發(fā)模式具有開發(fā)門檻低、跨平臺(tái)性能高等的優(yōu)勢(shì)。 而且HTML5 技術(shù)在不斷發(fā)展中，相信在不久的將來混合開發(fā)所依賴的各種技術(shù)有希望得到改進(jìn)[8]。 基于以上分析，本文的校園信息門戶移動(dòng)平臺(tái)的開發(fā)采用混合開發(fā)模式。

2 校園移動(dòng)信息門戶詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)

2.1 校園移動(dòng)信息門戶UI 設(shè)計(jì)與實(shí)現(xiàn)

UI 是客戶端的用戶界面，負(fù)責(zé)從用戶方接收命令，請(qǐng)求，數(shù)據(jù)傳遞給業(yè)務(wù)層處理， 然后將結(jié)果呈現(xiàn)出來。 Android 從3.0 開始引入fragment，主要是為了支持更動(dòng)態(tài)更靈活的界面設(shè)計(jì)。 要管理Fragment，需使用FragmentManager 類提供的幾種方法：使用方法findFragmentById（），獲取activity 中已存在的Fragment；使用方法popBackStack（）從activity 的后退棧中彈出Fragment； 使用方法addOnBackStackChangedListerner（）注冊(cè)一個(gè)偵聽器以監(jiān)視后退棧的變化； 還可以使用FragmentManager 打 開 一 個(gè) FragmentTransaction 來 執(zhí) 行Fragment 的事務(wù)，比如add（），remove（），replace（），最后使用commit（）方法提交事務(wù)。

該平臺(tái)主要定義了5 個(gè)fragment：mFragments = new Fragment[5]；分別對(duì)應(yīng)新聞資訊、個(gè)人應(yīng)用、校園地圖、江大百科和App 推薦5 個(gè)部分。定義了一個(gè)方法根據(jù)上述5 個(gè)標(biāo)題位置的不同選擇顯示不同的fragment， 該方法的部分實(shí)現(xiàn)代碼如下：

public void switchFragment（int position）{

FragmentTransaction t=this.getSupportFragmentManager（）

.beginTransaction（）；

switch （position） {

case 1:// 新聞資訊

this.mFragments[pos] = new NewsFragment（）；

break；

case 2:// 個(gè)人應(yīng)用... }

t.add（R.id.center_frame， this.mFragments[pos]）；

t.commit（）；

最終實(shí)現(xiàn)的移動(dòng)門戶的UI 界面如圖3 所示。

圖3 移動(dòng)門戶UI 界面Fig. 3 UI of the mobile portal

2.2 校園移動(dòng)信息門戶新聞資訊模塊設(shè)計(jì)與實(shí)現(xiàn)

該模塊客戶端利用Android 系統(tǒng)平臺(tái)提供的API 進(jìn)行界面和功能設(shè)計(jì)[9]，服務(wù)器端主要使用PHP 的CodeIgniter 框架開發(fā)實(shí)現(xiàn)相關(guān)的WebService，然后使用Apache HTTP 技術(shù)實(shí)現(xiàn)客戶端與服務(wù)器端的數(shù)據(jù)通信。 整個(gè)模塊的信息交互流程如圖4 所示。

由于新聞資訊模塊所要展示的學(xué)校要聞， 信息公告，學(xué)術(shù)報(bào)告等這些信息分布在不同的網(wǎng)站地址中，為了得到這些信息，后臺(tái)服務(wù)器端首先采用Python 腳本語言編寫的網(wǎng)頁爬蟲代碼從這些不同的網(wǎng)站中將這新信息抓取出來。 抓取的主要代碼如下：

圖4 新聞資訊模塊信息交互圖Fig. 4 Interaction diagram of the news information module

def crawler（html，mainRegStr，http2，eachHeadRegStr，each BodyRegStr，

eachImgRegStr）:

mainReg=str（mainRegStr）

eachHeadReg=eachHeadRegStr

eachBodyReg=eachBodyRegStr

pubDateReg=r'2d{3}－d{1，2}－d{1，2}'

newlist=getContent（html， mainReg）# 獲取每條新聞的鏈接

dateList=getPubDate（html，pubDateReg）# 獲取每條新聞的發(fā)布日期

newlist=newlist[0:len（dateList）]# 按日期的長(zhǎng)度為準(zhǔn)

totalList=[]

pubDateNum=0

for eachnewid in newlist:

eachnewurl=http2+eachnewid # 拼接每條新聞的具體鏈接地址

req=urllib2.Request（eachnewurl）

response = urllib2.urlopen（req）

htmlContent = response.read（）

dateString=str（dateList[pubDateNum]）

pubDateNum=pubDateNum+1

if response.geturl（） ! = eachnewurl:continue

titleList=getContent（htmlContent，eachHeadReg）

bodyList=getContent（htmlContent，eachBodyReg）

imageList=getContent（htmlContent，eachImgRegStr）

bodyString=str（filter_tags（bodyList[0]））

eachNewDic ['originUrl']=eachnewurl eachNewDic['originContent']=htmlContent eachNewDic ['urlmd5']=urlmd5 eachNewDic['title']=titleString eachNewDic ['content']=bodyString eachNewDic['pubDate']=dateString

totalList.append（eachNewDic）

return totalList

其次將抓取到的信息存入數(shù)據(jù)庫中， 然后使用PHP 的CI 框架實(shí)現(xiàn)的Webservice 從數(shù)據(jù)庫中讀取相應(yīng)的信息，最后將數(shù)據(jù)返回給Android 客戶端。 由于json 是一種輕量級(jí)的數(shù)據(jù)交換格式，具有良好的可讀和便于快速編寫的特性，且數(shù)據(jù)體積小，傳輸快，方便于手機(jī)應(yīng)用的數(shù)據(jù)下載，因此定義服務(wù)器端返回json 類型的數(shù)據(jù)[10]。 服務(wù)器端返回新聞欄目的部分實(shí)現(xiàn)代碼如下：

$db = $this－＞load－＞database（'public'， TRUE）；

$query = $db －＞query （"select mobilecategoryid ，mobilecategoryname from tb_mobilecategory order by mobilecategoryid asc"）； //讀取數(shù)據(jù)庫

$data = $query－＞result_array（）；

$column_map=array（"MOBILECATEGORYID"=＞"UID"，"MOBILECATEGORYNAME"=＞"NAME"）；

$result = array（）； $responses = array（）；

foreach（$data as $rename）

{foreach（$column_map as $db_key=＞$json_key）

$result[$json_key] = $rename[$db_key]；

array_push （$responses， $result）； }

$arr=array（"CATEGORIES"=＞$responses）；

$db－＞close（）；

echo json_encode（$arr）； //返回json 格式信息

當(dāng)新聞資訊模塊客戶端部分啟動(dòng)后，首先判斷網(wǎng)絡(luò)連接狀況，如果網(wǎng)絡(luò)連接良好就通過網(wǎng)絡(luò)請(qǐng)求后臺(tái)數(shù)據(jù)，然后通過數(shù)據(jù)下載模塊獲取當(dāng)前最新的資訊，前臺(tái)獲取到后臺(tái)返回的數(shù)據(jù)后通過數(shù)據(jù)解析模塊將信息解析整合后進(jìn)行展示，最后通過數(shù)據(jù)存儲(chǔ)模塊將最新數(shù)據(jù)存儲(chǔ)到SD 卡的緩存中。 在網(wǎng)絡(luò)狀況不好或無網(wǎng)絡(luò)的狀況下則直接讀取緩存在本地SD卡的數(shù)據(jù)，進(jìn)行離線閱讀。 具體的流程圖如圖5 所示。

圖5 新聞資訊模塊客戶端流程圖Fig. 5 Flow chart of news information module client

網(wǎng)絡(luò)請(qǐng)求功能基于Android 內(nèi)置的HttpClient 開發(fā)，使用HttpClient 完成發(fā)送請(qǐng)求及接收部分實(shí)現(xiàn)代碼如下：

HttpPost doPost = new HttpPost（url）；

if （params ! = null） {

UrlEncodedFormEntity entity = new UrlEncodedFormEntity（params，format）；

doPost.setEntity（entity）；}

HttpResponse response = httpClient.execute（doPost）；

return response；

數(shù)據(jù)的下載主要采用Android 提供的AsyncTask 異步下載類來實(shí)現(xiàn)，數(shù)據(jù)下載完成后采用FileInputStream 類進(jìn)行文件的存儲(chǔ)。 對(duì)于從后臺(tái)下載到的json 數(shù)據(jù)，Android 前端就需要采用json 數(shù)據(jù)解析技術(shù)對(duì)其進(jìn)行解析。 前臺(tái)客戶端解析json 數(shù)據(jù)的部分代碼如下：

public static JSONArray parseJsonArray （JSONObject jsonObject， String tag） {

JSONArray jsonArray = null；

if （jsonObject.has（tag）） {

jsonArray = jsonObject.getJSONArray（tag）；}

return jsonArray；

為了將解析出來的新聞分門別類的進(jìn)行展示，我們仿照新浪微博底端的標(biāo)簽切換顯示，做一個(gè)類似的效果，在學(xué)校要聞、信息公告、學(xué)術(shù)報(bào)告、團(tuán)學(xué)活動(dòng)、學(xué)院信息和就業(yè)信息之間進(jìn)行水平切換操作。這里要用到HorizontalScrollView 類，該類可以讓同一個(gè)界面容納更多的內(nèi)容并實(shí)現(xiàn)水平滾動(dòng)切換的效果。 主要代碼為：

mTabs = （ScrollableTabView） view.findViewById （R.id.scroller）；

this.mTabs.setNess（mContext， mCatagories， this）；

this.mTabs.selectTab（i）；

為了將某一特定新聞欄目下的新聞一條條的展示出來，我們采用Android 的ListView 控件來實(shí)現(xiàn)。 ListView 控件有3 個(gè)重要的屬性元素[11]：ListView，用于繪制列表的View 視圖；適配器，可以把內(nèi)容對(duì)應(yīng)到列表上；數(shù)據(jù)，用于在列表上顯示的文本內(nèi)容、圖片和按鈕等。 新聞資訊模塊的運(yùn)行效果如圖6 所示。

圖6 新聞資訊模塊效果圖Fig. 6 UI of news information module

3 結(jié)束語

該移動(dòng)信息門戶實(shí)現(xiàn)了預(yù)期的效果，為廣大師生提供了一個(gè)隨時(shí)隨地了解校園動(dòng)態(tài)及個(gè)人信息的窗口，有效地改善了現(xiàn)有學(xué)習(xí)和生活模式，實(shí)現(xiàn)校園生活的移動(dòng)化。

[1] 李元元，賈璐. 基于Android平臺(tái)的手機(jī)終端公交查詢系統(tǒng)設(shè)計(jì)[J]. 計(jì)算機(jī)與現(xiàn)化，2013（6）:159-161.

LI Yuan-yuan，JIA Lu. Design of mobile phone terminal bus query system based on Android platform[J]. Computer and Modernization，2013（6）:159-161.

[2] 劉歡，盧蓓蓉，馬晨輝. 淺析高校校園移動(dòng)應(yīng)用開發(fā)[J]. 武漢大學(xué)學(xué)報(bào):理學(xué)版，2012（58）:171-174.

LIU Huan，LU Bei-rong，MA Chen-hui. Analysis of the development of university campus mobile application [J].Journal of Wuhan University:Natural Science Edition，2012（58）:171-174.

[3] 孫振興. 大學(xué)校園移動(dòng)信息化平臺(tái)的研究[D]. 大慶：東北石油大學(xué)，2011.

[4] 劉宗平. 淺析數(shù)字化校園建設(shè)中的移動(dòng)校園平臺(tái)建設(shè)[J].科技創(chuàng)新與應(yīng)用，2013（14）:83.

LIU Zong-ping. The analysis on construction of mobile campus platform in construction of digital campus[J]. Innovation and Application of Science and Technology，2013（14）:83.

[5] 李慧云，何震葦，李麗，等. HTML5 技術(shù)與應(yīng)用模式研究[J].電信科學(xué)，2012，28（5）:24-29.

LI Hui-yun，HE Zhen-wei，LI Li. Research on HTML5 technology and application mode [J]. Telecommunications Science，2012，28（5）:24-29.

[6] Corral L，Sillitti A，Succi G. Mobile multiplatform development: An experiment for performance analysis[J]. Procedia Computer Science，2012（10）:736-743.

[7] Stark J. Building Android Apps with HTML， CSS， and JavaScript[M]. O'Reilly Media， Inc.， 2010.

[8] 劉歡，張?jiān)鲂蓿R晨輝. 混合開發(fā)移動(dòng)應(yīng)用[J]. 中國(guó)教育網(wǎng)絡(luò)，2013（7）:63-65.

LIU Huan，ZHANG Zeng-xiu，MA Chen-hui. Hybrid mobile application development[J]. Chinese Education Network，2013（7）:63-65.

[9] 于龍斌， 賈欣欣. 基于Android 的高校校園移動(dòng)秘書系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 長(zhǎng)江大學(xué)學(xué)報(bào)自然科學(xué)版: 理工（上旬），2013（1）:40-42.

YU Long-bin，JIA Xin-xin. Design and implementation of campus mobile secretary system based on android[J]. Natural Science Journal of Yangtze University:Polytechnic，2013（1）:40-42.

[10] 楊杰.基于Android平臺(tái)的校園新聞客戶端的設(shè)計(jì)與研發(fā)[J].現(xiàn)代計(jì)算機(jī)，2013（16）:3731-3735.

YANG Jie. The design and development of the campus news cllent based on the androld platform[J]. Modern Computer，2013（16）:3731-3735.

[11]李童浩.基于Android的校園信息交互平臺(tái)的設(shè)計(jì)與開發(fā)[D].蘭州：蘭州大學(xué)，2012.