基于Android 的校園移動信息門戶設計與實現

徐麗君

（江蘇大學 計算機科學與通信工程學院， 江蘇 鎮江 212013）

隨著智能終端技術和3G 移動技術的蓬勃發展， 移動電話用戶數量和手機網民數量的迅速增長， 基于3G 技術的移動互聯網絡應用也日漸增多。 尤其在作為新技術使用的前沿陣地——大學校園中，80%以上的師生使用Android 系統為代表的移動智能終端系統。在此背景下，基于Android 的校園移動信息門戶平臺應運而生[1-3]。 校園移動信息門戶能夠滿足廣大師生對于隨時隨地獲取校園相關信息的需求，彌補了傳統數字校園的不便捷性和信息滯后性[4]的缺陷，為建立移動數字校園做好鋪墊。

1 校園移動信息門戶總體設計

1.1 校園移動信息門戶總體架構設計

當移動終端訪問系統時，首先進行設備識別，根據識別結果進行內容和圖形適配， 并根據適配結果返回相應的信息[4]。 校園移動信息門戶的總體架構如圖1 所示，系統從上到下依次是用戶層、表示層、業務應用層和數據層。 用戶層就是移動門戶的使用者； 表示層是指用戶使用的android 系統智能終端的種類； 業務應用層即該平臺要提供的各類功能；數據層訪問各個部門和學院的數據，并進行數據的整合提供給移動門戶使用。

圖1 移動門戶總體架構圖Fig. 1 Structure diagram of the mobile portal

1.2 校園移動信息門戶功能模塊設計

根據對我校現有校園信息門戶的分析，參考國內外大學移動校園門戶的設計， 擬定了該移動校園門戶的功能如圖2所示。 該移動門戶提供的主要功能模塊如下：

1）用戶登錄：采用統一身份認證方式認證不同用戶，方便用戶查詢自身相關信息。

2）新聞資訊：顯示學校的新聞、公告、學術報告、就業信息等。

3）個人應用：提供個人信息查詢、課程表查詢、成績查詢等信息。

4）校園地圖：整個校區的地圖，采用Google Map 作為后臺。

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

6）APP 推薦：推薦一些學習娛樂APP 的下載。

7）選項：對移動門戶的相關設置和操作。

圖2 移動門戶功能模塊圖Fig. 2 Function block diagram of the mobile portal

1.3 技術選型

目前移動應用開發模式主要包括： 傳統的原生開發、基于HTML5[5]的Web 應用開發以及Hybrid 混合應用開發。 它們在功能開發、用戶體驗、設備兼容[6]等方面有較大的差異，了解每一種方法的優劣將有助于做出更適合自己的選擇[7]。下面就通過開發難度、跨平臺性等方面對這3 種開發模式做個對比，見表1。

表1 移動應用開發模式的對比表Tab. 1 Test comparison of mobile application development pattern

通過對比不難發現將原生應用和Web 應用相結合的混合開發模式具有開發門檻低、跨平臺性能高等的優勢。 而且HTML5 技術在不斷發展中，相信在不久的將來混合開發所依賴的各種技術有希望得到改進[8]。 基于以上分析，本文的校園信息門戶移動平臺的開發采用混合開發模式。

2 校園移動信息門戶詳細設計與實現

2.1 校園移動信息門戶UI 設計與實現

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

該平臺主要定義了5 個fragment：mFragments = new Fragment[5]；分別對應新聞資訊、個人應用、校園地圖、江大百科和App 推薦5 個部分。定義了一個方法根據上述5 個標題位置的不同選擇顯示不同的fragment， 該方法的部分實現代碼如下：

public void switchFragment（int position）{

FragmentTransaction t=this.getSupportFragmentManager（）

.beginTransaction（）；

switch （position） {

case 1:// 新聞資訊

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

break；

case 2:// 個人應用... }

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

t.commit（）；

最終實現的移動門戶的UI 界面如圖3 所示。

圖3 移動門戶UI 界面Fig. 3 UI of the mobile portal

2.2 校園移動信息門戶新聞資訊模塊設計與實現

該模塊客戶端利用Android 系統平臺提供的API 進行界面和功能設計[9]，服務器端主要使用PHP 的CodeIgniter 框架開發實現相關的WebService，然后使用Apache HTTP 技術實現客戶端與服務器端的數據通信。 整個模塊的信息交互流程如圖4 所示。

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

圖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）# 獲取每條新聞的發布日期

newlist=newlist[0:len（dateList）]# 按日期的長度為準

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

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

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

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

$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 格式信息

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

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

網絡請求功能基于Android 內置的HttpClient 開發，使用HttpClient 完成發送請求及接收部分實現代碼如下：

HttpPost doPost = new HttpPost（url）；

if （params ! = null） {

UrlEncodedFormEntity entity = new UrlEncodedFormEntity（params，format）；

doPost.setEntity（entity）；}

HttpResponse response = httpClient.execute（doPost）；

return response；

數據的下載主要采用Android 提供的AsyncTask 異步下載類來實現，數據下載完成后采用FileInputStream 類進行文件的存儲。 對于從后臺下載到的json 數據，Android 前端就需要采用json 數據解析技術對其進行解析。 前臺客戶端解析json 數據的部分代碼如下：

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

JSONArray jsonArray = null；

if （jsonObject.has（tag）） {

jsonArray = jsonObject.getJSONArray（tag）；}

return jsonArray；

為了將解析出來的新聞分門別類的進行展示，我們仿照新浪微博底端的標簽切換顯示，做一個類似的效果，在學校要聞、信息公告、學術報告、團學活動、學院信息和就業信息之間進行水平切換操作。這里要用到HorizontalScrollView 類，該類可以讓同一個界面容納更多的內容并實現水平滾動切換的效果。 主要代碼為：

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

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

this.mTabs.selectTab（i）；

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

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

3 結束語

該移動信息門戶實現了預期的效果，為廣大師生提供了一個隨時隨地了解校園動態及個人信息的窗口，有效地改善了現有學習和生活模式，實現校園生活的移動化。

[1] 李元元，賈璐. 基于Android平臺的手機終端公交查詢系統設計[J]. 計算機與現化，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] 劉歡，盧蓓蓉，馬晨輝. 淺析高校校園移動應用開發[J]. 武漢大學學報:理學版，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] 孫振興. 大學校園移動信息化平臺的研究[D]. 大慶：東北石油大學，2011.

[4] 劉宗平. 淺析數字化校園建設中的移動校園平臺建設[J].科技創新與應用，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 技術與應用模式研究[J].電信科學，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] 劉歡，張增修，馬晨輝. 混合開發移動應用[J]. 中國教育網絡，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 的高校校園移動秘書系統的設計與實現[J]. 長江大學學報自然科學版: 理工（上旬），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平臺的校園新聞客戶端的設計與研發[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的校園信息交互平臺的設計與開發[D].蘭州：蘭州大學，2012.