高校實驗室管理平臺的移動應(yīng)用

羅予東，繆偉寧，劉錫鋒，陳偉君

（嘉應(yīng)學(xué)院計算機學(xué)院，梅州 514021）

高校實驗室管理平臺的移動應(yīng)用

羅予東，繆偉寧，劉錫鋒，陳偉君

（嘉應(yīng)學(xué)院計算機學(xué)院，梅州 514021）

移動應(yīng)用為高校信息化應(yīng)用帶來設(shè)計的全新思維模式，結(jié)合信息管理系統(tǒng)需求對移動應(yīng)用進行技術(shù)分析，選擇響應(yīng)式WebApp技術(shù)應(yīng)用在“計算機實驗室”網(wǎng)站上，采用流式布局策略實現(xiàn)移動端的頁面展現(xiàn)，用戶獲得良好的掌上體驗效果，為高校的其他信息系統(tǒng)的移動應(yīng)用提供一種借鑒作用。

移動應(yīng)用；用戶體驗；WebApp；NativeApp；HybridApp

0 引言

移動應(yīng)用[1]（Mobile Application,MA），廣義移動應(yīng)用包含個人以及企業(yè)級應(yīng)用。狹義移動應(yīng)用指企業(yè)級商務(wù)應(yīng)用。以手機、平板電腦介質(zhì)為代表的移動終端應(yīng)用也就是掌上應(yīng)用將為企業(yè)信息化帶來巨大變革。

在2014年政府工作報告會上，李克強總理將“互聯(lián)網(wǎng)+”上升為國家戰(zhàn)略，明確提出要加快推動移動互聯(lián)網(wǎng)、云計算、大數(shù)據(jù)、物聯(lián)網(wǎng)等與現(xiàn)代制造業(yè)的結(jié)合與發(fā)展。移動應(yīng)用作為移動互聯(lián)網(wǎng)最主要的一種表現(xiàn)形式，也作為2014年紅透創(chuàng)投市場的O2O模式的核心載體，其相關(guān)領(lǐng)域的投資熱度在2014年達到了空前的高度[2]。根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布第37次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展狀況統(tǒng)計報告》，截至2015年12月，我國手機網(wǎng)民規(guī)模達6.20億，較2014年底增加6303萬人。網(wǎng)民中使用手機上網(wǎng)人群的占比由2014年85.8%提升至90.1%，手機依然是拉動網(wǎng)民規(guī)模增長的首要設(shè)備。僅通過手機上網(wǎng)的網(wǎng)民達到1.27億，占整體網(wǎng)民規(guī)模的18.5%。

高校實驗室作為輔助教學(xué)的重要組成部分，是實現(xiàn)素質(zhì)教育的基地，如何把移動互聯(lián)網(wǎng)的創(chuàng)新精神及元素添加到實驗室管理中，形成“移動互聯(lián)網(wǎng)+實驗室管理”的創(chuàng)新模式，提升實驗室的管理和使用水平，是響應(yīng)國家戰(zhàn)略具體實施的任務(wù)。

目前在國內(nèi)尚未有高校實驗室管理平臺的移動應(yīng)用先例，在教育系統(tǒng)中，方碩瑾[3]采用Spring MVC設(shè)計模式開發(fā)了移動App客戶端和Web端后臺管理系統(tǒng)實現(xiàn)了對各類教輔書籍進行點評和推薦，郝珺[4]建議高校職業(yè)生涯教育部門可以與計算機學(xué)院等相關(guān)學(xué)院合作，結(jié)合自己學(xué)校的實際情況，研發(fā)自己專屬的職業(yè)生涯教育類App應(yīng)用，讓學(xué)生不受時空限制地享受服務(wù)，李玲[5]認為教育移動App的廣泛使用創(chuàng)設(shè)了新型的教學(xué)模式，它不僅豐富了現(xiàn)有的教育模式，還為信息化時代的教育教學(xué)方法不斷注入生機與活力；田軍[6]介紹了幾種操作便捷、口碑好的移動App，如Evernote、云存儲軟件、思維導(dǎo)圖以及社會性網(wǎng)絡(luò)工具等，將大學(xué)生個人知識進行有效的管理，開發(fā)大學(xué)生創(chuàng)新思維。單柏[7]分析了移動App研發(fā)對校園移動化、智能化及信息化的影響，做了基于數(shù)字化校園的移動App研發(fā)與應(yīng)用。

Ethan Marcotte[8]在2010年5月份提出了一個概念：響應(yīng)式布局Responsive Web Design，滿足一個網(wǎng)站兼容多個終端訪問，而不是像原生App為各類終端做相應(yīng)的版本。它是為移動互聯(lián)網(wǎng)瀏覽而誕生的。淘寶、百度、攜程網(wǎng)已經(jīng)應(yīng)用了響應(yīng)式網(wǎng)頁來提高用戶訪問體驗了。響應(yīng)式布局追求的是用戶訪問體驗，根據(jù)用戶終端設(shè)備的差異、屏幕大小的不同、朝向的不同，設(shè)計相應(yīng)的網(wǎng)頁，達到一個網(wǎng)站兼容多個終端訪問都有良好的效果。

1 跨終端適配實現(xiàn)WebApp 的原理

瀏覽器在打開頁面時會在傳輸?shù)腍ttp header中設(shè)置User-Agent信息,User-Agent信息包括硬件平臺、系統(tǒng)軟件、應(yīng)用軟件和用戶個人偏好。通過獲取User-Agent相關(guān)信息我們就能了解用戶使用的終端設(shè)備的類型，進行相應(yīng)的處理來提高用戶訪問體驗了。下面是服務(wù)器獲取的User-Agent信息的一個實例：

從上面的User-Agent信息可以看出用戶是用Apple iPhone5手機用Safari瀏覽器來訪問。

1.1 多模板形式

百度準備了多個頁面樣式模板，當用戶訪問通過https://www.baidu.com/，頁面上的JS會檢測用戶終端設(shè)備屏幕寬度，來決定使用哪個樣式模板來呈現(xiàn)頁面。

其實就是利用window對象的事件處理[9]：當頁面onload加載完成；調(diào)用changeCss（）函數(shù)來改變頁面的CSS樣式表。

1.2 跳轉(zhuǎn)形式

通過檢測用戶設(shè)備，引導(dǎo)到不同的網(wǎng)站頁面上去，淘寶有兩種版本，一種是PC版，存放在https://www. taobao.com這個服務(wù)器上；另外一種是手機版，存放在https://m.taobao.com這個服務(wù)器上。

當用戶訪問網(wǎng)址https://www.taobao.com的時候，淘寶的首頁會檢測用戶訪問的設(shè)備，如果訪問的是PC，那么留在原來的頁面。如果用戶訪問的是手機，就跳轉(zhuǎn)到https://m.taobao.com這個網(wǎng)址去。

其實就是利用device.js的處理函數(shù)進行設(shè)備檢測。

如下所示：

1.3 CSS3中媒體查詢，更換樣式表

攜程網(wǎng)采用的策略就是媒體查詢。

media屬性就是媒體查詢的屬性[10]。

min-width:600px；用這個樣式表的條件，就是屏幕的最小尺寸為600px。大于等于600px的時候，用pc. css這個樣式表！

max-width:599px;用這個樣式表的條件，就是屏幕的最大尺寸為599px。小于等于599px的時候，用mobile.css這個樣式表！

1.4 響應(yīng)式解決方案流式布局

媒體查詢有其優(yōu)越性,但也存在一定的局限性，那些僅使用媒體查詢來適應(yīng)不同視口的固定寬度設(shè)計，只會從一組CSS媒體查詢規(guī)則突變到另一組,兩者之間沒有任何平滑漸變.為了實現(xiàn)更靈活的設(shè)計,能在所有視口中完美顯示,需要使用靈活的百分比布局[11]（也被稱之為流式布局，Bootstrap采用的策略http://v3. bootcss.com），這樣才能讓頁面元素根據(jù)視口大小在一個又一個媒體查詢之間靈活伸縮修正樣式。

2 響應(yīng)式設(shè)計在“計算機實驗室”網(wǎng)站應(yīng)用

“計算機實驗室”網(wǎng)站是一個我們開發(fā)用于管理計算機實驗室的信息系統(tǒng)。實驗室管理人員除了進行信息的日常發(fā)布以外，還允許學(xué)生對實驗室課表進行詢，了解不同時間段內(nèi)實驗室的課表的使用情況，從而可以在實驗室空閑的時候進行申請，而不用去找實驗室的管理人員協(xié)商交流，這樣也大大提高實驗室的利用率和管理員與使用者雙方的工作效率。還實現(xiàn)了對實驗室每個學(xué)期進行人數(shù)的統(tǒng)計，可以動態(tài)統(tǒng)計實驗室的使用情況。還能通過意見反饋留言給實驗室管理員，使信息傳達更方便，快捷，能及時了解實驗室使用的狀況，和對實驗室管理的建議?！坝嬎銠C實驗室”網(wǎng)站原來是采用MVC模式[12]開發(fā)，它的好處是可以分層開發(fā)，對新的需求較易實現(xiàn)，新的需求是要實現(xiàn)在移動端界面設(shè)計，平臺的功能模塊沒有新的要求，從分層的角度，模型M基本上保持原樣，項目中的視圖V中增加移動頁面的設(shè)計，實現(xiàn)響應(yīng)式的頁面布局即可，控制器C將后臺數(shù)據(jù)根據(jù)UA信息重新分配給移動端的視圖，增加的代碼很少，整個項目改造的規(guī)模不大，容易實現(xiàn)。

2.1 PC端實現(xiàn)

由于網(wǎng)站采用統(tǒng)一網(wǎng)址：http://lab.jyueka.com進行訪問，在原有基于PC端的網(wǎng)頁增加設(shè)備檢測技術(shù)實現(xiàn)跳轉(zhuǎn)，也就是在頁面的公共Header頭中加入下面代碼，如果客戶用移動設(shè)備訪問，則跳轉(zhuǎn)到移動頁面，如果不是，留在當前頁面：

2.2 移動端實現(xiàn)

移動頁面在實現(xiàn)技術(shù)上，移動端主要運用的技術(shù)以HTML5+CSS3為主的jQuery Mobile框架，采用了流式布局策略，該流行框架能很好的兼容不同移動端的界面，使他們保持一致，用PC端瀏覽則切換到PC端的界面。使不同的設(shè)備都能方便的瀏覽我們的掌上教輔平臺，做到所有設(shè)備能很好地運行。頁面開發(fā)主要使用標記，無需或僅需很少JavaScript[13]，注意在移動端的頁面需要增加視口元數(shù)據(jù)告訴瀏覽器對網(wǎng)頁進行約束。

上面的meta元標記定義了id和name的值為viewport，用來約束視口。其中Content屬性是定義約束規(guī)則，用逗號分隔不同的約束規(guī)則[14]。

然后再根據(jù)需求對移動端頁面進行前端設(shè)計，再將后臺控制器傳過來的動態(tài)數(shù)據(jù)填充在前端頁面，這樣就為“計算機實驗室”網(wǎng)站增加了移動端的展現(xiàn)，采用了流式布局策略能夠讓不同的手機及平板都有良好的界面體驗，下圖是網(wǎng)站開發(fā)完成以后的效果圖：

圖1 移動端頁面效果圖

3 結(jié)語

移動端的應(yīng)用有這幾種[15]：Web App，NativeApp，HybridApp，其中：Native App：Objective-C或Java，學(xué)習成本高，技術(shù)要求較高，開發(fā)成本大，同時要滿足Android應(yīng)用和IOS應(yīng)用；Hybrid APP：外殼+Web APP，需安裝，而我們采用的響應(yīng)式Web APP：HTML5+ JS+CSS，優(yōu)點是門檻低，極易上手，迭代快，但缺點是流量較大，移動流量跟PC訪問基本一致，另外不能使用移動端的硬件設(shè)備如攝像頭、重力感應(yīng)等傳感器等，從計算機實驗室網(wǎng)站的需求角度來說，由于校園網(wǎng)目前已經(jīng)實現(xiàn)了無線網(wǎng)絡(luò)覆蓋，學(xué)生和教師均通過無線校園進行訪問，不會產(chǎn)生流量費用，另外，作為CMS系統(tǒng)，一般的應(yīng)用不需要用到移動端的硬件設(shè)備，所以選用Web App是較符合需求的。從維護的角度來說，一旦需求發(fā)生變動，NativeApp需要同時維護Android和iOS應(yīng)用代碼，Hybrid App也需要重新安裝新的應(yīng)用，而Web APP只需維護一份代碼，客戶端無需變動。從經(jīng)濟角度來說，NativeApp人力和時間成本要遠遠大于Hybrid App和Web App。計算機學(xué)院利用本身的技術(shù)優(yōu)勢將“移動互聯(lián)網(wǎng)+實驗室管理”的創(chuàng)新模式予以實現(xiàn)，是順應(yīng)技術(shù)發(fā)展的潮流，對高校的其他信息管理系統(tǒng)的移動應(yīng)用也可以起到一種借鑒作用。

[1]百度百科.移動應(yīng)用[EB/OL］．http://baike.baidu.com.

[2]路虹.移動互聯(lián)產(chǎn)業(yè)成投資熱土.國際商報,2015-03-25.

[3]方碩瑾.基于移動App的教輔書籍點評系統(tǒng)設(shè)計與實現(xiàn)[J].計算機時代,2015（8）:39-41.

[4]郝珺.移動App_高校職業(yè)生涯教育的新嘗試[J].赤峰學(xué)院學(xué)報,2014,30（8）:227-228.

[5]李玲.教育型移動APP的教學(xué)應(yīng)用模式研究[J].中國信息技術(shù)教育,2015（12）:82-84.

[6]田軍.基于移動App的大學(xué)生個人知識高效管理芻議[J].圖書館界,2015（2）:62-66.

[7]單柏.基于數(shù)字化校園的移動App研發(fā)與應(yīng)用[J].電腦知識與技術(shù),2015（30）:13-14,18.

[8]Ethan Marcotte．Responsive Web Design[EB/OL］．http://www．a(chǎn)listapart．com/articles/responsive-web-design/，2010-05-25．

[9]Frain B．Responsive Web Design with HTML5 and CSS3[M］．Birmingham:Packt Publishing，2012:．

[10]Juhani Lehtimaki.精彩絕倫的Android UI設(shè)計.響應(yīng)式用戶界面與設(shè)計模式[M]．機械工業(yè)出版社,2013.

[11]密海英.面向不同設(shè)備的響應(yīng)式網(wǎng)頁設(shè)計探析[J]．蘇州市職業(yè)大學(xué)學(xué)報,2013,24（2）:34-37.

[12]張樹明．基于響應(yīng)式Web設(shè)計網(wǎng)頁模板的設(shè)計與實現(xiàn)[J]．計算機與現(xiàn)代化，2013（6）:125-127.

[13]阮一峰.自適應(yīng)網(wǎng)頁設(shè)計[EB/OL].http://www.ruany.ifeng.com/blog/2012/05.

[14]羅予東,陳偉君,劉秀湛等.響應(yīng)式移動互聯(lián)的中小型企業(yè)網(wǎng)站設(shè)計[J].計算機與現(xiàn)代化,2015（11）:53-55,59.

[15]吳多益.聊聊移動端跨平臺開發(fā)的各種技術(shù)[EB/OL].http://fex.baidu.com/blog/2015/05/cross-mobile/.

繆偉寧，學(xué)生

劉錫鋒,學(xué)生

陳偉君，高級實驗師

Mobile Application for University Laboratory Management Platform

LUO Yu-dong ，MIAO Wei-ning ，LIU Xi-feng ，CHEN Wei-jun
（Department of Computer Science and Technology,Jiaying University,Meizhou514015）

The design of mobile application brings new thinking mode for the application of informatization in universities,analyzes the techniques for mobile application based on the demand of information management system,uses flow layout pages for mobile terminals in Computer Lab website,the response WebApp can greatly improve the user experience,and provide a feasible method for other mobile application of information system in colleges and universities.

Mobile Application;User Experience;WebApp;NativeApp;HybridApp

1007-1423（2017）07-0075-04

10.3969/j.issn.1007-1423.2017.07.019

羅予東（1969-），男，廣東梅州人，高級實驗師，碩士，研究方向為網(wǎng)絡(luò)工程、信息安全

2016-12-29

2017-03-01

國家自然科學(xué)基金資助項目（No.41172028）、2012年廣東省教育部科技部產(chǎn)學(xué)研結(jié)合項目（No.012B090600027）、2014年國家級教育基地項目（No.414B0110）、2016年廣東大學(xué)生科技創(chuàng)新培育專項資金資助項目（No.pdjh2016a0460）