基于Cordova的跨平臺智慧出行APP設計與實現

王 欣

(北京全路通信信號研究設計院集團有限公司，北京 100070)

隨著國內經濟總量不斷擴張，軌道交通的地位逐步提升，成為新型城鎮(zhèn)化和城市化地區(qū)高質量發(fā)展的命脈。高質量發(fā)展需要效率的有力支撐和保障，為提高效率必須充分發(fā)揮各種運輸方式之間的技術優(yōu)勢和銜接能力。長期以來，國內運輸服務局限于各種運輸方式內部的服務組織，人們出行缺乏有效的全程組織，旅客在選擇軌道交通出行之前，迫切需要知道如何快速通過軌道交通與國家路網形成的交通網絡直達或者換乘到達目的地。因此需要為旅客提供一套在多制式軌道交通系統中使用的便捷、快速、經濟的智慧出行全過程規(guī)劃。

針對以上問題，基于Cordova技術設計并實現了一款智慧出行APP。該APP主要包含地圖模式與路網模式的行程規(guī)劃、室內路徑導航、電子一鍵購票、計劃行程信息查詢、列車車次查詢與起始站查詢、歷史行程管理等功能，為旅客在跨制式旅行中合理規(guī)劃出行方案，有效引導旅客出行行為，縮短旅客出行鏈，降低旅客出行總時間，提升旅客滿意度，提高出行信息服務的智能化水平，提供交互式的一站式智能旅客出行服務。

1 開發(fā)技術分析

1.1 APP技術框架

目前移動端APP的開發(fā)模式主要分3類：原生開發(fā)模式、網頁開發(fā)模式和混合開發(fā)模式。

原生開發(fā)模式，即Native APP。需要使用Android或IOS官方開發(fā)語言分別對某一類移動設備進行開發(fā)，IOS端用Object c語言開發(fā)，Android端用Java開發(fā)。使用官方開發(fā)語言開發(fā)基本不會出現兼容性問題，性能穩(wěn)定，執(zhí)行速度快，界面流暢，功能豐富，用戶體驗好。但是要同時開發(fā)兩套系統，維護和開發(fā)成本都比較高，開發(fā)周期長，每個系統都要單獨更新，升級更新繁瑣。

網頁開發(fā)模式，即Web APP。使用HTML5、CSS、JavaScript網頁技術，模仿Native APP頁面結構，開發(fā)適用于移動端顯示的網頁，并通過移動設備上的瀏覽器解釋執(zhí)行。優(yōu)點是可跨平臺，跨設備，開發(fā)成本低；缺點是性能不是很好，無法很好地調用系統提供的硬件設備，功能有限，用戶使用體驗較差。

混合開發(fā)模式，即Hybrid APP。是結合原生和HTML開發(fā)的技術，取長補短的一種開發(fā)模式。原生代碼部分利用WebView插件或者其他的框架為H5提供了一個容器，程序主要的業(yè)務實現、界面展示是利用H5相關的Web技術實現，并且可以調用第三方開發(fā)平臺提供的接口訪問設備底層模塊。混合應用不僅可以跨平臺，大大降低開發(fā)成本，而且效果也比較接近原生應用。近年來，隨著硬件不斷發(fā)展和移動設備廠商之間的激烈競爭，手機以及其他移動設備的性能提高很多，因此Hybrid APP性能逐漸提高，用戶的使用體驗也得到很大提升，混合開發(fā)模式逐步發(fā)展為最主流的移動端開發(fā)技術。

綜上所述，考慮到跨制式軌道出行應用業(yè)務復雜、需求多變，且APP用戶群體大、使用移動終端多樣等問題，為了盡可能縮短開發(fā)時間，減少開發(fā)成本，最終本項目選擇目前比較流行的混合開發(fā)模式進行APP開發(fā)。具體采用的是Cordova+VueJS技術棧開發(fā)這款跨平臺的智慧出行APP，其中，VueJS是一套構建用戶界面的漸進式框架，用來開發(fā)前端HTML5界面，VueJS開發(fā)涉及到技術棧包括使用vue-cli腳手架搭建項目、使用vue-router做路由實現單頁面跳轉、使用axios來請求接口實現前后端分離，而Cordova則將開發(fā)好的Web程序包裹進原生的APP殼中，即打包成適用于不同平臺的安裝包，并且Cordova支持調用手機系統原生API，通過添加插件擁有Web開發(fā)不曾擁有的原生功能體驗，如讀取本地通訊錄、調用設備攝像頭等。

1.2 后臺技術框架

本項目除了開發(fā)供旅客使用的智慧出行APP外，還要開發(fā)供管理員使用的系統后臺，主要是對后臺數據的集中展示，方便管理人員對購買的電子車票以及檢票信息進行查閱追溯，提升管理效率。為節(jié)約軟件開發(fā)成本，且在移動設備上顯示票務數據不太方便，本項目開發(fā)的是基于PC端瀏覽器訪問的智慧出行Web管理后臺。

用于Web端開發(fā)的框架技術很多，各種編程技術各有不同的優(yōu)勢與特點，綜合考慮，后臺開發(fā)主要采用VueJS+iView+NPM技術棧。由于后臺技術不是本文的重點內容，這里不做更多的分析說明。

2 系統設計方案

本項目設計的智慧出行APP主要包含出行規(guī)劃、乘車、查詢、導航、用戶中心共5個功能模塊，功能模塊示意如圖1所示。

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

1）出行規(guī)劃模塊

出行規(guī)劃模塊是系統的核心功能模塊，主要實現基于路網結構數據、出行數據等，并依據旅客的不同出行需求給出具有實際價值的出行方案。通過出行規(guī)劃功能，可以快速規(guī)劃出行方案，包括基于地圖、線網圖和擁擠度3種搜索模式，每次搜索后都會給出多種出行方案供旅客選擇。

2）乘車模塊

依據出行規(guī)劃模塊中用戶選擇的出行方案，以列表形式展示車票未過期的所有將要出行的行程信息，包括出發(fā)地、目的地、出行日期、火車票簡要信息、地鐵換乘詳情以及每個行程的檢票狀態(tài)，方便旅客快速查看將要出行的行程，并在出行過程中引導旅客換乘，節(jié)約出行時間。

3）查詢模塊

旅客可以在APP端查詢基于列車車次和基于起始站的列車運行信息。基于列車車次的查詢需要用戶輸入車次和出發(fā)日期，可以查詢該車次列車起始站、途徑車站、各個車站到站時間及發(fā)車時間，總運行時間等信息。基于起始站查詢需要用戶輸入出發(fā)車站、到達車站名稱和出發(fā)日期，查詢結果顯示當天乘車區(qū)間內所有運營列車信息，包括列車車次、發(fā)車時間、預計到達時間、預計運行時間及各坐席剩余票數等信息。

4）導航模塊

導航模塊包括室內旅客定位、路徑規(guī)劃與導航。室內定位將在三維模型場景中通過實時獲取后臺傳來的定位卡片三維坐標，在場景中實時顯示對應的人員位置信息。當用戶選擇場景中的出口、地鐵線路等目的地后，由路徑規(guī)劃功能顯示最短路徑指引，同時用戶可以選擇第一人稱視角或者第三人稱視角查看當前路徑的導航。

5）用戶中心模塊

該模塊包括個人信息查看、計劃行程查看、歷史行程查看、修改密碼、實名認證、消息中心，賬號管理共7個子模塊。在個人信息查看中可以查看與修改用戶頭像、查看與修改用戶名，查看與修改手機號。車票未過期的行程在計劃行程中查看，車票已過期的行程在歷史行程中查看。在修改密碼中可以修改登錄密碼、修改支付密碼、設置指紋支付狀態(tài)。購買車票前必須要先進行實名認證，上傳用戶姓名、身份證號以及頭像。消息中心以列表形式顯示客戶端收到的所有推送消息。

3 系統實現與測試

本項目實現的智慧出行APP“出行”頁面如圖2所示，即軟件主頁，可看到主頁直接顯示路網圖，根據用戶選擇的起始站站點，即時給出當前時間下“用時最短”、“換乘少”、“舒適度高”3種出行方案，用戶選擇其中一種方案進行一鍵購票操作。另外還可以切換到地圖搜索模式頁面和擁擠度顯示頁面。

圖2 “出行”頁面Fig.2 Page of travel

“乘車”頁面如圖3所示，主要顯示所有車票未過期的行程列表。每個子行程下會顯示相應的火車票簡要信息和地鐵線路信息，同時可以點擊每條地鐵線路查看具體換乘信息。每個子行程的車票檢票狀態(tài)在“乘車”頁面可快速查看，同時APP也會收到后臺對旅客的個性化推送。另外，在該頁面可查看定位所在城市當前天氣信息。

圖3 “乘車”頁面Fig.3 Page of ride

“查詢”頁面如圖4所示，包含了列車車次查詢和起始站查詢兩個子查詢，主要作用在于方便旅客查詢列車運行信息。列車車次查詢，可供旅客查詢某一車次列車所有經停車站的到站時間及發(fā)車時間；起始站查詢，可查看某兩個車站之間運營列車基本信息及坐席余票信息。

圖4 “查詢”頁面Fig.4 Page of query

此外，還有“導航”頁面用于進行基于目的地的路徑規(guī)劃與導航。“我的”頁面用于供用戶設置個人信息、實名認證及密碼修改等。

本項目開發(fā)的智慧出行APP已完成了完整的功能測試，目前正在試運行階段，基本能滿足旅客出行需求。

4 結束語

本文設計并實現了一套基于Cordova技術的跨平臺智慧出行APP。該APP不僅能夠合理規(guī)劃出行路徑，提高旅客出行效率，還能縮短旅客出行鏈，優(yōu)化旅客出行流程，最終有效提高區(qū)域軌道交通協同運輸與服務水平。經過測試，該系統運行良好，具有較高的實際應用價值。