基于Cordova的跨平臺(tái)智慧出行APP設(shè)計(jì)與實(shí)現(xiàn)

王 欣

(北京全路通信信號(hào)研究設(shè)計(jì)院集團(tuán)有限公司，北京 100070)

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

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

1 開發(fā)技術(shù)分析

1.1 APP技術(shù)框架

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

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

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

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

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

1.2 后臺(tái)技術(shù)框架

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

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

2 系統(tǒng)設(shè)計(jì)方案

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

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

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

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

2）乘車模塊

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

3）查詢模塊

旅客可以在APP端查詢基于列車車次和基于起始站的列車運(yùn)行信息?；诹熊囓嚧蔚牟樵冃枰脩糨斎胲嚧魏统霭l(fā)日期，可以查詢?cè)撥嚧瘟熊嚻鹗颊?、途徑車站、各個(gè)車站到站時(shí)間及發(fā)車時(shí)間，總運(yùn)行時(shí)間等信息?；谄鹗颊静樵冃枰脩糨斎氤霭l(fā)車站、到達(dá)車站名稱和出發(fā)日期，查詢結(jié)果顯示當(dāng)天乘車區(qū)間內(nèi)所有運(yùn)營(yíng)列車信息，包括列車車次、發(fā)車時(shí)間、預(yù)計(jì)到達(dá)時(shí)間、預(yù)計(jì)運(yùn)行時(shí)間及各坐席剩余票數(shù)等信息。

4）導(dǎo)航模塊

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

5）用戶中心模塊

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

3 系統(tǒng)實(shí)現(xiàn)與測(cè)試

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

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

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

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

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

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

此外，還有“導(dǎo)航”頁面用于進(jìn)行基于目的地的路徑規(guī)劃與導(dǎo)航?！拔业摹表撁嬗糜诠┯脩粼O(shè)置個(gè)人信息、實(shí)名認(rèn)證及密碼修改等。

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

4 結(jié)束語

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