韋劼群

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

?

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

韋劼群

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

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

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

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

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

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

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

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

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

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

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

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

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

5、設(shè)置控制機模塊：設(shè)置傳輸方案隊列、控制機初始化、運行模式、運行方案、設(shè)置時間日期。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(一) Hbuilder特點

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

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

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

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

(三) App的UI

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

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

圖6　MUI框架原理圖

圖7　App菜單界面

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

(一)主要程序代碼

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

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

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

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

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

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

6、保存信息到本地數(shù)據(jù)庫

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

(二) apk及ipa打包

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

圖8　App云端打包

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

［參考文獻］

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

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

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

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

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

［責任編輯張宜］

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

［收稿日期］2015-11-19

*［基金項目］南寧市科學研究與技術(shù)開發(fā)計劃項目（編號：20133327）

［中圖分類號］G434

［文獻標識碼］A

［文章編號］1008-7656（2016）01-0028-07