張慶生 蒙玉平 呂清林 龍 飛 李錦憲 雷金晶

1. 中國(guó)石化中原油田分公司 2. 中國(guó)石化中原油田普光分公司

0 引言

移動(dòng)互聯(lián)網(wǎng)是通過智能手機(jī)、筆記本電腦、平板電腦等移動(dòng)終端，基于瀏覽器方式接入互聯(lián)網(wǎng)或者使用需要和互聯(lián)網(wǎng)連接的應(yīng)用程序，以獲取多媒體內(nèi)容、定制信息和數(shù)據(jù)服務(wù)[1]。隨著4G移動(dòng)通信網(wǎng)絡(luò)的成熟、智能終端的普及，企業(yè)對(duì)移動(dòng)互聯(lián)網(wǎng)應(yīng)用需求顯著增強(qiáng)，對(duì)移動(dòng)互聯(lián)網(wǎng)應(yīng)用開發(fā)技術(shù)要求也越來越高。

輔助智能決策系統(tǒng)是普光智能氣田的重要組成部分，其中移動(dòng)應(yīng)用是實(shí)現(xiàn)輔助智能決策的主要途徑。移動(dòng)應(yīng)用作為智能氣田建設(shè)不可或缺的一部分，是實(shí)現(xiàn)移動(dòng)辦公、快速?zèng)Q策、提高工作效率的重要手段。針對(duì)氣田點(diǎn)多面廣、人員來回頻繁等特點(diǎn)，生產(chǎn)數(shù)據(jù)實(shí)時(shí)顯示、關(guān)鍵參數(shù)預(yù)警和事件記錄、視頻監(jiān)控等移動(dòng)信息化應(yīng)用，能夠及時(shí)、準(zhǔn)確、連續(xù)地掌握生產(chǎn)現(xiàn)場(chǎng)的動(dòng)態(tài)，實(shí)現(xiàn)現(xiàn)場(chǎng)的自動(dòng)連續(xù)監(jiān)控和遠(yuǎn)程的指揮和指導(dǎo)，確保人員、設(shè)備的安全和生產(chǎn)持續(xù)穩(wěn)定運(yùn)行[2]。

目前移動(dòng)應(yīng)用的開發(fā)模式有3種：①原生開發(fā)，每種終端都需要對(duì)應(yīng)開發(fā)一款A(yù)pp，項(xiàng)目開發(fā)周期長(zhǎng)、成本大、維護(hù)繁瑣；②基于HTML5標(biāo)準(zhǔn)的Web應(yīng)用開發(fā)，相對(duì)比原生應(yīng)用來說，具有更好的跨平臺(tái)特性、免安裝等優(yōu)勢(shì)，但在會(huì)話管理、安全離線存儲(chǔ)、訪問原生設(shè)備功能等方面存在一些局限性[3]；③混合開發(fā)模式，通過把HTML5應(yīng)用程序嵌入到一個(gè)原生容器里面，集原生應(yīng)用程序和HTML5應(yīng)用程序的優(yōu)點(diǎn)于一體。

普光移動(dòng)應(yīng)用用戶眾多，所用移動(dòng)終端型號(hào)各異，為了實(shí)現(xiàn)良好的訪問原生設(shè)備功能，同時(shí)又具有跨平臺(tái)、組件化、快速開發(fā)的優(yōu)勢(shì)，選擇混合開發(fā)模式，它結(jié)合了前兩者技術(shù)的特性，兼具了兩種方式的優(yōu)勢(shì)。目前國(guó)內(nèi)外也出現(xiàn)了一些基于HTML5標(biāo)準(zhǔn)的移動(dòng)混合開發(fā)框架，比如PhoneGap[4]、AppCan[5]等混合開發(fā)框架成功實(shí)現(xiàn)了移動(dòng)應(yīng)用跨平臺(tái)的目的[6]，但普遍存在開發(fā)出來的應(yīng)用運(yùn)行緩慢、操作延遲等嚴(yán)重影響用戶體驗(yàn)的現(xiàn)象，無法滿足普光氣田移動(dòng)建設(shè)的需求。

建立一種快速、高效、靈活的移動(dòng)開發(fā)模式以適配不同的移動(dòng)終端，加速智能氣田移動(dòng)信息化建設(shè)具有重要的戰(zhàn)略意義。通過移動(dòng)技術(shù)的摸索與積累，普光氣田研發(fā)了MOSP開發(fā)平臺(tái)，前端基于HTML5標(biāo)準(zhǔn)實(shí)現(xiàn)跨平臺(tái)展示，利用組件化開發(fā)模式縮短開發(fā)周期，HTML5與移動(dòng)原生的雙向交互機(jī)制保證前端Web高效訪問底層資源。

1 移動(dòng)開發(fā)服務(wù)平臺(tái)關(guān)鍵技術(shù)

1.1 多引擎混合開發(fā)技術(shù)

通過集成HTML5和React Native開發(fā)引擎，設(shè)計(jì)統(tǒng)一的調(diào)用規(guī)范與封裝方式，制訂標(biāo)準(zhǔn)的調(diào)用接口方法，實(shí)現(xiàn)界面風(fēng)格統(tǒng)一、調(diào)用方式一致的集成開發(fā)（圖1）。解決基于Android、iOS移動(dòng)平臺(tái)開發(fā)技術(shù)不統(tǒng)一的問題，實(shí)現(xiàn)移動(dòng)平臺(tái)多語言開發(fā)的效果。

圖1 移動(dòng)混合開發(fā)引擎框圖

1.1.1 HTML5開發(fā)引擎

利用Android端WebView的高度定制特性，對(duì)其屬性與協(xié)議方法進(jìn)行管理控制，完成Android端WebBrowser組件的封裝[7]，實(shí)現(xiàn)Android端使用WebBrowser組件加載HTML5界面時(shí)，內(nèi)存占用量小，速度快、穩(wěn)定性好。實(shí)現(xiàn)在線或離線HTML5網(wǎng)頁的統(tǒng)一加載，減少HTML5網(wǎng)頁緩存文件，提高加載HTML5網(wǎng)頁穩(wěn)定性。

移動(dòng)應(yīng)用開發(fā)平臺(tái)通過HTML5開發(fā)引擎統(tǒng)一Android和iOS開發(fā)規(guī)范，統(tǒng)一HTML5網(wǎng)頁離線路徑（圖2）。通過統(tǒng)一的加載接口，便捷、高效的加載離線HTML5網(wǎng)頁，加快開發(fā)速度與降低開發(fā)難度。通過定義WebBrowser規(guī)范，實(shí)現(xiàn)對(duì)HTML5網(wǎng)頁的按需加載，降低加載HTML5網(wǎng)頁導(dǎo)致的內(nèi)存消耗，解決傳統(tǒng)方式加載HTML5時(shí)內(nèi)存泄露的問題，使用戶對(duì)加載HTML5時(shí)的體驗(yàn)更友好。

1.1.2 React Native開發(fā)引擎

平臺(tái)集成React Native運(yùn)行時(shí)環(huán)境，定義React Native與原生（Android、iOS）交互規(guī)范[8]，優(yōu)化RCTBridge，基于RCTBridge開發(fā)原生功能接口，解決React Native原生功能較少問題。通過將React Native的JS文件與圖片資源，放入應(yīng)用本地存儲(chǔ)（iOS為沙盒、Android為資源文件下），實(shí)現(xiàn)離線加載。實(shí)現(xiàn)React Native代碼熱更新功能，在React Native部分需求發(fā)生變化時(shí)，只需更新下載應(yīng)用資源文件，無須升級(jí)APP，解決代碼動(dòng)態(tài)更新的難題。對(duì)React Native進(jìn)行組件化處理，由React Native引擎進(jìn)行統(tǒng)一管理，實(shí)現(xiàn)對(duì)組件生命周期的控制，對(duì)React Native界面的加載速度較傳統(tǒng)React Native加載方式提高20%以上（圖3）。

圖2 HTML5引擎框圖

1.2 Web組件化

在大型軟件中，組件化是一種共識(shí)，一方面提高了開發(fā)效率，另一方面降低了維護(hù)成本。具有高內(nèi)聚、可重用、可互換、可組合等優(yōu)點(diǎn)。但在Web前端這個(gè)領(lǐng)域，并沒有很通用的組件模式，業(yè)界現(xiàn)有的Web組件化框架都有其缺點(diǎn)，利用GWT技術(shù)實(shí)現(xiàn)了1套基于HTML5標(biāo)準(zhǔn)的Web組件化機(jī)制，遵循統(tǒng)一的API、接口和規(guī)范，設(shè)計(jì)為通用的、可用來構(gòu)建大型應(yīng)用程序的組件。HTML5組件化按照MVC的設(shè)計(jì)思想分為3類[9]：UI可視組件、Action組件和數(shù)據(jù)模型組件。UI可視組件是用戶直接操作的界面的重要組成部分；數(shù)據(jù)模型組件處于MVC架構(gòu)的Model層，是數(shù)據(jù)操作的載體；Action組件是模型組件和UI可視組件的橋梁，處于MVC架構(gòu)的控制層。

在Web組件化基礎(chǔ)上，為提高開發(fā)效率、增強(qiáng)組件的復(fù)用率，設(shè)計(jì)研發(fā)了以Web組件化為核心的表單設(shè)計(jì)器，實(shí)現(xiàn)了所見即所得的開發(fā)模式。表單設(shè)計(jì)器左側(cè)是組件列表區(qū)域，中間為表單編輯區(qū)域，右側(cè)為組件屬性與腳本編輯區(qū)域，通過對(duì)組件拖拽與屬性設(shè)置即可完成表單的開發(fā)。

MOSP提供一套標(biāo)準(zhǔn)的組件開發(fā)接口規(guī)范，業(yè)務(wù)開發(fā)人員在項(xiàng)目開發(fā)過程中開發(fā)的業(yè)務(wù)組件隨時(shí)更新到MOSP平臺(tái)組件資產(chǎn)庫中，組件開發(fā)過程：①根據(jù)組件的接口規(guī)范實(shí)現(xiàn)業(yè)務(wù)功能組件；②將業(yè)務(wù)功能組件注冊(cè)到表單設(shè)計(jì)器中；③利用表單設(shè)計(jì)器中的組件實(shí)現(xiàn)業(yè)務(wù)功能界面。

1.3 HTML5與移動(dòng)原生的雙向交互機(jī)制

圖3 React Native開發(fā)引擎框圖

對(duì)于HTML5頁面來說，只是單純展示業(yè)務(wù)內(nèi)容是不夠的，HTML5需要訪問原生地理位置、文件系統(tǒng)、攝像頭、通訊錄、撥打電話、發(fā)送短信等功能，需要移動(dòng)原生與HTML5頁面雙向交互。在移動(dòng)原生應(yīng)用中嵌入HTML5頁面需要使用iOS和Android設(shè)備中內(nèi)置的基于WebKit[10]內(nèi)核的瀏覽器控件(WebView、UIWebView)。在iOS和Android的WebKit組件的基礎(chǔ)上，分別編寫WebViewJavaScriptBridge原生代碼，同時(shí)在HTML5頁面中編寫JavaScript的JavaScriptBridge方法，他們作為一個(gè)整體，起到了一個(gè)“橋梁”的作用，實(shí)現(xiàn)雙向交互（圖4）。

圖4 JavaScriptBridge雙向交互原理圖

在某些場(chǎng)景下，需要更簡(jiǎn)單的HTML5頁面調(diào)用原生資源的方法，這些資源可以是一個(gè)界面、一個(gè)按鈕、通訊錄中的一個(gè)聯(lián)系人、攝像頭、一個(gè)服務(wù)等，所有的資源都會(huì)用一個(gè)URI（統(tǒng)一資源定位符）指向它，每種資源對(duì)應(yīng)一個(gè)特定的URI。要獲取這個(gè)資源，訪問它的URI就可以，因此URI就成了每一個(gè)資源的地址或獨(dú)一無二的識(shí)別符。利用這種思想，在原生代碼中封裝WebKit請(qǐng)求攔截器，在WebKit組件內(nèi)發(fā)起的所有網(wǎng)絡(luò)請(qǐng)求，都可以通過delegate函數(shù)在原生層得到通知。這樣，就可以在HTML5頁面內(nèi)發(fā)起一個(gè)自定義的網(wǎng)絡(luò)請(qǐng)求，格式為：mosp://methodName?param1=value1¶m2=value2。那么在WebKit組件的delegate函數(shù)中，mosp://開頭的地址，就不進(jìn)行內(nèi)容的加載，轉(zhuǎn)而加載原生代碼中的各種資源，如圖5所示。

圖5 HTML5加載原生資源框圖

2 移動(dòng)開發(fā)服務(wù)平臺(tái)應(yīng)用

普光智能氣田移動(dòng)開發(fā)服務(wù)平臺(tái)（Mobile Open Service Platform，簡(jiǎn)稱MOSP）采用了MVC設(shè)計(jì)思想，確保模型、視圖、控制分離，利用HTML5跨平臺(tái)的特性標(biāo)準(zhǔn)實(shí)現(xiàn)組件化，提供HTML5與移動(dòng)原生的雙向交互機(jī)制，滿足企業(yè)復(fù)雜業(yè)務(wù)適配移動(dòng)終端的需求。

利用MOSP開發(fā)平臺(tái)進(jìn)行移動(dòng)應(yīng)用開發(fā)的步驟（圖6）：①登錄MOSP開發(fā)平臺(tái)后進(jìn)行模型管理，通過對(duì)元數(shù)據(jù)管理、數(shù)據(jù)對(duì)象定義和管理建立模型；②打開表單設(shè)計(jì)器通過拖拽組件與組件屬性設(shè)置、腳本編輯設(shè)計(jì)表單；③進(jìn)入菜單管理配置已設(shè)計(jì)好的表單形成系統(tǒng)應(yīng)用。

MOSP平臺(tái)還具有組件開發(fā)、注冊(cè)與流程管理功能，滿足開發(fā)人員在MOSP平臺(tái)上開發(fā)新增組件，通過長(zhǎng)期的組件積累，形成統(tǒng)一的組件資產(chǎn)庫，為形成組件共享服務(wù)服務(wù)，有效地縮短開發(fā)周期。

圖6 MOSP移動(dòng)應(yīng)用開發(fā)及組件開發(fā)過程示意圖

利用MOSP開發(fā)平臺(tái)成功開發(fā)了普光智能氣田移動(dòng)應(yīng)用（圖7），包括門戶/開發(fā)/生產(chǎn)/勘探/會(huì)議/視頻等功能模塊，集成了多個(gè)現(xiàn)有信息系統(tǒng)的在線審批功能，成功適配了不同型號(hào)移動(dòng)終端的相關(guān)硬件資源，實(shí)現(xiàn)了一次開發(fā)多處安裝使用的目標(biāo)。

圖7 普光智能氣田移動(dòng)應(yīng)用主界面截圖

手機(jī)端部分典型業(yè)務(wù)應(yīng)用展示效果如圖8所示。表現(xiàn)在：①展示勘探開發(fā)生產(chǎn)過程中產(chǎn)生的業(yè)務(wù)數(shù)據(jù)，及時(shí)掌握氣田生產(chǎn)運(yùn)行情況。②建立移動(dòng)視頻管理中心，集成普光氣田生產(chǎn)、生活現(xiàn)場(chǎng)等視頻；用戶分級(jí)管理、授權(quán)查看，定制展示，授權(quán)用戶在移動(dòng)端實(shí)現(xiàn)視頻實(shí)時(shí)播放、抓拍、錄像等功能。③集成普光氣田OA、合同、財(cái)務(wù)、請(qǐng)銷假、招投標(biāo)、企業(yè)郵箱等關(guān)鍵業(yè)務(wù)，實(shí)現(xiàn)了業(yè)務(wù)的即時(shí)推送、有效集成，提高了審批、決策工作效率。

圖8 普光智能氣田移動(dòng)應(yīng)用業(yè)務(wù)界面截圖

3 結(jié)束語

1）MOSP移動(dòng)開發(fā)服務(wù)平臺(tái)，組件化的開發(fā)模式能夠不斷擴(kuò)展完善組件，最終為移動(dòng)開發(fā)應(yīng)用提供類型豐富、業(yè)務(wù)契合度較高的組件資產(chǎn)庫，最大程度實(shí)現(xiàn)組件共享共用、快速迭代，提高開發(fā)效率，簡(jiǎn)化運(yùn)維操作。

2）平臺(tái)的多引擎混合開發(fā)技術(shù)、HTML5與移動(dòng)原生的雙向交互機(jī)制，確保由該平臺(tái)開發(fā)的應(yīng)用適配所有移動(dòng)終端，真正實(shí)現(xiàn)一次開發(fā)、多類型終端適配。

3）應(yīng)用普光氣田移動(dòng)開發(fā)服務(wù)平臺(tái)（MOSP）成功開發(fā)了普光智能氣田移動(dòng)應(yīng)用系統(tǒng)，該系統(tǒng)集成展示了普光氣田從勘探開發(fā)、集輸凈化到生產(chǎn)經(jīng)營(yíng)全業(yè)務(wù)鏈的動(dòng)態(tài)情況，實(shí)現(xiàn)了遠(yuǎn)程指導(dǎo)、指揮與辦公，為其他大型企業(yè)的移動(dòng)應(yīng)用開發(fā)提供了一種便捷高效的解決方案。