基于Cordova的跨平台智慧出行APP设计与实现

王 欣

(北京全路通信信号研究设计院集团有限公司，北京 100070)

随着国内经济总量不断扩张，轨道交通的地位逐步提升，成为新型城镇化和城市化地区高质量发展的命脉。高质量发展需要效率的有力支撑和保障，为提高效率必须充分发挥各种运输方式之间的技术优势和衔接能力。长期以来，国内运输服务局限于各种运输方式内部的服务组织，人们出行缺乏有效的全程组织，旅客在选择轨道交通出行之前，迫切需要知道如何快速通过轨道交通与国家路网形成的交通网络直达或者换乘到达目的地。因此需要为旅客提供一套在多制式轨道交通系统中使用的便捷、快速、经济的智慧出行全过程规划。

针对以上问题，基于Cordova技术设计并实现了一款智慧出行APP。该APP主要包含地图模式与路网模式的行程规划、室内路径导航、电子一键购票、计划行程信息查询、列车车次查询与起始站查询、历史行程管理等功能，为旅客在跨制式旅行中合理规划出行方案，有效引导旅客出行行为，缩短旅客出行链，降低旅客出行总时间，提升旅客满意度，提高出行信息服务的智能化水平，提供交互式的一站式智能旅客出行服务。

1 开发技术分析

1.1 APP技术框架

目前移动端APP的开发模式主要分3类：原生开发模式、网页开发模式和混合开发模式。

原生开发模式，即Native APP。需要使用Android或IOS官方开发语言分别对某一类移动设备进行开发，IOS端用Object c语言开发，Android端用Java开发。使用官方开发语言开发基本不会出现兼容性问题，性能稳定，执行速度快，界面流畅，功能丰富，用户体验好。但是要同时开发两套系统，维护和开发成本都比较高，开发周期长，每个系统都要单独更新，升级更新繁琐。

网页开发模式，即Web APP。使用HTML5、CSS、JavaScript网页技术，模仿Native APP页面结构，开发适用于移动端显示的网页，并通过移动设备上的浏览器解释执行。优点是可跨平台，跨设备，开发成本低；缺点是性能不是很好，无法很好地调用系统提供的硬件设备，功能有限，用户使用体验较差。

混合开发模式，即Hybrid APP。是结合原生和HTML开发的技术，取长补短的一种开发模式。原生代码部分利用WebView插件或者其他的框架为H5提供了一个容器，程序主要的业务实现、界面展示是利用H5相关的Web技术实现，并且可以调用第三方开发平台提供的接口访问设备底层模块。混合应用不仅可以跨平台，大大降低开发成本，而且效果也比较接近原生应用。近年来，随着硬件不断发展和移动设备厂商之间的激烈竞争，手机以及其他移动设备的性能提高很多，因此Hybrid APP性能逐渐提高，用户的使用体验也得到很大提升，混合开发模式逐步发展为最主流的移动端开发技术。

综上所述，考虑到跨制式轨道出行应用业务复杂、需求多变，且APP用户群体大、使用移动终端多样等问题，为了尽可能缩短开发时间，减少开发成本，最终本项目选择目前比较流行的混合开发模式进行APP开发。具体采用的是Cordova+VueJS技术栈开发这款跨平台的智慧出行APP，其中，VueJS是一套构建用户界面的渐进式框架，用来开发前端HTML5界面，VueJS开发涉及到技术栈包括使用vue-cli脚手架搭建项目、使用vue-router做路由实现单页面跳转、使用axios来请求接口实现前后端分离，而Cordova则将开发好的Web程序包裹进原生的APP壳中，即打包成适用于不同平台的安装包，并且Cordova支持调用手机系统原生API，通过添加插件拥有Web开发不曾拥有的原生功能体验，如读取本地通讯录、调用设备摄像头等。

1.2 后台技术框架

本项目除了开发供旅客使用的智慧出行APP外，还要开发供管理员使用的系统后台，主要是对后台数据的集中展示，方便管理人员对购买的电子车票以及检票信息进行查阅追溯，提升管理效率。为节约软件开发成本，且在移动设备上显示票务数据不太方便，本项目开发的是基于PC端浏览器访问的智慧出行Web管理后台。

用于Web端开发的框架技术很多，各种编程技术各有不同的优势与特点，综合考虑，后台开发主要采用VueJS+iView+NPM技术栈。由于后台技术不是本文的重点内容，这里不做更多的分析说明。

2 系统设计方案

本项目设计的智慧出行APP主要包含出行规划、乘车、查询、导航、用户中心共5个功能模块，功能模块示意如图1所示。

图1 智慧出行APP功能模块Fig.1 Intelligent travel App function block diagram

1）出行规划模块

出行规划模块是系统的核心功能模块，主要实现基于路网结构数据、出行数据等，并依据旅客的不同出行需求给出具有实际价值的出行方案。通过出行规划功能，可以快速规划出行方案，包括基于地图、线网图和拥挤度3种搜索模式，每次搜索后都会给出多种出行方案供旅客选择。

2）乘车模块

依据出行规划模块中用户选择的出行方案，以列表形式展示车票未过期的所有将要出行的行程信息，包括出发地、目的地、出行日期、火车票简要信息、地铁换乘详情以及每个行程的检票状态，方便旅客快速查看将要出行的行程，并在出行过程中引导旅客换乘，节约出行时间。

3）查询模块

旅客可以在APP端查询基于列车车次和基于起始站的列车运行信息。基于列车车次的查询需要用户输入车次和出发日期，可以查询该车次列车起始站、途径车站、各个车站到站时间及发车时间，总运行时间等信息。基于起始站查询需要用户输入出发车站、到达车站名称和出发日期，查询结果显示当天乘车区间内所有运营列车信息，包括列车车次、发车时间、预计到达时间、预计运行时间及各坐席剩余票数等信息。

4）导航模块

导航模块包括室内旅客定位、路径规划与导航。室内定位将在三维模型场景中通过实时获取后台传来的定位卡片三维坐标，在场景中实时显示对应的人员位置信息。当用户选择场景中的出口、地铁线路等目的地后，由路径规划功能显示最短路径指引，同时用户可以选择第一人称视角或者第三人称视角查看当前路径的导航。

5）用户中心模块

该模块包括个人信息查看、计划行程查看、历史行程查看、修改密码、实名认证、消息中心，账号管理共7个子模块。在个人信息查看中可以查看与修改用户头像、查看与修改用户名，查看与修改手机号。车票未过期的行程在计划行程中查看，车票已过期的行程在历史行程中查看。在修改密码中可以修改登录密码、修改支付密码、设置指纹支付状态。购买车票前必须要先进行实名认证，上传用户姓名、身份证号以及头像。消息中心以列表形式显示客户端收到的所有推送消息。

3 系统实现与测试

本项目实现的智慧出行APP“出行”页面如图2所示，即软件主页，可看到主页直接显示路网图，根据用户选择的起始站站点，即时给出当前时间下“用时最短”、“换乘少”、“舒适度高”3种出行方案，用户选择其中一种方案进行一键购票操作。另外还可以切换到地图搜索模式页面和拥挤度显示页面。

图2 “出行”页面Fig.2 Page of travel

“乘车”页面如图3所示，主要显示所有车票未过期的行程列表。每个子行程下会显示相应的火车票简要信息和地铁线路信息，同时可以点击每条地铁线路查看具体换乘信息。每个子行程的车票检票状态在“乘车”页面可快速查看，同时APP也会收到后台对旅客的个性化推送。另外，在该页面可查看定位所在城市当前天气信息。

图3 “乘车”页面Fig.3 Page of ride

“查询”页面如图4所示，包含了列车车次查询和起始站查询两个子查询，主要作用在于方便旅客查询列车运行信息。列车车次查询，可供旅客查询某一车次列车所有经停车站的到站时间及发车时间；起始站查询，可查看某两个车站之间运营列车基本信息及坐席余票信息。

图4 “查询”页面Fig.4 Page of query

此外，还有“导航”页面用于进行基于目的地的路径规划与导航。“我的”页面用于供用户设置个人信息、实名认证及密码修改等。

本项目开发的智慧出行APP已完成了完整的功能测试，目前正在试运行阶段，基本能满足旅客出行需求。

4 结束语

本文设计并实现了一套基于Cordova技术的跨平台智慧出行APP。该APP不仅能够合理规划出行路径，提高旅客出行效率，还能缩短旅客出行链，优化旅客出行流程，最终有效提高区域轨道交通协同运输与服务水平。经过测试，该系统运行良好，具有较高的实际应用价值。