使用混合開發(fā)技術(shù)快速構(gòu)建跨平臺(tái)移動(dòng)應(yīng)用系統(tǒng)

許佩瑩，禹亮，陳超智

（中國移動(dòng)（深圳）有限公司，深圳 518048）

1 引言

移動(dòng)互聯(lián)網(wǎng)已成為中國網(wǎng)民上網(wǎng)的主流方式——截至2017年6月，中國手機(jī)網(wǎng)民占網(wǎng)民總數(shù)95.1%，達(dá)到7.24億人[1]。移動(dòng)應(yīng)用的飛速增長為不少企業(yè)帶來了二次發(fā)展的機(jī)遇。但是，移動(dòng)應(yīng)用需要適配不同的手機(jī)操作系統(tǒng)和不同的屏幕尺寸，其高昂的開發(fā)維護(hù)成本和較長的開發(fā)周期讓不少企業(yè)望而卻步。混合開發(fā)通過結(jié)合 HTML， CSS， and JavaScript等技術(shù)輕松實(shí)現(xiàn)跨平臺(tái)、自適應(yīng)屏幕的移動(dòng)應(yīng)用，是實(shí)現(xiàn)移動(dòng)應(yīng)用開發(fā)維護(hù)降本增效的一種有效的途徑。

2 相關(guān)技術(shù)介紹

2.1 跨平臺(tái)移動(dòng)應(yīng)用開發(fā)技術(shù)介紹

目前主流的移動(dòng)應(yīng)用開發(fā)方式主要可以分為Native App（原生應(yīng)用）、Hybrid app（混合應(yīng)用）及Web App（網(wǎng)頁應(yīng)用）。原生應(yīng)用是專門針對某一種移動(dòng)設(shè)備而開發(fā)的；網(wǎng)頁應(yīng)用使用HTML等技術(shù)開發(fā)，運(yùn)行在移動(dòng)應(yīng)用瀏覽器、且與設(shè)備無關(guān)；混合應(yīng)用則是以上兩種方式的結(jié)合——使用一套與移動(dòng)設(shè)備操作系統(tǒng)無關(guān)的代碼來實(shí)現(xiàn)近乎于原生的跨平臺(tái)移動(dòng)應(yīng)用。三者的比較如表1所示。

相對于Native App和Web App的開發(fā)，Hybrid App開發(fā)克服了Native App代碼可移植性差以及Web App無法調(diào)用與設(shè)備相關(guān)功能的缺點(diǎn)，同時(shí)兼具Native App功能運(yùn)行性能高及Web App開發(fā)入門門檻低、平臺(tái)無關(guān)性的優(yōu)點(diǎn)。Hybrid App開發(fā)具有學(xué)習(xí)、開發(fā)和維護(hù)成本低的特點(diǎn)，適用于需要在短時(shí)間實(shí)現(xiàn)能夠覆蓋多個(gè)移動(dòng)操作系統(tǒng)的移動(dòng)應(yīng)用。

2.2 Ionic+Cordova技術(shù)介紹

表1 Native App、Hybrid App、Web App三種方式比較[2]

Cordova架構(gòu)旨在讓開發(fā)者使用Web技術(shù)開發(fā)跨平臺(tái)的移動(dòng)App，它擁有強(qiáng)大的跨平臺(tái)訪問設(shè)備能力。使用Hybrid App方式開發(fā)需要使用JavaScript，Cordova起到橋梁作用，把原生代碼實(shí)現(xiàn)的各類設(shè)備API和我們需要調(diào)用的JavaScript API實(shí)現(xiàn)雙向通信，這樣就可以通過JavaScript直接調(diào)用原生API[3]。

2.3 Gulp技術(shù)介紹

Gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器。它不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成。使用它，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率[4]。

Gulp是基于Node.js的自動(dòng)任務(wù)運(yùn)行器， 它能自動(dòng)化地完成JavaScript/coffee/sass/less/HTML/image/CSS等文件的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。在實(shí)現(xiàn)上，它借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級(jí)的輸出，直接變成后一級(jí)的輸入，使得在操作上非常簡單。它與Grunt非常類似，但相比于Grunt的頻繁IO操作，Gulp的流操作能更快地更便捷地完成構(gòu)建工作[4]。

3 跨平臺(tái)移動(dòng)應(yīng)用系統(tǒng)

3.1 應(yīng)用架構(gòu)

全網(wǎng)監(jiān)控APP系統(tǒng)整體架構(gòu)如圖1所示。整個(gè)系統(tǒng)分前端App子系統(tǒng)、后臺(tái)處理子系統(tǒng)和數(shù)據(jù)采集子系統(tǒng)。

(1）前端App子系統(tǒng)：采用Ionic+Cordova+Ang ularJS+Gulp+Cordova-iOS等多種前端技術(shù)結(jié)合，實(shí)現(xiàn)了一個(gè)具有跨平臺(tái)、高效的代碼壓縮混淆、靈活的版本升級(jí)等特點(diǎn)的移動(dòng)應(yīng)用。

(2）數(shù)據(jù)采集子系統(tǒng)：通過BPM客戶端、RUM軟件、直采程序和探測腳本等多種采集技術(shù)結(jié)合，實(shí)現(xiàn)了多數(shù)據(jù)源采集的目標(biāo)，將各省業(yè)務(wù)數(shù)據(jù)從省CRM、省BOSS以及省BOMC系統(tǒng)中采集到后臺(tái)處理子系統(tǒng)中。

圖1 系統(tǒng)整體架構(gòu)

（3）后臺(tái)處理子系統(tǒng)：系統(tǒng)后臺(tái)采用當(dāng)前流行的、輕量級(jí)的SpringMVC框架，集成數(shù)據(jù)訪問組件MyBatis，采用Vertica、MySQL等數(shù)據(jù)存儲(chǔ)中間件，實(shí)現(xiàn)對系統(tǒng)的后臺(tái)管理功能以及向監(jiān)控APP端提供接口服務(wù)。后臺(tái)控制層集成了Java安全框架Apache Shiro權(quán)限框架，負(fù)責(zé)對系統(tǒng)用戶進(jìn)行登錄驗(yàn)證、權(quán)限管理。

假設(shè)源節(jié)點(diǎn)發(fā)送信號(hào)功率PS和目的節(jié)點(diǎn)發(fā)送人工噪聲功率PnD不變，中繼節(jié)點(diǎn)發(fā)送總功率在天線數(shù)變化時(shí)不變，也即NPR=PRT不變，每根天線發(fā)送人工噪聲的平均功率為PnR=βPR=βPRT/N，0≤β<1為人工噪聲功率分配比例，相應(yīng)，每根天線轉(zhuǎn)發(fā)信號(hào)的平均功率為(1-β)PR=(1-β)PRT/N.

由于篇幅有限，以下僅對本系統(tǒng)前端APP子系統(tǒng)進(jìn)行詳細(xì)介紹。

3.2 客戶端應(yīng)用技術(shù)

本系統(tǒng)客戶端App共有9大模塊：登錄、主頁、月報(bào)、知識(shí)、考核、工單、監(jiān)控、報(bào)告、個(gè)人中心。

（1）登錄模塊使用了基本的Ionic JavaScript UI組件中的視圖和內(nèi)容組件。

(2）主頁模塊主要是提供跳轉(zhuǎn)到其他模塊的入口，主要使用Ionic JavaScript UI組件中的滑動(dòng)框組件。

(3）月報(bào)模塊主要用于月報(bào)圖表的展示，圖表展示插件為Echarts，主要使用Ionic JavaScript UI組件中的視圖和內(nèi)容組件。

(4）知識(shí)模塊用于展示知識(shí)庫內(nèi)容，使用了Ionic JavaScript UI組件中的滑動(dòng)框組件。

(5）考核模塊用于展示相應(yīng)業(yè)務(wù)的考核標(biāo)準(zhǔn)，主要使用了基于Ionic框架二次開發(fā)的樹型列表插件iontree-list。

(6）工單模塊提供各類工單的查詢?nèi)肟?，使用了Ionic JavaScript UI組件中的列表組件。

(7）監(jiān)控模塊提供各個(gè)業(yè)務(wù)渠道的監(jiān)控?cái)?shù)據(jù)信息，圖表展示使用了highcharts和Echarts插件，同時(shí)使用了Ionic JavaScript UI組件中的滑動(dòng)框和列表組件。

(8）報(bào)告模塊以時(shí)間段和報(bào)告類型兩個(gè)維度提供報(bào)告列表，使用了Ionic JavaScript UI組件中的列表組件。

(9）個(gè)人中心模塊提供個(gè)人信息查詢與設(shè)置等功能，使用了Ionic JavaScript UI組件中的列表組件，Cordova架構(gòu)中的訪問手機(jī)設(shè)備相機(jī)拍照和打開相冊，文件傳輸?shù)墓δ堋?/p>

客戶端用到的其他技術(shù)：Cordova架構(gòu)的軟鍵盤設(shè)置，文件傳輸和打開功能；Ionic JavaScript UI組件中的對話框、浮動(dòng)框、加載、模板、路由組件以及配置項(xiàng)目選項(xiàng)、檢索設(shè)備狀態(tài)和平臺(tái)信息的功能。

3.3 系統(tǒng)技術(shù)優(yōu)勢

3.3.1 運(yùn)用自動(dòng)化構(gòu)建工具Gulp進(jìn)行代碼壓縮混淆

Ionic+Cordova技術(shù)打包后的項(xiàng)目缺少對代碼進(jìn)行混淆壓縮的功能。代碼混淆壓縮有兩方面的好處，一是可以減少App安裝包的體積，二是可以防止App被反編譯時(shí)暴露接口。基于此，我們亟需引入了新的打包工具對代碼進(jìn)行混淆壓縮。

本系統(tǒng)選擇引入自動(dòng)化構(gòu)建工具Gulp，實(shí)現(xiàn)了App代碼規(guī)模壓縮減小了為原來的50%；在代碼混淆方面，替換了變量名和方法名，讓JavaScript文件在部署發(fā)布后不容易被看懂，這樣就有效防止了App被反編譯時(shí)暴露接口。

3.3.2 有效版本升級(jí)管理

App發(fā)布新版本時(shí)，會(huì)將源代碼生成Android和iOS兩個(gè)打包文件并將其部署在服務(wù)器上同時(shí)修改數(shù)據(jù)庫中App的版本號(hào)。當(dāng)用戶需要對App版本進(jìn)行升級(jí)時(shí)，服務(wù)器會(huì)根據(jù)Android和iOS兩個(gè)的系統(tǒng)將對應(yīng)的新的安裝包下載到用戶手機(jī)上并自動(dòng)進(jìn)行升級(jí)安裝。

Cordova提供的原生設(shè)備API只能用于Android系統(tǒng)的安裝包下載和安裝，但對于iOS系統(tǒng)，其App的版本升級(jí)只能從App Store中檢查是否有新版本然后進(jìn)行版本升級(jí)，不能像Android系統(tǒng)那樣直接下載安裝包進(jìn)行安裝。這就需要采取措施針對iOS系統(tǒng)實(shí)現(xiàn)特殊的版本升級(jí)。

引入Cordova-iOS版本升級(jí)方式，該方式是基于Cordova架構(gòu)對iOS系統(tǒng)版本升級(jí)原生實(shí)現(xiàn)方式進(jìn)行封裝，使得該方式內(nèi)的API能通過JavaScript進(jìn)行訪問。同時(shí)對其進(jìn)行改造，使得App升級(jí)不再是從App Store中檢查更新，而是用iPhone打開Safari瀏覽器進(jìn)入安裝包下載頁面，從而實(shí)現(xiàn)有效的App版本升級(jí)。

3.3.3 多路并行數(shù)據(jù)采集功能

數(shù)據(jù)采集模塊采用多種采集程序，通過定時(shí)、循環(huán)地進(jìn)行快速、高效、多路并行的數(shù)據(jù)采集，保證了業(yè)務(wù)數(shù)據(jù)的及時(shí)性、可靠性。由于本系統(tǒng)數(shù)據(jù)來源于多個(gè)系統(tǒng)，數(shù)據(jù)采集的過程中的難點(diǎn)在于各系統(tǒng)的數(shù)據(jù)結(jié)構(gòu)、數(shù)據(jù)類型各異，因此我們根據(jù)各個(gè)系統(tǒng)的特點(diǎn)采用了不同的數(shù)據(jù)采集方法，針對各個(gè)系統(tǒng)定制化地采集數(shù)據(jù)，只采集我們業(yè)務(wù)需要的相關(guān)數(shù)據(jù)。

3.3.4 自定義注解組件實(shí)現(xiàn)多數(shù)據(jù)源集成

為快速實(shí)現(xiàn)4個(gè)分別建設(shè)的App快速整合，本系統(tǒng)采用自定義注解組件的方式實(shí)現(xiàn)了Vertica、MySQL等多個(gè)數(shù)據(jù)源的集成，使得本系統(tǒng)的后臺(tái)管理系統(tǒng)同事連接多個(gè)數(shù)據(jù)源，充分發(fā)揮Spring框架的AOP特性，也保證了系統(tǒng)的高效性和安全性。

4 結(jié)束語

本文提出了一個(gè)具有高效代碼混淆、靈活版本升級(jí)、多數(shù)據(jù)源采集等特點(diǎn)的跨平臺(tái)移動(dòng)應(yīng)用系統(tǒng)，但系統(tǒng)在采集性能等方面仍有優(yōu)化的控件，在今后擬進(jìn)行以下改進(jìn)：（1）為了提高監(jiān)控APP接口性能，需要充分發(fā)揮Redis緩存的功能，對于后臺(tái)中調(diào)用比較頻繁的接口數(shù)據(jù)要在緩存中做備份，盡量縮短接口耗時(shí)，優(yōu)化用戶體驗(yàn)。（2）數(shù)據(jù)采集程序后期計(jì)劃對接大數(shù)據(jù)平臺(tái)，實(shí)現(xiàn)各省數(shù)據(jù)的快速采集，提高數(shù)據(jù)的及時(shí)性、可靠性、安全性，同時(shí)也保證了監(jiān)控?cái)?shù)據(jù)的可用性，真實(shí)的反應(yīng)各省業(yè)務(wù)運(yùn)營情況。

[1] 中國互聯(lián)網(wǎng)絡(luò)信息中心. 中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[R].北京: 中國互聯(lián)網(wǎng)絡(luò)信息中心, 2017:8.

[2] 程遠(yuǎn). 聊聊WebApp、HybridApp與NativeApp的設(shè)計(jì)差異[EB/OL].http://www.uisdc.com/web-hybrid-native-app.

[3] 朱凱南, 李艷平, 申閆春, 等. 基于Ionic和Cordova的跨平臺(tái)移動(dòng)App的研究與應(yīng)用[J]. Computer Knowledge and Technology電腦知識(shí)與技術(shù), 2016.

[4] 郭小北. gulp詳細(xì)入門教程[EB/OL]. http://blog.csdn.net/xllily_11/article/details/51393569.