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

1、 WebAPP技術(shù)框架下“大學(xué)校園助手”APP的設(shè)計(jì)與實(shí)現(xiàn) Summary：本文首先闡述了建設(shè)數(shù)字化校園的重要性，接著對(duì)大學(xué)校園助手APP進(jìn)行了體系結(jié)構(gòu)設(shè)計(jì)，詳細(xì)分析了“首頁”“公告欄”“校園文化”和“學(xué)生信息”四個(gè)主要模塊的具體功能，繼而又對(duì)四個(gè)模塊進(jìn)行了數(shù)據(jù)表設(shè)計(jì)并在此基礎(chǔ)上進(jìn)行了開發(fā)。Key：數(shù)字化校園；Web APP；移動(dòng)應(yīng)用；WeX5：G434 ：A 論文編號(hào)：1674-2117（2017）10-0073-03近幾年，隨著學(xué)生對(duì)移動(dòng)學(xué)習(xí)與泛在學(xué)習(xí)認(rèn)知的加深與網(wǎng)絡(luò)資源建設(shè)的去中心化，采用移動(dòng)終端獲取信息已成為高校學(xué)生的操作習(xí)慣。同時(shí)，數(shù)字化校園成為充分優(yōu)化利用數(shù)字資源的一種虛擬教育環(huán)境

2、。1因而，不斷深化和構(gòu)建數(shù)字化校園系統(tǒng)中的APP體系，形成以移動(dòng)智能為趨勢(shì)的無線校園體系結(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)站和移動(dòng)應(yīng)用客戶端兩個(gè)重要組成模塊，HTML5云網(wǎng)站的作用是為移動(dòng)應(yīng)用提供數(shù)據(jù)支持，移動(dòng)應(yīng)用客戶端的主要作用是為應(yīng)用提供設(shè)備支持，Web APP界面簡單并且凸顯了跨平臺(tái)的高兼容性。2.跨平臺(tái)開發(fā)環(huán)境WeX5WeX5將移動(dòng)應(yīng)用開發(fā)分為三個(gè)模塊：前端UI設(shè)計(jì)技術(shù)

3、和標(biāo)準(zhǔn)采用w3c的html+css+js，框架采用jquery、require js和bootstrap的發(fā)展路線，不斷深化用戶與界面之間的交互體驗(yàn)，提升應(yīng)用價(jià)值；后服務(wù)端對(duì)開發(fā)語言沒有硬性要求，設(shè)計(jì)人員可以采用熟悉的語言來開發(fā)程序；前端設(shè)備API的apiframe work采用了codova/phonegap。另外，WeX5開發(fā)平臺(tái)是開源性的，可進(jìn)行跨平臺(tái)多前端應(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)對(duì)所在學(xué)

4、?；拘畔⒌氖占?、管理與發(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í)更新與管理的數(shù)據(jù)（存放在服務(wù)器端的數(shù)據(jù)庫中）；二是短時(shí)間不需要進(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分為四個(gè)功能模塊，分別為首頁、公告欄、校園文化和學(xué)生信息。各模塊功能的詳細(xì)介紹如下：首頁模塊主要通過“簡介”

5、傳達(dá)建校歷史、專業(yè)設(shè)置、學(xué)校部門設(shè)置等信息。公告欄模塊傳達(dá)校園新聞，讓用戶及時(shí)了解校園動(dòng)態(tài)，參與到校園活動(dòng)中來。校園生活模塊分為八個(gè)子模塊，分別展示科技創(chuàng)新、志愿服務(wù)、文化藝術(shù)、校園生活、教育教學(xué)、學(xué)生生活、社會(huì)實(shí)踐和美麗校園。學(xué)生信息功能模塊主要用來收集新生個(gè)人學(xué)籍信息。3.數(shù)據(jù)庫設(shè)計(jì)大學(xué)校園助手APP的頁面數(shù)據(jù)分為靜態(tài)數(shù)據(jù)和動(dòng)態(tài)數(shù)據(jù)，筆者將靜態(tài)數(shù)據(jù)設(shè)置為Json文件，動(dòng)態(tài)數(shù)據(jù)存儲(chǔ)在與WeX5綁定的MySQL數(shù)據(jù)庫中。下面，筆者以“校園文化”和“公告欄”為例，進(jìn)一步闡述。（1）校園文化數(shù)據(jù)表設(shè)計(jì)校園文化數(shù)據(jù)表儲(chǔ)存的數(shù)據(jù)分為七部分內(nèi)容，其中包括文化藝術(shù)、科技創(chuàng)新等，該模塊更新間隔短，因而設(shè)置為

6、動(dòng)態(tài)數(shù)據(jù)，數(shù)據(jù)庫表動(dòng)作為只查詢數(shù)據(jù)，字段設(shè)計(jì)如表1所示。（2）公告欄數(shù)據(jù)表設(shè)計(jì)公告欄數(shù)據(jù)表（news）存儲(chǔ)的信息是新聞資訊，這一模塊的內(nèi)容需要頻繁更新，因此將數(shù)據(jù)設(shè)置為動(dòng)態(tài)數(shù)據(jù)，數(shù)據(jù)庫表動(dòng)作為只查詢數(shù)據(jù)。利用newsID字段將各個(gè)新聞熱點(diǎn)區(qū)分開來，用戶打開內(nèi)容詳細(xì)頁時(shí)將通過newsID來篩選具體的新聞內(nèi)容，字段設(shè)計(jì)如表2所示。 大學(xué)校園助手APP的開發(fā)大學(xué)校園助手APP采用單頁應(yīng)用開發(fā)模式，由外殼頁面、主頁面、功能頁、子頁面組成。下面，筆者以“主頁面”“校園文化”及“公告欄”功能模塊為例，闡述開發(fā)程序。1.主頁面的開發(fā)主頁面主要用來展示“首頁”等功能模塊。主頁面是被外殼頁面調(diào)用shell實(shí)例打

7、開，因此為避免初始運(yùn)行時(shí)出現(xiàn)空白頁面，要將外殼頁面的autoload屬性值設(shè)為false，并引用shell實(shí)例的showpage方法在加載外殼頁面的同時(shí)展示主頁 面。主頁面的頁面設(shè)計(jì)過程是：首先，新建index.w文件，在界面上放置panel組件形成底部固定的頁面；接著，在panel組件的bottom部分放置buttongroup組件，新建四個(gè)button按鈕，分別為四個(gè)按鈕設(shè)置各自的xid、label、icon；然后，在panel組件的content部分放置contents組件，在contents組件上新建四個(gè)content，分別將xid命名為homecontent、noticeconten

8、t、campuscontent和studentcontent，并將buttongroup組件中四個(gè)按鈕的target設(shè)置為對(duì)應(yīng)的content頁面；最后，運(yùn)行APP激發(fā)四個(gè)按鈕顯示出相應(yīng)的功能頁面。2.校園文化功能模塊開發(fā)校園文化頁面主要分為八個(gè)子模塊。為了將八個(gè)方面的內(nèi)容放置在同一個(gè)content內(nèi)，筆者的campuscontent頁面設(shè)計(jì)過程為：首先，在campuscontent頁面放置一個(gè)panel組件，在panel組件的top部分放置一個(gè)titlebar組件，并設(shè)置title屬性值為“我思故我在”；接著，在panel組件的body部分放置一個(gè)row組件，并分為兩個(gè)列col組件，所占列寬

9、分別為4和8。在第一個(gè)col組件中放置一個(gè)buttongroup組件，添加八個(gè)按鈕并分別設(shè)置對(duì)應(yīng)的label屬性。在第二個(gè)col組件中放置一個(gè)contents組件，新建八個(gè)content并分別設(shè)置相應(yīng)的xid屬性。將buttongroup的八個(gè)button組件的target設(shè)置為對(duì)應(yīng)的xid?！靶@文化”功能模塊頁面如圖1所示 3.公告欄功能模塊開發(fā)公告欄的content頁面內(nèi)的內(nèi)容是用來展示新聞資訊的，其頁面設(shè)計(jì)過程為：首先，在model組件中放入一個(gè)windowDialog組件和data組件，將windowDialog組件改名為detailDialog，src屬性值設(shè)置為new.w的絕對(duì)路

10、徑；接著，將data組件改名為newsdata，在組件的onCustormRefresh方法上編寫代碼，在“公告欄”頁面被激活時(shí)，用newsdata組件的onCustomRefresh事件加載news數(shù)據(jù)表；然后，在newscontent頁面中放置一個(gè)scrollview組件，在scrollview的content部分放list組件和titlebar組件，為titlebar添加title屬性值為“熱點(diǎn)/資訊”，為list組件xid值設(shè)置為newslist；最后，在newslist組件的li中放入output組件，并設(shè)置bind-ref為newsTitle，設(shè)置bind-click事件為list

11、Click，點(diǎn)擊標(biāo)題時(shí)利用detailDialog組件的打開事件將新聞表當(dāng)前行作為參數(shù)傳入新聞詳細(xì)頁。公告欄功能模塊頁面如圖2所 示。 應(yīng)用測(cè)試大學(xué)校園助手APP應(yīng)用測(cè)試總共分為前端UI、功能和性能三個(gè)方面，筆者分別采用了夜神安卓模擬器和智能設(shè)備進(jìn)行測(cè)試。具體測(cè)試步驟為：首先，在WeX5開發(fā)環(huán)境下，打包應(yīng)用時(shí)進(jìn)行參數(shù)配置資源通過UIserver訪問，應(yīng)用名為大學(xué)，Web服務(wù)器地址為本機(jī)IP地址加8080端口號(hào)，首頁配置為index.w，版本號(hào)為1.1.0，應(yīng)用包命名為com.wex5.tongda，配置cordova組件device、geolocation和baidulocation；接著，將打包好的APP安裝到夜神模擬器和智能終端設(shè)備上運(yùn)行，測(cè)試終端包括Android虛擬機(jī)、小米4、酷派大神F2、華為P5等，測(cè)試系統(tǒng)為Android 5.0到Androi