基于Apache Cordova的高校門戶系統(tǒng)跨平臺移動開發(fā)框架研究與實(shí)現(xiàn)*

季耀君

(馬鞍山師范高等專科學(xué)校 安徽馬鞍山 243041)

1概述

1.1研究背景

高校門戶首先是一個 Web集成系統(tǒng)，各類后端子系統(tǒng)、校內(nèi)、圖片素材，視頻、課件等資源和校外網(wǎng)絡(luò)素材整合到一個統(tǒng)一的系統(tǒng)校園門戶上[1-2]，使用戶看到的是一致的界面，生成高校對社會、教師、學(xué)生等成員信息通道，所有這些信息通過門戶展現(xiàn)教師、學(xué)生，社會公眾(受限)面前。具體表現(xiàn)為數(shù)字化校園各子系統(tǒng)通過門戶對外提供服務(wù)。但是當(dāng)前各高校原基于 PC時代的門戶及數(shù)字化校園的各子系統(tǒng)，已不能適應(yīng)當(dāng)前移動互連時代蓬勃發(fā)展的需要，制約了高校為學(xué)生、社會服務(wù)的水平。而開發(fā)特定平臺( IOS、 Android)移動 APP，需要不同的開發(fā)團(tuán)隊針對高校的具體應(yīng)用開發(fā)，無論是高校自己開發(fā)還是社會第三方開發(fā)，都難以接受高昂的開發(fā)成本。因此，文章探討基于 Apache Cordova的跨平臺的高校門戶系統(tǒng)應(yīng)用開發(fā)框架研究與實(shí)現(xiàn)，以便快速、低成本構(gòu)建跨平臺的高校門戶系統(tǒng)移動 APP(基于 IOS、 Android、 WindowsPhone等)。

1.2 Apache Cordova及移動應(yīng)用開發(fā)框架相關(guān)概念的闡述

Apache Cordova提供調(diào)用移動設(shè)備的硬件的對象模型，該對象模型使用JavaScript語言以編程方式操縱便攜式設(shè)備硬件的功能，這些硬件普遍用來發(fā)出拍照、搖晃、查詢地理信息等動作。Apache Cordova項目維護(hù)著一組名為Core Plugins的插件。 這些核心插件提供應(yīng)用程序訪問設(shè)備的功能，如電池、相機(jī)和聯(lián)系人等。Apache Cordova的實(shí)際項目中往往與UI框架結(jié)合使用。

當(dāng)前移動領(lǐng)域跨平臺開發(fā)框架大致分為兩類。一類是基礎(chǔ)開發(fā)框架(如jQuery Mobile或Dojo Mobile或Sencha Touch)等。它們的特點(diǎn)是不涉及具體的業(yè)務(wù)應(yīng)用，使用HTML5、CSS和JavaScript開發(fā)跨平臺智能手機(jī)應(yīng)用。另一類屬于企業(yè)應(yīng)用移動開發(fā)框架，特點(diǎn)是移動界面大都基于CSS3響應(yīng)時交互式設(shè)計，在其框架成中集成了部分通用應(yīng)用邏輯元素，例如社區(qū)模塊等。這類框架在客戶層采用基于 CSS3的媒體查詢的響應(yīng)式設(shè)計，同時為了加強(qiáng) JavaScript數(shù)據(jù)操作能力在框架中引入數(shù)據(jù)源技術(shù)，通過提供能夠執(zhí)行常用操作的命令來將數(shù)據(jù)篩選、排序、分頁等復(fù)雜的數(shù)據(jù)操作高度抽象，為外部及本地數(shù)據(jù)源提供一個獨(dú)立的接口，支持 CRUD操作(創(chuàng)建、讀取、更新和銷毀)也支持對數(shù)據(jù)進(jìn)行過濾、排序、分頁、分組和聚合操作。在框架服務(wù)層集成面向具體業(yè)務(wù)的通用API。文章探討的移動開發(fā)框架就屬于此類，表現(xiàn)為一站式跨平臺移動解決方案。

2開發(fā)框架的功能及構(gòu)建

2.1功能分析及體系結(jié)構(gòu)

構(gòu)建于開發(fā)框架之上的各類移動設(shè)備和 PC通過門戶系統(tǒng)訪問數(shù)字化校園的學(xué)生管理、教務(wù)、交費(fèi)等業(yè)務(wù)子系統(tǒng)，這些系統(tǒng)服務(wù)通過 ASP. NET Web API被集成到開發(fā)框架中，移動 APP開發(fā)中利用這一框架可以快速構(gòu)建跨平臺的 APP。以實(shí)現(xiàn)傳統(tǒng)校園門戶的移動化建設(shè)，其體系結(jié)構(gòu)圖，如圖1所示。

圖1校園門戶體系結(jié)構(gòu)圖

2.2體系結(jié)構(gòu)以及開發(fā)技術(shù)的選擇

跨平臺移動開發(fā)框架客戶層由基于 Apache Cordova的移動微件、模板引擎、框架元素組成，服務(wù)層利用 asp. net web api對來自高校門戶后端的數(shù)字化校園各子系統(tǒng)的服務(wù)進(jìn)行二次封裝，以提供一致的移動設(shè)備訪問，它包括教務(wù)系統(tǒng)移動接口、學(xué)生管理移動接口、遠(yuǎn)程繳費(fèi)接口、其它子系統(tǒng)的服務(wù)接口，其組成框圖如圖2所示。

圖2系統(tǒng)各接口框圖

開發(fā)框架從客戶層和服務(wù)層兩方面進(jìn)行研究與實(shí)現(xiàn)，客戶層主要利用向?qū)ο蟮姆庋b技術(shù)、 html5、 JavaScript及 CSS3相關(guān)技術(shù)，以及 Apache Cordova提供的一組移動設(shè)備 JavaScript API(位置、震動、攝像頭等)進(jìn)行封裝。形成跨平臺移動框架的UI微件、模板及模板引擎、框架元素[4]。其載體是JS庫文件和相應(yīng)的CSS文件。同時，采用數(shù)據(jù)源組件技術(shù)實(shí)現(xiàn)復(fù)雜的數(shù)據(jù)操作。該數(shù)據(jù)源技術(shù)是跨平臺移動UI框架元素的核心組件。對復(fù)雜的視圖，擬采用模板及模板引擎技術(shù)對重復(fù)塊，進(jìn)行調(diào)度與處理。在服務(wù)層采用MVC技術(shù)實(shí)現(xiàn)對高校門戶及其后端子系統(tǒng)服務(wù)的操縱， MVC技術(shù)能夠?qū)崿F(xiàn)基于 HTTP協(xié)議的 CRUD操作，微軟的 ASP. NET Web API是對這一技術(shù)的實(shí)現(xiàn)框架，利用 ASP. NET Web API可以對來自高校門戶后端的數(shù)字化校園各子系統(tǒng)的服務(wù)進(jìn)行二次封裝，以提供一致的移動設(shè)備訪問接口，它包括教務(wù)系統(tǒng)移動接口、學(xué)生管理移動接口、遠(yuǎn)程繳費(fèi)接口、其它子系統(tǒng)的服務(wù)接口。這些接口提供基于HTTP協(xié)議的CRUD(創(chuàng)建、讀取、更新和銷毀)操作，實(shí)現(xiàn)移動設(shè)備對服務(wù)層資源訪問并返回移動設(shè)備需要的JSON數(shù)據(jù)。

3關(guān)鍵技術(shù)

3.1模板引擎

該開發(fā)框架立足開發(fā)一個高性能的 JavaScript 模板引擎。 要求通過模板可以創(chuàng)建一個 HTML 片段然后可以和 JavaScript 數(shù)據(jù)合并成最終的 HTML 元素，模板側(cè)重于 UI 顯示[4]，其原理總結(jié)起來就是：第一就是得到 html中指定 id標(biāo)簽內(nèi)部的 innerHTML，以封閉標(biāo)簽的首尾字符作為文檔的分界、劃分，實(shí)際就是把模板劃分成兩部份內(nèi)容包括文檔標(biāo)簽和動態(tài)填充的內(nèi)容，對常見的固定的語法單詞比如 each、 if等比較。把這些單詞處理成相應(yīng)的代碼段，通過連續(xù)的處理連接操作。第二就是處理的結(jié)果使用 new Function()的方法轉(zhuǎn)變?yōu)樘囟ǖ暮瘮?shù)。

首先在id為id1的script塊里定義模板。

然后通過正則表達(dá)式來替換所有花括號的值，自定義的模板符號里面的內(nèi)容可以使用正則表達(dá)式處理，代碼如下：

這是在瀏覽器客戶端將服務(wù)端返回的內(nèi)容(一般為Json對象)在JavaScript代碼里做循環(huán)遍歷，同時填充到模板定義的特殊符號上。它遍歷數(shù)據(jù)集合里的每一個項，做相應(yīng)的替換，同時循環(huán)查找數(shù)據(jù)片段下全部成員，每一個成員都被當(dāng)作關(guān)鍵詞查找相應(yīng)的HTML元素，找到后就代替之。這樣的算法可以做到，元素及其屬性任意定義時JavaScript程序可以不變化。

3.2 ASP.NET Web API

Web API 框架是一個面向Http協(xié)議的通信框架，當(dāng)前它支持Json 和Xml這兩種數(shù)據(jù)格式的串行(對象)化。不需要做任何其他的改動。Web API對數(shù)據(jù)的格式化是可配置的，可以設(shè)置成XML形式(默認(rèn))或者JSON形式。

(1)Web API的路由。

(a)在VS2015中新建MVC應(yīng)用，項目根目錄里的 App_Start子文件夾里生成WebApiConfig.cs文檔， Web API的控制器就在該文檔里面。

(b)Web API框架的架構(gòu)模式屬于“狀態(tài)轉(zhuǎn)移”架構(gòu)模式，它根據(jù)網(wǎng)頁請求中的狀態(tài)特征，判斷控制器中已有動作，判定的規(guī)則是：動作名是以什么樣特征字符串開頭，以及該動作上的特定標(biāo)記等。

(c)當(dāng)然可以改變初始的設(shè)置，讓瀏覽器在操縱時，明確的分配 action 名字，比如:

就此，因?yàn)槊鞔_的指派了 Action 名字，Web API 通過這個Action來發(fā)現(xiàn)相應(yīng) Action 操作，HttpMethod 方式就被放棄了。

(2)Get請求數(shù)據(jù)。

(a)定義類名為myUserModel 類:

(b)指派Web API Controller的一個實(shí)例myUserController。

(c)在瀏覽器中訪問地址為myapi/myuser/mygetadmin格式的網(wǎng)址，其返回的內(nèi)容默認(rèn)是XML

形式的數(shù)據(jù)。

(d)利用AJAX請求訪問這個地址形式的api，同時確定返回json形式的數(shù)據(jù):

3.3以POST形式進(jìn)行數(shù)據(jù)的提交

(1)用戶控制器里面創(chuàng)建一個名字為add的Action

(2)JavaScript post提交數(shù)據(jù)

4結(jié)束語

文章提及的高校門戶跨平臺移動開發(fā)框架，其客戶層主要利用向?qū)ο蟮姆庋b技術(shù)、 Html5、 JavaScript及 CSS3相關(guān)技術(shù)，以及 Apache Cordova提供的一組移動設(shè)備 JavaScript API(位置、震動、攝像頭等)進(jìn)行封裝，形成跨平臺移動框架的UI微件、模板及模板引擎、框架元素。服務(wù)層利用ASP.NET Web API可以對來自高校門戶后端的數(shù)字化校園各子系統(tǒng)的服務(wù)進(jìn)行二次封裝，以提供一致的移動設(shè)備訪問接口。這些接口提供基于HTTP協(xié)議的CRUD(創(chuàng)建、讀取、更新和銷毀)操作，實(shí)現(xiàn)移動設(shè)備對服務(wù)層資源訪問并返回移動設(shè)備需要的JSON數(shù)據(jù)，為傳統(tǒng)高校門戶系統(tǒng)移動化提供了一站式跨平臺移動解決方案。