基于Android和ios平臺的高校儀器預約APP設計與實現

梁思率, 楊樹國, 王　臻

(1. 清華大學 計算機與信息管理中心, 北京　100084；2. 清華大學 實驗室與設備處, 北京　100084)

?

基于Android和ios平臺的高校儀器預約APP設計與實現

梁思率1, 楊樹國2, 王臻1

(1. 清華大學 計算機與信息管理中心, 北京100084；2. 清華大學 實驗室與設備處, 北京100084)

移動互聯網時代用戶越來越傾向于使用手機端訪問應用系統,高校儀器設備網上預約系統也是如此,但這類系統的手機APP版本在高校應用中還不太多見。清華大學解決了其中的一些技術瓶頸,如所采用的能同時兼容Android、ios、微信平臺的開源手機開發框架WeX5自身的不穩定性,克服了其中一些關鍵的bug,用于上機預約的仿谷歌桌面日歷FullCalendar的手機端移植,攻克了移植過程中與平臺不兼容的各種技術難點,逐漸探索出了一條簡潔、快速的開發路徑,成功實現了手機端的儀器預約,包含單點登錄、百度地圖、儀器查找、上機預約、送樣預約等多種功能。使用結果表明,該系統運行穩定可靠、使用方便,可較好地滿足師生在常見應用場景下的需求。

儀器設備管理； 手機日歷； 儀器設備預約

隨著移動互聯網時代的到來和智能手機的普及,手機端APP應用越來越被廣大師生所熟悉。廣大師生也越來越期望能使用手機端訪問各種應用系統[1-3],以充分享受移動互聯網帶來的便利。清華大學儀器共享服務平臺手機版就是在這個背景下產生的。

清華大學儀器設備共享平臺的桌面Web版有著復雜的業務邏輯和后臺管理員功能,很多高校也開發了類似的系統,但移動APP版的這類系統還不多見,這里面有很多原因,比如業務邏輯復雜,但最大的原因是其核心的預約功能需要用日歷實現,而且普通的日歷控件還不能滿足要求。因為它要求能實現細粒度的時間控制,預約時間精確到分鐘,還得可拖拽,方便日常的時間修改,需要多視圖展示,如日視圖、周視圖、月視圖以及其他特殊定制的雙日視圖等,當然,還得是開源組件,代碼可以修改維護。

在這種需求限制的基礎上,調研了多種開源的日歷控件,最終選擇了已被幾所高校采用的仿谷歌日歷控件FullCalendar[4-5],它能很好地滿足各種個性化需求,并且方便開發和維護。但是這款控件是基于桌面端的,沒有移植到手機端的先例,需要解決一些特殊的技術問題,如：

(1) 它不能在手機上使用它的拖拽拉伸功能,而只能點擊,它沒有專門為此開發API。

(2) 它作為一個第三方控件,有很多個性化的代碼,在移植到主流手機端開發平臺的時候不能很好地兼容js、css樣式,導致一些展示、執行邏輯上的錯誤。

(3) 調研了一些其他的開源手機日歷控件[6-8],發現都不能滿足提出的個性化需求,很多日歷控件都只支持整塊時間的拖拽,如整小時拖拽,不支持細粒度時間的拖拽。

這就需要對桌面端FullCalendar控件進行一些本地化改造,使之能無縫地移植到手機端中來。

此外,由于使用APP屬于科研類應用,和常見的生活類APP不同,風格偏嚴肅,界面強調簡潔大方,并且要求同時開發Android版和ios版,因此AndroidStudio或者Xcode就不太適用了,在此基礎上經過封裝的Appcan可以滿足要求,但它需要單獨開發Android和ios版本,因此最終選擇了WeX5[9-10],它支持一次開發、多平臺使用,同時兼容Android、ios、微信端,最大化地滿足了要求。

接下來就是對Web版的功能做大幅度的精簡,只保留常用的儀器查詢、網上預約、通知瀏覽等功能,這樣就能突出重點,滿足大部分應用場景的需要。

1　手機端開發技術框架

WeX5是基于html5的APP前端框架,遵循公共標準,源代碼完全開源,結構清晰,雖然美工效果一般,但是安卓和蘋果的APP只需開發一份即可,大大提高了開發效率,而美工可以通過背景圖片樣式的替換作深度定制,所以也能解決。綜上所述,選擇WeX5作為AndroidAPP、iosAPP開發平臺,它具有開發效率高、移植性好的特點,在它的基礎上可以做二次開發,加入我們的功能和樣式。

WeX5平臺的主要技術框架如圖1所示[9-10],它的服務端和客戶端開發是完全分開的,這極大地提高了開發效率。通過前端data數據源以json的方式和服務端通信,界面編程完全針對data數據源就可以了。它使用了一種數據綁定的技術,可以將界面的動態特性用data表達式來描述,用它來控制視圖的行為,這能極大地提高開發效率。所有的業務邏輯在js文件里完成,包括ajax服務端調用和codova本地手機端硬件調用。

在部署WeX5平臺的時候遇到了很多問題,主要是自帶組件的一些bug,這些bug隨著它的不斷升級會有所緩解,但還有很多需要自己處理。比如在界面中用了多個tab頁的布局,每個tab頁里又帶了上下滾動分頁,這種效果好像得不到很好的支持。常見的手機APP里大多是無tab頁的單頁滾動分頁。最終找到了一種補救辦法,將tab頁的寬度調窄,和外部主頁面保持一定的空隙,這樣就能在空隙里實現上下滾動拖拽了。

圖1　WeX5手機端技術框架

2　預約日歷在手機端的實現

FullCalendar桌面日歷在移植到手機端的過程中遇到了諸多困難,引入WeX5以后它的頁面樣式出現了混亂,時間列變寬占滿整頁,由于WeX5有自帶的css和js框架,這些框架和FullCalendar自帶的css和js是沖突的,不能直接使用。所以需要對FullCalendar.js和FullCalendar.css做大量的改造,主要包括以下幾個方面：

(1) 桌面端多個js的引入是按順序加載的,但WeX5采用的requirejs框架是分別異步加載的,因此需要將FullCalendar.js主文件和gcal.js輔助文件合并,一次引入。

(2) 桌面端FullCalendar對象是在頁面加載完畢后生成的,但WeX5的頁面控件本身也是異步生成的,經常會報找不到FullCalendar對象的錯誤,這就需要寫一個定時任務來代替onload函數來跟蹤FullCalendar對象的加載,直到加載完成后再執行相應的邏輯。

(3)WeX5采用了jquery1.11,而FullCalendar的所有版本里都沒有采用jquery1.11,當前使用的版本采用的是jquery1.9,這就需要在調用的時候加以區分,防止混淆,否則FullCalendar的功能無法正常使用。

(4)FullCalendar是基于桌面端的,它的樣式以及js中寫入的樣式代碼在手機端屏幕下可能會不兼容,實際情況也是如此,為此又做了大量的修改,最終讓它看起來和桌面端一樣,并且能夠自適應屏幕。

(5)FullCalendar的拖拽拉伸功能默認在手機端下是不起作用的,因為手機端的輸入只有手指觸摸,沒有鼠標,因此引入了第三方控件jquery.ui.touch-punch.min.js[11],做了一些修改,解決了這個問題,這極大地提升了FullCalendar在手機端的可用性。

(6) 還開發了專門針對手機端的雙日視圖,方便用戶在切換的時候不至于造成太大的延遲又能保證瀏覽效率。

(7)FullCalendar自身存在一些bug[12],比如,這在桌面端也遇到過,我們打了一些補丁,手機端也需要移植這些補丁。

3　儀器預約手機端的業務需求

攻克了以上兩個技術難題,接下來就可以根據手機端的設計原則進行儀器預約功能的設計了。按照師生最常用的原則,清華大學儀器設備共享平臺手機端需要滿足的6個基本功能是：查詢我的預約/收藏、查詢/收藏儀器、上機預約、送樣預約、查看通知、系統登錄,功能之間的相互關系框架見圖2。

圖2　儀器預約手機端功能框架

每個功能的具體需求如下：

(1) 查詢我的預約/收藏——分為新預約和歷史預約,預約列表里包含上機預約和送樣預約,還可以查看我收藏的儀器。

(2) 查詢/收藏儀器——提供了多維度的儀器查詢功能,可以按照、儀器標簽、所在單位、排行榜查找,對于查找到的儀器可以預約或收藏為我的儀器,還可以查看地圖位置和GPS路線。

(3) 上機預約——通過日歷系統進行機時預約,具有靈活的日歷拖拽和增刪改查功能,基本上涵蓋了現實中所有的上機預約需求。

(4) 送樣預約——交給儀器管理員代為做實驗的預約,填寫送樣單交給管理員審核,審核通過后可以查詢預約進展情況。

(5) 查看通知——可以查看全校的和與我相關的儀器新聞通知。

(6) 系統登錄——支持校內用戶、系統內自建用戶和校外用戶的登錄,支持主用戶(課題組負責人)和從用戶(課題組成員)兩種角色的登錄,另外還能記住用戶口令和密碼,方便下次自動登錄。

4　應用效果和結論

以清華大學實際需求為背景,經過詳細設計和美工優化,實現了清華大學儀器設備共享平臺Android版和ios版的APP,手機展示效果如圖3所示。

采用了WeX5作為手機開發平臺,FullCalendar作為預約日歷實現,百度地圖作為儀器地點查詢實現,并對這些第三方框架做了大量的二次開發和改造,實踐證明,這條路是可行的。充分挖掘了市場上常見開源產品的技術潛力,將它們融合到一起,發揮各自的特長,實現了高校儀器設備手機預約APP。系統上線幾個月來,一直能穩定可靠地運行,支持大多數用戶的手機(安卓和蘋果),滿足大部分應用場景的需求。該手機預約系統只是一個初步的嘗試,隨著需求的多樣化,未來會出現更多的校園手機APP系統,本文所闡述的開發思路和關鍵技術會有較好的參考和借鑒作用。

圖3　Android/ios APP界面

References)

[1] 姜文周,王彥超,李先毅. 基于Android的個性化校園地圖服務設計[J]. 實驗技術與管理,2012,29(3):109-111.

[2] 任克強,李曉亮,謝斌. 基于Android的手機導航系統設計與實驗[J]. 實驗技術與管理,2014,31(5):131-135.

[3] 李東煒,劉鎮章. 基于Android智能手機的實驗室預約系統設計[J]. 實驗技術與管理,2012,29(12):196-198,202.

[4]AdamShaw.FullCalendar官網[EB/OL].(2015-06-14).http://fullcalendar.io/.

[5] 谷歌.谷歌日歷IOS版[EB/OL].(2013-01-09).http://ios.d.cn/apps/-2515.html.

[6]CodeForApp.IOS日歷(Calendar)開源代碼[EB/OL].(2015-04-10).http://code4app.com/category/calendar.

[7]CodeForApp.Android日歷(Calendar)開源代碼[EB/OL].(2013-10-02).http://d.apkbus.com/android/category/calendar.

[8] 開源中國社區. 給開發者準備的10款最好的jQuery日歷插件[EB/OL]. (2014-01-27).http://www.oschina.net/news/48265/10-best-jquery-calendar-plugins-for-developers.

[9] 起步軟件.WeX5開發指南[EB/OL].(2015-04-14).http://wex5.com/cn/wex5-development-guide/.

[10] 起步軟件.WeX5開發者論壇[EB/OL]. (2015-07-17).http://wex5.com/cn/bbs/forum-113-1.html.

[11]DavidFurfero.jQueryUITouchPunch[EB/OL].(2011-12-13).http://touchpunch.furf.com/.

[12] 編程網志.Fullcalendarduplicateeventsbug[EB/OL]. (2013-07-06).http://www.codeweblog.com/stag/fullcalendar-duplicate-events-bug/.

DesignandrealizationofmobileAPPforinstrumentsandequipmentbookingcollegesanduniversitiesbasedonAndroidandiosplatform

LiangSishuai1,YangShuguo2,WangZhen1

(1.CenterofComputerandInformationManagement,TsinghuaUniversity,Beijing100084,China;2OfficeofLaboratoriesandFacilities,TsinghuaUniversity,Beijing100084,China)

Currentlymoreandmoreusersprefervisitingsystemthroughmobile,soistheinstrumentsandcollegesandequipmentonlinebookingsystemincollegesanduniversities.Butsuchsystems’mobileappsarenotusedcommonlyincollegesanduniversities.TsinghuaUniversityhassolvedsometechnicalbottlenecksinit,suchasselfinstabilityofWeX5,anopensourcemobiledevelopmentframeworkadoptedbyuswhichcanbecompatiblewithAndroid,iosandWeChatsimultaneously,inwhichsomekeybugsareovercomeincludingmobiletransplantingofFullCalendar,animitationGoogledesktopcalendarusedformachinebooking,inwhichvarioustechnicaldifficultiesareconqueredinincompatibilitywithmobileplatform,etc.Thenasimpleandfastwayofdevelopmentisgraduallyexplored,andmobileequipmentbookingissuccessfullyrealized,includingmultiplefunctionssuchassinglesign-on,Baidumap,equipmentsearching,machinebooking,sending-samplebooking,etc.Applicationresultsshowthatthesystemisstableandreliable,easytouse,andcanbettermeettheneedsofteachersandstudentsincommonapplicationscenarios.

instrumentsandequipmentmanagement;mobilecalendar;instrumentsandequipmentbooking

DOI:10.16791/j.cnki.sjg.2016.05.066

2015- 11- 23

梁思率(1984—),男,浙江杭州,碩士,工程師,研究方向為高校信息化.

E-mail：liangss@tsinghua.edu.cn

G482

A

1002-4956(2016)5- 0248- 04

資產管理