張烈超

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

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

張烈超

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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默認使用第三方或系統(tǒng)默認瀏覽器打開網(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平臺。項目運行正常。相關頁面在不同平臺下顯示效果如圖2所示。

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

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

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

3 結(jié)語

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

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

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

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

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

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

2017-02-25

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

10.3969/j.issn.1672-9846.2017.01.019

TP311.52

A

1672-9846(2017)01-0078-05