基于CORDOVA的跨平臺閩西生豬疫病APP的研究與實現

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

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

基于CORDOVA的跨平臺閩西生豬疫病APP的研究與實現

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

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

摘要：隨著移動互聯網的發展和智能手機的普及，基于B/S結構的信息系統已經不能滿足用戶的需要。分析了用戶需求的基礎上，研究和實現基于CORDOVA的跨平臺閩西生豬疫病APP。APP不僅調用原系統的報表查詢、病例查詢和檢測報表查詢等功能模塊，而且增加了預約采血、新消息、討論區、新藥新技術和防疫與保健等新功能。希望以此提高養殖戶使用系統的粘性和豐富研究中心實驗室的信息化管理方法。

關鍵字：CORDOVA；生豬疫病；HTML5；APP；閩西

福建省區域科技重大項目的子課題閩西生豬流行病學信息系統的構建和實施已經有3 a了。三年來，系統的使用提高了生豬疫病防控工程技術研究中心的管理效率，方便了養殖專業戶的信息查詢。但是隨著智能手機的發展，移動端的使用日益成為人們生活和工作中不可或缺的信息獲取和傳遞渠道。單獨的PC端平臺已經不能滿足用戶的需要，因此本項目萌發出構建實現基于CORDOVA的跨平臺閩西生豬疫病APP，以增加用戶對原有系統的信息獲取、傳遞、加工和存儲的方式。以此完善省科技平臺建設內容。

1　可行性分析

1.1管理可行性

防控中心分別在2010年研發并使用閩西生豬疫病流行病學信息系統，在2012年構建并實施了生科院條碼系統。現已有992個用戶。其中血清的檢驗數量維持在每年1.8萬條左右。無論從用戶或者管理員的使用頻率都維持在穩定的水平。此外，據eMarketer預測，國內智能手機的普及已近40%，一線城市甚至達到了55%。因此，移動應用的使用具有了廣泛的用戶基礎。

1.2技術可行性

防控中心原先的系統都是基于B/S結構開發，將系統從PC端轉移到移動端，面對的兩大問題是各種智能手機系統的兼容性和手機屏幕大小、分辨率各異的適配性。而CORDOVA是近年來使用比較多的跨平臺框架結構，開發者能在CORDOVA框架下，短期內開發出兼容Android,IOS，Windows Phone和B1ackberry等主流智能手機操作系統的APP。可謂一舉多得。采用htm15+css3+javascript作為移動前端的開發又能夠很好地適配不同屏幕大小的手機。因此，從技術上開發APP接入原先的B/S結構的閩西生豬疫病流行病學信息系統是成熟的。選用CORDOVA框架是從網站應用向移動端應用轉變的較好技術解決方案。

1.3經濟可行性

由于不同平臺的異質性，開發適配各個平臺的APP非常昂貴。[1]而使用跨平臺的CORDOVA框架建立的APP具有很強兼容性。其主要投入包括開發賬號費用(IOS)、框架搭建、設計模式、界面設計和應用程序設計等費用。系統總體建設費用是可控的。

2　系統設計

2.1功能結構設計

經過前期的調研，按照原先系統的用戶類型和用戶需求，匯集了以下主要的功能。

表1　閩西生豬疫病APP的功能結構

2.2CORDOVA框架使用

Phonegap被Apache組織收購后更名為APACHE CORDOVA。CORDOVA是一種移動開發框架，相當于橋接本地移動端API和互聯網應用的中間件。CORDOVA針對不同智能系統的webkit的擴張和封裝，通過webview調用JS進行終端服務器和各個不同本地客戶端SDK API的通訊。CORDOVA擁有豐富的插件庫，其采用面向對象方式，解決了程序員適配不同手機API的問題。CORDOVA插件對本地API的調用，如短信、GPS、電話和攝像頭等本地硬件，使得APP能夠接近，甚至達到原生應用的水準。使用CORDOVA云打包的APP能夠兼容當下包括IOS，Android、Windows Phone、B1ackberry和Symbian等所有的智能手機系統。不僅解決了各個智能系統之間信息孤島的窘境，而且節省了軟件重復開發的成本。因此本項目APP的開發結合了本地移動技術和Web調用Web-View API技術的思路[2]，采用CORDOVA框架構建智能手機APP。其結構如下所示：

圖1基于CORDOVA框架的APP結構圖

2.3數據庫設計

本項目數據庫設計沿用原先信息系統的數據庫類型，采用了access數據庫。在原先關系二維表的基礎上，重新構建了適用于APP的幾張二維表。包括appointment（預約）、BBS（討論區）、BBScontent（討論區評論）、product（新藥新技術）、Hea1thcare（防疫與保健）和message(新消息)等6張二維表。以下是關于主要的二維表數據結構的描述。

表2　Appointment（預約）

表2用于存放用戶預約采血的信息，包括用戶的地址、聯系電話、預約份數、時間、審核情況和處理狀態等信息。

表3　BBS（討論區）

表3用于存放討論區用戶發布的內容和圖片地址。圖片采取相對地址的存放方式。在圖片上傳過程中采用插件壓縮圖片，并在服務器建立單獨的文件夾存放上傳的圖片。

表4　Message(新消息)

消息的結構包含了發送者、接收者和內容等信息。采用了點對點和點對群的消息傳送模式。點對群的模式中，Receiver自動設定為a11。

此外由于product（新藥新技術）和Hea1thcare（防疫與保健）的數據結構和BBS（討論區）類似，就不再闡述。

3　系統實現

3.1設計目標

3.1.1實用性

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

3.1.2擴展性

APP的開發過程，前端和后臺的設計是分離的。前端靜態頁面（HTML5）的開發和布局的擴展較為容易。前端功能的增減只是頁面標簽和布局的調整而已。后臺采用動態的頁面處理技術(asp)，一方面程序的升級過程，幾乎省略了客戶端的調試，升級起來較為容易；另一方面后臺功能的增減，只需在前臺的標簽中加入或刪除相應的iframe框架或者href超級鏈接。

3.1.3穩定性

數據庫面對高數量和高頻率的訪問時，能否及時的響應是評價APP穩定性的重要衡量標準。本項目的APP是屬于行業性較高的APP，不同于即時聊天工具、視頻軟件和辦公軟件等常用的APP。其數據的并發量是有限的。在B/S系統設計的初期，報表的計算量最大，曾一度出現系統掉線，但是經過算法的改進，已經能夠滿足單個客戶端高頻率地訪問數據庫的要求。在PC端數據庫也經歷了壓力測試。轉換到移動端平臺后，只要能保證一定的網速，在3G/4G或WiFi環境下，系統報表的移動端調用是流暢的。

3.1.4安全性

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

3.2技術實現

3.2.1環境搭建

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

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

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

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

(5)創建一個 “MyAPP”工程：CORDOVA createmyAPP com.yourname.myapp MyAPP

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

(7)打包APK:CORDOVA bui1d android。

3.2.2界面設計和功能實現

通過修改工程文件“MyAPP”中的WWW文件，即可完成對APP前臺客戶端的設計和開發。前端開發主要是對WWW文件中的index.htm1的修改，采用HTML5+CSS3+javascript三者結合的技術方案。HTML5和CSS3主要布局移動端界面，javascript調用本地的API。后端的開發沿用原先系統的動態代碼ASP。前后端混合編程，即滿足移動端界面設計的需要，又能夠兼容原先的信息系統。APP的主要功能實現依次為。

APP的登錄界面采用傳統的密碼驗證的方式。在登錄中設定了三種權限的用戶驗證。

圖3APP home界面

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

圖4預約采血功能

預約采血模塊顯示了預約的受理狀態和審核情況。滿足移動用戶對預約情況的查詢和跟蹤。

圖5報表查詢

報表查詢調用了原先閩西生豬疫病流行病學信息系統的報表查詢模塊，并轉化為適合移動端瀏覽的信息內容。其內容包括：豬瘟、藍耳、偽狂犬、衣原體和弓形體等疫病信息的報表查詢。

圖6討論區

討論區的開放，為研究人員、專家學者和養殖戶建立了溝通的橋梁，同時也豐富了APP信息傳遞的實質內容。討論區、新藥新技術、防疫與保健三種內容的結合，將為養殖用戶創造更多的有價值有營養的信息，以此增加APP使用的粘性。

圖7 病例記錄管理界面

病例記錄管理界面也是對原先系統的功能模塊調用，其移動端界面的實現增加了研究人員信息錄入的端口，實現了移動化的信息存儲和更新。

4　結束語

信息技術高速發展的今天，信息獲取渠道的多樣化，不僅有利于系統使用粘性的增加，也有利于工作效率的提高。本項目開發構建的APP能夠滿足養殖用戶的移動端信息獲取需要，提高研究中心工作人員的工作效率。基于CORDOVA的跨平臺閩西生豬疫病APP的實現不僅是對原先PC端信息系統的補充，更是順應了當下移動互聯網發展的需要。項目采用的技術標準：CORDOVA框架、HTML5、CSS3、javascrip和asp的Hybrid模式，具有跨平臺性、擴展性、穩定性和安全性等優勢。為研究中心信息系統從PC端向移動端的漂移奠定了堅實的技術基礎。

參考文獻：

[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.

（責任編輯：夏婷婷）

中圖分類號：S828.4

文獻標識碼：A

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

收稿日期：2015-11-17

基金項目：福建省省科技平臺建設項目（2014N2011）；龍巖市科技項目（2013LY07）。

作者簡介：唐彬文（1982-），男，漢族，講師，主要從事管理信息系統、電子商務、數量經濟分析方法研究。

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，Fujian 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