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

1、 WebAPP技術(shù)框架下“大學(xué)校園助手”APP的設(shè)計與實現(xiàn) Summary：本文首先闡述了建設(shè)數(shù)字化校園的重要性，接著對大學(xué)校園助手APP進行了體系結(jié)構(gòu)設(shè)計，詳細分析了“首頁”“公告欄”“校園文化”和“學(xué)生信息”四個主要模塊的具體功能，繼而又對四個模塊進行了數(shù)據(jù)表設(shè)計并在此基礎(chǔ)上進行了開發(fā)。Key：數(shù)字化校園；Web APP；移動應(yīng)用；WeX5：G434 ：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)境

2、。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)境WeX5WeX5將移動應(yīng)用開發(fā)分為三個模塊：前端UI設(shè)計技術(shù)

3、和標(biāo)準(zhǔn)采用w3c的html+css+js，框架采用jquery、require js和bootstrap的發(fā)展路線，不斷深化用戶與界面之間的交互體驗，提升應(yīng)用價值；后服務(wù)端對開發(fā)語言沒有硬性要求，設(shè)計人員可以采用熟悉的語言來開發(fā)程序；前端設(shè)備API的apiframe work采用了codova/phonegap。另外，WeX5開發(fā)平臺是開源性的，可進行跨平臺多前端應(yīng)用開發(fā)，具備高效精致的UI組件體系和可視化拖拽式集成開發(fā)環(huán)境IDE，具有全能的調(diào)試支持和智能代碼提示功能，是APP開發(fā)的首選。 “大學(xué)校園助手”APP的設(shè) 計1.系統(tǒng)體系結(jié)構(gòu)設(shè)計筆者設(shè)計開發(fā)的大學(xué)校園助手APP主要是為了實現(xiàn)對所在學(xué)

4、?；拘畔⒌氖占?、管理與發(fā)布等。大學(xué)校園助手APP系統(tǒng)總體結(jié)構(gòu)設(shè)計分為兩部分：第一部分是前端設(shè)計技術(shù)和標(biāo)準(zhǔn)；第二部分是界面數(shù)據(jù)設(shè)計。其界面內(nèi)容有兩種數(shù)據(jù)類型：一是內(nèi)容需要及時更新與管理的數(shù)據(jù)（存放在服務(wù)器端的數(shù)據(jù)庫中）；二是短時間不需要進行調(diào)整的數(shù)據(jù)（存放在本地數(shù)據(jù)庫或者設(shè)備上）。2.系統(tǒng)功能結(jié)構(gòu)設(shè)計大學(xué)校園助手APP主要面向新生及預(yù)報考的人群，因而各模塊功能應(yīng)符合用戶的特定要求，不但需要滿足用戶獲取學(xué)校最新資訊的需求，而且還要保證其良好的交互體驗。筆者通過需求分析，將大學(xué)校園助手APP分為四個功能模塊，分別為首頁、公告欄、校園文化和學(xué)生信息。各模塊功能的詳細介紹如下：首頁模塊主要通過“簡介”

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

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

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

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

9、分別為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è)計過程為：首先，在model組件中放入一個windowDialog組件和data組件，將windowDialog組件改名為detailDialog，src屬性值設(shè)置為new.w的絕對路

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

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