Web APP技術(shù)框架下“大學(xué)校園助手”APP的設(shè)計(jì)與實(shí)現(xiàn)

摘要：本文首先闡述了建設(shè)數(shù)字化校園的重要性，接著對大學(xué)校園助手APP進(jìn)行了體系結(jié)構(gòu)設(shè)計(jì)，詳細(xì)分析了“首頁”“公告欄”“校園文化”和“學(xué)生信息”四個主要模塊的具體功能，繼而又對四個模塊進(jìn)行了數(shù)據(jù)表設(shè)計(jì)并在此基礎(chǔ)上進(jìn)行了開發(fā)。

關(guān)鍵詞：數(shù)字化校園；Web APP；移動應(yīng)用；WeX5

中圖分類號：G434 文獻(xiàn)標(biāo)識碼：A 論文編號：1674-2117（2017）10-0073-03

近幾年，隨著學(xué)生對移動學(xué)習(xí)與泛在學(xué)習(xí)認(rèn)知的加深與網(wǎng)絡(luò)資源建設(shè)的去中心化，采用移動終端獲取信息已成為高校學(xué)生的操作習(xí)慣。同時，數(shù)字化校園成為充分優(yōu)化利用數(shù)字資源的一種虛擬教育環(huán)境。[1]因而，不斷深化和構(gòu)建數(shù)字化校園系統(tǒng)中的APP體系，形成以移動智能為趨勢的無線校園體系結(jié)構(gòu)是高校構(gòu)建信息化、智能化、便利化校園的重要任務(wù)之一。

● 開發(fā)環(huán)境

1.Web APP開發(fā)技術(shù)框架

Web APP開發(fā)模式使用的是Web開發(fā)的常用技術(shù)，如HTML5、CSS3、JavaScript，服務(wù)端技術(shù)JAVA、PHP、ASP等[2]，主要有HTML5云網(wǎng)站和移動應(yīng)用客戶端兩個重要組成模塊，HTML5云網(wǎng)站的作用是為移動應(yīng)用提供數(shù)據(jù)支持，移動應(yīng)用客戶端的主要作用是為應(yīng)用提供設(shè)備支持，Web APP界面簡單并且凸顯了跨平臺的高兼容性。

2.跨平臺開發(fā)環(huán)境WeX5

WeX5將移動應(yīng)用開發(fā)分為三個模塊：①前端UI設(shè)計(jì)技術(shù)和標(biāo)準(zhǔn)采用w3c的html+css+js，框架采用jquery、require js和bootstrap的發(fā)展路線，不斷深化用戶與界面之間的交互體驗(yàn)，提升應(yīng)用價(jià)值；②后服務(wù)端對開發(fā)語言沒有硬性要求，設(shè)計(jì)人員可以采用熟悉的語言來開發(fā)程序；③前端設(shè)備API的apiframe work采用了codova/phonegap。另外，WeX5開發(fā)平臺是開源性的，可進(jìn)行跨平臺多前端應(yīng)用開發(fā)，具備高效精致的UI組件體系和可視化拖拽式集成開發(fā)環(huán)境IDE，具有全能的調(diào)試支持和智能代碼提示功能，是APP開發(fā)的首選。

● “大學(xué)校園助手”APP的設(shè) 計(jì)

1.系統(tǒng)體系結(jié)構(gòu)設(shè)計(jì)

筆者設(shè)計(jì)開發(fā)的大學(xué)校園助手APP主要是為了實(shí)現(xiàn)對所在學(xué)校基本信息的收集、管理與發(fā)布等。大學(xué)校園助手APP系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)分為兩部分：第一部分是前端設(shè)計(jì)技術(shù)和標(biāo)準(zhǔn)；第二部分是界面數(shù)據(jù)設(shè)計(jì)。其界面內(nèi)容有兩種數(shù)據(jù)類型：一是內(nèi)容需要及時更新與管理的數(shù)據(jù)（存放在服務(wù)器端的數(shù)據(jù)庫中）；二是短時間不需要進(jìn)行調(diào)整的數(shù)據(jù)（存放在本地?cái)?shù)據(jù)庫或者設(shè)備上）。

2.系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)

大學(xué)校園助手APP主要面向新生及預(yù)報(bào)考的人群，因而各模塊功能應(yīng)符合用戶的特定要求，不但需要滿足用戶獲取學(xué)校最新資訊的需求，而且還要保證其良好的交互體驗(yàn)。筆者通過需求分析，將大學(xué)校園助手APP分為四個功能模塊，分別為首頁、公告欄、校園文化和學(xué)生信息。各模塊功能的詳細(xì)介紹如下：①首頁模塊主要通過“簡介”傳達(dá)建校歷史、專業(yè)設(shè)置、學(xué)校部門設(shè)置等信息。②公告欄模塊傳達(dá)校園新聞，讓用戶及時了解校園動態(tài)，參與到校園活動中來。③校園生活模塊分為八個子模塊，分別展示科技創(chuàng)新、志愿服務(wù)、文化藝術(shù)、校園生活、教育教學(xué)、學(xué)生生活、社會實(shí)踐和美麗校園。④學(xué)生信息功能模塊主要用來收集新生個人學(xué)籍信息。

3.數(shù)據(jù)庫設(shè)計(jì)

大學(xué)校園助手APP的頁面數(shù)據(jù)分為靜態(tài)數(shù)據(jù)和動態(tài)數(shù)據(jù)，筆者將靜態(tài)數(shù)據(jù)設(shè)置為Json文件，動態(tài)數(shù)據(jù)存儲在與WeX5綁定的MySQL數(shù)據(jù)庫中。下面，筆者以“校園文化”和“公告欄”為例，進(jìn)一步闡述。

（1）校園文化數(shù)據(jù)表設(shè)計(jì)

校園文化數(shù)據(jù)表儲存的數(shù)據(jù)分為七部分內(nèi)容，其中包括文化藝術(shù)、科技創(chuàng)新等，該模塊更新間隔短，因而設(shè)置為動態(tài)數(shù)據(jù)，數(shù)據(jù)庫表動作為只查詢數(shù)據(jù)，字段設(shè)計(jì)如表1所示。

（2）公告欄數(shù)據(jù)表設(shè)計(jì)

公告欄數(shù)據(jù)表（news）存儲的信息是新聞資訊，這一模塊的內(nèi)容需要頻繁更新，因此將數(shù)據(jù)設(shè)置為動態(tài)數(shù)據(jù)，數(shù)據(jù)庫表動作為只查詢數(shù)據(jù)。利用newsID字段將各個新聞熱點(diǎn)區(qū)分開來，用戶打開內(nèi)容詳細(xì)頁時將通過newsID來篩選具體的新聞內(nèi)容，字段設(shè)計(jì)如表2所示。

● 大學(xué)校園助手APP的開發(fā)

大學(xué)校園助手APP采用單頁應(yīng)用開發(fā)模式，由外殼頁面、主頁面、功能頁、子頁面組成。下面，筆者以“主頁面”“校園文化”及“公告欄”功能模塊為例，闡述開發(fā)程序。

1.主頁面的開發(fā)

主頁面主要用來展示“首頁”等功能模塊。主頁面是被外殼頁面調(diào)用shell實(shí)例打開，因此為避免初始運(yùn)行時出現(xiàn)空白頁面，要將外殼頁面的autoload屬性值設(shè)為false，并引用shell實(shí)例的showpage方法在加載外殼頁面的同時展示主頁 面。

主頁面的頁面設(shè)計(jì)過程是：首先，新建index.w文件，在界面上放置panel組件形成底部固定的頁面；接著，在panel組件的bottom部分放置buttongroup組件，新建四個button按鈕，分別為四個按鈕設(shè)置各自的xid、label、icon；然后，在panel組件的content部分放置contents組件，在contents組件上新建四個content，分別將xid命名為homecontent、noticecontent、campuscontent和studentcontent，并將buttongroup組件中四個按鈕的target設(shè)置為對應(yīng)的content頁面；最后，運(yùn)行APP激發(fā)四個按鈕顯示出相應(yīng)的功能頁面。

2.校園文化功能模塊開發(fā)

校園文化頁面主要分為八個子模塊。為了將八個方面的內(nèi)容放置在同一個content內(nèi)，筆者的campuscontent頁面設(shè)計(jì)過程為：首先，在campuscontent頁面放置一個panel組件，在panel組件的top部分放置一個titlebar組件，并設(shè)置title屬性值為“我思故我在”；接著，在panel組件的body部分放置一個row組件，并分為兩個列col組件，所占列寬分別為4和8。在第一個col組件中放置一個buttongroup組件，添加八個按鈕并分別設(shè)置對應(yīng)的label屬性。在第二個col組件中放置一個contents組件，新建八個content并分別設(shè)置相應(yīng)的xid屬性。將buttongroup的八個button組件的target設(shè)置為對應(yīng)的xid。“校園文化”功能模塊頁面如圖1所示

3.公告欄功能模塊開發(fā)

公告欄的content頁面內(nèi)的內(nèi)容是用來展示新聞資訊的，其頁面設(shè)計(jì)過程為：首先，在model組件中放入一個windowDialog組件和data組件，將windowDialog組件改名為detailDialog，src屬性值設(shè)置為new.w的絕對路徑；接著，將data組件改名為newsdata，在組件的onCustormRefresh方法上編寫代碼，在“公告欄”頁面被激活時，用newsdata組件的onCustomRefresh事件加載news數(shù)據(jù)表；然后，在newscontent頁面中放置一個scrollview組件，在scrollview的content部分放list組件和titlebar組件，為titlebar添加title屬性值為“熱點(diǎn)/資訊”，為list組件xid值設(shè)置為newslist；最后，在newslist組件的li中放入output組件，并設(shè)置bind-ref為newsTitle，設(shè)置bind-click事件為listClick，點(diǎn)擊標(biāo)題時利用detailDialog組件的打開事件將新聞表當(dāng)前行作為參數(shù)傳入新聞詳細(xì)頁。公告欄功能模塊頁面如圖2所 示。

● 應(yīng)用測試

大學(xué)校園助手APP應(yīng)用測試總共分為前端UI、功能和性能三個方面，筆者分別采用了夜神安卓模擬器和智能設(shè)備進(jìn)行測試。具體測試步驟為：首先，在WeX5開發(fā)環(huán)境下，打包應(yīng)用時進(jìn)行參數(shù)配置——資源通過UIserver訪問，應(yīng)用名為大學(xué)，Web服務(wù)器地址為本機(jī)IP地址加8080端口號，首頁配置為index.w，版本號為1.1.0，應(yīng)用包命名為com.wex5.tongda，配置cordova組件device、geolocation和baidulocation；接著，將打包好的APP安裝到夜神模擬器和智能終端設(shè)備上運(yùn)行，測試終端包括Android虛擬機(jī)、小米4、酷派大神F2、華為P5等，測試系統(tǒng)為Android 5.0到Android 7.6.3。

測試結(jié)果顯示，大學(xué)校園助手APP應(yīng)用界面合理、操作簡單；功能涵蓋齊全，各個模塊的功能正常展示，貼近新生的需求；同時，性能測試表現(xiàn)出了較強(qiáng)的兼容性和跨平臺性。

參考文獻(xiàn)：

[1]數(shù)字化校園[EB/OL].http：//baike.baidu.com/view/474879.htm.

[2]顧春來.APP應(yīng)用程序開發(fā)模式探究[J].硅谷，2014，149（5）：35，155.

作者簡介：張?zhí)煸疲?976—），男，漢族，內(nèi)蒙古人，碩士，講師，研究方向?yàn)橛?jì)算機(jī)技術(shù)。

基金項(xiàng)目：山西省“十二五”規(guī)劃課題“三維虛擬環(huán)境下教學(xué)模式研究”，項(xiàng)目編號：GH-12063；2016年山西大同大學(xué)教育改革創(chuàng)新重點(diǎn)項(xiàng)目“以服務(wù)地方文化產(chǎn)業(yè)為導(dǎo)向的數(shù)字媒體技術(shù)專業(yè)人才培養(yǎng)模式研究”，項(xiàng)目編號：XJG2016106。