韋劼群

（廣西廣播電視大學(xué)教育技術(shù)中心，廣西　南寧　530023）

?

交通信號(hào)控制系統(tǒng)的移動(dòng)終端APP開發(fā)*

韋劼群

（廣西廣播電視大學(xué)教育技術(shù)中心，廣西南寧530023）

［摘要］使用作為解析語(yǔ)言的HTML5和Javascript進(jìn)行移動(dòng)應(yīng)用引擎框架開發(fā)，通過調(diào)用原生型APP軟件一樣封裝的底層功能實(shí)現(xiàn)所需的數(shù)據(jù)交換，結(jié)合交通信號(hào)控制系統(tǒng)服務(wù)端推送的信息，在移動(dòng)終端上展示直觀的交通信號(hào)燈狀態(tài)。

［關(guān)鍵詞］移動(dòng)終端；Hbuilder；Html5；Hybrid App；json

隨著社會(huì)的飛速發(fā)展，各地城鎮(zhèn)化進(jìn)程的快速推進(jìn)，城市交通與汽車產(chǎn)業(yè)的加速發(fā)展，人們出行方式變得更加快捷方便，但隨之產(chǎn)生的一系列城市道路交通問題，如道路的擁堵、機(jī)動(dòng)車數(shù)量劇增、行人車輛混行、交通事故頻發(fā)、居民出行難等問題也給人們帶來(lái)了新的困擾，成為了亟待解決的社會(huì)共性問題。交通信號(hào)燈作為管理城市交通、減少交通安全隱患的重要環(huán)節(jié)，在城市道路中起到提供交通信息、引導(dǎo)行人車輛、緩解道路擁堵、減少事故發(fā)生率、減輕事故人員傷亡、降低經(jīng)濟(jì)損失、提高道路行車的通暢性和舒適性的重要作用。公眾對(duì)交通信息的渴望，促進(jìn)了現(xiàn)代交通信息服務(wù)技術(shù)的全面迅速發(fā)展。交通管理者利用先進(jìn)的信息化技術(shù)，結(jié)合智能移動(dòng)終端實(shí)時(shí)監(jiān)控管理交通信號(hào)燈，則會(huì)有效地提高交通管理的效率，而交通信號(hào)燈的信息化設(shè)計(jì)和研究也更受到人們的關(guān)注與期待。

一、交通信號(hào)控制系統(tǒng)的需求分析

交通信號(hào)控制系統(tǒng)要做到人-信號(hào)燈的溝通，首先要了解各方的想法。需求分析是對(duì)收集到的需求進(jìn)行提煉、分析和審查，為最終用戶看到的系統(tǒng)建立概念化模型，其核心任務(wù)就是要弄清楚用戶的需求、交通信號(hào)控制系統(tǒng)功能（見圖1）。

圖1　系統(tǒng)功能需求分析圖

在整個(gè)完整系統(tǒng)中，用戶可使用移動(dòng)客戶端，從系統(tǒng)服務(wù)器上獲取交通燈控制器的信息，并通過控制器監(jiān)控交通燈。

(一)移動(dòng)APP的系統(tǒng)模塊構(gòu)成（見圖2）

1、用戶登錄模塊：用戶使用注冊(cè)的賬戶密碼登錄，如輸入錯(cuò)誤，系統(tǒng)顯示錯(cuò)誤信息；

2、查看控制機(jī)模塊：通過城區(qū)分類查看控制器的狀態(tài)信息，包括城區(qū)、路口、控制機(jī)號(hào)等信息；

3、監(jiān)聽控制機(jī)模塊：實(shí)時(shí)監(jiān)聽不同路口控制機(jī)的登錄時(shí)間、最后通訊時(shí)間、當(dāng)前狀態(tài)、通訊信息等；

4、地圖模塊：結(jié)合在線地圖直觀地查看控制的狀態(tài)信息；

5、設(shè)置控制機(jī)模塊：設(shè)置傳輸方案隊(duì)列、控制機(jī)初始化、運(yùn)行模式、運(yùn)行方案、設(shè)置時(shí)間日期。

(二)移動(dòng)終端操作系統(tǒng)

目前，主流的三種移動(dòng)終端操作系統(tǒng)Android、iOS、Windows Phone各據(jù)一方,它們都有各自獨(dú)立且封閉的“生態(tài)系統(tǒng)”和完善的產(chǎn)業(yè)鏈及相關(guān)服務(wù)，而最常見且市場(chǎng)份額最多的是Android、iOS。

圖2　移動(dòng)APP系統(tǒng)模塊

1、Android是以Linux為基礎(chǔ)建構(gòu)，Google公司推出的手機(jī)操作系統(tǒng)，其體系架構(gòu)包含四個(gè)主要層次（見表1、圖3）。

表1　Android體系架構(gòu)主要層次表

圖3　Android應(yīng)用程序架構(gòu)圖

2、IOS是Apple長(zhǎng)期積累的成果，系統(tǒng)核心、基礎(chǔ)服務(wù)和應(yīng)用框架都采用C/C++或object-C開發(fā)，應(yīng)用采用Cocoa Touch框架以object- C開發(fā)，編譯后以本機(jī)代碼在設(shè)備上運(yùn)行，具有很高的運(yùn)行效率（見圖4）。

圖4　Apple IOS體系架構(gòu)

(三) APP軟件開發(fā)模式的選型

目前APP軟件開發(fā)模式通常有Native APP原生模式、Web APP網(wǎng)頁(yè)模式及Hybrid App混合模式（見表2）。

表2　三種APP開發(fā)模式比較

就目前情況而言，Hybrid App開發(fā)已經(jīng)成為移動(dòng)開發(fā)的趨勢(shì)?，F(xiàn)實(shí)中還有很多開發(fā)者在為移動(dòng)信息化的途徑和方向而苦惱。從投入、用戶體驗(yàn)、維護(hù)成本等方面綜合考慮，Hybrid App已經(jīng)被眾多開發(fā)者和企業(yè)所認(rèn)可。甚至在企業(yè)移動(dòng)信息化平臺(tái)整體解決方案商提供的方案中，幾乎都以Hybrid App為首選的移動(dòng)應(yīng)用開發(fā)模式，包括IBM 的worklight、AppCan的MEAP和SAP的SUP平臺(tái)。

為了減少成本，提高開發(fā)效率，我們希望交通信號(hào)控制系統(tǒng)移動(dòng)終端APP的開發(fā)工具是能創(chuàng)建本地應(yīng)用并進(jìn)行打包和數(shù)字簽名，不用單獨(dú)構(gòu)建原生代碼的編譯環(huán)境。要具有本土化的優(yōu)勢(shì)，方便開發(fā)和調(diào)試，同時(shí)支持安卓與蘋果APP打包。目前國(guó)內(nèi)的Hbuilder、CrossApp、WeX5等都能滿足要求，這些開發(fā)工具各有優(yōu)缺點(diǎn)，有的支持快速開發(fā)、有的開源、有的性能優(yōu)越做到了與原生App一致的功能和體驗(yàn)等等。經(jīng)過實(shí)際試用和比較，最終在較難取舍的情況下，根據(jù)個(gè)人偏愛選擇了Hbuilder作為開發(fā)交通信號(hào)控制系統(tǒng)移動(dòng)APP的工具。

二、Hbuilder開發(fā)交通信號(hào)控制系統(tǒng)移動(dòng)APP

(一) Hbuilder特點(diǎn)

Hbuilder的最大優(yōu)勢(shì)就是“快”，它是支持HTML5的Web開發(fā)IDE，本質(zhì)是對(duì)eclipse進(jìn)行了深度定制，包括最全面的語(yǔ)法庫(kù)和瀏覽器兼容性數(shù)據(jù)，通過完整的語(yǔ)法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發(fā)效率，其并非入門工具，而是定位于極客的利器，特別適于純前端開發(fā)。其采用了js+html+css+打包技術(shù)，即html負(fù)責(zé)頁(yè)面內(nèi)容，js負(fù)責(zé)效果以及調(diào)用原生app方法，ui框架負(fù)責(zé)樣式，最后打包成apk和ipa。

(二)數(shù)據(jù)交互

交通信號(hào)控制系統(tǒng)的PC機(jī)前端、服務(wù)端及數(shù)據(jù)庫(kù)已經(jīng)使用VS2012開發(fā)成型，現(xiàn)做為移動(dòng)設(shè)備的前端開發(fā)，HBuilder的作用綽綽有余。而考慮到移動(dòng)智能設(shè)備的特點(diǎn)，我們定位APP為輕量化應(yīng)用，主要體現(xiàn)“查”“看”，而“控”則主要由PC前端實(shí)現(xiàn)。App和服務(wù)器之間可利用json這種輕量級(jí)的數(shù)據(jù)交換格式做為溝通的橋梁，在3G、4G的高速無(wú)線網(wǎng)絡(luò)充分體現(xiàn)出移動(dòng)設(shè)備便捷、快速、有效的特點(diǎn)，使交通管理者能方便及時(shí)地掌控區(qū)域內(nèi)交通信號(hào)燈的整體狀況。圖5為APP、服務(wù)端、數(shù)據(jù)庫(kù)、交通控制機(jī)的數(shù)據(jù)交互示意圖。

圖5　數(shù)據(jù)交互示意

(三) App的UI

UI界面：利用Hbuilder成熟的MUI（Mobile User Interface）框架，它基于Html5，遵循Html5+規(guī)范，遵循MIT條款開源，是用于移動(dòng)終端界面開發(fā)的一套框架，是最接近原生App體驗(yàn)的高性能前端框架（見圖6）。

在MUI框架基礎(chǔ)上做的交通信號(hào)控制系統(tǒng)的UI，利用MUI我們可以方便地進(jìn)行定制，從而滿足開發(fā)、增加新模塊的需求（見圖7）。

圖6　MUI框架原理圖

圖7　App菜單界面

三、核心代碼的設(shè)計(jì)

(一)主要程序代碼

1、在Html中，通過調(diào)用HTML5+ API來(lái)實(shí)現(xiàn)相應(yīng)的功能。在Html頁(yè)面加載時(shí)，要引用Html5+ API擴(kuò)展代碼庫(kù)進(jìn)行一些必要的初始化操作，當(dāng)擴(kuò)展代碼庫(kù)加載完成時(shí)會(huì)觸發(fā)“pluseready”事件并通知API可以安全調(diào)用。因此，為了保證擴(kuò)展Html5+ API的有效調(diào)用，所有HTML頁(yè)面都需要正確處理“plusready”事件，且通過document.addEventListener來(lái)監(jiān)聽事件。

2、傳統(tǒng)的html中用的最多的click，在App中，為了實(shí)現(xiàn)快速相應(yīng)，避免延遲（手機(jī)瀏覽器的click點(diǎn)擊存在300毫秒延遲），mui為了解決這個(gè)問題而封裝了tap事件，所用的click及onclick操作都被代替，在APP上的任何點(diǎn)擊，統(tǒng)統(tǒng)使用下面的代碼：

element.addEventListener ('tap',function(){……//點(diǎn)擊響應(yīng)邏輯});

3、Html中，基于鏈接構(gòu)建的href頁(yè)面跳轉(zhuǎn)是經(jīng)常用到的。從一個(gè)頁(yè)面點(diǎn)擊鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面，如有刷新的打開方式，用戶要面對(duì)一個(gè)空白的頁(yè)面等待；如果通過無(wú)刷新的方式，用Javascript移入DOM節(jié)點(diǎn)（常見的SPA解決方案），會(huì)碰到很高的性能挑戰(zhàn)：DOM節(jié)點(diǎn)繁多，頁(yè)面太大，轉(zhuǎn)場(chǎng)動(dòng)畫不流暢甚至導(dǎo)致瀏覽器崩潰；為此，MUI使用openWindow方法打開一個(gè)新的webview，單個(gè)webview只承載單個(gè)頁(yè)面的dom，減少dom層級(jí)及頁(yè)面大?。豁?yè)面切換使用原生動(dòng)畫，將最耗性能的部分交給原生實(shí)現(xiàn)，mui會(huì)自動(dòng)監(jiān)聽新頁(yè)面的loaded事件，若加載完畢，再自動(dòng)顯示新頁(yè)面。

4、移動(dòng)終端上的手勢(shì)事件，實(shí)際應(yīng)用時(shí)，根據(jù)使用頻率，mui會(huì)監(jiān)聽部分手勢(shì)事件，如點(diǎn)擊、滑動(dòng)事件等；mui支持用戶根據(jù)實(shí)際業(yè)務(wù)需求，通過設(shè)置頁(yè)面初始化的init方法中g(shù)estureConfig參數(shù)，配置具體需要監(jiān)聽的手勢(shì)事件。

5、json數(shù)據(jù)傳輸App端被拼裝還原h(huán)tml的實(shí)例

6、保存信息到本地?cái)?shù)據(jù)庫(kù)

服務(wù)端的數(shù)據(jù)交互響應(yīng)接口，基于windows Server操作系統(tǒng)IIS的asp代碼，直接讀取數(shù)據(jù)庫(kù)并轉(zhuǎn)成Json格式。

(二) apk及ipa打包

編寫的代碼經(jīng)過測(cè)試及驗(yàn)證后，最后可以利用開發(fā)工具進(jìn)行生成打包。Hbuilder支持App云端打包，直接自動(dòng)生成Apk和ipa的終端安裝包（見圖8）。

圖8　App云端打包

經(jīng)過試運(yùn)行，交通信號(hào)控制系統(tǒng)App軟件可以穩(wěn)定的運(yùn)行在基于Android和IOS平臺(tái)的手機(jī)和移動(dòng)設(shè)備上，可以為交通管理者提供隨身快速便捷靈活的查詢及簡(jiǎn)單的管理服務(wù)，基本滿足了交通管理員對(duì)區(qū)域性交通信號(hào)燈資源信息獲取的實(shí)際需要。同時(shí)，也使交通管理的智能終端服務(wù)種類得到增添，展現(xiàn)出較好的應(yīng)用前景和社會(huì)效益，具有非常好的實(shí)用性。

［參考文獻(xiàn)］

［1］周齊飛.基于Android平臺(tái)的Hybrid App開發(fā)［J］.電腦編程技巧與維護(hù)，2014（15）.

［2］陸鋼，區(qū)洪輝，梁柏青，李蓉蓉.面向移動(dòng)終端的HTML5應(yīng)用運(yùn)行環(huán)境研究［J］.電信科學(xué).2013（5）.

［3］張瑋琪.基于移動(dòng)終端的交通信息服務(wù)技術(shù)研究［D］.吉林：吉林大學(xué)，2015.

［4］謝輝.交通信號(hào)燈控制系統(tǒng)建模與仿真研究［D］.西安：長(zhǎng)安大學(xué)，2014.

［5］孫毅然.我國(guó)現(xiàn)行道路交通信號(hào)燈設(shè)置中的問題及對(duì)策［J］.河北聯(lián)合大學(xué)學(xué)報(bào)(自然科學(xué)版)，2014（2）.

［責(zé)任編輯張宜］

［作者簡(jiǎn)介］韋劼群，廣西廣播電視大學(xué)教育技術(shù)中心副主任，高級(jí)工程師，碩士，研究方向：計(jì)算機(jī)應(yīng)用技術(shù)、網(wǎng)絡(luò)安全。

［收稿日期］2015-11-19

*［基金項(xiàng)目］南寧市科學(xué)研究與技術(shù)開發(fā)計(jì)劃項(xiàng)目（編號(hào)：20133327）

［中圖分類號(hào)］G434

［文獻(xiàn)標(biāo)識(shí)碼］A

［文章編號(hào)］1008-7656（2016）01-0028-07