張烈超

(武漢交通職業(yè)學(xué)院, 湖北 武漢，430065)

融合移動互聯(lián)網(wǎng)應(yīng)用的響應(yīng)式Web開發(fā)模型設(shè)計*

張烈超

(武漢交通職業(yè)學(xué)院, 湖北 武漢，430065)

文章結(jié)合當(dāng)前流行的移動開發(fā)模式，給出融合傳統(tǒng)Web開發(fā)模型、移動互聯(lián)網(wǎng)APP智能客戶端及響應(yīng)式Web技術(shù)的混合跨平臺開發(fā)模型，并針對不同的Web應(yīng)用給出適合的開發(fā)設(shè)計思路及建議。此外，文章還對模型中跨平臺Web技術(shù)的應(yīng)用進(jìn)行了測試，取得較好的效果，以期為從事移動互聯(lián)網(wǎng)Web應(yīng)用開發(fā)學(xué)習(xí)者提供新思路。

框架；響應(yīng)式Web；移動APP客戶端；混合跨平臺智能終端

隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，融合傳統(tǒng)移動通信、互聯(lián)網(wǎng)及各種智能終端的創(chuàng)新服務(wù)新模式的移動互聯(lián)網(wǎng)技術(shù)日漸成熟，基于移動智能終端的應(yīng)用朝著智能化及便捷性等方面迅猛發(fā)展并得以普及，而基于傳統(tǒng)桌面客戶端的互聯(lián)網(wǎng)辦公模式(即傳統(tǒng)Web辦公方式)愈來愈無法滿足用戶的多樣性需求。任何新技術(shù)只是對傳統(tǒng)技術(shù)有效的補(bǔ)充。相對于傳統(tǒng)的桌面有線辦公模式，移動互聯(lián)辦公模式有明顯的不足之處，如由于移動終端的限制及資源短缺性，與其相關(guān)的接入網(wǎng)絡(luò)、運營商之間的強(qiáng)相關(guān)性等因素，智能終端服務(wù)要求響應(yīng)時間極短，無法適應(yīng)大批量的數(shù)據(jù)處理業(yè)務(wù)。因此，有效利用傳統(tǒng)PC端Web處理數(shù)據(jù)的優(yōu)勢(如對大批量文檔、圖形圖像的批處理等)，又充分考慮移動智能終端處理數(shù)據(jù)的便捷化等特性，進(jìn)而將應(yīng)用擴(kuò)展至當(dāng)前業(yè)界熱點——跨平臺的混合移動Web開發(fā)與應(yīng)用，是該領(lǐng)域應(yīng)用發(fā)展的主流方向。

本文結(jié)合傳統(tǒng)Web服務(wù)器端應(yīng)用開發(fā)及移動APP客戶端開發(fā)技術(shù)、混合跨平臺移動互聯(lián)網(wǎng)開發(fā)的特點，融合三者的優(yōu)勢，結(jié)合當(dāng)前互聯(lián)網(wǎng)專業(yè)的發(fā)展熱點，同時針對當(dāng)前移動互聯(lián)網(wǎng)界基于多系統(tǒng)智能應(yīng)用系統(tǒng)的不兼容問題，從專業(yè)學(xué)習(xí)者的基礎(chǔ)出發(fā)，設(shè)計了適合大多數(shù)移動終端系統(tǒng)的通用開發(fā)框架，為從事移動互聯(lián)網(wǎng)學(xué)習(xí)、Web開發(fā)學(xué)習(xí)者提供參考。

1 融合APP客戶端的響應(yīng)式Web架構(gòu)開發(fā)模型

結(jié)合傳統(tǒng)Web服務(wù)器端應(yīng)用開發(fā)及移動APP客戶端開發(fā)技術(shù)、混合跨平臺移動互聯(lián)網(wǎng)等技術(shù)的特點，為充分發(fā)揮三者的優(yōu)勢，作者給出融合APP客戶端的響應(yīng)式Web三層架構(gòu)應(yīng)用開發(fā)模型。

如圖1所示，基于傳統(tǒng)PC端的MVC(Model,View, Controller)三層應(yīng)用開發(fā)模型與基于移動智能終端合開發(fā)模型合二為一，這也是目前既成事實的Web應(yīng)用開發(fā)主要模型。

基于傳統(tǒng)PC端的MVC三層應(yīng)用開發(fā)模型中(如圖1右側(cè))，為提高應(yīng)用系統(tǒng)開發(fā)效率及充分發(fā)揮各成員的技術(shù)專長，同時兼顧后期維護(hù)的便捷性，Web應(yīng)用系統(tǒng)一般由團(tuán)隊協(xié)作開發(fā)完成，通常采用框架技術(shù)以節(jié)減開發(fā)成本及縮短開發(fā)周期，典型架構(gòu)思路是基于MVC設(shè)計的。基于Web的應(yīng)用主要由后臺(服務(wù)器端)及用戶前端兩部分組成，隨著移動互聯(lián)網(wǎng)的流行，用戶前端又可進(jìn)一步細(xì)分為桌面應(yīng)用(瀏覽器)和移動客戶端(智能移動終端)。在B/S(瀏覽器/服務(wù)器)模型的應(yīng)用中，通過瀏覽器(客戶端)對服務(wù)器的訪問所需數(shù)據(jù)及事務(wù)處理均由服務(wù)端進(jìn)行處理，將結(jié)果返回至客戶端；同理，移動客戶端與服務(wù)器交換數(shù)據(jù)的方式與上述方法類似。由此可知，在移動互聯(lián)網(wǎng)應(yīng)用中的后臺(Web服務(wù)器端)依然是Web應(yīng)用的核心及關(guān)鍵。

圖1 融合APP客戶端的響應(yīng)式Web架構(gòu)開發(fā)模型

基于移動端應(yīng)用開發(fā)典型模型如圖1左側(cè)所示，智能終端的應(yīng)用主要有以下幾種方式：原生(Native)APP應(yīng)用、基于HTML5的跨平臺移動Web應(yīng)用及混合應(yīng)用(Hybird APP)開發(fā)[1-2]。其中：(1)原生APP是基于不同操作系統(tǒng)的應(yīng)用開發(fā)，與操作系統(tǒng)聯(lián)系緊密，但移植性差；(2)基于HTML5的移動Web應(yīng)用則采用目前較為成熟的Web技術(shù)(HTML5、Jquery(Javascript框架)、CSS3等)及開發(fā)框架，能以較少的成本及開發(fā)周期，使開發(fā)人員迅速從基于桌面電腦的應(yīng)用開發(fā)轉(zhuǎn)向基于智能移動終端的應(yīng)用開發(fā)，同時該方式支持跨平臺的移動智能終端(在Windows Mobile、Android、IOS為基礎(chǔ)的系統(tǒng)正常運行)，缺點是對底層硬件支持較少；(3)基于混合應(yīng)用(Hybird APP)開發(fā)則充分利用原生應(yīng)用開發(fā)、HTML5跨平臺Web開發(fā)二者的技術(shù)優(yōu)勢。開發(fā)者無需掌握原生APP開發(fā)語言，通過編寫一次Web代碼，借助于相應(yīng)的框架，便可將其編譯成基于不同系統(tǒng)(Android、IOS等)的智能終端上應(yīng)用，可大大提高跨平臺應(yīng)用開發(fā)的效率。使用該開發(fā)模式，Web開發(fā)人員無需額外的學(xué)習(xí)，以幾乎零成本融入到移動互聯(lián)網(wǎng)開發(fā)學(xué)習(xí)中來，迅速轉(zhuǎn)型為移動應(yīng)用開發(fā)者。此外，相對于HTML5跨平臺移動Web應(yīng)用，混合應(yīng)用開發(fā)者可以自行進(jìn)行系統(tǒng)API封裝，調(diào)用任何期望的系統(tǒng)能力，在很大程度上彌補(bǔ)了目前HTML5跨平臺調(diào)用API匱乏的缺陷。

在移動互聯(lián)網(wǎng)應(yīng)用開發(fā)階段，可實現(xiàn)傳統(tǒng)Web開發(fā)模式與移動開發(fā)模式優(yōu)勢互補(bǔ)：經(jīng)過授權(quán)的PC端使用瀏覽器即可訪問應(yīng)用系統(tǒng)，適用于處理大批量的業(yè)務(wù)數(shù)據(jù)；靈活便攜的移動智能終端延伸了傳統(tǒng)PC端的觸角，利用移動智能終端便捷的聯(lián)網(wǎng)能力及可有效利用的散碎時間進(jìn)行通信等優(yōu)勢，方便用戶隨時隨地聯(lián)網(wǎng)應(yīng)用，有效地擴(kuò)展了網(wǎng)絡(luò)應(yīng)用的功能。達(dá)到隨時隨地以協(xié)同辦公、學(xué)習(xí)、娛樂等方式應(yīng)用的目的,該方式采用智能終端移動則更為合理。

開發(fā)模型中的應(yīng)用前端(客戶端)之一：桌面PC或便攜客戶端適用于固定辦公，對于Web應(yīng)用中的大批量數(shù)據(jù)處理問題、網(wǎng)絡(luò)穩(wěn)定性能要求比較高的應(yīng)用或者耗時較長的交互式應(yīng)用及系統(tǒng)后臺管理，采用桌面PC或便攜客戶端比選用移動智能終端處理起來更為便捷。以桌面PC或便攜客戶端辦公為主的MVC三層應(yīng)用架構(gòu)分工明確，其優(yōu)點在于把視圖(表示層V)設(shè)計與數(shù)據(jù)持久化(模型層簡稱M)進(jìn)行分離，從而降低耦合性，易于擴(kuò)展，提高團(tuán)隊開發(fā)效率。其中，View層對應(yīng)圖1中的桌面PC或便攜客戶端，用瀏覽器瀏覽的網(wǎng)頁頁面顯示數(shù)據(jù)和提交數(shù)據(jù)；Controller(控制器)對應(yīng)圖1中的Web服務(wù)層，主要是用作捕獲請求并控制請求轉(zhuǎn)發(fā)，對于模塊事務(wù)的具體處理即由此層來完成，需要訪問數(shù)據(jù)時則向與數(shù)據(jù)層進(jìn)行交互，將用戶需要顯示的數(shù)據(jù)進(jìn)行處理后以HTML網(wǎng)頁語言進(jìn)行包裝，并經(jīng)瀏覽器訪問獲取相應(yīng)視圖。Model層對應(yīng)圖1的數(shù)據(jù)庫層，該層主要實現(xiàn)業(yè)務(wù)邏輯以及數(shù)據(jù)庫的交互；

開發(fā)模型中的應(yīng)用前端(客戶端)之二：移動智能終端則更適用于移動應(yīng)用，在實際選型時，還應(yīng)根據(jù)應(yīng)用問題的類型進(jìn)一步細(xì)化：

(1)對于交互性頻繁、實時性要求較高、開發(fā)周期長的移動端應(yīng)用，動畫、游戲等需求較高的應(yīng)用，選用圖1的原生(Native)開發(fā)模型可望取得較好的效果；具體實現(xiàn)時應(yīng)注意相關(guān)的技術(shù)細(xì)節(jié)，如移動終端實時訪問Web應(yīng)用系統(tǒng)時，受時限影響較明顯，表現(xiàn)為：移動智能終端啟用APP應(yīng)用程序或者進(jìn)行遠(yuǎn)程數(shù)據(jù)庫訪問服務(wù)時，若響應(yīng)時間超過3-5秒時，系統(tǒng)會提示不可達(dá)等相關(guān)信息，處理該問題必須引入線程等技術(shù)。

(2)對于交互性一般、需要跨平臺的移動互聯(lián)網(wǎng)應(yīng)用，并盡量減少針對不同平臺的二次開發(fā)工作。選用圖1中的混合應(yīng)用(Hybird APP)開發(fā)模型可望取得更佳的效果。使用該模型，Web開發(fā)人員無需額外的學(xué)習(xí)，迅速從基于桌面電腦的應(yīng)用開發(fā)轉(zhuǎn)向基于智能移動終端的應(yīng)用開發(fā)。此外，混合應(yīng)用開發(fā)者可以自行進(jìn)行系統(tǒng)API封裝，調(diào)用任何期望的系統(tǒng)能力，對移動智能終端的攝像頭、指南針、文件系統(tǒng)等進(jìn)行訪問。除此之外，該模型利用如圖1的PhoneGap[3](基于HTML5、CSS3、Jquery)等移動開發(fā)技術(shù)框架技術(shù), 只需編寫一次代碼，便可將其編譯成基于不同系統(tǒng)(Android、IOS等)的智能終端上的應(yīng)用，可大大提高跨平臺應(yīng)用開發(fā)的效率?；旌蠎?yīng)用開發(fā)模式為開設(shè)移動互聯(lián)網(wǎng)專業(yè)的高校及培訓(xùn)機(jī)構(gòu)在人才培養(yǎng)方案的規(guī)劃及實施提供新的思路?；旌峡缙脚_的智能終端開發(fā)模式兼容性，既可縮短開發(fā)周期,又可節(jié)約成本。隨著技術(shù)的進(jìn)一步發(fā)展，該模式應(yīng)能大量的應(yīng)用。

開發(fā)應(yīng)用軟件的最終目標(biāo)是面向用戶及提高工作效率，融合APP客戶端的響應(yīng)式Web架構(gòu)開發(fā)模式也應(yīng)該從用戶使用便捷性角度出發(fā)。響應(yīng)式Web技術(shù)的流行，進(jìn)一步助推了移動互聯(lián)網(wǎng)技術(shù)的發(fā)展。本模型中所有的Web應(yīng)用，均采用響應(yīng)式Web開發(fā)技術(shù)(如HTML5)。但響應(yīng)式Web技術(shù)并非顛覆原有的Web開發(fā)技術(shù)，只是順應(yīng)移動互聯(lián)網(wǎng)的發(fā)展，對先前技術(shù)進(jìn)行有效的擴(kuò)展，即兼容傳統(tǒng)的Web技術(shù)如Ps、HTML、CSS、Jquery(Javascript類庫)等。通過響應(yīng)式Web前端開發(fā)技術(shù)，只需一次性編碼，便可自適應(yīng)于各種終端平臺(PC端或智能終端)。根據(jù)智終端自動調(diào)整適配屏幕尺寸,大大減少開發(fā)者的工作。

本模型中，除PC端之外的移動智能終端的應(yīng)用，不論采用何種開發(fā)模型(混合應(yīng)用(Hybird APP)開發(fā)模式或者基于HTML5的移動Web開發(fā)模式)，與后臺數(shù)據(jù)進(jìn)行交互處理模式均采用與傳統(tǒng)PC端應(yīng)用類似的典型Web MVC三層架構(gòu)開發(fā)方式，此舉同樣以減少模塊之間的耦合性，提高開發(fā)效率為目的。

需要注意的是，無論選用何種開發(fā)模式，在開發(fā)過程應(yīng)盡量優(yōu)化結(jié)構(gòu)，使系統(tǒng)性能達(dá)到最優(yōu)。如在原生(Native)開發(fā)模式下可將移動Web服務(wù)器端APP客戶端所需的數(shù)據(jù)庫數(shù)據(jù)轉(zhuǎn)換成目前流行的Jason格式，并在數(shù)據(jù)傳輸?shù)倪^程中進(jìn)行壓縮和加密，以確保應(yīng)用系統(tǒng)的安全性[4-5]。

2 融合APP客戶端的響應(yīng)式Web架構(gòu)的實現(xiàn)

根據(jù)圖1模型架構(gòu)思路，作者對跨平臺的Web應(yīng)用APP進(jìn)行了測試。相關(guān)步驟如下：

(1)采用響應(yīng)式Web技術(shù)(基于Kendo網(wǎng)頁框架)，融合HTML5、CSS3、Jquery Mobile技術(shù)實現(xiàn)了客戶前端界面，并使相應(yīng)Web頁面適用于各終端頁面。關(guān)鍵代碼如下所示：

content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

(2)在Eclipse for android創(chuàng)建相關(guān)項目，按照跨平臺移動項目的部署方法，導(dǎo)入相關(guān)文件(包括前面已完成的Web頁面)至對應(yīng)的目錄,并編寫MainActivity.java項目文件：關(guān)鍵代碼如下：

private void initWebview() {

WebView = (WebView) findViewById(R.id.WebView1);

String url = "file:///android_asset/index.html";

WebSettings WebSettings = WebView.getSettings();

// 啟用javascript

WebSettings.setJavaScriptEnabled(true);

// 從assets目錄下面加載html

WebView.loadUrl(url);

// Web調(diào)用Android接口名稱

WebView.addJavascriptInterface(this, "wst");

// 覆蓋WebView默認(rèn)使用第三方或系統(tǒng)默認(rèn)瀏覽器打開網(wǎng)頁的行為，使網(wǎng)頁用WebView打開

WebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

});

(3)將項目文件發(fā)布至Android平臺。項目運行正常。相關(guān)頁面在不同平臺下顯示效果如圖2所示。

圖2(a) PC系統(tǒng)中頁面顯示效果

圖2(b) Android平臺下頁面效果

使用其他跨平臺移動Web框架技術(shù)也能取得同樣的效果。此處不再贅述。后期將在此基礎(chǔ)上對基于跨平臺的Jason格式數(shù)據(jù)交換相關(guān)技術(shù)作進(jìn)一步的探索。

3 結(jié)語

隨著移動互聯(lián)網(wǎng)的發(fā)展及智能終端的普及，基于移動互聯(lián)網(wǎng)的應(yīng)用需求日益強(qiáng)烈。若能借助傳統(tǒng)Web應(yīng)用開發(fā)的優(yōu)勢，并融合基于HTML5的移動Web應(yīng)用開發(fā)框架及混合跨平臺開發(fā)框架技術(shù)，并在移動開發(fā)過程中選擇合適的響應(yīng)式Web技術(shù)，相信這種方法將會獲得事半功倍的效果。

[1]孟凡寧，叢中昌，黃志興. 移動互聯(lián)網(wǎng)應(yīng)用跨平臺開發(fā)研究[J]. 移動通信, 2013(13): 60-63.

[2]楊勇，鄺宇峰，魏騫. 移動互聯(lián)網(wǎng)終端應(yīng)用開發(fā)技術(shù)[J]. 中興通信技術(shù), 2013(19): 19-23.

[3]司徒有波. 基于PhoneGap的跨平臺移動電子書店的研究與實現(xiàn)[D]. 江蘇：南京郵電大學(xué), 2014.

[4]李張永，陳和平，顧進(jìn)廣. 跨平臺移動Web開發(fā)框架與數(shù)據(jù)交互方法[J]. 計算機(jī)工程與計, 2014(35): 1828-1831.

[5]權(quán)重明，彭昕昀. 利用JSON實現(xiàn)Android高效、安全訪問遠(yuǎn)程數(shù)據(jù)庫的一種方式[J]. 韶關(guān)學(xué)院學(xué)報(自然科學(xué)版), 2011，32(12):16-20.

2017-02-25

張烈超(1973-)，男，湖北武穴人，武漢交通職業(yè)學(xué)院教師，主要從事數(shù)據(jù)挖掘、移動互聯(lián)網(wǎng)研究。

10.3969/j.issn.1672-9846.2017.01.019

TP311.52

A

1672-9846(2017)01-0078-05