面向移動商務信息展現技術架構的研究

欒 曉 宇

(上海煙草集團有限責任公司　上海 200082)

?

面向移動商務信息展現技術架構的研究

欒 曉 宇

(上海煙草集團有限責任公司上海 200082)

摘要針對現有移動端商務智能應用中信息展現的局限，提出一種兼顧跨平臺需求和原生語言優勢，基于HTML5技術的插件式界面可配置的信息技術架構，以實現展示界面的個性化定制和插件的跨平臺應用。同時提出一種數據離線應用系統技術H-OAAS(Html5-Offline Applications and Storage)，以實現在離線情況下移動商務系統應用仍然可以正常運行。最后，通過實際項目驗證了上述技術架構在功能上和性能上的可行性。

關鍵詞移動終端商務智能數據離線HTML5插件式

0引言

近年來隨著移動網絡的快速發展及智能手機和平板電腦等移動設備的普及，移動設備逐漸成為人們連接互聯網的首選。通過移動網絡使得人們可以不受時間和地域的限制，隨時隨地享受移動網絡給人們帶來的樂趣和便捷服務。

從移動應用的類型上，一般可以分為普適應用、商務應用和專項應用。其中：普適應用面向的是一般的大眾，滿足大眾在日常的生活需求，如點評網、大麥網等推出的移動應用；商務應用主要面向的是企業用戶，多用來滿足在工作中的業務操作需求，比如移動OA、企業移動門戶等移動應用；專項應用則主要以工具為主，用來滿足用戶某個方面的應用需求，如畫筆類、照片處理類等移動應用。而本文所設計的面向移動商務信息展現技術架構，是商務移動應用中的重要組成部分，通過移動即商務智能BI(BusinessIntelligence)的應用，使企業的管理者能夠更加方便的獲取信息，進行決策。

從目前商務移動應用軟件上來看，主流的應用還主要是由各BI展現工具的廠商所提供的產品類軟件，其主要特點如下：

? 廠商自有的BI展現工具在移動終端的擴展，其圖形與報表與PC端雷同，不能體現移動應用的需求；

? 移動BI應用通過原生語言的方式對不同的手機操作系統生成相對應的發布包；

? 移動BI應用所提供的二次開發功能有較大局限，不能滿足企業的移動應用需求。

本文所研究的移動BI信息展現技術架構是在仔細調研了實際企業的需求，再參考廠商的移動BI的產品功能的基礎上進行的，整個體系架構有以下的特點：

? 獨立成體系，不依托于任何的軟件產品；

? 采用原生語言與HTML5混編的模式進行開發；

? 實現展現插件的跨平臺，保證不同移動終端的展現內容與效果統一，便于企業進行規范；

? 加強離線應用，滿足企業移動應用的需求。

1當前企業級移動應用需要解決的問題

隨著移動互聯軟硬件技術的不斷發展，移動應用也在快速融入企業的信息化系統建設進程中。如今，有相當多的企業也在根據自身發展的要求，設計與實施滿足自身需求的企業級移動互聯應用。

各類移動應用在企業中不斷的投入使用，使用戶可以不受地點和時間的限制，隨時獲取所需的信息，但各類企業的移動應用仍然面臨著以下問題。

1.1移動設備的局限

移動設備主要是各種智能手機和各類平板電腦，這些便攜式的設備給我們帶來應用方便的同時，也存在著由于操作系統不同而導致的應用跨平臺性不強、通用性差等問題。所以針對不同的操作系統必須做定制開發。

1.2移動信息展現的局限

移動應用以其界面設計新穎，用戶交互貼心而著稱，但BI系統的傳統優勢在于在一個界面上提供盡可能多的信息，而移動設備本身的界面大小受到了限制；同時，大部分的移動應用面向大眾用戶，提供的應用內容是統一的，而作為企業級的BI應用，必須考慮到各種用戶的不同權限和需求，能夠針對不同的用戶提供不同的應用內。

1.3移動網絡的局限

雖然移動網絡無處不在，但相對于有線網絡，移動網絡仍然存在帶寬低、時延長、信號不穩定、間歇性連通等局限。企業的BI應用需要有效地應對移動網絡延遲，甚至無網絡的情況，保證應用在處于離線狀態時仍然可用。

本文主要介紹一種適合移動應用商務智能信息展現系統的技術架構及其實現方案。通過基于HTML5[1,2]技術的信息展現插件設計，能夠部分解決跨平臺的通用性問題。通過對展現界面可配置的設計，可以部分滿足個性化信息展現的需求。通過對數據離線方式的設計H-OAAS，使得應用系統在無網絡的情況下能夠保證用戶的使用，并在網絡通暢時能夠及時的更新信息。

2移動商務智能展現系統的架構設計與特色

2.1系統架構簡介

整個系統設計的目標主要針對上文中所總結的問題，需要解決跨平臺，可配置，可離線的局限。圖1中給出了系統架構的示意圖。

圖1　系統架構圖

從圖1中可以看出，系統由移動設備客戶端和服務器端組成，客戶端和服務器端之間采用HTTP/HTTPS協議進行數據交互。服務器端由Java語言實現，采用J2EE架構，負責維護插件及業務信息，以WebService方式供客戶端調用?？蛻舳苏w采用原生應用外框[3-6]+HTML5數據插件的技術方案。移動端應用的框架使用原生方式進行開發，可以達到流暢高效的用戶交互效果，同時為信息展示插件提供穩定的運行環境和展示平臺。

應用層由插件、原生界面框架、插件管理模塊和Net服務模塊四部分組成。

插件主要采用HTML5技術實現。通過插件生成Web程序，使用HTML5API實現聯機和脫機模式下與應用程序進行交互的能力[7]。同時也可以滿足展現模塊的跨平臺復用，以及插件的快速組合部署的要求；對于極少數有特殊要求的插件，采用原生方式實現。同時通過界面配置文件，實現信息展示界面的個性化。

原生界面框架主要負責界面的展示。插件庫展現時會調用插件管理模塊獲取插件信息，通過Net服務模塊中的H-OAAS(數據離線)模塊與云端進行通信，獲取相關的業務數據，以參數形式將數據傳遞給展現模塊，最終在移動設備上進行展示。

插件管理模塊主要提供插件的查詢、更新等功能。查詢功能主要為原生界面框架提供插件信息，更新功能會在服務器端有插件更新時，調用Net服務模塊去更新插件。

Net服務模塊提供統一的網絡接口，負責與服務器端通信，主要實現兩個功能：(1) 同步新的插件以及相應的配置信息；(2) 通過H-OAAS模塊將最新的數據同步到移動設備，成為離線的數據。

整個系統在設計時考慮了后續的管理與擴展，主要通過配置文件的方式，方便系統今后進行功能或插件上的擴充。

2.2系統功能特點

1) 展現模塊跨平臺應用跨平臺功能設計的目標是實現展現模塊在不同類型的移動設備上快速部署，減少重復開發工作，來縮短實施周期，降低系統維護難度。本系統選擇HTML5技術實現信息的展示功能，利用其跨平臺的特性，統一不同終端下的展現風格，提升用戶體驗。同時，考慮到原生語言在各自操作系統下的對硬件操作和參數獲取的性能優勢，采用了混合編程的方式，對展現模塊進行了封裝，方便原生語言進行調用，使整個應用達到兼顧性能和跨平臺的目標。

2) 展現模塊插件化本功能將需要展現的數據與展現的形式分離，在實現時只需開發相關展現插件，對每個插件的接口制定統一的規范。最終，在應用時只需插件自由組合，加入相應的業務數據，即可快速搭建應用模塊。

3) 展現內容可配置針對用戶的展現需求，無需重新升級安裝移動客戶端，由系統管理員配置用戶的界面內容或布局等，并將配置信息傳輸到相應的移動端設備，就可以實現頁面內容和布局的變化。不僅有效降低了界面更新所帶來的網絡流量，也提高了系統的可用性，為不同的用戶群提供不同的個性化應用界面。

4) 數據離線功能數據離線功能是針對移動網絡的局限而設計的，可通過移動設備本地數據展現內容。當移動網絡通暢時，在移動應用啟動的情況下，本系統會自動下載最新數據，并保存在移動設備上；當網絡出現問題時，系統就直接使用當前保存在移動設備中的數據，保證系統在有網絡和無網絡的情況下均能使用。

3核心功能設計詳解

整個系統設計中，基于HTML5技術的插件設計，界面可配置的設計和H-OAAS設計是整個展現系統的關鍵技術，下面分別進行描述。

3.1 HTML5插件設計

在本設計中，著重強調了展現模塊在移動設備上的復用和跨平臺，所以，對于整個前端應用的架構，又做了如圖2的細化。

圖2　移動端信息展示技術架構圖

從圖2的技術架構中，可以看出，在移動端的應用開發中，使用了HTML5和ObjectC或Java的混合編程的方式。原因是通過技術測試，發現純HTML5開發的應用雖然很好地實現了跨平臺的功能，但在展示的時候響應速度較低，需要比較長的時間才能完整地載入整個頁面。而純粹使用IOS的ObjectC開發的應用，雖然在響應效率和使用感受上大大超過了HTML5，但只能在蘋果公司的設備上使用，不具備良好的跨平臺能力，但表現出來的優勢是對設備的硬件操作的響應速度以及對IOS系統的匹配程度要遠遠高于HTML5技術。所以，在開發方式上選擇了混合編程的開發方式。

由于采用了混合編程的方式，所以在系統設計中必須要考慮如何對技術模塊進行拆分來盡可能保證較好的跨平臺能力和較充分利用好硬件和操作系統的特點。通過對整個應用展現的進一步分析可知，商務智能系統的主要功能是信息展現，并不涉及業務操作等流程性的工作。所以，第一步將業務指標展現與頁面內容組合進行了拆分，使用HTML5技術來完成業務指標的展現，使用原生語言來完成頁面內容組合、遠程通信、地理定位等與硬件或操作系統相關的工作；通過對指標展現的進一步分析，將數據與展現形式進行分離，將數據參數化，傳遞給HTML5開發的圖形，實現圖形與業務指標可以根據實際的需求進行選擇和快速組合。

基于上述分析的基礎上，系統提出了插件化的概念，即使用HTML5技術開發多種圖形插件。通過插件的參數接口來控制展現的業務指標，通過原生外框架來進行插件展示的布局組合。用戶查看的頁面文件是由一個桌面、一個界面配置文件及多個插件組合而成。插件采用HTML5進行開發，每個插件包含的是一個或多個業務指標信息，可以被桌面動態載入。將信息展現所用到的圖形、表格等展現形式通過HTML5做成相應的固定長寬比(1∶1或1∶2)的插件。然后將不同的插件進行組合，形成用戶查看信息時的界面文件，其中的插件布局信息通過界面配置文件進行記錄和管理，最后將界面文件裝入原生界面框架中，在移動設備上進行展示。

1) 插件主要實現的功能和效果插件實現多個頁面自動切換以及動畫效果；點擊手勢/拉開手勢跳轉詳細界面以及放大切換的動畫效果；支持插件跳轉幫助界面以及翻轉動畫效果。

2) 插件存放和更新插件在服務器端以zip包形式存在，zip名稱通過插件的唯一ID+版本號的方式確定，例如名稱為“spcx_1.0.zip”意思為商品產銷1.0版本的插件。客戶端會預置一部分最常用的數據插件，也可以從服務器端下載本地尚未存儲的插件。插件在客戶端采用文件夾的形式存在本地硬盤，命名規則與zip包的名稱保持一致。客戶端插件的更新方式是從云端下載最新版的插件，將本地舊版本插件替換掉。

3) 插件結構插件由配置文件和頁面樣式文件組成。

配置文件采用JSON格式，其中包括該插件的各種基本信息：插件名稱、插件唯一ID、版本號、皮膚風格ID、幫助頁路徑、文字模式內容頁路徑、圖表模式內容頁路徑、描述信息、插件分組信息等基本配置信息；這些數據用來升級插件，記錄插件使用情況和支持換膚等個性化定制的需要。

頁面樣式文件包含頁面的CSS、HTML、JS。這些文件支持插件在客戶端上顯示和簡單交互功能。

通過插件技術，進一步將布局與信息展示模塊進行分離，使界面布局能夠按照用戶的需求通過“搭積木”的方式進行配置。而插件也可以在不同的界面中重復調用，可以通過參數來控制插件中顯示的數據、皮膚等。從而使整個系統的可配置程度大大提高。

3.2界面配置設計

界面配置設計主要是在圖2中的“HTML5的原生服務支持”層中的“HTML5桌面個性化信息”模塊中使用。由系統維護人員，根據不同用戶群的不同需求，可以有兩種個性化界面的實現方式：(1) 為每一類的用戶群設計不同的展現頁面；(2) 當用戶數量小于10人的時候可以為每一個用戶設計個性化的展現頁面。系統將界面的配置信息通過配置文件下發到各移動終端設備，在終端上的應用將按照圖3的流程進行信息展示。

圖3　配置實例執行流程圖

信息展現模塊讀取需要展示的插件的配置文件和業務數據，將這些信息轉化成初始化參數，其中配置文件內容包括此模塊所使用的桌面、插件及插件位置，配置文件使用XML的格式；通過移動終端的原生語言對XML文件進行解析，根據初始化參數讀取相應的桌面、插件文件內容，將文件內容和初始化參數合并生成一個頁面文件。

頁面文件根據初始化參數中的插件位置信息，調用每個插件的位置設置方法，設置每個插件的位置；同時將初始化參數中的業務數據通過調用每個插件的業務數據設置方法，將業務數據傳入對應插件。

頁面文件調用插件的初始化內容方法，系統自動加載相應的移動設備本地的離線數據，完成插件顯示內容的初始化。

信息展現模塊通過移動原生語言載入頁面文件，將內容呈現給用戶。

當用戶離開或關閉應用時，信息展現模塊通過移動原生語言將頁面文件刪除。

3.3H-OAAS設計

本系統設計中的一項重要設計就是實現展示用數據的離線，使得展現信息的Web應用層再不僅僅只具有頁面的顯示能力，還將具備把遠程數據同步到移動終端，并在本地對數據結構化，使數據便于訪問和查詢[8,9]。

H-OAAS是基于HTML5技術的信息離線系統，通過H-OAAS實現服務器端將最新的數據下發給移動設備，實現離線數據更新的功能。包括客戶端和服務器端2個主要組成部分，在數據傳輸過程中采用HTTPS協議，如圖4所示。

圖4　H-OAAS架構

由圖4可知，H-OAAS最主要的功能就是持久化數據緩存層的實現，該層包括狀態監測、數據同步和數據緩存3個模塊。

1) 狀態監測：檢測瀏覽器是否在線，根據在線或離線的狀態進行對應處理。在HTML5中，提供了navigator.onLine屬性表示當前是否在線以及online/offline事件捕獲網絡狀態變化情況，當狀態發生變化時，navigator.onLine屬性值為true時，表示在線，否則為離線。

2) 數據同步：選擇以服務器端的修改時間為時間戳，本地時間戳以服務器時間戳加一個bool型更改標記。如果本地記錄的時間戳與服務器端的時間戳一致，則說明從上次同步到現在，服務器端的數據沒有發生變化。如果本地修改標記為true，則說明本地數據要比服務器端數據新，則需要將本地的數據更新到服務器端；如果本地修改標記為false,且服務端的時間戳比客戶端的時間戳大，則說明服務器端的數據比客戶端的數據新，需要將服務器端的數據同步到本地。

3) 數據緩存：H-OAAS采用WebStorage實現客戶端持久化緩存。在WebStorage中，包括了SessionStorage和LocalStorage兩種模式。SessionStorage只是在頁面會話期間保持數據可用，LocalStorage可持久化存儲數據。

4實驗及結果分析

以上所描述的架構設計與功能設計，在某企業的移動運營分析平臺項目中進行了實施，并取得了良好的效果。

4.1跨平臺測試結果

本項目中使用了兩種移動終端設備：IPAD2和三星的T211。兩種設備上由于不同的屏幕大小，設計了不同的界面。具體開發的時候，IPAD應用使用的是OBJECTC和HTML5的混合開發，三星的T211使用的是安卓操作系統，使用的是Java和HTML5的混合開發。其中的HTML5圖形插件是可以跨平臺使用的，具體的界面截圖見圖5和圖6所示。

圖5　IPAD應用界面部分截圖

圖6　三星T211應用界面部分截圖

在IPAD2和三星T211的兩種終端上的實際應用開發中涉及了儀表盤、柱狀圖和折線圖。圖形的實現使用HTML5技術，定位，頁面布局等功能使用原生語言開發。最終的實現結果證明，使用HTML5技術設計的展現插件，很好地實現了跨平臺的需求。同時，兩種終端的平臺上，展現的圖形從風格到配色都保持一致，保證了不同移動終端下的展現時的規范和統一，避免了由于開發人員的差異而導致的展現界面的不一致。

4.2個性化信息展現測試結果

圖5和圖6的界面設置是通過配置文件，從服務器端下載到移動設備。由移動設備上的APP應用解析配置文件，兩位用戶使用兩種不同的終端，關注不同的內容，系統管理員通過配置管理，方便的實現了個性化應用界面。

4.3離線數據存儲測試結果

對于離線數據存儲，實際項目中存在兩個場景。

項目場景一是離線數據的讀取。在移動設備斷網的情況下，用戶使用本應用時，緩存檢測到離線事件，直接訪問設備上的緩存數據，進行界面展示。

項目場景二是聯線數據的更新。在移動設備斷網的情況下，對應用服務器端的數據進行更新，當網絡恢復正常后，本應用自動下載最新數據，并更新設備上的緩存數據。

由于系統設計的這部分功能是通過后臺自動進行的，所以沒有界面可以展示，實測下來兩個場景均順利實現。

表1給出的是查詢某品牌商品的銷售量，將采用H-OAAS的應用同采用實時查詢方式的應用進行對比。前者由于不依賴網絡，具有更快的速度，后者在網絡狀況良好的情況下，接近前者的速度。

表1　兩種不同開發模式下的查詢對比

在移動網絡應用中，許多查詢結果所得到的數據是重復的，重復的查詢會給系統帶來一定的壓力。H-OAAS的使用減輕了服務器端的壓力，提高了前端性能。從表1中可以看出H-OAAS的應用提高了用戶請求的響應效率，同時由于采用數據離線存儲的機制也大大減輕了服務器實時響應用戶操作的壓力。

5結語

基于當前移動應用在使用過程中的局限性，本文提出移動商務智能信息展現系統的應用框架，較好地解決了目前遇到的問題，使信息的分析結果能夠隨時隨地的為用戶提供支撐和服務。該系統目前已經在國內的一家大型企業中正式投入使用，為該企業的管理層提供整個企業的運營信息分析。

在后續的工作中，還將繼續針對系統的核心功能進行深入的研究和優化：

1) 將繼續研究HTML5插件的設計與實現，進一步拓展展現模塊的跨平臺能力，如對微軟的手機操作系統(WindowsPhone)的支持；

2) 為用戶提供自定義界面的功能，由目前的由系統管理員對用戶界面進行配置轉變為由最終用戶自行對展現界面進行配置；

3) 進一步研究離線數據的壓縮與解壓縮方式，降低數據傳輸時所需要的流量，提高移動設備對壓縮數據的解壓效率，提升系統的響應效率。

未來，還將在系統中細化權限機制，針對不同權限的用戶提供行列級的權限管理功能。增加用戶使用行為的記錄功能，用于后續研究用戶的使用習慣，使系統的功能更加完整，并為今后不斷的提升系統的用戶體驗，打下良好的基礎。

參考文獻

[1] 羅森,夏普.HTML5用戶指南[M].劉紅偉,譯.北京:機械工業出版社,2011.

[2]PeterLubbers,BrianAlbers,FrankSalim,etal.HTML5高級程序設計[M].2版.李杰,柳靜,劉淼,譯.北京:人民郵電出版社,2010.

[3]RetoMeier.Android4高級編程[M].3版.佘建偉,趙凱,譯.北京:清華大學出版社,2013.

[4] 楊宏焱.企業級iOS應用開發實戰[M].北京:機械工業出版社,2013.

[5]GeneBacklin.iPhone&iPad高級編程[M].岳虹,凌沖,譯.北京:清華大學出版社,2012.

[6] 關東升.iOS網絡編程與云端應用最佳實踐[M].北京:清華大學出版社,2013.

[7] 施偉,王碩蘋,郭鳴,等.跨平臺移動應用中間適配層設計與實現[J].計算機工程與應用,2014,50(16):39-44.

[8] 羅大暉,陳娟.基于HTML5的Web離線應用研究與實現[J].計算機應用與軟件,2012,29(12):262-264,305.

[9]DewsburyR.GoogleWebToolkit應用程序開發[M].秦緒文,李松峰,譯.北京:機械工業出版社,2008.

[10] 陸晨,馮向陽,蘇厚勤.HTML5WebSocket握手協議的研究與實現[J].計算機應用與軟件,2015,32(1):128-131,178.

[11]NathanYau.鮮活的數據:數據可視化指南[M].向怡寧,譯.北京:人民郵電出版社,2012.

RESEARCH ON TECHNICAL ARCHITECTURE OF MOBILE COMMERCE-ORIENTEDINFORMATIONDISPLAY

Luan Xiaoyu

(Shanghai Tobacco Group Co.,Ltd.,Shanghai 200082,China)

AbstractIn light of the limitation of information display in current mobile commerce intelligence application, the author proposes a HTML5 technology-based configurable information technical architecture with pluggable interfaces, which reconciles the cross-platform requirements and native language advantages, to implement the customisation of display interface and the cross-platform application of plug-in modules. Apart from that, the author presents a technology of data offline application system H-OAAS (Html5-offlice applications and storage) to realise the proper operation of the mobile commerce system even in off-line situation. Finally, by carrying out practical projects, the author verifies the feasibility of the above technical architecture in both function and performance.

KeywordsMobile terminalsBusiness intelligenceData offlineHTML5Plug-in

收稿日期：2014-12-24。欒曉宇，工程師，主研領域：計算機信息技術。

中圖分類號TP3

文獻標識碼A

DOI:10.3969/j.issn.1000-386x.2016.06.007