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

張?zhí)煸?崔玲玲,蔚 云

（山西大同大學(xué)教育科學(xué)與技術(shù)學(xué)院,山西大同037009）

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

張?zhí)煸?崔玲玲,蔚 云

（山西大同大學(xué)教育科學(xué)與技術(shù)學(xué)院,山西大同037009）

文章從中國(guó)手機(jī)網(wǎng)民的調(diào)查數(shù)據(jù)出發(fā),論述了建設(shè)數(shù)字化校園的重要性；其次對(duì)“大同大學(xué)校園助手”APP進(jìn)行了系統(tǒng)體系結(jié)構(gòu)設(shè)計(jì),詳細(xì)分析了“同大首頁(yè)”、“公告欄”、“校園文化”和“學(xué)生信息”四個(gè)主要模塊的具體功能；繼而對(duì)四個(gè)模塊進(jìn)行了數(shù)據(jù)表設(shè)計(jì)并在此基礎(chǔ)上進(jìn)行了開發(fā)；通過測(cè)試證明該APP應(yīng)用界面良好、操作簡(jiǎn)單、功能齊全,并且具備良好的跨平臺(tái)性。

數(shù)字化校園；Web APP；移動(dòng)應(yīng)用；WeX5

CNNIC第38次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示;截至2016年6月,中國(guó)手機(jī)網(wǎng)民規(guī)模高達(dá)6.56億,上網(wǎng)設(shè)備進(jìn)一步向移動(dòng)端集中[1]。隨著對(duì)泛在學(xué)習(xí)的認(rèn)知與網(wǎng)絡(luò)資源建設(shè)的去中心化,采用移動(dòng)終端獲取信息已然成為高校學(xué)生的操作習(xí)慣。數(shù)字化校園是使數(shù)字資源得到充分優(yōu)化利用的一種虛擬教育環(huán)境[2],雖然各大高校都在積極建設(shè)和完善校園網(wǎng)絡(luò)平臺(tái),然而隨著移動(dòng)技術(shù)的不斷發(fā)展,出現(xiàn)了門戶網(wǎng)站難以在移動(dòng)終端移植、平臺(tái)信息發(fā)布渠道單一、學(xué)生無法便捷的獲取信息等問題。所以不斷深化和構(gòu)建數(shù)字化校園系統(tǒng)中的APP體系,形成以移動(dòng)智能為趨勢(shì)的無線體系結(jié)構(gòu),是高校構(gòu)建信息化、智能化、便利化校園的重要任務(wù)之一。

1 關(guān)鍵技術(shù)

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

移動(dòng)應(yīng)用有原生開發(fā)模式和網(wǎng)頁(yè)開發(fā)模式,在HTML5推出之前,技術(shù)人員主要采用基于手機(jī)操作系統(tǒng)運(yùn)行的原生開發(fā)模式,但該模式具有開發(fā)復(fù)雜、效率低、成本高、可移植性差等缺陷。隨著HTML 5技術(shù)以及云計(jì)算的發(fā)展,更多的技術(shù)人員選擇網(wǎng)頁(yè)開發(fā)模式,以UC瀏覽器為平臺(tái)的一批Web APP已經(jīng)開始出現(xiàn)[3],Web APP開發(fā)模式本質(zhì)上是一種框架型開發(fā)模式,使用的技術(shù)是Web開發(fā)的常用技術(shù)如：HTML5、CSS3、JavaScript,服務(wù)端技術(shù),JAVA、PHP、ASP等[4]。Web APP主要有HTML5云網(wǎng)站和移動(dòng)應(yīng)用客戶端兩個(gè)重要組成模塊,HTML5云網(wǎng)站的作用是為移動(dòng)應(yīng)用提供數(shù)據(jù)支持,移動(dòng)應(yīng)用客戶端的主要作用是為應(yīng)用提供設(shè)備支持,在“大同大學(xué)校園助手”APP的設(shè)計(jì)中Web APP凸顯了跨平臺(tái)的高兼容性。

1.2跨平臺(tái)開發(fā)環(huán)境WeX5

WeX5將移動(dòng)應(yīng)用開發(fā)分為三個(gè)模塊：前端UI設(shè)計(jì)技術(shù)和標(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ā)的首選。

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

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

設(shè)計(jì)開發(fā)的“大同大學(xué)校園助手”APP（以下簡(jiǎn)稱APP）主要實(shí)現(xiàn)對(duì)本?；拘畔⒌氖占⒐芾砼c發(fā)布等功能,在系統(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í)更新與管理,不斷與服務(wù)器進(jìn)行頻繁的交換數(shù)據(jù),所以存放在服務(wù)器端的數(shù)據(jù)庫(kù)中;“同大簡(jiǎn)介”等模塊內(nèi)容短時(shí)間不需要進(jìn)行調(diào)整,這部分?jǐn)?shù)據(jù)存放在本地?cái)?shù)據(jù)庫(kù)或者設(shè)備上。

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

APP用戶群主要面向新生以及預(yù)報(bào)考人群,各模塊功能應(yīng)符合用戶的特定要求,不但需要滿足用戶獲取學(xué)校最新資訊的需求,而且還要保證其良好的交互體驗(yàn)。通過需求分析,將APP分為四個(gè)功能模塊,分別為“同大首頁(yè)”、“公告欄”、“校園文化”和“學(xué)生信息”功能模塊。各模塊功能詳細(xì)介紹如下：

（1）“同大首頁(yè)”模塊：主要通過“同大簡(jiǎn)介”傳達(dá)建校歷史、專業(yè)設(shè)置、學(xué)校部門設(shè)置等信息。

（2）“公告欄”模塊：傳達(dá)校園新聞,讓用戶及時(shí)了解校園動(dòng)態(tài),參與到校園活動(dòng)中來。

（3）“校園生活”模塊：分為了八個(gè)子模塊,分別展示科技創(chuàng)新、志愿服務(wù)、文化藝術(shù)、校園生活、教育教學(xué)、學(xué)生生活、社會(huì)實(shí)踐和美麗校園等內(nèi)容。

（4）“學(xué)生信息”功能模塊主要用來收集新生個(gè)人學(xué)籍信息。APP功能結(jié)構(gòu)設(shè)計(jì)如圖1所示。

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

2.3數(shù)據(jù)庫(kù)設(shè)計(jì)

APP的頁(yè)面數(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ù)庫(kù)中,本文以“校園文化”數(shù)據(jù)表和“學(xué)生信息數(shù)據(jù)表”為例說明數(shù)據(jù)表設(shè)計(jì)。

2.3.1“校園文化”數(shù)據(jù)表設(shè)計(jì)

“校園文化”數(shù)據(jù)表（campus culture）儲(chǔ)存的數(shù)據(jù)為文化藝術(shù)、科技創(chuàng)新等八部分內(nèi)容,該模塊更新間隔短,設(shè)置為動(dòng)態(tài)數(shù)據(jù),數(shù)據(jù)庫(kù)表動(dòng)作為只查詢數(shù)據(jù),字段設(shè)計(jì)如表1所示：

表1“校園文化”數(shù)據(jù)表

2.3.2“學(xué)生信息”數(shù)據(jù)表設(shè)計(jì)

“學(xué)生信息”數(shù)據(jù)表（student）存儲(chǔ)學(xué)籍信息,數(shù)據(jù)從應(yīng)用模塊收集,學(xué)生填寫信息之后存儲(chǔ)在信息表中,因此“學(xué)生信息”數(shù)據(jù)庫(kù)表動(dòng)作有查詢數(shù)據(jù)和保存數(shù)據(jù)功能。當(dāng)學(xué)生提交學(xué)籍信息之后自動(dòng)保存在學(xué)生數(shù)據(jù)表,每次學(xué)生運(yùn)行APP,數(shù)據(jù)庫(kù)表會(huì)根據(jù)studentID查詢表中的數(shù)據(jù),呈現(xiàn)學(xué)生當(dāng)前的學(xué)籍信息,字段設(shè)計(jì)如表2所示：

表2“學(xué)生信息”數(shù)據(jù)表

3 “大同大學(xué)校園助手”APP開發(fā)

APP采用單頁(yè)應(yīng)用開發(fā)模式,由外殼頁(yè)面、主頁(yè)面、功能頁(yè)、子頁(yè)面組成,所有頁(yè)面內(nèi)的資源都在外框頁(yè)面中共享,各頁(yè)面可以利用shell實(shí)例調(diào)用資源。

3.1主頁(yè)面的開發(fā)

主頁(yè)面主要用來展示“同大首頁(yè)”等四個(gè)功能模塊。主頁(yè)面被外殼頁(yè)面調(diào)用shell實(shí)例打開,避免初始運(yùn)行時(shí)出現(xiàn)空白頁(yè)面,將外殼頁(yè)面的autoload屬性值設(shè)為false,并引用shell實(shí)例的showpage方法在加載外殼頁(yè)面同時(shí)展示主頁(yè)面。主頁(yè)面的頁(yè)面設(shè)計(jì)過程為：新建index.w文件,在界面上放置panel組件形成底部固定的頁(yè)面;在panel組件的bottom部分放置buttongroup組件,并新建四個(gè)button按鈕,分別為四個(gè)按鈕設(shè)置各自的xid、l abel、icon;在panel組件的content部分放置contents組件,在contents組件上新建四個(gè)content,分別將xid命名為homecontent、noticecontent、campuscontent和 studentcontent,然后將buttongroup的四個(gè)按鈕的target設(shè)置為對(duì)應(yīng)的content頁(yè)面,運(yùn)行APP激發(fā)四個(gè)按鈕可以顯示相應(yīng)的功能頁(yè)面。

3.2“同大首頁(yè)”功能模塊的開發(fā)

“同大首頁(yè)”content頁(yè)面內(nèi),分為圖片輪換區(qū)和大同大學(xué)簡(jiǎn)介區(qū)。homecontent頁(yè)面設(shè)計(jì)過程為：首先在homecontent放置一個(gè)panel組件形成頂部固定的頁(yè)面,在panel的top部分放titlebar組件,添加title屬性值為“大同大學(xué)簡(jiǎn)介”,在titlebar組件的left部分放置一個(gè)按鈕,并設(shè)置圖標(biāo)和xid為left,為按鈕設(shè)置click方法。在panel的body中放scrollview組件,在scrollview組件中放置div組件,在div組件中放置carousel組件和div組件。carousel組件用來展示圖片輪換,在carousel組件中添加三個(gè)content,分別放置image組件,分別為三個(gè)image組件的屬性src設(shè)置屬性值,將carousel組件的autoturn屬性值設(shè)為ture,interval屬性設(shè)置為3，div組件用來呈現(xiàn)“同大簡(jiǎn)介”,在div組件中放置button組件和output組件。將button組件的label屬性改為“同大簡(jiǎn)介〉〉”,添加自定義屬性URL值為“同大簡(jiǎn)介”詳細(xì)頁(yè)的相對(duì)路徑,并添加button的click方法命名為open-Demo。先在model組件中放一個(gè)baasdata組件并改名為briefbassdata,將baasdata組件的table屬性設(shè)置為“同大簡(jiǎn)介”數(shù)據(jù)庫(kù)表,然后在output組件的bindref屬性值設(shè)置為fTitle字段名。“同大首頁(yè)”功能模塊頁(yè)面如圖2所示：

圖2“同大首頁(yè)”界面展示圖

3.3“校園文化”功能模塊開發(fā)

“校園文化”content頁(yè)面主要分為八個(gè)子模塊。為了將八個(gè)方面的內(nèi)容放置在同一個(gè)content內(nèi),campuscontent頁(yè)面設(shè)計(jì)過程為;首先在campuscontent頁(yè)面放置一個(gè)panel組件,在panel組件的top部分放置一個(gè)titlebar組件,并設(shè)置title屬性值為“我思故我在”。在panel組件的body部分放置一個(gè)row組件,并分為兩個(gè)列col組件,設(shè)置兩個(gè)col組件所占列寬分別為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)content的xid?！靶@文化”功能模塊頁(yè)面如圖3所示：

圖3“校園文化”界面展示圖

4 應(yīng)用測(cè)試

APP應(yīng)用測(cè)試總共分為前端UI、功能和性能三個(gè)方面,分別采用了夜神安卓模擬器和智能設(shè)備進(jìn)行測(cè)試。首先,在WeX5開發(fā)環(huán)境打包應(yīng)用時(shí)需要進(jìn)行參數(shù)配置、資源通過UIserver訪問、應(yīng)用名為大同大學(xué)、web服務(wù)器地址為本機(jī)ip地址加8080端口號(hào)、首頁(yè)配置為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到Android 7.6.3?？傮w來說“大同大學(xué)校園助手”APP應(yīng)用界面合理、操作簡(jiǎn)單；功能涵蓋齊全,各個(gè)模塊的功能正常展示,貼近了新生的真正需求；性能測(cè)試方面表現(xiàn)出了較強(qiáng)的兼容性和跨平臺(tái)性,在各類設(shè)備終端和智能系統(tǒng)中運(yùn)行良好。

5 總結(jié)與展望

Web APP技術(shù)框架開發(fā)的“大同大學(xué)校園助手”APP旨在為新生以及潛在的預(yù)報(bào)考人群提供一個(gè)便捷的平臺(tái)。用戶能夠利用移動(dòng)終端及時(shí)了解校園歷史、校園資訊、學(xué)校教學(xué)、包含專業(yè)等最新信息,盡快熟悉校園。同時(shí)該APP在時(shí)空上對(duì)物理校園進(jìn)行了擴(kuò)展,豐富了數(shù)字化信息交流平臺(tái),加深了校園文化的構(gòu)建。

[1]王春枝.移動(dòng)視頻媒體對(duì)區(qū)域文化的傳播和建構(gòu)[J].青年記者，2016（24）：91-92.

[2]周矛欣.淺談建設(shè)數(shù)字化校園一卡通[J].中國(guó)教育信息化，2010（15）：29-30.

[3]董濤.基于Android的移動(dòng)校園客戶端設(shè)計(jì)與開發(fā)[D].西安：西安電子科技大學(xué),2014.

[4]顧春來.APP應(yīng)用程序開發(fā)模式探究[J].硅谷,2014,149(5)：35-36.

The Design and Development of“Datong University Campus Assistant”Based on Web APP

ZHANG Tian-yun,CUI Ling-ling,WEI Yun
(School of Educational Technology and Science,Shanxi Datong University,Datong Shanxi,037009）

This paper discusses the importance of building digital campus by using investigation data of mobile phone users.Secondly,The design of“Datong University Campus Assistant App”includes four main models：Homepage,Announcement Board,Campus Culture and Student Information,Thirdly,based on data sheet design of this four models we development this App.During test this App has many properties like friendly interface,simple operation,complete functions,especially the powerful cross platform capability.

digital campus；Web APP；mobile application；WeX5

TP311.52

A

〔責(zé)任編輯 高?！?/p>

1674-0874(2017)01-0007-03

2016-07-16

山西省教育科學(xué)“十二五”規(guī)劃課題[GH-12063]

張?zhí)煸疲?976-）,男,內(nèi)蒙古察右前旗人,碩士,講師,研究方向：計(jì)算機(jī)技術(shù)。