基于Ionic的自適應前端技術研究與應用①

鄧璐娟,陳欣欣,雷科偉,賈志勇,范紀冉

1(鄭州輕工業學院 軟件學院,鄭州 450002)

2(鄭州輕工業學院 計算機與通信工程學院,鄭州 450002)

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

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

1 技術原理

1.1 Ionic框架技術

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

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

圖1 Ionic原理圖

1.2 AngularJS技術

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

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

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

圖2(b)是Angular JS與用戶的交互過程.瀏覽器的事件回路一直處于等待事件觸發的狀態,一旦有事件(用戶的交互操作、定時事件、網絡事件等)觸發瀏覽器的事件回路,交互過程就會進入到JavaScript的context中,然后context過程使用回調函數修改DOM模板,當回調函數執行完成以后,瀏覽器根據新的DOM模板組織渲染新的瀏覽器頁面[7].

1.3 MongoDB技術

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

圖3 GridFS存儲圖

圖4 Auto-Sharding分片圖

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

當數據量大量增長的時候,一臺數據庫服務器很難完成對大量數據的存儲與快速讀寫,這時就用到了MongoDB的Auto-Sharding即自動分片技術,如圖4所示,Auto-Sharding 由 shards、config servers 和mongos三部分組成.Shards稱為片,通過運行mongod進程來存儲一個集合的部分數據; config servers是配置服務器,負責存儲集群中的每個shard服務器上的塊列表以及每個數據塊所對應的片鍵取值范圍; mongos是集群和客戶端交互的窗口,也是集群中各個系統的交通紐帶,主要負責各功能模塊的協調調度[10].

2 技術的組合應用

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

2.1 設計思路

如圖5所示,該軟件采用Ionic框架混合應用開發,瀏覽器端以CSS/HTML、JavaScript/JSON、Angular JS為基礎,遵循視圖控制模式,通過視圖控制器 “驅動”內部視圖提供用戶交互和UI功能,服務器端使用Node.js管理模塊,采用B/S結構,將Web端與移動端完美結合,利用分布式非關系型數據庫MongoDB對網站的文件數據信息進行分片存儲.

圖5 網站框架原理圖

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

圖6 網站功能圖

2.2 網站配置

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

如圖7 為IONIC配置成功圖,在項目文件目錄下執行命令Ionic start myionic tabs,創建項目,如圖8所示,其中,項目中 plugins文件夾主要用來存放一些底層的插件,包括 Cordova插件和開發者自己開發的插件等; scss文件夾下存放的是各個平臺的圖片; www文件下存放的是一些我們自己編寫的Web端代碼.

后臺設計,此項目采用的是分布式數據庫MongoDB,啟動圖如圖9所示,配置好nodejs環境之后,用Node.js關聯數據庫,在package.json中配置"mongoose",導入mongoose模塊,然后創建數據庫連接,MongoDB數據庫技術以文本的形式儲存數據,以JS解釋器為內部執行引擎,將前端傳來的文檔數據存儲成bson結構,查詢時,轉換為JS對象.

圖7 Ionic啟動圖

圖8 項目結構圖

圖9 MongoDB啟動圖

2.3 網站實現

此項目通過各個頁面及頁面功能實現該農貿應用軟件的全部功能,下面開始以首頁和登錄頁面為例,詳細闡述實現過程.

如圖10所示,為該應用軟件實現的首頁效果圖,首頁對整個網站來說尤為重要,因為各個主要的功能模塊均在首頁顯示.

其主要代碼如下所示.

圖10 網站首頁

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

如圖11所示,為該應用軟件實現的登錄頁面效果圖,主要用于實現用戶登錄網站的功能.

其主要代碼如下.

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

圖11 登錄頁面

3 結束語

本文研究分析了Ionic框架、 AngularJS、MongoDB等關鍵技術,根據Ionic框架技術調用系統原生接口完成應用軟件研發的特性、AngularJS 技術的數據交互特性和MongoDB數據庫的分片存儲特性,設計并實現了一款自適應Web端及移動智能終端的服務于農產品展示和銷售的應用軟件,該軟件專注于農副產品,種類豐富,分類明確,為消費者和賣家提供了不受時間、地點限制的購物環境.借助該軟件,商家能夠實現商品的一站式上架與下架,消費者可以實現一站式完成商品的瀏覽、購買和與商家進行溝通等.該應用軟件完成了客戶到產品直接高效的商品交易.此外,本文也有一些不足之處,因Ionic框架技術在低版Android系統中的性能缺陷,后期還要繼續優化.