基于Ionic的自適應(yīng)前端技術(shù)研究與應(yīng)用①

鄧璐娟,陳欣欣,雷科偉,賈志勇,范紀(jì)冉

1(鄭州輕工業(yè)學(xué)院 軟件學(xué)院,鄭州 450002)

2(鄭州輕工業(yè)學(xué)院 計(jì)算機(jī)與通信工程學(xué)院,鄭州 450002)

近年來,隨著智能移動(dòng)設(shè)備的迅速普及,移動(dòng)端連接Internet獲得網(wǎng)絡(luò)應(yīng)用軟件服務(wù)已成為一種必然.因此,僅有傳統(tǒng)的Web端開發(fā)已不能滿足用戶和企業(yè)新增長的需求,對(duì)手機(jī)APP的開發(fā)研究已經(jīng)逐漸成為一種不可阻擋的趨勢,然手機(jī)APP 開發(fā)模式種類繁多,選擇合適的開發(fā)模式至關(guān)重要.目前主要有以下三種模式: (1) 不同的平臺(tái)需要獨(dú)立開發(fā)的原生模式.(2) 主要部分使用原生技術(shù)開發(fā),擴(kuò)展功能調(diào)用Web頁面的原生+Web模式.(3) 使用Web技術(shù)開發(fā)手機(jī)APP的混合模式.其中原生應(yīng)用開發(fā)成本最高,周期最長,但是運(yùn)行也最流暢; 原生+Web模式成本和周期低于原生應(yīng)用,但用戶體驗(yàn)欠佳; 混合模式因使用Web技術(shù)開發(fā)移動(dòng)應(yīng)用,避免了多平臺(tái)開發(fā)造成的資源浪費(fèi),成本最低,效率最高,用戶體驗(yàn)僅次于原生應(yīng)用.因此,考慮到成本與用戶體驗(yàn)等各方面的因素,利用混合模式開發(fā)移動(dòng)APP是目前最理想的開發(fā)方式[1].

基于混合模式,開發(fā)手機(jī)APP的技術(shù)有很多,其中主流的有三個(gè),它們別是Cordova、AppCan、Ionic.Cordova側(cè)重于JS、HTML、CSS與原生應(yīng)用的交互,但樣式粗糙,低版Android系統(tǒng)中性能差; AppCanx需要將代碼交給AppCan服務(wù)器,隱私性差; Ionic利用AngularJS/UI和CSS編寫原生應(yīng)用和用戶界面,界面美觀,性能相對(duì)較好,但因需要Cordova打包給移動(dòng)應(yīng)用,性能上也受Cordova的一些限制.綜上所示,這三種技術(shù)雖各有優(yōu)缺點(diǎn),但顯然,Ionic框架技術(shù)的性價(jià)比是最高的,因此,結(jié)合框架Ionic技術(shù)、AngularJS技術(shù)以及MongDB數(shù)據(jù)技術(shù)研發(fā)自適應(yīng)于Web端和移動(dòng)端的應(yīng)用軟件是目前軟件開發(fā)領(lǐng)域的一個(gè)技術(shù)熱點(diǎn)問題.

1 技術(shù)原理

1.1 Ionic框架技術(shù)

Ionic是一款基于HTML5混合AngularJS、Java Script構(gòu)建的類似于手機(jī)原生應(yīng)用APP的輕量級(jí)開發(fā)框架,封裝了Cordova/PhoneGap、AngularJS /UI和CSS框架技術(shù)等,能夠利用AngularJS /UI和CSS技術(shù)在Web端開發(fā)移動(dòng)應(yīng)用,通過Cordova/PhoneGap打包封裝給不同的移動(dòng)應(yīng)用平臺(tái),克服了手機(jī)原生應(yīng)用開發(fā)難度大、耗時(shí)長、無法跨平臺(tái)等缺陷[2].技術(shù)原理如圖1所示.

Ionic框架主要包括底層和表現(xiàn)層兩部分,其中底層包括Cordova、Angular UI Router、AngularJS等.Cordova又稱PhoneGap,封裝了各個(gè)平臺(tái)內(nèi)置瀏覽器webView組件,并對(duì)其進(jìn)行擴(kuò)展,使其成為具有訪問本地設(shè)備API功能的強(qiáng)大瀏覽器,Ionic框架原理圖中封裝的 Android 的SDK及IOS的SDK即是這兩個(gè)系統(tǒng)的軟件開發(fā)工具包(強(qiáng)大瀏覽器),這些軟件開發(fā)工具包具備通過JavaScript直接訪問不同平臺(tái)設(shè)備本地API的能力,從而使Cordova實(shí)現(xiàn)了APP跨平臺(tái)訪問功能; Angular UI Router用來實(shí)現(xiàn)前端路由,與基于URL匹配的路由機(jī)制不同,Angular UI Router是基于狀態(tài)機(jī)的導(dǎo)航,狀態(tài)機(jī)是由子視圖集合抽象而成的,導(dǎo)航的就是狀態(tài)的切換,路由導(dǎo)航就是切換狀態(tài),ionic.js渲染對(duì)應(yīng)的子視圖就是實(shí)現(xiàn)不同狀態(tài)下的路由導(dǎo)航即狀態(tài)切換[3]; Ionic融合了AngularJS框架,包含了AngularJS的特性,提供了強(qiáng)大的數(shù)據(jù)視圖雙向綁定功能和自定義指令擴(kuò)展功能,為團(tuán)隊(duì)開發(fā)大型項(xiàng)目提供了幫助.表現(xiàn)層主要包括CSS框架、命令行/CLI以及Java Script框架三個(gè)部分.其中,CSS框架主要通過ionicons圖標(biāo)樣式庫提供原生APP質(zhì)感的CSS樣式模擬; 命令行/CLI主要用于構(gòu)建應(yīng)用,模擬運(yùn)行,開發(fā)者能夠直接通過CLI調(diào)用Cordova的跨平臺(tái)創(chuàng)建、編譯、打包等功能,簡化了移動(dòng)應(yīng)用的開發(fā); JavaScript主要功能是提供適應(yīng)移動(dòng)端UI的 AngularJS擴(kuò)展[4].

圖1 Ionic原理圖

1.2 AngularJS技術(shù)

AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的一種基于JavaScript技術(shù)的以數(shù)據(jù)交互為核心的純客戶端Web框架,旨在解決瀏覽器端實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁問題的同時(shí),通過提供強(qiáng)大的視圖數(shù)據(jù)雙向綁定功能和自定義指令擴(kuò)展功能,增強(qiáng)HTML應(yīng)用[5].其工作原理主要包括Angular JS與瀏覽器的交互過程(圖2(a))和與用戶的交互過程(圖2(b)).

圖2(a)是AngularJS與瀏覽器的交互過程.首先進(jìn)行HTML加載,然后將其解析成為DOM,在瀏覽器中加載angular.js的腳本,AngularJS等待DOM Content Loaded事件的觸發(fā),AngularJS尋找ng-app指令,配置$injector,使用injector創(chuàng)建$root Scope服務(wù)和compile,使用compile服務(wù)編譯DOM并把它鏈接到root Scope上,ng-init指令對(duì)Scope里面的變量進(jìn)行賦值,最后對(duì)表達(dá)式進(jìn)行替換[6].

圖2 AngularJS與瀏覽器和用戶的交互圖

圖2(b)是Angular JS與用戶的交互過程.瀏覽器的事件回路一直處于等待事件觸發(fā)的狀態(tài),一旦有事件(用戶的交互操作、定時(shí)事件、網(wǎng)絡(luò)事件等)觸發(fā)瀏覽器的事件回路,交互過程就會(huì)進(jìn)入到JavaScript的context中,然后context過程使用回調(diào)函數(shù)修改DOM模板,當(dāng)回調(diào)函數(shù)執(zhí)行完成以后,瀏覽器根據(jù)新的DOM模板組織渲染新的瀏覽器頁面[7].

1.3 MongoDB技術(shù)

MongoDB是一種分布式、跨平臺(tái)、面向文檔的開源非關(guān)系型數(shù)據(jù)庫,主要是以數(shù)據(jù)庫、集合、文檔為 存儲(chǔ)單元,支持的數(shù)據(jù)結(jié)構(gòu)非常松散,能夠從單服務(wù)器部署擴(kuò)展到大型、復(fù)雜的多數(shù)據(jù)中心架構(gòu),具有非常強(qiáng)的擴(kuò)展性[8].且還因封裝有GridFS(圖3)和Sharding(圖4),使得MongoDB具備了支持高效二進(jìn)制數(shù)據(jù)文件存儲(chǔ)的功能和根據(jù)用戶數(shù)據(jù)使用量不斷自動(dòng)分片擴(kuò)展存儲(chǔ)系統(tǒng)的功能[9].

圖3 GridFS存儲(chǔ)圖

圖4 Auto-Sharding分片圖

如圖3所示,MongoDB 使用 GridFS 文件系統(tǒng)來存儲(chǔ)文件,GridFS的基本原理是將文件保存在兩個(gè)collection集合中,集合 File保存文件索引以及文件信息的元數(shù)據(jù),集合Chunk保存文件內(nèi)容,其中,文件內(nèi)容被分成大小相同的若干塊,每一塊都存在一個(gè)Chunk塊中,Chunk塊大小通常為 256 KB,獨(dú)立存放在Chunk 集合中.這種方法在存儲(chǔ)文件的同時(shí),還能夠存儲(chǔ)與文件相關(guān)的一些附加屬性(比如文件名,MD5值等).使得MongoDB具備了存儲(chǔ)大容量數(shù)據(jù)的條件.

當(dāng)數(shù)據(jù)量大量增長的時(shí)候,一臺(tái)數(shù)據(jù)庫服務(wù)器很難完成對(duì)大量數(shù)據(jù)的存儲(chǔ)與快速讀寫,這時(shí)就用到了MongoDB的Auto-Sharding即自動(dòng)分片技術(shù),如圖4所示,Auto-Sharding 由 shards、config servers 和mongos三部分組成.Shards稱為片,通過運(yùn)行mongod進(jìn)程來存儲(chǔ)一個(gè)集合的部分?jǐn)?shù)據(jù); config servers是配置服務(wù)器,負(fù)責(zé)存儲(chǔ)集群中的每個(gè)shard服務(wù)器上的塊列表以及每個(gè)數(shù)據(jù)塊所對(duì)應(yīng)的片鍵取值范圍; mongos是集群和客戶端交互的窗口,也是集群中各個(gè)系統(tǒng)的交通紐帶,主要負(fù)責(zé)各功能模塊的協(xié)調(diào)調(diào)度[10].

2 技術(shù)的組合應(yīng)用

結(jié)合Ionic、MongoDB等技術(shù)設(shè)計(jì)了一款自適應(yīng)Web端與移動(dòng)智能終端的農(nóng)產(chǎn)品展示和銷售應(yīng)用軟件.該農(nóng)貿(mào)軟件能夠自適應(yīng)于任何屏幕,具有良好的維護(hù)性、可靠性、交互性,并且易于用戶操作,界面風(fēng)格簡潔美觀.其主要功能包括消費(fèi)者具有對(duì)商品進(jìn)行信息查詢、提交訂單、模擬結(jié)算等功能,賣家能夠具有對(duì)商品信息進(jìn)行增、刪、改、查及處理購物車訂單等功能.

2.1 設(shè)計(jì)思路

如圖5所示,該軟件采用Ionic框架混合應(yīng)用開發(fā),瀏覽器端以CSS/HTML、JavaScript/JSON、Angular JS為基礎(chǔ),遵循視圖控制模式,通過視圖控制器 “驅(qū)動(dòng)”內(nèi)部視圖提供用戶交互和UI功能,服務(wù)器端使用Node.js管理模塊,采用B/S結(jié)構(gòu),將Web端與移動(dòng)端完美結(jié)合,利用分布式非關(guān)系型數(shù)據(jù)庫MongoDB對(duì)網(wǎng)站的文件數(shù)據(jù)信息進(jìn)行分片存儲(chǔ).

圖5 網(wǎng)站框架原理圖

對(duì)用戶需求進(jìn)行分析之后,該應(yīng)用軟件的功能設(shè)計(jì)如圖6所示,用戶首次進(jìn)入網(wǎng)站,網(wǎng)站會(huì)自動(dòng)彈出提示用戶注冊(cè)對(duì)話框,提醒用戶注冊(cè),用戶注冊(cè)并登錄之后,就可以將其心儀的商品加入購物車,并且還可以對(duì)已經(jīng)加入購物車的商品進(jìn)行管理,譬如添加、刪除以及購買等,同時(shí)還可以進(jìn)行查看訂單.

圖6 網(wǎng)站功能圖

2.2 網(wǎng)站配置

Ionic開發(fā)依賴于Node.js環(huán)境,因此在Ionic配置之前需要先配置Node.js環(huán)境.此外,因Ionic需要通過cordovan打包封裝,所以需要對(duì)cordovan進(jìn)行下載和安裝,輸入npm install -g cordovan命令對(duì)cordovan進(jìn)行安裝,輸入npm install-g ionic命令對(duì)Ionic進(jìn)行安裝.

如圖7 為IONIC配置成功圖,在項(xiàng)目文件目錄下執(zhí)行命令I(lǐng)onic start myionic tabs,創(chuàng)建項(xiàng)目,如圖8所示,其中,項(xiàng)目中 plugins文件夾主要用來存放一些底層的插件,包括 Cordova插件和開發(fā)者自己開發(fā)的插件等; scss文件夾下存放的是各個(gè)平臺(tái)的圖片; www文件下存放的是一些我們自己編寫的Web端代碼.

后臺(tái)設(shè)計(jì),此項(xiàng)目采用的是分布式數(shù)據(jù)庫MongoDB,啟動(dòng)圖如圖9所示,配置好nodejs環(huán)境之后,用Node.js關(guān)聯(lián)數(shù)據(jù)庫,在package.json中配置"mongoose",導(dǎo)入mongoose模塊,然后創(chuàng)建數(shù)據(jù)庫連接,MongoDB數(shù)據(jù)庫技術(shù)以文本的形式儲(chǔ)存數(shù)據(jù),以JS解釋器為內(nèi)部執(zhí)行引擎,將前端傳來的文檔數(shù)據(jù)存儲(chǔ)成bson結(jié)構(gòu),查詢時(shí),轉(zhuǎn)換為JS對(duì)象.

圖7 Ionic啟動(dòng)圖

圖8 項(xiàng)目結(jié)構(gòu)圖

圖9 MongoDB啟動(dòng)圖

2.3 網(wǎng)站實(shí)現(xiàn)

此項(xiàng)目通過各個(gè)頁面及頁面功能實(shí)現(xiàn)該農(nóng)貿(mào)應(yīng)用軟件的全部功能,下面開始以首頁和登錄頁面為例,詳細(xì)闡述實(shí)現(xiàn)過程.

如圖10所示,為該應(yīng)用軟件實(shí)現(xiàn)的首頁效果圖,首頁對(duì)整個(gè)網(wǎng)站來說尤為重要,因?yàn)楦鱾€(gè)主要的功能模塊均在首頁顯示.

其主要代碼如下所示.

圖10 網(wǎng)站首頁

以上代碼主要主頁的一些設(shè)置,這部分用到了Ionic的Tab組件,并通過Ionic的路由機(jī)制完成首頁向登錄頁面的跳轉(zhuǎn).

如圖11所示,為該應(yīng)用軟件實(shí)現(xiàn)的登錄頁面效果圖,主要用于實(shí)現(xiàn)用戶登錄網(wǎng)站的功能.

其主要代碼如下.

這部分用到了Node.js的 express模塊和mongoose模塊,其功能是處理請(qǐng)求和保存數(shù)據(jù),先用mongoose模塊的中package.json聲明好數(shù)據(jù)格式,根據(jù)前端傳過來的用戶信息,對(duì)分布式數(shù)據(jù)庫MongoDB進(jìn)行增刪改查.

圖11 登錄頁面

3 結(jié)束語

本文研究分析了Ionic框架、 AngularJS、MongoDB等關(guān)鍵技術(shù),根據(jù)Ionic框架技術(shù)調(diào)用系統(tǒng)原生接口完成應(yīng)用軟件研發(fā)的特性、AngularJS 技術(shù)的數(shù)據(jù)交互特性和MongoDB數(shù)據(jù)庫的分片存儲(chǔ)特性,設(shè)計(jì)并實(shí)現(xiàn)了一款自適應(yīng)Web端及移動(dòng)智能終端的服務(wù)于農(nóng)產(chǎn)品展示和銷售的應(yīng)用軟件,該軟件專注于農(nóng)副產(chǎn)品,種類豐富,分類明確,為消費(fèi)者和賣家提供了不受時(shí)間、地點(diǎn)限制的購物環(huán)境.借助該軟件,商家能夠?qū)崿F(xiàn)商品的一站式上架與下架,消費(fèi)者可以實(shí)現(xiàn)一站式完成商品的瀏覽、購買和與商家進(jìn)行溝通等.該應(yīng)用軟件完成了客戶到產(chǎn)品直接高效的商品交易.此外,本文也有一些不足之處,因Ionic框架技術(shù)在低版Android系統(tǒng)中的性能缺陷,后期還要繼續(xù)優(yōu)化.