基于CORDOVA的跨平臺(tái)閩西生豬疫病APP的研究與實(shí)現(xiàn)

唐彬文，戴愛玲，陳亞洲，李曉華，楊小燕，郭士正

（1.集美大學(xué) 誠(chéng)毅學(xué)院，福建 廈門 361021；2.福建省生豬疫病防控工程技術(shù)研究中心，福建 龍巖 364000）

基于CORDOVA的跨平臺(tái)閩西生豬疫病APP的研究與實(shí)現(xiàn)

唐彬文1，戴愛玲2，陳亞洲1，李曉華2，楊小燕2，郭士正1

（1.集美大學(xué) 誠(chéng)毅學(xué)院，福建 廈門 361021；2.福建省生豬疫病防控工程技術(shù)研究中心，福建 龍巖 364000）

摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展和智能手機(jī)的普及，基于B/S結(jié)構(gòu)的信息系統(tǒng)已經(jīng)不能滿足用戶的需要。分析了用戶需求的基礎(chǔ)上，研究和實(shí)現(xiàn)基于CORDOVA的跨平臺(tái)閩西生豬疫病APP。APP不僅調(diào)用原系統(tǒng)的報(bào)表查詢、病例查詢和檢測(cè)報(bào)表查詢等功能模塊，而且增加了預(yù)約采血、新消息、討論區(qū)、新藥新技術(shù)和防疫與保健等新功能。希望以此提高養(yǎng)殖戶使用系統(tǒng)的粘性和豐富研究中心實(shí)驗(yàn)室的信息化管理方法。

關(guān)鍵字：CORDOVA；生豬疫??；HTML5；APP；閩西

福建省區(qū)域科技重大項(xiàng)目的子課題閩西生豬流行病學(xué)信息系統(tǒng)的構(gòu)建和實(shí)施已經(jīng)有3 a了。三年來(lái)，系統(tǒng)的使用提高了生豬疫病防控工程技術(shù)研究中心的管理效率，方便了養(yǎng)殖專業(yè)戶的信息查詢。但是隨著智能手機(jī)的發(fā)展，移動(dòng)端的使用日益成為人們生活和工作中不可或缺的信息獲取和傳遞渠道。單獨(dú)的PC端平臺(tái)已經(jīng)不能滿足用戶的需要，因此本項(xiàng)目萌發(fā)出構(gòu)建實(shí)現(xiàn)基于CORDOVA的跨平臺(tái)閩西生豬疫病APP，以增加用戶對(duì)原有系統(tǒng)的信息獲取、傳遞、加工和存儲(chǔ)的方式。以此完善省科技平臺(tái)建設(shè)內(nèi)容。

1　可行性分析

1.1管理可行性

防控中心分別在2010年研發(fā)并使用閩西生豬疫病流行病學(xué)信息系統(tǒng)，在2012年構(gòu)建并實(shí)施了生科院條碼系統(tǒng)?，F(xiàn)已有992個(gè)用戶。其中血清的檢驗(yàn)數(shù)量維持在每年1.8萬(wàn)條左右。無(wú)論從用戶或者管理員的使用頻率都維持在穩(wěn)定的水平。此外，據(jù)eMarketer預(yù)測(cè)，國(guó)內(nèi)智能手機(jī)的普及已近40%，一線城市甚至達(dá)到了55%。因此，移動(dòng)應(yīng)用的使用具有了廣泛的用戶基礎(chǔ)。

1.2技術(shù)可行性

防控中心原先的系統(tǒng)都是基于B/S結(jié)構(gòu)開發(fā)，將系統(tǒng)從PC端轉(zhuǎn)移到移動(dòng)端，面對(duì)的兩大問(wèn)題是各種智能手機(jī)系統(tǒng)的兼容性和手機(jī)屏幕大小、分辨率各異的適配性。而CORDOVA是近年來(lái)使用比較多的跨平臺(tái)框架結(jié)構(gòu)，開發(fā)者能在CORDOVA框架下，短期內(nèi)開發(fā)出兼容Android,IOS，Windows Phone和B1ackberry等主流智能手機(jī)操作系統(tǒng)的APP?？芍^一舉多得。采用htm15+css3+javascript作為移動(dòng)前端的開發(fā)又能夠很好地適配不同屏幕大小的手機(jī)。因此，從技術(shù)上開發(fā)APP接入原先的B/S結(jié)構(gòu)的閩西生豬疫病流行病學(xué)信息系統(tǒng)是成熟的。選用CORDOVA框架是從網(wǎng)站應(yīng)用向移動(dòng)端應(yīng)用轉(zhuǎn)變的較好技術(shù)解決方案。

1.3經(jīng)濟(jì)可行性

由于不同平臺(tái)的異質(zhì)性，開發(fā)適配各個(gè)平臺(tái)的APP非常昂貴。[1]而使用跨平臺(tái)的CORDOVA框架建立的APP具有很強(qiáng)兼容性。其主要投入包括開發(fā)賬號(hào)費(fèi)用(IOS)、框架搭建、設(shè)計(jì)模式、界面設(shè)計(jì)和應(yīng)用程序設(shè)計(jì)等費(fèi)用。系統(tǒng)總體建設(shè)費(fèi)用是可控的。

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

2.1功能結(jié)構(gòu)設(shè)計(jì)

經(jīng)過(guò)前期的調(diào)研，按照原先系統(tǒng)的用戶類型和用戶需求，匯集了以下主要的功能。

表1　閩西生豬疫病APP的功能結(jié)構(gòu)

2.2CORDOVA框架使用

Phonegap被Apache組織收購(gòu)后更名為APACHE CORDOVA。CORDOVA是一種移動(dòng)開發(fā)框架，相當(dāng)于橋接本地移動(dòng)端API和互聯(lián)網(wǎng)應(yīng)用的中間件。CORDOVA針對(duì)不同智能系統(tǒng)的webkit的擴(kuò)張和封裝，通過(guò)webview調(diào)用JS進(jìn)行終端服務(wù)器和各個(gè)不同本地客戶端SDK API的通訊。CORDOVA擁有豐富的插件庫(kù)，其采用面向?qū)ο蠓绞剑鉀Q了程序員適配不同手機(jī)API的問(wèn)題。CORDOVA插件對(duì)本地API的調(diào)用，如短信、GPS、電話和攝像頭等本地硬件，使得APP能夠接近，甚至達(dá)到原生應(yīng)用的水準(zhǔn)。使用CORDOVA云打包的APP能夠兼容當(dāng)下包括IOS，Android、Windows Phone、B1ackberry和Symbian等所有的智能手機(jī)系統(tǒng)。不僅解決了各個(gè)智能系統(tǒng)之間信息孤島的窘境，而且節(jié)省了軟件重復(fù)開發(fā)的成本。因此本項(xiàng)目APP的開發(fā)結(jié)合了本地移動(dòng)技術(shù)和Web調(diào)用Web-View API技術(shù)的思路[2]，采用CORDOVA框架構(gòu)建智能手機(jī)APP。其結(jié)構(gòu)如下所示：

圖1基于CORDOVA框架的APP結(jié)構(gòu)圖

2.3數(shù)據(jù)庫(kù)設(shè)計(jì)

本項(xiàng)目數(shù)據(jù)庫(kù)設(shè)計(jì)沿用原先信息系統(tǒng)的數(shù)據(jù)庫(kù)類型，采用了access數(shù)據(jù)庫(kù)。在原先關(guān)系二維表的基礎(chǔ)上，重新構(gòu)建了適用于APP的幾張二維表。包括appointment（預(yù)約）、BBS（討論區(qū)）、BBScontent（討論區(qū)評(píng)論）、product（新藥新技術(shù)）、Hea1thcare（防疫與保?。┖蚼essage(新消息)等6張二維表。以下是關(guān)于主要的二維表數(shù)據(jù)結(jié)構(gòu)的描述。

表2　Appointment（預(yù)約）

表2用于存放用戶預(yù)約采血的信息，包括用戶的地址、聯(lián)系電話、預(yù)約份數(shù)、時(shí)間、審核情況和處理狀態(tài)等信息。

表3　BBS（討論區(qū)）

表3用于存放討論區(qū)用戶發(fā)布的內(nèi)容和圖片地址。圖片采取相對(duì)地址的存放方式。在圖片上傳過(guò)程中采用插件壓縮圖片，并在服務(wù)器建立單獨(dú)的文件夾存放上傳的圖片。

表4　Message(新消息)

消息的結(jié)構(gòu)包含了發(fā)送者、接收者和內(nèi)容等信息。采用了點(diǎn)對(duì)點(diǎn)和點(diǎn)對(duì)群的消息傳送模式。點(diǎn)對(duì)群的模式中，Receiver自動(dòng)設(shè)定為a11。

此外由于product（新藥新技術(shù)）和Hea1thcare（防疫與保健）的數(shù)據(jù)結(jié)構(gòu)和BBS（討論區(qū)）類似，就不再闡述。

3　系統(tǒng)實(shí)現(xiàn)

3.1設(shè)計(jì)目標(biāo)

3.1.1實(shí)用性

Hybrid模式和本地HTML5 Web應(yīng)用程序的結(jié)合不僅具有更好的移植性，而且具有更好地利用本地移動(dòng)設(shè)備的能力[3]。CORDOVA開發(fā)框架從技術(shù)講是一種優(yōu)秀的Hybrid模式，它和HTML5都具有跨平臺(tái)性，它們的結(jié)合使得程序的開發(fā)事半功倍。本項(xiàng)目APP程序設(shè)計(jì)采用觸屏響應(yīng)式符合移動(dòng)端的使用風(fēng)格。UI采用扁平風(fēng)格圖標(biāo)和文字圖標(biāo)兩種相結(jié)合的方式,消除了Hybrid APP先天流暢性不足的缺點(diǎn)。HTML5+CSS3+javascript的前端設(shè)計(jì)，能夠很好地兼容不同分辨率和大小手機(jī)屏幕。后臺(tái)的asp動(dòng)態(tài)頁(yè)面開發(fā)也能很好地兼容原先B/S結(jié)構(gòu)系統(tǒng)。滿足對(duì)先前報(bào)表、病例記錄和檢測(cè)報(bào)告等信息的動(dòng)態(tài)調(diào)用。

3.1.2擴(kuò)展性

APP的開發(fā)過(guò)程，前端和后臺(tái)的設(shè)計(jì)是分離的。前端靜態(tài)頁(yè)面（HTML5）的開發(fā)和布局的擴(kuò)展較為容易。前端功能的增減只是頁(yè)面標(biāo)簽和布局的調(diào)整而已。后臺(tái)采用動(dòng)態(tài)的頁(yè)面處理技術(shù)(asp)，一方面程序的升級(jí)過(guò)程，幾乎省略了客戶端的調(diào)試，升級(jí)起來(lái)較為容易；另一方面后臺(tái)功能的增減，只需在前臺(tái)的標(biāo)簽中加入或刪除相應(yīng)的iframe框架或者h(yuǎn)ref超級(jí)鏈接。

3.1.3穩(wěn)定性

數(shù)據(jù)庫(kù)面對(duì)高數(shù)量和高頻率的訪問(wèn)時(shí)，能否及時(shí)的響應(yīng)是評(píng)價(jià)APP穩(wěn)定性的重要衡量標(biāo)準(zhǔn)。本項(xiàng)目的APP是屬于行業(yè)性較高的APP，不同于即時(shí)聊天工具、視頻軟件和辦公軟件等常用的APP。其數(shù)據(jù)的并發(fā)量是有限的。在B/S系統(tǒng)設(shè)計(jì)的初期，報(bào)表的計(jì)算量最大，曾一度出現(xiàn)系統(tǒng)掉線，但是經(jīng)過(guò)算法的改進(jìn)，已經(jīng)能夠滿足單個(gè)客戶端高頻率地訪問(wèn)數(shù)據(jù)庫(kù)的要求。在PC端數(shù)據(jù)庫(kù)也經(jīng)歷了壓力測(cè)試。轉(zhuǎn)換到移動(dòng)端平臺(tái)后，只要能保證一定的網(wǎng)速，在3G/4G或WiFi環(huán)境下，系統(tǒng)報(bào)表的移動(dòng)端調(diào)用是流暢的。

3.1.4安全性

數(shù)據(jù)庫(kù)安全是系統(tǒng)安全的最大保障，也是APP端安全的最后防線。系統(tǒng)的安全性設(shè)計(jì)首先對(duì)用戶的個(gè)人信息進(jìn)行md5加密；其次嚴(yán)格區(qū)分不同用戶的訪問(wèn)權(quán)限；最后嚴(yán)格設(shè)定了各個(gè)錄入界面的數(shù)據(jù)格式，從根本上消除了sq1注入威脅。此外HTML5技術(shù)擁有一批解決安全問(wèn)題的新特性，進(jìn)一步保障了系統(tǒng)的安全性[4]。

3.2技術(shù)實(shí)現(xiàn)

3.2.1環(huán)境搭建

CORDOVA環(huán)境的搭建需要首先完成Java SDK、Android SDK、ANT打包工具和Node.js的安裝。其中由于CORDOVA云打包的特性，node.js在大陸地區(qū)不能安裝最新的0.12版本，目前只能安裝0.10.36版本。安裝完以上的基礎(chǔ)軟件包，就可以開始安裝CORDOVA。下面以widows7為例，描述CORDOVA的安裝過(guò)程。

(1)“node.js command prompt”命令進(jìn)入dos界面。(2)輸入“npm config set registry https://registry.npm. taobao.org”命令，使用淘寶代理，進(jìn)行鏡像的安裝。

(3)安裝CORDOVA：npm insta11-g CORDOVA。

(4)刪除文件“～/.npmrc”中“registry=?https://registry.npm.taobao.org”內(nèi)容，即刪除淘寶代理，才能正常使用CORDOVA5.1版本。

(5)創(chuàng)建一個(gè) “MyAPP”工程：CORDOVA createmyAPP com.yourname.myapp MyAPP

(6)添加安卓平臺(tái)：CORDOVA p1atform add android。

(7)打包APK:CORDOVA bui1d android。

3.2.2界面設(shè)計(jì)和功能實(shí)現(xiàn)

通過(guò)修改工程文件“MyAPP”中的WWW文件，即可完成對(duì)APP前臺(tái)客戶端的設(shè)計(jì)和開發(fā)。前端開發(fā)主要是對(duì)WWW文件中的index.htm1的修改，采用HTML5+CSS3+javascript三者結(jié)合的技術(shù)方案。HTML5和CSS3主要布局移動(dòng)端界面，javascript調(diào)用本地的API。后端的開發(fā)沿用原先系統(tǒng)的動(dòng)態(tài)代碼ASP。前后端混合編程，即滿足移動(dòng)端界面設(shè)計(jì)的需要，又能夠兼容原先的信息系統(tǒng)。APP的主要功能實(shí)現(xiàn)依次為。

APP的登錄界面采用傳統(tǒng)的密碼驗(yàn)證的方式。在登錄中設(shè)定了三種權(quán)限的用戶驗(yàn)證。

圖3APP home界面

APP home界面采用扁平化的圖標(biāo)和文字圖標(biāo)相結(jié)合的方式。保障了軟件的直觀性和流暢度。Home界面涵蓋了軟件所有的功能模塊的快捷菜單。

圖4預(yù)約采血功能

預(yù)約采血模塊顯示了預(yù)約的受理狀態(tài)和審核情況。滿足移動(dòng)用戶對(duì)預(yù)約情況的查詢和跟蹤。

圖5報(bào)表查詢

報(bào)表查詢調(diào)用了原先閩西生豬疫病流行病學(xué)信息系統(tǒng)的報(bào)表查詢模塊，并轉(zhuǎn)化為適合移動(dòng)端瀏覽的信息內(nèi)容。其內(nèi)容包括：豬瘟、藍(lán)耳、偽狂犬、衣原體和弓形體等疫病信息的報(bào)表查詢。

圖6討論區(qū)

討論區(qū)的開放，為研究人員、專家學(xué)者和養(yǎng)殖戶建立了溝通的橋梁，同時(shí)也豐富了APP信息傳遞的實(shí)質(zhì)內(nèi)容。討論區(qū)、新藥新技術(shù)、防疫與保健三種內(nèi)容的結(jié)合，將為養(yǎng)殖用戶創(chuàng)造更多的有價(jià)值有營(yíng)養(yǎng)的信息，以此增加APP使用的粘性。

圖7 病例記錄管理界面

病例記錄管理界面也是對(duì)原先系統(tǒng)的功能模塊調(diào)用，其移動(dòng)端界面的實(shí)現(xiàn)增加了研究人員信息錄入的端口，實(shí)現(xiàn)了移動(dòng)化的信息存儲(chǔ)和更新。

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

信息技術(shù)高速發(fā)展的今天，信息獲取渠道的多樣化，不僅有利于系統(tǒng)使用粘性的增加，也有利于工作效率的提高。本項(xiàng)目開發(fā)構(gòu)建的APP能夠滿足養(yǎng)殖用戶的移動(dòng)端信息獲取需要，提高研究中心工作人員的工作效率。基于CORDOVA的跨平臺(tái)閩西生豬疫病APP的實(shí)現(xiàn)不僅是對(duì)原先PC端信息系統(tǒng)的補(bǔ)充，更是順應(yīng)了當(dāng)下移動(dòng)互聯(lián)網(wǎng)發(fā)展的需要。項(xiàng)目采用的技術(shù)標(biāo)準(zhǔn)：CORDOVA框架、HTML5、CSS3、javascrip和asp的Hybrid模式，具有跨平臺(tái)性、擴(kuò)展性、穩(wěn)定性和安全性等優(yōu)勢(shì)。為研究中心信息系統(tǒng)從PC端向移動(dòng)端的漂移奠定了堅(jiān)實(shí)的技術(shù)基礎(chǔ)。

參考文獻(xiàn)：

[1]Henning,Herbert,Tim A.Majchrzak.Extending a mode1-driven cross-p1atform deve1opment approach for business apps[J].Science of Computer Programming,2015,97(1):31-36.

[2]Timothy,Reina,Josef.Review of mu1ti-p1atform mobi1e app1ication deve1opment using webview:1earning management system on mobi1e p1atform[J].Procedia Computer Science, 2015（59）:291-297.

[3]Davy,Yo1ande,Wouter.The future of mobi1e e-hea1th app1ication deve1opment:exp1oring HTML5 for context-aware diabetes monitoring[J].Procedia Computer Science,2013,21: 351-359.

[4]Steve.Divide and conquer:the threats posed by hybrid APP and HTML 5[J].Network Security,2010(3):4-6.

（責(zé)任編輯：夏婷婷）

中圖分類號(hào)：S828.4

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

文章編號(hào)：1674-2109(2015)12-0060-05

收稿日期：2015-11-17

基金項(xiàng)目：福建省省科技平臺(tái)建設(shè)項(xiàng)目（2014N2011）；龍巖市科技項(xiàng)目（2013LY07）。

作者簡(jiǎn)介：唐彬文（1982-），男，漢族，講師，主要從事管理信息系統(tǒng)、電子商務(wù)、數(shù)量經(jīng)濟(jì)分析方法研究。

Research on Cross-platfrom APP for Minxi's Pig Disease Base on CORDOVA and Its Implementation

TANG Binwen1，DAI Ai1ing2，CHEN Yazhou1，LI Xiaohua2，YANG Xiaoyan2，GUO Shizheng1

（1.Chengyi Co11ege,Jimei University,Xiamen,Fujian 361021；2.Fujian Provincia1 Engineering Research Center for The Prevention and Contro1 of Pig Diseases,Longyan，F(xiàn)ujian 364000）

Abstract:With the deve1opment of mobi1e Internet and the popu1arity of smart phones,information system base on B/S can't satisfy the needs of users.Based on the ana1ysis of users'needs,we research and imp1ement the cross-p1atfrom APP for Minxi's pig disease base on CORDOVA.The APP not on1y uses report query,case inquiry and test cases report query of the origina1 system but a1so has new features such as b1ood reservations,news,discussion forums,new techno1ogies and new drugs prevention and hea1th.The purpose of this study is to make some he1p for increasing system viscosity of farmers and improving the information management method of research center 1aboratory. Key words：CORDOVA;pig disease;HTML5;APP;Minxi