Web APP技術框架下“大同大學校園助手”APP的設計與實現

張天云,崔玲玲,蔚 云

（山西大同大學教育科學與技術學院,山西大同037009）

Web APP技術框架下“大同大學校園助手”APP的設計與實現

張天云,崔玲玲,蔚 云

（山西大同大學教育科學與技術學院,山西大同037009）

文章從中國手機網民的調查數據出發,論述了建設數字化校園的重要性；其次對“大同大學校園助手”APP進行了系統體系結構設計,詳細分析了“同大首頁”、“公告欄”、“校園文化”和“學生信息”四個主要模塊的具體功能；繼而對四個模塊進行了數據表設計并在此基礎上進行了開發；通過測試證明該APP應用界面良好、操作簡單、功能齊全,并且具備良好的跨平臺性。

數字化校園；Web APP；移動應用；WeX5

CNNIC第38次《中國互聯網絡發展狀況統計報告》顯示;截至2016年6月,中國手機網民規模高達6.56億,上網設備進一步向移動端集中[1]。隨著對泛在學習的認知與網絡資源建設的去中心化,采用移動終端獲取信息已然成為高校學生的操作習慣。數字化校園是使數字資源得到充分優化利用的一種虛擬教育環境[2],雖然各大高校都在積極建設和完善校園網絡平臺,然而隨著移動技術的不斷發展,出現了門戶網站難以在移動終端移植、平臺信息發布渠道單一、學生無法便捷的獲取信息等問題。所以不斷深化和構建數字化校園系統中的APP體系,形成以移動智能為趨勢的無線體系結構,是高校構建信息化、智能化、便利化校園的重要任務之一。

1 關鍵技術

1.1 Web APP開發技術框架

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

1.2跨平臺開發環境WeX5

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

2 “大同大學校園助手”APP設計

2.1系統體系結構設計

設計開發的“大同大學校園助手”APP（以下簡稱APP）主要實現對本校基本信息的收集、管理與發布等功能,在系統總體結構設計上分為兩部分：第一部分是前端設計技術和標準;第二部分是界面數據設計。界面內容有兩種數據類型：“公告欄”等模塊的內容需要及時更新與管理,不斷與服務器進行頻繁的交換數據,所以存放在服務器端的數據庫中;“同大簡介”等模塊內容短時間不需要進行調整,這部分數據存放在本地數據庫或者設備上。

2.2系統功能結構設計

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

（1）“同大首頁”模塊：主要通過“同大簡介”傳達建校歷史、專業設置、學校部門設置等信息。

（2）“公告欄”模塊：傳達校園新聞,讓用戶及時了解校園動態,參與到校園活動中來。

（3）“校園生活”模塊：分為了八個子模塊,分別展示科技創新、志愿服務、文化藝術、校園生活、教育教學、學生生活、社會實踐和美麗校園等內容。

（4）“學生信息”功能模塊主要用來收集新生個人學籍信息。APP功能結構設計如圖1所示。

圖1 APP系統功能結構設計圖

2.3數據庫設計

APP的頁面數據分為靜態數據和動態數據,靜態數據設置成Json文件,動態數據存儲在與weX5綁定的MySQL數據庫中,本文以“校園文化”數據表和“學生信息數據表”為例說明數據表設計。

2.3.1“校園文化”數據表設計

“校園文化”數據表（campus culture）儲存的數據為文化藝術、科技創新等八部分內容,該模塊更新間隔短,設置為動態數據,數據庫表動作為只查詢數據,字段設計如表1所示：

表1“校園文化”數據表

2.3.2“學生信息”數據表設計

“學生信息”數據表（student）存儲學籍信息,數據從應用模塊收集,學生填寫信息之后存儲在信息表中,因此“學生信息”數據庫表動作有查詢數據和保存數據功能。當學生提交學籍信息之后自動保存在學生數據表,每次學生運行APP,數據庫表會根據studentID查詢表中的數據,呈現學生當前的學籍信息,字段設計如表2所示：

表2“學生信息”數據表

3 “大同大學校園助手”APP開發

APP采用單頁應用開發模式,由外殼頁面、主頁面、功能頁、子頁面組成,所有頁面內的資源都在外框頁面中共享,各頁面可以利用shell實例調用資源。

3.1主頁面的開發

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

3.2“同大首頁”功能模塊的開發

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

圖2“同大首頁”界面展示圖

3.3“校園文化”功能模塊開發

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

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

4 應用測試

APP應用測試總共分為前端UI、功能和性能三個方面,分別采用了夜神安卓模擬器和智能設備進行測試。首先,在WeX5開發環境打包應用時需要進行參數配置、資源通過UIserver訪問、應用名為大同大學、web服務器地址為本機ip地址加8080端口號、首頁配置為index.w、版本號為1.1.0、應用包名為com.wex5.tongda、配置cordova組件device、geolocation和baidulocation；其次,將打包好的APP安裝到夜神模擬器和智能終端設備上運行,測試終端包括了Android虛擬機、小米4、酷派大神F2、華為P5等,測試系統從Android 5.0到Android 7.6.3。總體來說“大同大學校園助手”APP應用界面合理、操作簡單；功能涵蓋齊全,各個模塊的功能正常展示,貼近了新生的真正需求；性能測試方面表現出了較強的兼容性和跨平臺性,在各類設備終端和智能系統中運行良好。

5 總結與展望

Web APP技術框架開發的“大同大學校園助手”APP旨在為新生以及潛在的預報考人群提供一個便捷的平臺。用戶能夠利用移動終端及時了解校園歷史、校園資訊、學校教學、包含專業等最新信息,盡快熟悉校園。同時該APP在時空上對物理校園進行了擴展,豐富了數字化信息交流平臺,加深了校園文化的構建。

[1]王春枝.移動視頻媒體對區域文化的傳播和建構[J].青年記者，2016（24）：91-92.

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

[3]董濤.基于Android的移動校園客戶端設計與開發[D].西安：西安電子科技大學,2014.

[4]顧春來.APP應用程序開發模式探究[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

〔責任編輯 高海〕

1674-0874(2017)01-0007-03

2016-07-16

山西省教育科學“十二五”規劃課題[GH-12063]

張天云（1976-）,男,內蒙古察右前旗人,碩士,講師,研究方向：計算機技術。