徐萌萌，王 萍，溫 號(hào)，繆 剛

（河海大學(xué)物聯(lián)網(wǎng)工程學(xué)院，常州213022）

基于跨平臺(tái)的自行車(chē)競(jìng)賽信息發(fā)布App設(shè)計(jì)?

徐萌萌，王 萍，溫 號(hào)，繆 剛

（河海大學(xué)物聯(lián)網(wǎng)工程學(xué)院，常州213022）

根據(jù)自行車(chē)競(jìng)賽信息發(fā)布逐漸趨向移動(dòng)化的需求和發(fā)布方式較為單一的現(xiàn)狀，提出基于跨平臺(tái)的自行車(chē)競(jìng)賽信息發(fā)布App設(shè)計(jì)方案，將競(jìng)賽信息發(fā)布從現(xiàn)有的計(jì)算機(jī)瀏覽器平臺(tái)發(fā)展至移動(dòng)智能終端，推向更加廣闊的發(fā)布平臺(tái)，為競(jìng)賽信息發(fā)布提供了新的設(shè)計(jì)思路。本設(shè)計(jì)采用三層架構(gòu)實(shí)現(xiàn)整體設(shè)計(jì)高內(nèi)聚、低耦合的特點(diǎn)，基于jQuery Mobile框架，采用JavaScript和HTML編寫(xiě)，使用XML文件存儲(chǔ)并傳輸數(shù)據(jù)，利用PhoneGap實(shí)現(xiàn)整體設(shè)計(jì)、一次編寫(xiě)、處處運(yùn)行的跨平臺(tái)特性。設(shè)計(jì)已成功運(yùn)用于2014年環(huán)青海湖國(guó)際公路自行車(chē)賽，運(yùn)行結(jié)果穩(wěn)定可靠，信息發(fā)布及時(shí)準(zhǔn)確，滿足自行車(chē)競(jìng)賽信息發(fā)布的需求。

移動(dòng)應(yīng)用程序；跨平臺(tái)；PhoneGap技術(shù)；信息發(fā)布；自行車(chē)競(jìng)賽；三層架構(gòu)

1 引 言

隨著通信技術(shù)和多媒體技術(shù)的發(fā)展以及各種移動(dòng)智能終端用戶的增多，新媒體的應(yīng)用逐漸趨向移動(dòng)化。移動(dòng)智能終端已成為第一終端、互聯(lián)網(wǎng)中心及個(gè)人信息中心［1］，同時(shí)，移動(dòng)智能終端以其強(qiáng)大的功能，也在體育賽事中嶄露頭角。在競(jìng)賽信息發(fā)布方面，移動(dòng)智能終端尚未得到廣泛的應(yīng)用。但是，移動(dòng)智能終端因其移動(dòng)便攜性，具備傳統(tǒng)信息發(fā)布系統(tǒng)不可比擬的好處，通過(guò)移動(dòng)智能終端的競(jìng)賽信息發(fā)布應(yīng)用程序，無(wú)論是比賽場(chǎng)內(nèi)外的觀眾，還是競(jìng)賽相關(guān)人員，都能夠隨時(shí)隨地獲悉比賽進(jìn)度以及成績(jī)等賽事相關(guān)信息［2］。同時(shí)，PhoneGap技術(shù)的出現(xiàn)，成功的將跨平臺(tái)的App開(kāi)發(fā)化繁為簡(jiǎn)。基于以上需求和條件，設(shè)計(jì)了公路自行車(chē)競(jìng)賽信息發(fā)布App，并已成功在2014年環(huán)青海湖國(guó)際公路自行車(chē)賽中應(yīng)用，滿足競(jìng)賽信息發(fā)布需求。

2 自行車(chē)競(jìng)賽信息發(fā)布App業(yè)務(wù)需求與工作流程

2.1 業(yè)務(wù)需求

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

2.2 工作流程

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

圖1 自行車(chē)競(jìng)賽信息發(fā)布App工作流程示意圖

3 自行車(chē)競(jìng)賽信息發(fā)布App設(shè)計(jì)

3.1 設(shè)計(jì)思想

本設(shè)計(jì)采取三層體系架構(gòu)，通過(guò)表示層頁(yè)面來(lái)與用戶進(jìn)行交互，業(yè)務(wù)邏輯層來(lái)接收用戶請(qǐng)求，與數(shù)據(jù)訪問(wèn)層進(jìn)行交互讀取并返回?cái)?shù)據(jù)，通過(guò)顯示頁(yè)面呈現(xiàn)給用戶。三層體系架構(gòu)使得每層之間的依賴(lài)性降低，易于實(shí)現(xiàn)層的分工、替換和重用，利于維護(hù)［3］。

使用跨平臺(tái)的PhoneGap框架設(shè)計(jì)App，實(shí)質(zhì)是將一個(gè)帶有移動(dòng)智能終端應(yīng)用程序風(fēng)格的網(wǎng)站通過(guò)PhoneGap封裝為App。所以應(yīng)用Phonegap進(jìn)行App設(shè)計(jì)時(shí)，首先應(yīng)當(dāng)設(shè)計(jì)一個(gè)適于移動(dòng)智能終端瀏覽的網(wǎng)站頁(yè)面［4］，使用jQuery Mobile框架提供的風(fēng)格和屬性可以快捷設(shè)計(jì)出具有App風(fēng)格的頁(yè)面。

考慮到移動(dòng)智能終端的內(nèi)存和網(wǎng)絡(luò)環(huán)境，數(shù)據(jù)交換方式應(yīng)當(dāng)適于移動(dòng)智能終端以較少的網(wǎng)絡(luò)資源消耗快速獲取數(shù)據(jù)。同時(shí)，由于本設(shè)計(jì)每個(gè)數(shù)據(jù)表之間并不具有復(fù)雜的關(guān)系結(jié)構(gòu)，所以數(shù)據(jù)的讀取和存儲(chǔ)不采用數(shù)據(jù)庫(kù)，而是采用XML文件。

計(jì)算機(jī)瀏覽器平臺(tái)上的網(wǎng)站通過(guò)跨平臺(tái)的PhoneGap封裝，發(fā)布為適于多種移動(dòng)智能終端使用的App，實(shí)現(xiàn)程序的一次編寫(xiě)，處處運(yùn)行。

3.2 App設(shè)計(jì)

3.2.1 前端頁(yè)面設(shè)計(jì)

2014環(huán)青海湖國(guó)際公路自行車(chē)賽共14個(gè)比賽日，分13個(gè)賽段，每個(gè)賽段需要發(fā)布基本信息、賽段成績(jī)單和賽段頒獎(jiǎng)單。App具體內(nèi)容結(jié)構(gòu)如圖2所示。每個(gè)賽段開(kāi)賽之前，需要發(fā)布本賽段的基本信息，如比賽開(kāi)始時(shí)間、賽段距離等信息；每個(gè)賽段比賽結(jié)束需要發(fā)布賽段成績(jī)單和頒獎(jiǎng)單，賽段成績(jī)單包括賽段/累計(jì)個(gè)人成績(jī)、沖刺積分等信息；賽段頒獎(jiǎng)單包括本段成績(jī)前三名及爬山積分第一名等信息。

圖2 自行車(chē)競(jìng)賽信息發(fā)布App結(jié)構(gòu)圖

在進(jìn)行前端頁(yè)面設(shè)計(jì)時(shí)，首先設(shè)計(jì)歡迎頁(yè)面，通過(guò)點(diǎn)擊進(jìn)入總導(dǎo)航頁(yè)?？倢?dǎo)航頁(yè)面分三個(gè)欄目：Stage，Result，Course。Stage欄顯示所有賽段，以日期和賽段名稱(chēng)條目為導(dǎo)航，單擊條目可以進(jìn)入相應(yīng)賽段的內(nèi)容頁(yè)；Result欄顯示比賽成績(jī)，以成績(jī)類(lèi)別條目為導(dǎo)航，單擊條目可以進(jìn)入相應(yīng)類(lèi)別成績(jī)的內(nèi)容頁(yè)；Course欄顯示路線圖和海拔圖，以賽段為導(dǎo)航。每個(gè)內(nèi)容頁(yè)右側(cè)設(shè)計(jì)一個(gè)推拉式菜單，可以在任何賽段的任何內(nèi)容頁(yè)中對(duì)賽段或者成績(jī)類(lèi)別進(jìn)行選擇。

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

3.2.2 數(shù)據(jù)交換方式

本設(shè)計(jì)涉及到兩部分?jǐn)?shù)據(jù)交換。第一部分是現(xiàn)場(chǎng)成績(jī)處理系統(tǒng)與服務(wù)器端的數(shù)據(jù)交換。在服務(wù)器端建立FTP讀寫(xiě)目錄，由現(xiàn)場(chǎng)成績(jī)處理系統(tǒng)在比賽前根據(jù)競(jìng)賽日程從服務(wù)器下載基礎(chǔ)信息數(shù)據(jù)，在比賽過(guò)程中將競(jìng)賽成績(jī)適時(shí)地生成XML文件并上傳至服務(wù)器端FTP讀寫(xiě)目錄。

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

設(shè)計(jì)采用XML文件來(lái)保存數(shù)據(jù)并且進(jìn)行數(shù)據(jù)傳輸，是由于基礎(chǔ)數(shù)據(jù)以及每個(gè)賽段具體的成績(jī)數(shù)據(jù)之間并不具有復(fù)雜的關(guān)系結(jié)構(gòu)，所以數(shù)據(jù)的讀取和存儲(chǔ)不采用讀取數(shù)據(jù)庫(kù)，而是通過(guò)讀取XML文件獲取所需數(shù)據(jù)。相比數(shù)據(jù)庫(kù)，XML占用的資源少，操作方便，且可移植性強(qiáng)，不必寫(xiě)復(fù)雜的SQL語(yǔ)句，不具有復(fù)雜關(guān)系結(jié)構(gòu)的數(shù)據(jù)完全可以用XML來(lái)存儲(chǔ)［6］。

圖3 XML文件下載流程圖

3.2.3 數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)

設(shè)計(jì)根據(jù)比賽成績(jī)發(fā)布信息的展示需求，對(duì)App數(shù)據(jù)結(jié)構(gòu)進(jìn)行如下設(shè)計(jì)。對(duì)于比賽整體，需要運(yùn)動(dòng)員信息、代表隊(duì)信息以及賽段信息，分別存儲(chǔ)為三個(gè)XML文件＿Athlete，＿Team，＿Stage；每個(gè)賽段需要14個(gè)文件，分別是賽段出發(fā)單（X＿StartList），車(chē)隊(duì)出發(fā)順序（X＿TeamStartOrder），個(gè)人賽段成績(jī)（X＿Individual），個(gè)人賽段累計(jì)成績(jī)（X＿General），賽段團(tuán)體成績(jī)（X＿TeamResult），賽段團(tuán)體累計(jì)成績(jī)（X＿GeneralTeamResult），賽段亞洲最好個(gè)人成績(jī)（X＿AsianIndividual），賽段亞洲最好團(tuán)體成績(jī)（X＿AsianTeam），賽段亞洲最好累計(jì)團(tuán)體成績(jī)（X＿Asian-TeamAfterStage），賽段搶分排名（X＿Points），賽段搶分累計(jì)排名（X＿PointsPlus），賽段爬山排名（X＿KOM），賽段爬山累計(jì)排名（X＿KomPlus），頒獎(jiǎng)單（X＿Awards）（其中，X表示賽段號(hào)1－13）。

上述采用的XML文件是輕量級(jí)的數(shù)據(jù)存儲(chǔ)文件，沒(méi)有預(yù)定義標(biāo)簽，允許自定義標(biāo)簽和文檔結(jié)構(gòu)，使用方式較為靈活。相較于創(chuàng)建數(shù)據(jù)庫(kù)，這種方式既滿足了創(chuàng)建數(shù)據(jù)庫(kù)時(shí)自定義字段的需求，同時(shí)更為簡(jiǎn)便靈活，便于閱讀和解析。

設(shè)計(jì)的XML文件自定義結(jié)構(gòu)如圖4所示。此XML文件是10＿AsianTeam，即第十賽段的亞洲最好團(tuán)體成績(jī)。第一行為文件頭部，用來(lái)展示文件版本信息；根元素為ResultData，表示文件內(nèi)容的起始和結(jié)束，所有的子元素全部都放在根元素內(nèi)部；子元素DataList表示一條數(shù)據(jù)，不同的XML文件，DataList中存放不同的屬性和值。此文件中F＿Stage Order屬性表示當(dāng)前賽段編號(hào)，F(xiàn)＿TeamCode屬性表示參賽隊(duì)伍編號(hào)，F(xiàn)＿Rank屬性表示累計(jì)名次，F(xiàn)＿Time屬性表示該隊(duì)當(dāng)前十賽段累計(jì)騎行時(shí)間，F(xiàn)＿Diff屬性表示該隊(duì)累計(jì)時(shí)間與第一名的累計(jì)時(shí)間差，F(xiàn)＿BP屬性表示該隊(duì)伍的獎(jiǎng)懲情況。

圖4 XML文件結(jié)構(gòu)圖

3.2.4 跨平臺(tái)的自行車(chē)競(jìng)賽信息發(fā)布App設(shè)計(jì)

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

圖5 PhoneGap跨平臺(tái)工作機(jī)制圖

利用PhoneGap將已經(jīng)設(shè)計(jì)好并發(fā)布至服務(wù)器的網(wǎng)站封裝成App。以Android為例，在Eclipse環(huán)境中創(chuàng)建Android應(yīng)用工程并導(dǎo)入PhoneGap包，并將網(wǎng)站封裝成Android平臺(tái)的安裝文件apk文件，將此文件發(fā)布到服務(wù)器上供其他使用者下載。如需其他移動(dòng)應(yīng)用平臺(tái)的版本，譬如IOS平臺(tái)的安裝文件ipa文件，只需要在XCode環(huán)境中創(chuàng)建IOS工程將網(wǎng)站進(jìn)行封裝即可。

設(shè)計(jì)采用PhoneGap框架進(jìn)行開(kāi)發(fā)，是由于PhoneGap具有強(qiáng)大的跨平臺(tái)功能，可以實(shí)現(xiàn)一次編寫(xiě)，處處運(yùn)行。而傳統(tǒng)的移動(dòng)智能終端App的發(fā)布使用移動(dòng)平臺(tái)的原生開(kāi)發(fā)，同一業(yè)務(wù)需要用Objective－C、Java、Carbide C＋＋等語(yǔ)言分別進(jìn)行開(kāi)發(fā)，過(guò)程繁瑣且程序難讀，開(kāi)發(fā)出來(lái)的應(yīng)用程序沒(méi)有跨平臺(tái)性，需要具有專(zhuān)業(yè)知識(shí)的人員進(jìn)行開(kāi)發(fā)和維護(hù)，開(kāi)發(fā)耗時(shí)長(zhǎng)，相對(duì)成本較高。PhoneGap的出現(xiàn)，將移動(dòng)智能終端App的開(kāi)發(fā)帶入了全新階段。

4 運(yùn)行與實(shí)現(xiàn)

本設(shè)計(jì)已成功運(yùn)行于2014年環(huán)青海湖國(guó)際公路自行車(chē)賽，為競(jìng)賽信息發(fā)布服務(wù)。提供了apk文件和ipa文件的官方下載，用戶可自行下載安裝，以隨時(shí)關(guān)注比賽進(jìn)程和比賽成績(jī)，為賽事的信息發(fā)布提供有力支撐。運(yùn)行界面如圖6所示，此頁(yè)面即為以日期和賽段名稱(chēng)為導(dǎo)航的總導(dǎo)航頁(yè)面，用戶可以在該頁(yè)面對(duì)所需獲知的信息頁(yè)面進(jìn)行選擇，并能夠在各類(lèi)不同導(dǎo)航欄目間進(jìn)行快速切換。

圖6 自行車(chē)競(jìng)賽信息發(fā)布APP運(yùn)行界面圖

5 結(jié)束語(yǔ)

本課題結(jié)合自行車(chē)競(jìng)賽信息發(fā)布系統(tǒng)發(fā)展現(xiàn)狀，針對(duì)自行車(chē)競(jìng)賽信息發(fā)布系統(tǒng)業(yè)務(wù)需求，提出并完成具有創(chuàng)新性的移動(dòng)智能終端競(jìng)賽信息發(fā)布App設(shè)計(jì)。

該設(shè)計(jì)滿足競(jìng)賽基礎(chǔ)信息與實(shí)時(shí)成績(jī)對(duì)外發(fā)布需求，同時(shí)由于其運(yùn)行在移動(dòng)智能終端的特性，相較于已有的信息發(fā)布系統(tǒng)更加實(shí)時(shí)便捷。該設(shè)計(jì)已成功地在2014年環(huán)青海湖國(guó)際公路自行車(chē)賽中得到應(yīng)用，運(yùn)行穩(wěn)定可靠，信息發(fā)布及時(shí)準(zhǔn)確，滿足競(jìng)賽信息發(fā)布需求。

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

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

［2］ 趙黎.體育信息技術(shù)應(yīng)用與發(fā)展［J］.北京體育大學(xué)學(xué)報(bào)，2008（2）：141－143.

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

［3］ 陸麗丹.三層架構(gòu)應(yīng)用實(shí)例研究［J］.中國(guó)管理信息化，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.移動(dòng)Web實(shí)現(xiàn)指南－面向移動(dòng)設(shè)備的網(wǎng)站優(yōu)化、開(kāi)發(fā)和設(shè)計(jì)［M］.北京：人民郵電出版社，2012.

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

［5］ 陶國(guó)榮.jQuery Mobile權(quán)威指南［M］.北京：機(jī)械工業(yè)出版社，2012.

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

［6］ 孟小峰.XML數(shù)據(jù)管理［M］.北京：清華大學(xué)出版社，2009.

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

［7］ John M Wargo.PhoneGap精粹：構(gòu)建跨平臺(tái)的移動(dòng)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開(kāi)發(fā)指南［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

國(guó)家體育總局體育信息中心委托項(xiàng)目—2014第十三屆環(huán)青海湖國(guó)際公路自行車(chē)賽競(jìng)賽信息發(fā)布系統(tǒng)

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

2015－02－09