普光智能氣田移動開發服務平臺關鍵技術與應用

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

1. 中國石化中原油田分公司 2. 中國石化中原油田普光分公司

0 引言

移動互聯網是通過智能手機、筆記本電腦、平板電腦等移動終端，基于瀏覽器方式接入互聯網或者使用需要和互聯網連接的應用程序，以獲取多媒體內容、定制信息和數據服務[1]。隨著4G移動通信網絡的成熟、智能終端的普及，企業對移動互聯網應用需求顯著增強，對移動互聯網應用開發技術要求也越來越高。

輔助智能決策系統是普光智能氣田的重要組成部分，其中移動應用是實現輔助智能決策的主要途徑。移動應用作為智能氣田建設不可或缺的一部分，是實現移動辦公、快速決策、提高工作效率的重要手段。針對氣田點多面廣、人員來回頻繁等特點，生產數據實時顯示、關鍵參數預警和事件記錄、視頻監控等移動信息化應用，能夠及時、準確、連續地掌握生產現場的動態，實現現場的自動連續監控和遠程的指揮和指導，確保人員、設備的安全和生產持續穩定運行[2]。

目前移動應用的開發模式有3種：①原生開發，每種終端都需要對應開發一款App，項目開發周期長、成本大、維護繁瑣；②基于HTML5標準的Web應用開發，相對比原生應用來說，具有更好的跨平臺特性、免安裝等優勢，但在會話管理、安全離線存儲、訪問原生設備功能等方面存在一些局限性[3]；③混合開發模式，通過把HTML5應用程序嵌入到一個原生容器里面，集原生應用程序和HTML5應用程序的優點于一體。

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

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

1 移動開發服務平臺關鍵技術

1.1 多引擎混合開發技術

通過集成HTML5和React Native開發引擎，設計統一的調用規范與封裝方式，制訂標準的調用接口方法，實現界面風格統一、調用方式一致的集成開發（圖1）。解決基于Android、iOS移動平臺開發技術不統一的問題，實現移動平臺多語言開發的效果。

圖1 移動混合開發引擎框圖

1.1.1 HTML5開發引擎

利用Android端WebView的高度定制特性，對其屬性與協議方法進行管理控制，完成Android端WebBrowser組件的封裝[7]，實現Android端使用WebBrowser組件加載HTML5界面時，內存占用量小，速度快、穩定性好。實現在線或離線HTML5網頁的統一加載，減少HTML5網頁緩存文件，提高加載HTML5網頁穩定性。

移動應用開發平臺通過HTML5開發引擎統一Android和iOS開發規范，統一HTML5網頁離線路徑（圖2）。通過統一的加載接口，便捷、高效的加載離線HTML5網頁，加快開發速度與降低開發難度。通過定義WebBrowser規范，實現對HTML5網頁的按需加載，降低加載HTML5網頁導致的內存消耗，解決傳統方式加載HTML5時內存泄露的問題，使用戶對加載HTML5時的體驗更友好。

1.1.2 React Native開發引擎

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

圖2 HTML5引擎框圖

1.2 Web組件化

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

在Web組件化基礎上，為提高開發效率、增強組件的復用率，設計研發了以Web組件化為核心的表單設計器，實現了所見即所得的開發模式。表單設計器左側是組件列表區域，中間為表單編輯區域，右側為組件屬性與腳本編輯區域，通過對組件拖拽與屬性設置即可完成表單的開發。

MOSP提供一套標準的組件開發接口規范，業務開發人員在項目開發過程中開發的業務組件隨時更新到MOSP平臺組件資產庫中，組件開發過程：①根據組件的接口規范實現業務功能組件；②將業務功能組件注冊到表單設計器中；③利用表單設計器中的組件實現業務功能界面。

1.3 HTML5與移動原生的雙向交互機制

圖3 React Native開發引擎框圖

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

圖4 JavaScriptBridge雙向交互原理圖

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

圖5 HTML5加載原生資源框圖

2 移動開發服務平臺應用

普光智能氣田移動開發服務平臺（Mobile Open Service Platform，簡稱MOSP）采用了MVC設計思想，確保模型、視圖、控制分離，利用HTML5跨平臺的特性標準實現組件化，提供HTML5與移動原生的雙向交互機制，滿足企業復雜業務適配移動終端的需求。

利用MOSP開發平臺進行移動應用開發的步驟（圖6）：①登錄MOSP開發平臺后進行模型管理，通過對元數據管理、數據對象定義和管理建立模型；②打開表單設計器通過拖拽組件與組件屬性設置、腳本編輯設計表單；③進入菜單管理配置已設計好的表單形成系統應用。

MOSP平臺還具有組件開發、注冊與流程管理功能，滿足開發人員在MOSP平臺上開發新增組件，通過長期的組件積累，形成統一的組件資產庫，為形成組件共享服務服務，有效地縮短開發周期。

圖6 MOSP移動應用開發及組件開發過程示意圖

利用MOSP開發平臺成功開發了普光智能氣田移動應用（圖7），包括門戶/開發/生產/勘探/會議/視頻等功能模塊，集成了多個現有信息系統的在線審批功能，成功適配了不同型號移動終端的相關硬件資源，實現了一次開發多處安裝使用的目標。

圖7 普光智能氣田移動應用主界面截圖

手機端部分典型業務應用展示效果如圖8所示。表現在：①展示勘探開發生產過程中產生的業務數據，及時掌握氣田生產運行情況。②建立移動視頻管理中心，集成普光氣田生產、生活現場等視頻；用戶分級管理、授權查看，定制展示，授權用戶在移動端實現視頻實時播放、抓拍、錄像等功能。③集成普光氣田OA、合同、財務、請銷假、招投標、企業郵箱等關鍵業務，實現了業務的即時推送、有效集成，提高了審批、決策工作效率。

圖8 普光智能氣田移動應用業務界面截圖

3 結束語

1）MOSP移動開發服務平臺，組件化的開發模式能夠不斷擴展完善組件，最終為移動開發應用提供類型豐富、業務契合度較高的組件資產庫，最大程度實現組件共享共用、快速迭代，提高開發效率，簡化運維操作。

2）平臺的多引擎混合開發技術、HTML5與移動原生的雙向交互機制，確保由該平臺開發的應用適配所有移動終端，真正實現一次開發、多類型終端適配。

3）應用普光氣田移動開發服務平臺（MOSP）成功開發了普光智能氣田移動應用系統，該系統集成展示了普光氣田從勘探開發、集輸凈化到生產經營全業務鏈的動態情況，實現了遠程指導、指揮與辦公，為其他大型企業的移動應用開發提供了一種便捷高效的解決方案。