移動(dòng)校園跨平臺(tái)技術(shù)實(shí)現(xiàn)

文/謝宇威 方偉杰 洪波 應(yīng)鑫迪

移動(dòng)校園跨平臺(tái)技術(shù)實(shí)現(xiàn)

文/謝宇威 方偉杰 洪波 應(yīng)鑫迪

隨著高校信息化建設(shè)的不斷深入，互聯(lián)網(wǎng)、3G網(wǎng)絡(luò)及無線網(wǎng)絡(luò)技術(shù)蓬勃發(fā)展，校內(nèi)3G和無線用戶飛速增長，在移動(dòng)終端上使用各種互聯(lián)網(wǎng)應(yīng)用已漸漸成為一種習(xí)慣，每所高校都有自己獨(dú)特的校園環(huán)境和各類資源，如果教師和學(xué)生在移動(dòng)設(shè)備上可以隨時(shí)隨地獲取這些信息，那么它將對(duì)教師的教學(xué)科研及學(xué)生的學(xué)習(xí)生活起到很大的幫助作用。

校園移動(dòng)門戶是學(xué)校信息化重點(diǎn)建設(shè)項(xiàng)目，構(gòu)建了移動(dòng)應(yīng)用中心、個(gè)人信息中心，聚合了校內(nèi)新聞、資訊、公告、電話黃頁、圖書及班車查詢等服務(wù)，為師生提供了方便、高效的移動(dòng)化應(yīng)用。同時(shí)構(gòu)建了一套移動(dòng)的應(yīng)用開發(fā)平臺(tái)與開發(fā)規(guī)范，有利于推進(jìn)學(xué)校系統(tǒng)移動(dòng)化建設(shè)，為各部門移動(dòng)化應(yīng)用改造提供支撐。

移動(dòng)平臺(tái)客戶端開發(fā)技術(shù)介紹

Native APP

Native App是包含二進(jìn)制的可執(zhí)行文件，通常可從App Store和google play下載安裝。

Native App直接與移動(dòng)操作系統(tǒng)進(jìn)行聯(lián)系，可隨意訪問由操作系統(tǒng)開發(fā)商提供的所有API；無論從用戶體驗(yàn)還是交互性上來說，Native App的表現(xiàn)都十分突出，但缺點(diǎn)也同樣明顯，開發(fā)成本過高以及應(yīng)用更新維護(hù)上缺乏靈活性。

根據(jù)不同的平臺(tái)，開發(fā)者必須使用由操作系統(tǒng)開發(fā)商提供的開發(fā)工具，使用相關(guān)不同的開發(fā)語言來對(duì)源代碼進(jìn)行編譯，建立二進(jìn)制形式的可執(zhí)行文件，并連同其他資源一起封裝起來形成最后的App。

Web App

Web App是通過標(biāo)準(zhǔn)的網(wǎng)頁開發(fā)技術(shù)，通過各平臺(tái)的瀏覽器訪問來實(shí)現(xiàn)跨平臺(tái)訪問的。借助HTML5強(qiáng)大的技術(shù)威力，用于開發(fā)基于瀏覽器的移動(dòng)應(yīng)用程序。

Web App的優(yōu)點(diǎn)很明顯，開發(fā)成本相對(duì)較低，支持多平臺(tái)，可以實(shí)現(xiàn)在不同平臺(tái)上提供統(tǒng)一的用戶體驗(yàn)。Web App則在瀏覽器里面運(yùn)行，瀏覽器本身是一種可以直接訪問操作系統(tǒng)API的Native App，只有少量的API向?yàn)g覽器里面運(yùn)行的Web App公開，本地API調(diào)用能力較差約束了Web App的功能性，一些對(duì)本地資源需求較高的應(yīng)用將會(huì)使Web App顯得很乏力。

Hybrid App

Hybrid開發(fā)方法結(jié)合了Native開發(fā)和Web技術(shù)。核心是使用Web的開發(fā)技術(shù)，再通過中間件包裝成各平臺(tái)的應(yīng)用程序，通過這種開發(fā)方式，開發(fā)者就能使用跨平臺(tái)技術(shù)，僅通過Web開發(fā)技術(shù)，就能實(shí)現(xiàn)平臺(tái)的應(yīng)用程序，同時(shí)還能通過中間件的集成，調(diào)用大部分常用的本地API。

Hybrid App的Native代碼部分使用操作系統(tǒng)的API來創(chuàng)建嵌入式HTML渲染引擎，在瀏覽器和設(shè)備的API之間起到連接作用，使得Hybrid App得以充分利用設(shè)備所提供的全部特性。

現(xiàn)有的一些跨平臺(tái)開發(fā)方法結(jié)合了Native容器特性，提供開發(fā)者開發(fā)環(huán)境，因而讓開發(fā)者有辦法只要使用Web語言，就可以輕松調(diào)用本地特性來開發(fā)應(yīng)用程序，同時(shí)很多時(shí)候開發(fā)者可以根據(jù)自己的需要來定制獨(dú)特的Native容器。

比較

Native的開發(fā)方法在性能和設(shè)備訪問方面很出色，但成本和更新方面有缺點(diǎn)。Web的開發(fā)方法更新起來簡單得多，成本較低，也相對(duì)容易，但是功能有限，也無法獲得絕大多數(shù)的Native API調(diào)用權(quán)限，降低了用戶體驗(yàn)。Hybrid開發(fā)方法提供了結(jié)合兩者的優(yōu)點(diǎn)：兼?zhèn)淞丝缙脚_(tái)的開發(fā)和高效的本地API調(diào)用能力，提高了用戶體驗(yàn)的同時(shí)也降低了開發(fā)的成本。

圖1 客戶端與服務(wù)端對(duì)接模式

圖2 頁面分析流程結(jié)構(gòu)

ExMobi

ExMobi是專門針對(duì)企業(yè)領(lǐng)域移動(dòng)應(yīng)用開發(fā)特點(diǎn)推出的跨平臺(tái)的專業(yè)開發(fā)平臺(tái)中間件。ExMobi采用了可以結(jié)合Native App與Web App優(yōu)勢的、可擴(kuò)展的“Hybrid App”路線。與常見Hybrid App方案不同的是，為了保證系統(tǒng)具有足夠的性能及良好的擴(kuò)展性， ExMobi自研了一套精簡與優(yōu)化的“瀏覽器內(nèi)核”來實(shí)現(xiàn)客戶端的渲染與呈現(xiàn)，采用標(biāo)準(zhǔn)Web開發(fā)語言+自定義標(biāo)簽擴(kuò)展的方式，一方面降低開發(fā)者的進(jìn)入門檻，另一方面，可以通過自定義標(biāo)簽解決個(gè)性化定制的問題。客戶端通過不同的方式與服務(wù)端對(duì)接不同開發(fā)模式。

解決方案

高校信息化建設(shè)缺乏統(tǒng)一的系統(tǒng)規(guī)劃，各院系，部門根據(jù)業(yè)務(wù)需求構(gòu)建各自的業(yè)務(wù)系統(tǒng)，結(jié)合高校本身的復(fù)雜性，校內(nèi)資訊的內(nèi)容大多數(shù)來源于學(xué)校部門和院系的網(wǎng)站，頁面格式以及展示效果上更是五花八門，導(dǎo)致用戶體驗(yàn)非常差。

本案例中，我們采取基于Exmobi高校移動(dòng)應(yīng)用平臺(tái)的頁面分析技術(shù)與接口調(diào)用相結(jié)合的方式，來解決繁多復(fù)雜的高校信息化系統(tǒng)的移動(dòng)化建設(shè)。

以下介紹通過頁面分析的手段來獲取校內(nèi)資訊的內(nèi)容。實(shí)施步驟：

1.第一步，我們需要在客戶端頁面文件中ajax發(fā)送請(qǐng)求，定義通過接口獲取數(shù)據(jù)。

url = ＊＊＊＊;

var requestHeader = '{"Content-Type": "application/x-www-form-urlencoded"}'; $a.go(url, method, "", showList, null, requestHeader, true);

2.第二步，我們針對(duì)客戶端發(fā)起請(qǐng)求，在規(guī)則文件mapp. xml 中，定義urlname對(duì)應(yīng)一個(gè)域名地址urladdress；

描述客戶端請(qǐng)求和對(duì)應(yīng)的服務(wù)端處理第三方數(shù)據(jù)jsp文件。

3.第三步，在jsp文件 affairsList.jsp中對(duì)第三方響應(yīng)的數(shù)據(jù)進(jìn)行分析，可以用java 和 xpath 的方法操作。

首先，服務(wù)端請(qǐng)求

其次，對(duì)服務(wù)端請(qǐng)求之后第三方響應(yīng)數(shù)據(jù)通過java和xpath方法分析，都是標(biāo)準(zhǔn)java語言和通用xpath取值方法；

String title = aa.xpath("./heading","table") .replaceAll("<", "<")

再次，服務(wù)端響應(yīng)到客戶端數(shù)據(jù)，拼裝成json數(shù)據(jù)返回給客戶端使用。

4.第四步，對(duì)服務(wù)端響應(yīng)給客戶端的json數(shù)據(jù)進(jìn)行樣式還原展示；在第一步的ajax請(qǐng)求回調(diào)函數(shù)中進(jìn)行數(shù)據(jù)頁面標(biāo)簽還原達(dá)到最終效果。

5.第五步，對(duì)列表進(jìn)入詳情頁面進(jìn)行數(shù)據(jù)分析。

6.第六步和上面的第三步類似，通過affairsdetail.jsp對(duì)頁面進(jìn)行分析，并將數(shù)據(jù)整理完整返回給客戶端。

結(jié)合本例，這里獲取的數(shù)據(jù)有三類。

第一類是第三方系統(tǒng)通過接口返回?cái)?shù)據(jù)，將第三方返回的數(shù)據(jù)經(jīng)過服務(wù)端的處理后返回客戶端，放置到browser控件里面顯示，可以通過正則和替換等java的方法處理數(shù)據(jù)，再包裝成json格式的數(shù)據(jù)返回給客戶端。第二類，通過請(qǐng)求第三方的網(wǎng)站，根據(jù)頁面結(jié)構(gòu)進(jìn)行在服務(wù)端的數(shù)據(jù)分析。第三類，將把第三方的地址返回給客戶端，并裝載到brower控件中，通過brower控件訪問第三方數(shù)據(jù)信息。

7.第七步，把服務(wù)返回到客戶端數(shù)據(jù)，裝載到brower控件中，并進(jìn)行結(jié)構(gòu)化展示。

通過對(duì)Exmobi平臺(tái)體系結(jié)構(gòu)的研究分析，基于Exmobi中間件的高校移動(dòng)應(yīng)用能夠在多平臺(tái)輕松實(shí)現(xiàn)。利用頁面分析的方法，解決了高校信息化建設(shè)初期各部門、院系平臺(tái)不統(tǒng)一所造成的移動(dòng)化建設(shè)的困難。但是高校的龐大校內(nèi)院系、部門及其他單位的網(wǎng)站有幾百個(gè)之多，結(jié)合ExMobi中間件，我們能夠快速地對(duì)學(xué)校部門、機(jī)構(gòu)進(jìn)行移動(dòng)化建設(shè)，同時(shí)，高效地利用頁面分析的技術(shù)能夠加速移動(dòng)化的實(shí)施，便于高校移動(dòng)應(yīng)用平臺(tái)的應(yīng)用接入與業(yè)務(wù)拓展。

（作者單位為浙江大學(xué)圖書與信息中心）