基于HTML5 的Web App 的購(gòu)物網(wǎng)站設(shè)計(jì)分析

(武漢晴川學(xué)院計(jì)算機(jī)學(xué)院,湖北武漢 430000)

0 引言

為了滿足購(gòu)物網(wǎng)站的需求,企業(yè)開發(fā)了多種購(gòu)物網(wǎng)站平臺(tái),提供服務(wù)。但是,大部分購(gòu)物網(wǎng)站開放平臺(tái)為了提供快速的渲染性能,在安裝過程中存在困難、無法支持跨平臺(tái)、保安弱化等許多問題,不得不使用插件模塊。再加上,最近在網(wǎng)絡(luò)瀏覽器上宣布中斷支持插件模塊動(dòng)作的NPAPI服務(wù),導(dǎo)致基于現(xiàn)有插件的購(gòu)物網(wǎng)站開放平臺(tái)的操作出現(xiàn)了大問題。

1 HTML5的Web App的購(gòu)物網(wǎng)站重要性

自2005年Google Map服務(wù)啟動(dòng)以來,隨著GeoWeb服務(wù)在全球范圍內(nèi)的擴(kuò)散,購(gòu)物網(wǎng)站的應(yīng)用急劇增加。但是,到目前為止開發(fā)的大部分服務(wù)系統(tǒng)都是以Desktop為基礎(chǔ)的應(yīng)用軟件操作,或者在網(wǎng)絡(luò)上操作時(shí),需要另外設(shè)置Plug-in模塊,采用下一代網(wǎng)絡(luò)標(biāo)準(zhǔn)HTML 5/WebGL技術(shù)時(shí),在多個(gè)固定的信息處理中具有性能上的界限。特別是,使用Plug-in方式的情況是,Plug-in安裝時(shí)頻繁發(fā)生錯(cuò)誤的問題,不能支持cross Web瀏覽器和cross運(yùn)營(yíng)體制的限制,網(wǎng)絡(luò)上的安全變得脆弱的問題。再加上最近在谷歌等網(wǎng)絡(luò)瀏覽器上,宣布中斷對(duì)支持Plug-in 動(dòng)作的NPAPI(Netscape Plug-in Application Programing Interface)的支援,以Plug-in模塊為基礎(chǔ)操作的現(xiàn)有的第三次遠(yuǎn)程購(gòu)物服務(wù)將出現(xiàn)大問題。因此,本研究首先針對(duì)以Plug-in為基礎(chǔ)操作,以Plug-in方式,提出能夠有效提供下一代購(gòu)物平臺(tái)的設(shè)計(jì)和實(shí)施方法。具體適用于HTML 5/WebGL的下一代網(wǎng)絡(luò)標(biāo)準(zhǔn)技術(shù),可以在Windows、Linux、Mac等多種跨操作系統(tǒng)和IE、Chrome、Firefox、Safari等多種瀏覽器環(huán)境中提供購(gòu)物服務(wù),如圖1所示[1]。

圖1 開發(fā)流程Fig.1 Development Process

2 基于HTML5的Web App的購(gòu)物網(wǎng)站設(shè)計(jì)分析

2.1 基于WebGL的購(gòu)物平臺(tái)要求事項(xiàng)

采用HTML 5/WebGL技術(shù),將當(dāng)前提供的多種類型的購(gòu)物在跨平臺(tái)/跨瀏覽器環(huán)境中進(jìn)行綜合管理和呈現(xiàn)的下一代購(gòu)物以開放平臺(tái)的設(shè)計(jì)和實(shí)現(xiàn)為目的。綜上所述,不使用Plug-in模塊,包括服務(wù)器所擁有的POI(Point Of Interest)、室內(nèi)購(gòu)物,目的是通過Open API融合用戶所擁有的多種空間內(nèi)容,進(jìn)行服務(wù)的系統(tǒng)設(shè)計(jì)和實(shí)現(xiàn)。在本研究中,針對(duì)基于WebGL的購(gòu)物平臺(tái)設(shè)計(jì),提出用戶和系統(tǒng)要求事項(xiàng)、核心組件配置以及包含在各個(gè)組件中的渲染相關(guān)的主要類的圖表。購(gòu)物平臺(tái)是為了提供高水平的服務(wù),對(duì)3DS形式的室內(nèi)購(gòu)物進(jìn)行下載,并將這些信息整合起來進(jìn)行渲染。另外,通過Mash Up,定義了能夠融合用戶提供的SHP、KML、GPX等向量形式和PNG、JPG等圖像形式的空間內(nèi)容。最后,畫面上由用戶產(chǎn)生的放大、縮小、移動(dòng)、選擇等多種導(dǎo)航定義處理風(fēng)險(xiǎn)。為了彌補(bǔ)WebGL緩慢的渲染速度問題,將提供信息的等級(jí)與現(xiàn)有的相同,設(shè)定在等級(jí)15以上[2]。

2.2 數(shù)據(jù)顯示模塊設(shè)計(jì)

POI信息也考慮到性能效率性,與三維地形及建筑物渲染方式相同,構(gòu)成了類似的基于扇區(qū)進(jìn)行管理的類圖。只是,增加了LayerInformationPOI、POIParser、POIRender的等級(jí),以處理POI信息分層管理、POI信息存儲(chǔ)和管理、POI信息分層。利用這些類的POI信息渲染的序列圖,在用戶2D 向量客體顯示模塊設(shè)計(jì),除了在服務(wù)器上提供的各種三維購(gòu)物之外,還應(yīng)提供用戶所擁有的多種形式的二維客體在網(wǎng)絡(luò)上融合表現(xiàn)的功能,以支持SHP、KML、GPX形式的二維客體的融合渲染，如圖2 所示。

從構(gòu)成來看,主要等級(jí)大致由SHP、KML、GPX數(shù)據(jù)的儲(chǔ)存管理的Content Class和為了破解的Parser類構(gòu)成?？芍秩拘蛄泻?jiǎn)單地由二維客體模型生成、數(shù)據(jù)請(qǐng)求、拼接和WebGL渲染順序構(gòu)成。在這里,信息通過與數(shù)據(jù)的線性信息進(jìn)行整合后,會(huì)進(jìn)行渲染,因此存在需要很多時(shí)間的問題。因此,為了支持大容量第二次遠(yuǎn)程購(gòu)物的快速渲染,提出的平臺(tái)在進(jìn)行渲染時(shí),以模型為基準(zhǔn),在5以下,10以下,以11以上的3個(gè)階段為基準(zhǔn),設(shè)計(jì)一個(gè)系統(tǒng),使精密度逐漸降低的用戶向量信息進(jìn)行渲染。也就是說,根據(jù)三種LOD標(biāo)準(zhǔn),分別劃分為具有不同精密度的三個(gè),提前進(jìn)行存儲(chǔ)管理,在進(jìn)行實(shí)際渲染時(shí),可以選擇不同的精密度數(shù)據(jù)。利用HTML 5/WebGL技術(shù)實(shí)現(xiàn),通過Windows、Unix、Linux、Mac等跨操作系統(tǒng)的環(huán)境和IE、Chrome、Firefox、Safari等跨瀏覽器環(huán)境和Android、iOS等移動(dòng)環(huán)境中也有可以使用的優(yōu)點(diǎn)。這樣的下一代跨平臺(tái)可以改善只有Windows環(huán)境的Plug-in模塊才能操作的現(xiàn)有購(gòu)物平臺(tái)的缺點(diǎn)。同時(shí),通過對(duì)購(gòu)物平臺(tái)的Open API的追加開發(fā)和多樣的示范運(yùn)營(yíng),驗(yàn)證是否可以用作平臺(tái)服務(wù)。購(gòu)物平臺(tái)可以支持的多種購(gòu)物和收集方式(類型圖、檔案、網(wǎng)絡(luò))、渲染和網(wǎng)絡(luò)服務(wù)的開放平臺(tái)的引擎部分,以及概念上可以在跨操作系統(tǒng)和瀏覽器中操作。正在進(jìn)行渲染,平臺(tái)展示了以3DS形式構(gòu)成的地鐵歷史的個(gè)別渲染示例。POI數(shù)據(jù)渲染模塊體現(xiàn)在V世界,POI數(shù)據(jù)也被存儲(chǔ)為多等級(jí)的瓷磚集合結(jié)構(gòu),所提出的平臺(tái)體現(xiàn)了這種POI數(shù)據(jù)整合渲染功能[3]。附加提出的平臺(tái)可以通過POI層管理,用戶選擇性地設(shè)置POI層的激活和非活動(dòng)。用戶所擁有的KML數(shù)據(jù)的更新預(yù)制。除此之外,還實(shí)現(xiàn)了多種用戶活動(dòng)處理的模塊。最后,平臺(tái)采用HTML 5/WebGL 技術(shù),實(shí)現(xiàn)了DDS、JPG、BIL、XDO、3DS、Shape、KML、GPX等多種形式的信息的融合渲染模塊,以No Plug-in方式,跨瀏覽器和跨操作系統(tǒng)購(gòu)物服務(wù)具有可能的優(yōu)勢(shì)。特別是,更容易地整合目前不同的數(shù)據(jù)形式和儲(chǔ)存結(jié)構(gòu)構(gòu)成的信息的渲染功能,實(shí)現(xiàn)了渲染模塊,預(yù)計(jì)以后實(shí)現(xiàn)Seamless的綜合購(gòu)物服務(wù)，如圖3所示[4]。

圖2 代碼生成Fig.2 Code generation

圖3 用戶頁面Fig.3 User page

2.3 上下文感知

互聯(lián)網(wǎng)上充斥著各種各樣的信息,包括即時(shí)新聞、音樂、廣告等,然而,用戶會(huì)被一下子呈現(xiàn)在網(wǎng)頁上的太多信息所淹沒。本文提出了一個(gè)上下文感知的移動(dòng)網(wǎng)頁瀏覽系統(tǒng),以減少用戶分心,最終提高用戶體驗(yàn)[5]。首先,我們通過嵌入在手機(jī)中的傳感器捕捉用戶上下文,例如時(shí)間和位置信息。第二,我們推薦相關(guān)信息,并根據(jù)用戶配置文件和當(dāng)前上下文調(diào)整網(wǎng)頁。我們利用HTML5 實(shí)現(xiàn)了一個(gè)上下文感知的web信息訪問原型。通過結(jié)合上下文信息來分析用戶反饋后,做出用戶喜好預(yù)測(cè),將可能受喜愛的信息或?qū)嶓w推薦給用戶。使用推薦系統(tǒng)一方面幫助用戶快速找到商品,改善了用戶購(gòu)物體驗(yàn)同時(shí)提升了用戶忠誠(chéng)度;另一方面也提高了賣家的交叉銷售能力和成交轉(zhuǎn)化率。第一,針對(duì)智能購(gòu)物中心的應(yīng)用場(chǎng)景,抽取購(gòu)物記錄等隱式用戶反饋,并將其映射為用戶喜好,在應(yīng)用傳統(tǒng)相似度算法的基礎(chǔ)之上,提高了推薦準(zhǔn)確率[6]。第二,通過使用人口統(tǒng)計(jì)學(xué)特征與決策樹算法,系統(tǒng)能夠較好地處理歷史記錄較少或缺失的用戶喜好提取問題[7]。

3 結(jié)語

在本文中,以現(xiàn)有的插件方式操作的購(gòu)物平臺(tái)服務(wù)中發(fā)生的安裝錯(cuò)誤問題,為了解決跨瀏覽器/操作系統(tǒng)支持不可能的問題,以及安全侵害問題等,提出了以下一代網(wǎng)絡(luò)標(biāo)準(zhǔn)備受矚目的基于HTML 5/WebGL 的下一代購(gòu)物平臺(tái)軟件的設(shè)計(jì)和實(shí)施事項(xiàng)。特別是,體現(xiàn)了目前使用的多種形式的實(shí)際購(gòu)物的融合渲染功能,在實(shí)驗(yàn)室水平上可以確認(rèn),以現(xiàn)有插件為基礎(chǔ)的服務(wù)可以以網(wǎng)絡(luò)標(biāo)準(zhǔn)代替,提出購(gòu)物平臺(tái)的渲染相關(guān)的多種功能測(cè)試。