基于CORDOVA的跨端混合式移動應用的研究與應用

路瀚程，霍小衛

鄭州西亞斯學院信息化建設與管理處，河南鄭州，450000

0 引言

隨著城市功能服務的聚集性增強，流動人口管控問題日益突出，如何解決流動人員的登記和安全問題，確保社會和治安狀況處于可控和可查，是中國許多城市面臨的巨大挑戰。本文以某中心城市試點實行利用PDA智能讀卡設備對城中所有中小旅館的旅客進行信息采集為研究對象，探討利用H5混合開發技術開發一種APP服務平臺并調用PDA的讀卡設備對旅客信息進行實時采集和上傳，公安部門可后臺實時監控城市各種小旅館的人員住店和離店，并對異常人員信息進行預警和分析處理。

1 移動開發的三種模式比較

移動互聯網應用開發從技術路線上分為移動中間件、原生態和混合式開發Hybrid APP等，三種路線各有優劣。基于中間件平臺的移動開發模式適用于已經具有成熟業務系統的前提下，該模式開發效率高、成本低、周期短，但同時所開發的移動客戶端功能受限于現有業務系統的功能，無法做深度開發；原生態開發模式適用于沒有現成業務系統并且對移動客戶端的功能和界面定制要求較高的前提下，該模式開發效率低、成本高、周期長，開發的客戶端功能更加豐富、用戶體驗更加良好，能支持直接對移動設備的原生功能調用；混合模式開發允許使用本地資源的調用能力，所開發出來的APP具備跨端運行能力[1]。經過對比實際開發需求和技術結構，我們選擇使用混合開發模式作為開發環境。

2 混合式開發相關技術

2.1 CORDOVA插件

CORDOVA技術的產生為混合開發提供了可編輯的原生功能調用方式，可以在不使用ANDROID或者IOS的情況下實現設備驅動。本文所描述的項目中關于使用PDA讀取公民身份證的信息即是通過該技術實現，其中PDA提供了讀取公民身份證的標準ANDROID SDK包，利用CORDOVA技術對該二次開發包進行的重新定義和封裝，使得可以通過一個JS文件實現對接口中身份證讀取方法的調用。

2.2 WEX5跨端開發工具

HTML5是一種標準的前端開發語言，目前能支持該語言的開發工具很多，比如：HBuilder、WEX5等，經過對不同工具的試用和比較，我們發現在快速開發、一站式部署以及對CORDOVA插件的支持等方面，WEX5更符合本文開發需求[2]。WEX5是一個完全開源的移動開發工具，它不僅具備主流移動開發技術所必需的功能，更重要的是它支持所有對移動設備的CORDOVA插件，在進行文字、通信、圖片、音視頻等方面只需通過簡單的JS開發即可實現原生功能調用。

2.3 REST API軟件架構風格

REST API提供了一組設計原則和約束條件，交互在請求和響應之間是無狀態的，服務器在請求之間重啟都不會對客戶端造成影響，基于這個風格設計的軟件更簡潔、更有層次、更易于實現緩存等機制[3]。在本應用中，需要采集旅客身份信息并實時上傳服務器，通過在服務器端創建REST API服務，利用WEX5實現對REST服務的調用，從而實現客戶端與服務器端的數據交換。

3 移動旅客信息采集平臺設計和實現

移動旅客信息采集平臺功能包括存儲過程模塊、NVO插件、SatRda狀態監測模塊、身份證讀取CORDOVA調用模塊、數據采集模塊以及設備拍照模塊等。其中，存儲過程轉換為標準的REST API服務給前端使用，NVO插件實現旅店信息邏輯計算，SatRda模塊將存儲過程和NVO插件轉換為REST服務，身份證讀取模塊通過調用CORDOVA插件讀取身份證信息，數據采集AJAX實現前端和后端REST服務的通信，原生照相模塊實現對旅客照片的實時采集和上傳。

3.1 存儲過程NVO實現

基于上述原理實現“旅客信息上傳”的存儲過程（sp_t_floating_info），通過JAVA等開發工具設計為標準的NVO對象，SatRda根據自己的運行處理機制將該NVO對象運行GOLANG語言配置為可進行遠程過程調用的REST服務。旅客信息采集過程中，可通過H5代碼以及JS對該REST API進行調用，從而實現移動端的數據采集上傳。數據采集的部分核心代碼如圖1所示。

圖1 公民身份信息讀取上傳的實現

3.2 利用CORDOVA插件實現身份證信息采集

利用CORDOVA插件實現信息采集的過程如下：首先，利用Android環境對身份證信息讀取過程進行原生開發，編寫讀取身份證的JAVA類和讀卡方法；然后，基于該類編寫JS方法調用類中的讀卡方法并配置在配置文件中，用JS根據配置文件路徑執行調用并回調；最后，將編寫好的文件按照CORDOVA標準封裝過程進行封裝，將該插件部署到WEX5的開發環境中，H5的前端利用JS調用封裝好的CORDOVA插件實現對身份證的讀卡操作[4]。

本項目使用的PDA是身份證專用讀取設備，對身份證的讀取過程通過標準的處理過程實現，包括上電IDCardPonwer1操作、實例化HsSerial操作、打開設備Init操作、卡認證Authenticate操作、讀卡Read_Card操作、照片解碼Unpack操作、退出Close操作等[5]，該邏輯過程為系列化和事務化，通過統一的JAVA類和讀卡方法進行封裝實現。讀卡部分核心代碼如下：

獲得設備控制實例以后，需進行上電和打開操作，該部分操作耗費一定的時間，需要將其放在新線程中執行并提示用戶正在上電和打開設備，在進行多次連續設備使用的時候，不需要每次都執行上電、打開再關閉、斷電操作，此操作流程僅需執行一次，在長時間不再使用設備的時候調用關閉和斷電方法。

3.3 利用CORDOVA插件實現旅客照片的采集

WEX5平臺封裝了進行設備拍照的原聲調用插件，只需要將該CORDOVA插件引入WEX5平臺并調用即可。手機拍照過程中，拍照參數有兩種：一種是DATA_URL模式，即拍照返回的照片是Base64位格式；一種是FILE_URI格式，即拍照返回的是文件目錄。第一種模式支持直接將調用返回的值上傳至服務器但無法保存至本地，第二種模式支持將圖片保存在本地但無法直接上傳服務器。

采用拍照插件的開發需要注意如下事項：拍照插件的getpicture方法參數中destinationType定義拍照的圖片產生的模式，JS因為安全問題不能直接讀取絕對路徑下的圖片，展現圖片如果采用DATA_URL模式，返回的內容為Base64為字符串，必須通過DATA_URL轉為Base64，再將該值賦值給img圖片組件，在該模式下圖片無法保存到手機本地圖片庫，同時無法將圖片轉存到數據庫保存。如果選擇FILE_URI模式，返回的是圖片的絕對路徑地址并保存在本地圖片庫中，該方式存在的問題是由于JS不支持直接使用本地路徑，必須將FILE_URI模式返回的圖片路徑轉Base64位方式后，再賦值給img圖片組件。

3.4 使用WEX5的數據綁定實現旅客信息展現

WEX5提供數據組件綁定數據輸出，本文旅客信息展現模塊采用Listgroup組件方式，將旅客住宿信息和照片按照列表組的方式進行展現。旅客內容通過數據組件綁定方式獲取到數據庫中的數據，旅客照片通過JS調用本地圖片存儲庫實現展現。具體實現過程如下：①新建數據組件checklistdata，定義數據組件的字段及字段類型；②定義數據庫的REST服務，將旅客信息展現的內容以服務形式拋出；③設置數據組件和REST服務的綁定關系，組件字段和REST接口字段的映射；④設置數據展現控件，將控件使用的數據源設置為數據組件字段；⑤執行數據加載操作，將旅客住宿信息展現到頁面上。實現代碼如下：

3.5 利用AJAX調用REST服務實現旅客信息同步

AJAX可以使網頁實現異步更新，這種交互式方式對用戶來說最直觀的感受是在進行頁面刷新時感覺不到頁面重新加載的閃動[6]。本項目中利用AJAX功能實現了旅客住宿信息和公安系統的同步，實現過程如下：首先，使用PDA設備讀取旅客身份證并進行拍照；然后登記旅客住宿的信息，調用REST進行權限驗證和有效性驗證；最后，調用AJAX完成旅客信息的上傳和同步并返回處理結果。該功能的部分核心代碼如下：

4 結語

WEX5是一種新的HTML5開發平臺，相比原生開發有較大的優勢，CORDOVA作為Apache的開源項目，在開源插件平臺上也有大量開發者貢獻的高質量原生調用插件，這些都為混合式開發提供了堅實的技術基礎。本文所述的移動應用項目就是利用這種混合式開發技術實施的實際案例，整個開發過程無論從成本上還是時間上，都要比原生開發具有更強的優勢，作為移動互聯網發展的新業態，基于CORDOVA和H5的混合式開發模式是值得嘗試的選擇。