基于跨平臺的自行車競賽信息發布App設計?

徐萌萌，王 萍，溫 號，繆 剛

（河海大學物聯網工程學院，常州213022）

基于跨平臺的自行車競賽信息發布App設計?

徐萌萌，王 萍，溫 號，繆 剛

（河海大學物聯網工程學院，常州213022）

根據自行車競賽信息發布逐漸趨向移動化的需求和發布方式較為單一的現狀，提出基于跨平臺的自行車競賽信息發布App設計方案，將競賽信息發布從現有的計算機瀏覽器平臺發展至移動智能終端，推向更加廣闊的發布平臺，為競賽信息發布提供了新的設計思路。本設計采用三層架構實現整體設計高內聚、低耦合的特點，基于jQuery Mobile框架，采用JavaScript和HTML編寫，使用XML文件存儲并傳輸數據，利用PhoneGap實現整體設計、一次編寫、處處運行的跨平臺特性。設計已成功運用于2014年環青海湖國際公路自行車賽，運行結果穩定可靠，信息發布及時準確，滿足自行車競賽信息發布的需求。

移動應用程序；跨平臺；PhoneGap技術；信息發布；自行車競賽；三層架構

1 引 言

隨著通信技術和多媒體技術的發展以及各種移動智能終端用戶的增多，新媒體的應用逐漸趨向移動化。移動智能終端已成為第一終端、互聯網中心及個人信息中心［1］，同時，移動智能終端以其強大的功能，也在體育賽事中嶄露頭角。在競賽信息發布方面，移動智能終端尚未得到廣泛的應用。但是，移動智能終端因其移動便攜性，具備傳統信息發布系統不可比擬的好處，通過移動智能終端的競賽信息發布應用程序，無論是比賽場內外的觀眾，還是競賽相關人員，都能夠隨時隨地獲悉比賽進度以及成績等賽事相關信息［2］。同時，PhoneGap技術的出現，成功的將跨平臺的App開發化繁為簡?；谝陨闲枨蠛蜅l件，設計了公路自行車競賽信息發布App，并已成功在2014年環青海湖國際公路自行車賽中應用，滿足競賽信息發布需求。

2 自行車競賽信息發布App業務需求與工作流程

2.1 業務需求

環青海湖國際公路自行車賽從2002年開始，每年的6至8月間在青海省的環青海湖地區和鄰近的甘肅省及寧夏回族自治區舉行，是亞洲頂級自行車公路多日賽，也是世界上海拔最高的國際性公路自行車賽，參賽隊伍多，規模龐大，級別高，受到多方關注。傳統的信息發布，用戶只能通過電腦登陸信息發布網站，而移動智能終端因其便攜性，使得用戶可以隨時隨地查看發布在移動智能終端應用程序上的信息，所以對于關注比賽的人來說，競賽信息發布App是非常有用且必要的。根據以上需求，將本設計的發布信息分為以下三部分：賽段基本信息、賽段成績單和賽段頒獎單。

2.2 工作流程

自行車競賽信息發布App工作流程如圖1所示。比賽前，競賽相關基礎數據以XML文件的形式存放在服務器端，現場成績處理系統根據競賽需求下載這些基礎數據如車隊、運動員和賽段信息。比賽時，現場成績處理系統根據競賽需求和協議對采集到的現場成績數據進行整理編排，在本地生成XML文件并上傳至服務器端。當有用戶使用移動智能終端App進行訪問時，移動智能終端向服務端發起請求，獲取XML文件，將XML文件解析為所需數據格式與存在本地的數據模板綁定并對網頁重新渲染，得到用戶需要瀏覽的頁面。

圖1 自行車競賽信息發布App工作流程示意圖

3 自行車競賽信息發布App設計

3.1 設計思想

本設計采取三層體系架構，通過表示層頁面來與用戶進行交互，業務邏輯層來接收用戶請求，與數據訪問層進行交互讀取并返回數據，通過顯示頁面呈現給用戶。三層體系架構使得每層之間的依賴性降低，易于實現層的分工、替換和重用，利于維護［3］。

使用跨平臺的PhoneGap框架設計App，實質是將一個帶有移動智能終端應用程序風格的網站通過PhoneGap封裝為App。所以應用Phonegap進行App設計時，首先應當設計一個適于移動智能終端瀏覽的網站頁面［4］，使用jQuery Mobile框架提供的風格和屬性可以快捷設計出具有App風格的頁面。

考慮到移動智能終端的內存和網絡環境，數據交換方式應當適于移動智能終端以較少的網絡資源消耗快速獲取數據。同時，由于本設計每個數據表之間并不具有復雜的關系結構，所以數據的讀取和存儲不采用數據庫，而是采用XML文件。

計算機瀏覽器平臺上的網站通過跨平臺的PhoneGap封裝，發布為適于多種移動智能終端使用的App，實現程序的一次編寫，處處運行。

3.2 App設計

3.2.1 前端頁面設計

2014環青海湖國際公路自行車賽共14個比賽日，分13個賽段，每個賽段需要發布基本信息、賽段成績單和賽段頒獎單。App具體內容結構如圖2所示。每個賽段開賽之前，需要發布本賽段的基本信息，如比賽開始時間、賽段距離等信息；每個賽段比賽結束需要發布賽段成績單和頒獎單，賽段成績單包括賽段/累計個人成績、沖刺積分等信息；賽段頒獎單包括本段成績前三名及爬山積分第一名等信息。

圖2 自行車競賽信息發布App結構圖

在進行前端頁面設計時，首先設計歡迎頁面，通過點擊進入總導航頁?？倢Ш巾撁娣秩齻€欄目：Stage，Result，Course。Stage欄顯示所有賽段，以日期和賽段名稱條目為導航，單擊條目可以進入相應賽段的內容頁；Result欄顯示比賽成績，以成績類別條目為導航，單擊條目可以進入相應類別成績的內容頁；Course欄顯示路線圖和海拔圖，以賽段為導航。每個內容頁右側設計一個推拉式菜單，可以在任何賽段的任何內容頁中對賽段或者成績類別進行選擇。

設計采用HTML和JavaScript來完成前端頁面的設計，同時使用jQuery Mobile框架。jQuery Mobile是在移動智能終端上的Web應用程序開發中使用的JavaScript類庫，是基于HTML5、擁有響應式網站特性、兼容所有主流移動設備平臺的前端開發框架，提供了一定范圍的用戶接口和特性，便于開發人員在移動應用上使用［5］。jQuery Mobile中的風格和屬性使開發者可以將網頁設計成為移動應用程序風格。同時，本設計中使用了jQuery Mobile中的AJAX方法從服務器端請求數據。這是由于靜態模板存在本地，而數據存在服務器端，二者屬不同域，瀏覽器出于安全考慮，不允許進行跨域請求，而jQuery Mobile中的AJAX方法有jsonp屬性可以解決跨域問題。通過AJAX向服務器端提交請求獲取數據可以實現頁面的動態刷新，AJAX向服務器端提出請求并處理響應而不阻塞用戶，在瀏覽器端與服務器端之間使用異步數據傳輸，使網頁從服務器端請求少量的數據刷新局部頁面，而不是整個頁面。

3.2.2 數據交換方式

本設計涉及到兩部分數據交換。第一部分是現場成績處理系統與服務器端的數據交換。在服務器端建立FTP讀寫目錄，由現場成績處理系統在比賽前根據競賽日程從服務器下載基礎信息數據，在比賽過程中將競賽成績適時地生成XML文件并上傳至服務器端FTP讀寫目錄。

第二部分是移動智能終端與服務器端的數據交換。移動智能終端App向服務器發出請求，將XML文件從服務器下載到本地，在本地進行解析轉換生成App所需的數據文件，供App使用。使用這一方式不必每次打開或者切換頁面都從服務器端讀取數據，在本地緩存中讀取文件進行解析即可，滿足了移動智能終端在消耗最小流量的同時能夠快速獲取數據的需求。只有首次訪問時或者當服務器的文件更新后App才從服務器端下載數據文件，即發起請求后首先對比服務器端文件與本地文件時間戳，當服務器端文件時間戳大于本地文件時間戳時，從服務器端下載新的XML文件覆蓋掉舊的本地文件，并更新本地文件時間戳。具體流程如圖3所示。

設計采用XML文件來保存數據并且進行數據傳輸，是由于基礎數據以及每個賽段具體的成績數據之間并不具有復雜的關系結構，所以數據的讀取和存儲不采用讀取數據庫，而是通過讀取XML文件獲取所需數據。相比數據庫，XML占用的資源少，操作方便，且可移植性強，不必寫復雜的SQL語句，不具有復雜關系結構的數據完全可以用XML來存儲［6］。

圖3 XML文件下載流程圖

3.2.3 數據結構設計

設計根據比賽成績發布信息的展示需求，對App數據結構進行如下設計。對于比賽整體，需要運動員信息、代表隊信息以及賽段信息，分別存儲為三個XML文件＿Athlete，＿Team，＿Stage；每個賽段需要14個文件，分別是賽段出發單（X＿StartList），車隊出發順序（X＿TeamStartOrder），個人賽段成績（X＿Individual），個人賽段累計成績（X＿General），賽段團體成績（X＿TeamResult），賽段團體累計成績（X＿GeneralTeamResult），賽段亞洲最好個人成績（X＿AsianIndividual），賽段亞洲最好團體成績（X＿AsianTeam），賽段亞洲最好累計團體成績（X＿Asian-TeamAfterStage），賽段搶分排名（X＿Points），賽段搶分累計排名（X＿PointsPlus），賽段爬山排名（X＿KOM），賽段爬山累計排名（X＿KomPlus），頒獎單（X＿Awards）（其中，X表示賽段號1－13）。

上述采用的XML文件是輕量級的數據存儲文件，沒有預定義標簽，允許自定義標簽和文檔結構，使用方式較為靈活。相較于創建數據庫，這種方式既滿足了創建數據庫時自定義字段的需求，同時更為簡便靈活，便于閱讀和解析。

設計的XML文件自定義結構如圖4所示。此XML文件是10＿AsianTeam，即第十賽段的亞洲最好團體成績。第一行為文件頭部，用來展示文件版本信息；根元素為ResultData，表示文件內容的起始和結束，所有的子元素全部都放在根元素內部；子元素DataList表示一條數據，不同的XML文件，DataList中存放不同的屬性和值。此文件中F＿Stage Order屬性表示當前賽段編號，F＿TeamCode屬性表示參賽隊伍編號，F＿Rank屬性表示累計名次，F＿Time屬性表示該隊當前十賽段累計騎行時間，F＿Diff屬性表示該隊累計時間與第一名的累計時間差，F＿BP屬性表示該隊伍的獎懲情況。

圖4 XML文件結構圖

3.2.4 跨平臺的自行車競賽信息發布App設計

頁面及數據設計完成并且將該網站成功發布后，需要使用跨平臺的PhoneGap技術將其封裝成為供移動智能終端使用的App。Phonegap是一款開源的開發框架，旨在讓開發者使用HTML、Javascript、CSS等Web APIs快速開發跨平臺的移動應用程序。開發者只需要編寫一次程序，就可以在IOS、Android、BlackBerry、Winodws Phone等主流移動平臺上進行發布。同時，使用PhoneGap可以使程序同IOS設備或Android設備的攝像頭、GPS等本地應用程序進行交互［7］。PhoneGap之所以可以跨平臺，是由于這些移動設備都具有內置的WebView組件。WebView組件實質上是一個瀏覽器，它具有與本地設備API雙向通信的能力［8］，而PhoneGap針對不同的設備封裝了不同的API，使得WebView App可以訪問設備本地資源，如圖5所示。

圖5 PhoneGap跨平臺工作機制圖

利用PhoneGap將已經設計好并發布至服務器的網站封裝成App。以Android為例，在Eclipse環境中創建Android應用工程并導入PhoneGap包，并將網站封裝成Android平臺的安裝文件apk文件，將此文件發布到服務器上供其他使用者下載。如需其他移動應用平臺的版本，譬如IOS平臺的安裝文件ipa文件，只需要在XCode環境中創建IOS工程將網站進行封裝即可。

設計采用PhoneGap框架進行開發，是由于PhoneGap具有強大的跨平臺功能，可以實現一次編寫，處處運行。而傳統的移動智能終端App的發布使用移動平臺的原生開發，同一業務需要用Objective－C、Java、Carbide C＋＋等語言分別進行開發，過程繁瑣且程序難讀，開發出來的應用程序沒有跨平臺性，需要具有專業知識的人員進行開發和維護，開發耗時長，相對成本較高。PhoneGap的出現，將移動智能終端App的開發帶入了全新階段。

4 運行與實現

本設計已成功運行于2014年環青海湖國際公路自行車賽，為競賽信息發布服務。提供了apk文件和ipa文件的官方下載，用戶可自行下載安裝，以隨時關注比賽進程和比賽成績，為賽事的信息發布提供有力支撐。運行界面如圖6所示，此頁面即為以日期和賽段名稱為導航的總導航頁面，用戶可以在該頁面對所需獲知的信息頁面進行選擇，并能夠在各類不同導航欄目間進行快速切換。

圖6 自行車競賽信息發布APP運行界面圖

5 結束語

本課題結合自行車競賽信息發布系統發展現狀，針對自行車競賽信息發布系統業務需求，提出并完成具有創新性的移動智能終端競賽信息發布App設計。

該設計滿足競賽基礎信息與實時成績對外發布需求，同時由于其運行在移動智能終端的特性，相較于已有的信息發布系統更加實時便捷。該設計已成功地在2014年環青海湖國際公路自行車賽中得到應用，運行穩定可靠，信息發布及時準確，滿足競賽信息發布需求。

［1］ 李婷，周蘭，閔棟等.指尖上的革命—移動智能終端［M］.北京：電子工業出版社，2014.

LITing，ZHOU Lan，MIN Dong，et al.Revolution on the Fingertips—Mobile Intelligent Terminals［M］.Beijing：Publishing House of Electronics Industry，2014.

［2］ 趙黎.體育信息技術應用與發展［J］.北京體育大學學報，2008（2）：141－143.

Zhao Li.Application and Development of Sports Information Technology［J］.Journal of Beijing Sport Universit，2008（2）：141－143.

［3］ 陸麗丹.三層架構應用實例研究［J］.中國管理信息化，2009（7）：25－26.

LU Li－dan.The Research on Tri－Tiered Construction and an Example of Its Application［J］.Chinese Information Management，2009（7）：25－26.

［4］ Kristofer Layon.移動Web實現指南－面向移動設備的網站優化、開發和設計［M］.北京：人民郵電出版社，2012.

Kristofer Layon.Mobile Web Implementation Guide—Website Optimization，Development and Design for Mobile Devices［M］.Beijing：Posts＆Telecom Press，2012.

［5］ 陶國榮.jQuery Mobile權威指南［M］.北京：機械工業出版社，2012.

Tao Guo－rong.jQuery Mobile Definitive Guide［M］.Beijing：Mechanical Industry Press，2012.

［6］ 孟小峰.XML數據管理［M］.北京：清華大學出版社，2009.

Meng Xiao－feng.XML Data Management［M］.Beijing：Tsinghua University Press，2009.

［7］ John M Wargo.PhoneGap精粹：構建跨平臺的移動App［M］.北京：人民郵電出版社，2013.

John M Wargo.The Essence of PhoneGap：Building a Cross－platform Mobile App［M］.Beijing：Posts＆Telecom Press，2013.

［8］ Andrew Lunny.PhoneGap開發指南［M］.北京：人民郵電出版社，2012.

Andrew Lunny.PhoneGap Development Guide［M］.Beijing：Posts＆Telecom Press，2012.

Design of Cycling Race Information Release App Based on Cross－platform Technology

Xu Mengmeng，Wang Ping，Wen Hao，Miao Gang
（College of Internet of Things Engineering，Hohai University，Changzhou 213022，China）

Aiming at the mobile requirements and the single mode of information release in the cycling race，a design of the cycling race information release App based on cross－platform technology is presented，which develops the competition information release from the existing computer browser platform tomobile intelligent terminal to provide a new design idea for competition information release.A three－tier architecture is used to achieve the characteristics of high cohesion and low coupling，based on jQuery Mobile framework，written in JavaScript and HTML，XML files are used to store and transfer data，PhoneGap is adopted to achieve the cross－platform features with write once and running everywhere.It has been successfully used in 2014 Tour de Qinghai Lake International Cycling Race，and the result shows that the design works stably and reliably，releases the information promptly and accurately and meets the requirements of cycling race information release.

Mobile Apps；Cross－platform；PhoneGap technology；Information diffusion；Cycling Race；Three－tire architecture

10.3969/j.issn.1002－2279.2015.05.021

TP31

A

1002－2279（2015）05－0079－04

國家體育總局體育信息中心委托項目—2014第十三屆環青海湖國際公路自行車賽競賽信息發布系統

徐萌萌（1990－），女，山東省濟南市人，碩士研究生，主研方向：智能信息處理理論與技術。

2015－02－09