当前位置: 东星资源网 > 文档大全 > 情书大全 > 正文

[掌上迎新系统的设计与实现研究] 招商银行掌上生活

时间:2019-01-11 来源:东星资源网 本文已影响 手机版

  摘要:智能移动终端的发展为高校信息化提出了新诉求,掌上迎新系统就是一次尝试。本文研究了掌上迎新系统的设计与实现。掌上迎新以校园地图为核心,是基于谷歌地图服务的地理信息系统,包括查询、导航、分类显示建筑等多种地图应用,掌上迎新的其他功能,如新生信息查询、报名流程、常见问题、校内住宿等同样切合新生及家长的使用期望。
  关键词:掌上应用;迎新系统;Google Maps API;校园地图
  中图分类号:TP311 文献标识码:A 文章编号:1673-8454(2012)03-0057-04
  一、引言
  随着智能移动终端(如智能手机、平板电脑)的普及,掌上应用以其便捷性与及时性受到越来越多的关注。在高校管理服务信息化的过程中,也必须考虑在掌上应用方面提供多维的信息服务。掌上迎新系统就是一次尝试,试图将高校新录取的学生在收到录取通知书后到人校报到一段时间内特别关注的问题集中在一起通过移动终端展示,方便新生和家长,既摆脱固定电脑的束缚,又可以随时随地了解学校迎新工作的新进展。
  掌上迎新系统的核心是一套基于谷歌地图服务的地理信息系统,提供的服务包括本校3个校区、近400个建筑物、道路位置显示及查询,院处办公地点、部门主页、导航信息查询,还包括新生信息、报名流程、常见问题、校内住宿信息等,帮助新生提前融入校园,体验校内生活。
  为了使得系统界面适合诸如手机等小型设备,本系统的网页设计使用Dojo工具。Dojo是一个强大的面向对象JavaScript工具箱。利用它可以方便地使用面向对象方式进行开发,方便地在短时间内构建重量级的JS应用。提供了强大的交互功能与界面编辑处理功能,很方便地处理Ajax请求与漂亮的交互界面,满足Web2.0要求。
  二、Google Maps API浅析
  Google Maps API是谷歌为开发者提供的地图编程接口。允许开发者不必自行建立地图服务器,可以直接将Google Maps的地图数据嵌入网站中,从而在谷歌地图基础上实现地图服务应用,并借助谷歌地图数据为用户提供位置服务。Google Maps API还允许开发者利用JavaScript脚本拓展地图数据与服务,给地图添加标注、折线、多边形及其他图层覆盖物和地图,或者响应用户的点击动作,显示包含内容信息的气泡提示窗口。
  本研究采用最新的Google Maps JavaScript API V3正式版。该版本API在内在机制方面较先前版本有了较大变化,其目的是实现快速载入,尤其是在移动浏览器上,如基于Android的设备和iPhone。它提供较小的地图项集,尽量确保使用较少的JavaScript代码,并保持优化过的载人速度。
  谷歌地图包括三个基本要素:事件、控件和叠加层。地图事件类型包括用户事件和MVC状态更改通知反映的Google Maps API对象更改:控件是指Google MapsAPI自带的大量可以在地图中使用的内置控件,如导航、比例、地图类型控件等,还包括自定义的控件及相应事件;叠加层是地图上与纬度、经度坐标绑定的对象,包括标注、折线、多边形、地图图层、信息窗口、自定义叠加层等。在具体实现中,可采用不同的要素实现不同的功能要求。
  三、系统分析与设计
  1.需求分析
  掌上迎新的主要服务对象是高校新生及家长,经调研分析,系统的需求分析如下:
  (1)校园地图基本服务及查询导航功能。该功能反映基本的地图信息服务操作功能,满足可视化、高效率的要求。包括本校3个校区(含家属区)在Google地图中的位置与范围,近400个建筑物、道路、地标位置及照片等详情。建筑物内包含的院处系所办公室列表及相应部门主页。此外还包括建筑物、办公室的查询功能,两地点之间的导航功能。
  (2)新生信息查询。查询对象包括:学号、学院、书院、班级、宿舍楼、宿舍号,宿舍楼位置在校园地图中显著标示。
  (3)报到流程及地点查询。包括新生报到流程,不同校区的各流程办理地点在校园的位置展示。
  (4)校内住宿信息查询。列举校内的宾馆或招待所,为新生家长提供住宿方便,其位置要在校园地图中标示。
  (5)常见问题解答。搜集整理新生关心的问题,例如教室号编制规则,食堂、图书馆简介,校园卡相关问题等。为新生开始校园生活提供方便与指导。
  2.数据库设计
  经研究分析,掌上迎新系统的数据库主要需要6个数据表。这些数据表需要的主要字段和ER图如图1所示。
  
  (1)建筑物信息表。这是支撑校园地图的基础数据表。存储校内所有楼宇、道路、地标的详细信息,主要包含:中文名、英文名、照片地址、所属校区、描述、中心坐标、轮廓坐标序列、类型等。照片用以显示在气泡窗口中,让用户对建筑物有直观感受。因为建筑物是以叠加层的形式显示在谷歌地图上,所以建筑物的经纬度非常重要。中心坐标是指建筑物的中心点经纬度,做显示建筑物标注之用,轮廓坐标序列用以勾画建筑物形状之用。
  (2)建筑物类型表。不同类型的建筑物在地图上以不同颜色显示,还可以分类显示。因此建筑物类型表存储类型名称、颜色等。目前主要的分类包括:教学办公楼、宿舍楼、体育设施、绿化设施、道路、宾馆招待所等。
  (3)办公室信息表。用以存储建筑物中包含的办公室或特殊教室,主要包括:所在建筑物楼号、办公室名称、部门主页链接、描述、类型等。“所在建筑物楼号”是建筑物信息表的主键。建筑物与办公室是“一对多”的关系。
  (4)办公室类型表。目前主要的类型包括:书院、学院、圈存机、食堂、卡中心、浴室、医院、开水房等。
  (5)介绍答疑表。这里存储常见问题的解答信息。解答方式有两种,一种是文本形式,一种是链接导航形式。
  (6)学生信息表。满足新生信息查询之需。包括:考生号、身份证号、学号、姓名、学院、书院、班级、宿舍楼号、房间号。宿舍楼号是建筑物信息表的主键。
  3,系统体系结构设计
  系统采用B/S体系结构,采用SSH(Struts+Spring+Hibernate)框架,客户端使用Dojo工具构建适合手机浏览的JS功能。系统的总体结构如图2所示。
  
  4.功能模块设计
  掌上迎新系统根据需求分析得到的功能模块如图3所示。
  
  (1)校园地图模块。包括:地图放大、缩小、移动、多种类型图层显示、三校区自由切换、重置地图,为了避免界面反复切换。地图模块还应有查找建筑物、建筑物间导航模块的链接与悬浮窗口,方便用户在查看地图的时候直接查询。
  (2)查找建筑物模块。提供两种查找模式:建筑物和院处办公室,方便用户选择;支持模糊查询,方便使用。此模块还包括常用建筑的快速导航链接,如各报到地点。
  (3)建筑物间导航模块。通过用户输入起始建筑和终止建筑查询最快路径。支持模糊查询,如果输入的内容查出了多处建筑,则再次由用户选择一处建筑。此模块同样 包括常用路线的导航链接。如学校各大门到报到地点、报到地点之间的路径。
  (4)新生信息查询模块。供新生查询学号、学院、书院、班级、宿舍楼及房间号信息,为了安全起见,新生需要输入考生号和身份证号。宿舍楼可以在校园地图中显示位置。
  (5)报到流程模块。分不同校区显示报道流程与办理地点。
  (6)校内住宿模块。显示校内宾馆与招待所信息,并可以在校园地图中显示位置。
  (7)常见问题模块。显示常见问题列表及详细内容。
  (8)常用站点模块。显示新生常用的校内站点导航。
  四、系统实现
  1.系统界面
  本系统的网页设计使用Dojo工具。为保证Html被载入后,Dojo中的视图对应“widget”到网页中的对象,使用Dojo需要按照如图4所示过程进行。
  
  (1)设定djConfig变量;
  (2)加载dojo.js文件;
  (3)执行dojo.require加载相应Dojo功能,根据业务不同加载相应的dojo工具包,例如解析器设置、页面是否支持滚动等多种功能;
  (4)定义初始化函数init,初始化函数定义需要使用dojo的addOnLoad进行调用,用来处理Dojo的界面情况,对带有dojotype的元素进行预先解释,否则带有dojotype的元素将仍保持使用html标准方式。
  (5)使用Dojo的addOnload调用初始化函数dojo.add-Onload(init),用dojo.addOnLoad()指定html页面读入后调用的函数,如果load没有完成,Widget对象不能被实例化。因此需要使用预定义函数进行处理。
  系统的主页面如图5所示,主要功能模块简洁地显示在首页上。子页面采用逐层进入、逐层退出的格式。
  
  2.主要功能实现
  (1)校园地图模块
  调用Google Maps API的控件以实现在谷歌地图上显示详细校园地图的需求。
  定义只有校区范围、校门标识而没有建筑物图示的校园地图称为基图。基图是默认绘制的校园地图,用户可以选择不同的图层显示在基图上。当用户在任意时刻点击“重置地图”标签后,则清空其他内容,返回校园地图基图。
  三个校区的切换标签、不同类型建筑物选项标签都通过自定义控件实现,校区范围、建筑物图形通过多边形叠加层实现。建筑物详细信息及内部的办公点通过信息窗口叠加层实现,建筑物名称图片通过标注叠加层实现。各种控件、标注等元素的事件都受到监听,以响应用户请求。图6所示的就是在校园地图基图上显示的建筑物和建筑物详情悬浮窗口。
  
  (2)查找建筑物模块
  输入为查找类别和查找名称,查找类别为建筑物或院处办公室。经模糊查询得出结果,若只有一条结果则直接显示在校园地图基图中;若有多条结果,则为用户列举出来,让用户通过复选框选择期望的查找对象,然后将用户选择的一系列对象显示在校园地图基图中。
  (接上页)
  (3)建筑物间导航模块
  输入为起始建筑和终止建筑,经模糊查询得出结果。若两个建筑都唯一则直接将建筑物显示在校园地图基图中。并调用Google Maps API的路径功能显示两建筑物中心坐标间的路径。若结果不唯一,则为用户列举结果,让用户通过单选框选择期望的查找对象。然后将路径显示在校园地图基图中。
  (4)新生信息查询模块
  输入考生号和身份证号,返回新生的详细信息,宿舍楼可以直接显示在校园地图基图中。
  (5)校内住宿模块
  显示校内的宾馆和招待所列表,单击某个住宿单位,会在校园地图基图中显示位置与详细信息。
  五、总结
  本文研究了掌上迎新系统的设计与实现,系统的地图部分基于谷歌地图服务的地理信息系统实现,在其上进行二次开发,提供包括本校3个校区,近400个建筑物、道路、地标位置查询,院处办公地点、部门主页、导航查询,还包括新生信息、报名流程、常见问题、校内住宿信息等。
  参考文献:
  [1]Dojo工具[EB/oL].省略/.
  [2]Dojo.mobile工具示例[EB/OL].http://download.省略/release-1.6.0/dojo-release-1.6.0/dojox/mobile/tests/.
  [3]Google Maps JavaScript API V3文档[EB/OL].http://code.省略/intl/zh-CN/apis/maps/documenta tion/javascript/basics.html.
  [4]孙晓茹,赵军.Google Maps API在WEBGIS中的应用[J].微计算机信息,2006,22(7-1):224-226.
  [5]李双峰.Google Maps API开发高级特性[z].CSDN软件开发2.0技术大会,2008.
  [6]刘黎.Google Maps API开发介绍[Z].CSDN软件开发2.0技术大会,2008.
  (编辑:杨馥红)

标签:迎新 掌上 研究 设计