基于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

资产管理