黃萍 曹璽

摘要：在剖析混合模式移動(dòng)應(yīng)用開發(fā)相關(guān)技術(shù)基礎(chǔ)上，從系統(tǒng)架構(gòu)和系統(tǒng)設(shè)計(jì)等方面闡述了運(yùn)用混合模式移動(dòng)應(yīng)用開發(fā)技術(shù)、數(shù)據(jù)采集技術(shù)以及數(shù)據(jù)可視化技術(shù)相結(jié)合，開發(fā)設(shè)計(jì)跨iOS、Android、手機(jī)Web平臺(tái)的電影產(chǎn)業(yè)數(shù)據(jù)可視化應(yīng)用的過程，為Hybrid App的可視化開發(fā)提供一定的參考依據(jù)。

關(guān)鍵詞：混合模式移動(dòng)應(yīng)用開發(fā);數(shù)據(jù)可視化;電影產(chǎn)業(yè)數(shù)據(jù);跨平臺(tái);移動(dòng)應(yīng)用

中圖分類號(hào)：TP311? ? 文獻(xiàn)標(biāo)識(shí)碼：A? ? ? 文章編號(hào)：1009-3044（2018）36-0084-03

Abstract： After analyzing the technology related to the development of hybrid mobile applications， this paper expounds the process of developing and designing the visualization application of movie industry data across iOS， Android， and mobile Web platforms from the aspects of system architecture and system design by combining the hybrid mode mobile application technology， data acquisition technology and data visualization technology. It provides a certain reference for the visual development of Hybrid App.

Key words：hybrid app; data visualization; film industry data; mobile applications; cross-platform

1 背景

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的廣泛應(yīng)用，在新技術(shù)革命與產(chǎn)業(yè)變革的歷史性交匯時(shí)期，創(chuàng)新3.0時(shí)代正快步到來。創(chuàng)意產(chǎn)業(yè)被視為“知識(shí)經(jīng)濟(jì)的頂點(diǎn)”，在文化創(chuàng)意產(chǎn)業(yè)的發(fā)展領(lǐng)域中，影視產(chǎn)業(yè)則占據(jù)著最重要的發(fā)展地位[1]。2013年全國(guó)電影在線售票份額只占全國(guó)總票房217億的22.3%，2015年則超50%，達(dá)到65.4%，而2017年全國(guó)電影在線售票份額已經(jīng)占據(jù)了全國(guó)總票房的81%，由此可見，電影在線購(gòu)票方式已經(jīng)從一種消費(fèi)行為轉(zhuǎn)變成了用戶習(xí)慣，“互聯(lián)網(wǎng)+”在中國(guó)電影市場(chǎng)層面得到了真正的體現(xiàn)。

因此，基于移動(dòng)App的大數(shù)據(jù)可視化應(yīng)用為影視從業(yè)人員和廣大觀眾了解電影產(chǎn)業(yè)相關(guān)數(shù)據(jù)提供了一個(gè)更為便捷、直觀、有效的方式?，F(xiàn)如今Hybrid App開發(fā)模式作為一個(gè)兼具跨平臺(tái)、開發(fā)周期短、開發(fā)成本小、性能好等特性的新興模式正受到著廣大開發(fā)者的喜愛，采用該種開發(fā)模式進(jìn)行電影產(chǎn)業(yè)大數(shù)據(jù)可視化移動(dòng)App的開發(fā)更加快速、高效。

2 相關(guān)技術(shù)與開發(fā)工具介紹

2.1 Hybrid App

目前主流的移動(dòng)應(yīng)用開發(fā)方式可分為Native App、Hybrid App和Web App三種。Hybrid App是Native App和Web App的中庸產(chǎn)物，既具有Native App良好用戶體驗(yàn)的特點(diǎn)，又具有Web App跨平臺(tái)的特性。Hybrid App是一種十分具有潛力的移動(dòng)應(yīng)用開發(fā)模式，按網(wǎng)頁(yè)技術(shù)與原生應(yīng)用技術(shù)的混合程度可以分為三類：多View混合型、單View混合型以及Web主體型[2]。

2.2 Ionic+Cordova

Ionic是用于開發(fā)Hybrid App和Progressive Web App的開源的、免費(fèi)的代碼庫(kù)，具有性能好、設(shè)計(jì)美觀、跨平臺(tái)等特點(diǎn)。Ionic內(nèi)置了很多UI組件來幫助開發(fā)者開發(fā)Hybrid App或PWA[3]，每款組件都具有iOS、Android、Windows Phone三種平臺(tái)樣式。該項(xiàng)目中使用的Ionic Native是Ionic對(duì)Cordova插件的TypeScript語(yǔ)言封裝，更加方便易用。

Cordova是一款允許開發(fā)者使用標(biāo)準(zhǔn)Web技術(shù)（HTML5、CSS3、JavaScript）進(jìn)行跨平臺(tái)開發(fā)的開源移動(dòng)框架[4]。Cordova應(yīng)用由三部分組成：HTML渲染引擎、Web應(yīng)用層、Cordova插件。Cordova框架不提供任何UI組件庫(kù)或MV*框架，它只提供所需的運(yùn)行時(shí)，所以需要將Cordova框架與其他諸如Ionic、Onsen UI、Framework7等的UI框架相結(jié)合能夠更高效、出色的開發(fā)出一款Hybrid App。

2.3 Charles+Chart.js

該項(xiàng)目使用網(wǎng)絡(luò)抓包工具Charles來進(jìn)行影業(yè)相關(guān)數(shù)據(jù)的采集。它是一個(gè)http協(xié)議調(diào)試的代理工具，能夠記錄并檢查電腦和互聯(lián)網(wǎng)之間的http通訊、斷點(diǎn)設(shè)置以及所有進(jìn)出Charles數(shù)據(jù)。利用Charles的網(wǎng)絡(luò)抓包技術(shù)對(duì)國(guó)內(nèi)某電影票務(wù)系統(tǒng)進(jìn)行HTTPS請(qǐng)求抓包，獲取到電影資訊、電影詳情、影院信息、預(yù)告片等諸多接口。

數(shù)據(jù)可視化技術(shù)是大數(shù)據(jù)獲得完整數(shù)據(jù)視圖和發(fā)現(xiàn)數(shù)據(jù)價(jià)值的一條重要途徑，將數(shù)據(jù)作為圖形中的可視化對(duì)象來傳達(dá)數(shù)據(jù)或信息的技術(shù)，可以認(rèn)為是大數(shù)據(jù)的“前端”，其目的是向用戶更高效、更清晰的傳達(dá)信息。該項(xiàng)目采用數(shù)據(jù)可視化工具Chart.js來完成數(shù)據(jù)的可視化顯示，它是一款基于JavaScript語(yǔ)言的輕量級(jí)開源數(shù)據(jù)可視化工具，使用canvas元素來展示各式各樣圖表，支持折線圖、柱形圖、雷達(dá)圖、餅圖、環(huán)形圖等，所以很適合基于移動(dòng)端的可視化實(shí)現(xiàn)。

3 跨平臺(tái)的電影產(chǎn)業(yè)數(shù)據(jù)可視化APP開發(fā)

3.1 項(xiàng)目框架結(jié)構(gòu)

電影產(chǎn)業(yè)大數(shù)據(jù)可視化應(yīng)用要求能在iOS平臺(tái)、Android平臺(tái)以及手機(jī)Web端運(yùn)行，且具有美觀的用戶界面以及良好的操作方式與交互性能。但可視化系統(tǒng)并不是靜態(tài)的、一成不變的，且該可視化系統(tǒng)是基于移動(dòng)端的，這對(duì)該系統(tǒng)的性能提出了不小的挑戰(zhàn)。

該電影產(chǎn)業(yè)大數(shù)據(jù)可視化Hybrid App整體采用Cordova框架，主體為Web View，iOS端由UIWebView或WKWebView實(shí)現(xiàn)，Android端由Webview或Crosswalk實(shí)現(xiàn)。系統(tǒng)的結(jié)構(gòu)框架圖如圖1所示。

系統(tǒng)的Web應(yīng)用層使用基于HTML、TypeScript、Sass語(yǔ)言的Ionic框架實(shí)現(xiàn)，包含了主要的業(yè)務(wù)邏輯代碼，config.xml文件提供了App的相關(guān)信息以及影響App運(yùn)行的具體參數(shù)。插件層還使用相機(jī)插件、文件插件、文件傳輸插件等Cordova插件幫助Web應(yīng)用層調(diào)用操作系統(tǒng)API，config.xml文件中也將包含對(duì)這些Cordova插件的配置信息。最后系統(tǒng)采用JetBrains公司旗下的WebStorm開發(fā)工具開發(fā)，iOS平臺(tái)使用Xcode工具打包，Android平臺(tái)則使用Android Studio工具打包。

3.2 項(xiàng)目模塊設(shè)計(jì)與實(shí)現(xiàn)

該電影產(chǎn)業(yè)大數(shù)據(jù)可視化Hybrid App共劃分為首頁(yè)模塊、電影模塊、影院模塊、數(shù)據(jù)模塊、個(gè)人模塊五大模塊，系統(tǒng)功能結(jié)構(gòu)模塊如圖2所示。

3.2.1 首頁(yè)模塊

首頁(yè)模塊包含正在熱映電影、即將上映電影的展示以及實(shí)時(shí)的電影資訊列表。正在熱映電影和即將上映電影的展示通過Ionic框架的Slides組件實(shí)現(xiàn);電影資訊列表通過Ionic框架的List組件實(shí)現(xiàn);懸浮按鈕通過Ionic框架的FabButton組件實(shí)現(xiàn);導(dǎo)航欄的搜索框由Ionic框架的Searchbar組件實(shí)現(xiàn)。

3.2.2 電影模塊

電影模塊主要包含正在熱映電影和即將上映電影兩大模塊，正在上映電影模塊只包含正在熱映電影列表，即將上映電影模塊則包含預(yù)告片推薦、近期最受期待電影展示和即將上映電影列表三部分。正在熱映電影模塊與即將上映電影模塊的切換通過Ionic框架的Segment組件與Slides組件相互嵌套實(shí)現(xiàn)，用戶可以通過左滑右滑的手勢(shì)來進(jìn)行切換。

預(yù)告片播放功能頁(yè)面使用Ionic框架中的Modal組件實(shí)現(xiàn)，視頻播放功能使用基于Angular的開源視頻播放組件videogular2實(shí)現(xiàn)。videogular2本質(zhì)上是對(duì)HTML5 video標(biāo)簽的Angular封裝，用戶可以對(duì)視頻進(jìn)行全屏播放、暫停、開始、快進(jìn)等操作。

3.3.3 影院模塊

影院界面展示了城市影院列表，用戶可以根據(jù)對(duì)區(qū)域的選擇以及影院品牌的選擇進(jìn)行影院查詢結(jié)果的篩選。篩選功能是通過對(duì)Ionic框架的Select組件自定義樣式實(shí)現(xiàn)的。

3.3.4 數(shù)據(jù)模塊

用戶可通過導(dǎo)航欄上的Segment Button進(jìn)行票房、排片、上座、影庫(kù)、影院、影投數(shù)據(jù)可視化頁(yè)面的切換;用戶可以選擇日期來查詢不同日期的數(shù)據(jù)可視化詳情。數(shù)據(jù)可視化部分由Chart.js工具實(shí)現(xiàn)，先通過npm包管理工具安裝Chart.js并在相應(yīng)的頁(yè)面中導(dǎo)入，再通過Chart.js所提供的API在canvas標(biāo)簽中對(duì)數(shù)據(jù)進(jìn)行餅圖、環(huán)圖、柱狀圖、條形圖等的繪制。

3.3.5 個(gè)人模塊

個(gè)人模塊的登錄、注冊(cè)、找回密碼、修改個(gè)人信息等功能采用第三方PaaS云服務(wù)——Wild Dog實(shí)現(xiàn)，詳細(xì)使用可查看Wild Dog開發(fā)文檔。其中更換頭像功能涉及訪問原生設(shè)備的功能，包括訪問設(shè)備相機(jī)或本地相冊(cè)以及文件的上傳3個(gè)功能，所以該處使用了Cordova 的3款插件：Camera、File、File Transfer來實(shí)現(xiàn)iOS端、Android端的上傳頭像的功能。

3.3 程序打包

3.3.1 打包手機(jī)Web

打開終端，進(jìn)入項(xiàng)目工程文件目錄，輸入Ionic Debug命令“ionic serve”之后項(xiàng)目工程目錄下出現(xiàn)“www”文件夾，該文件夾即打包好的可運(yùn)行在手機(jī)Web端的工程。

3.3.2 打包IOS程序

打開終端，進(jìn)入項(xiàng)目工程文件，輸入Ionic封裝的Cordova打包命令先添加iOS平臺(tái)，命令為“ionic cordova platform add ios”，再輸入創(chuàng)建命令“ionic cordova build ios”即可生成可以運(yùn)行在iOS平臺(tái)上的工程項(xiàng)目，iOS工程項(xiàng)目在該項(xiàng)目工程目錄下的“platforms”文件夾下的“iOS”文件夾內(nèi)，再用Xcode工具運(yùn)行工程即可完成iOS平臺(tái)的打包流程。

3.3.3 打包Android程序

打開終端，進(jìn)入項(xiàng)目工程文件，輸入Ionic封裝的Cordova打包命令先添加Android平臺(tái)，命令為“ionic cordova platform add android”，再輸入創(chuàng)建命令“ionic cordova build android —prod”即可生成可以運(yùn)行在Android平臺(tái)上的工程項(xiàng)目，Android工程項(xiàng)目在該項(xiàng)目工程目錄下的“platforms”文件夾下的“Android”文件夾內(nèi)，再用Android Studio工具運(yùn)行工程即可完成Android平臺(tái)的打包流程。

4 測(cè)試

該電影產(chǎn)業(yè)大數(shù)據(jù)可視化Hybrid App支持跨平臺(tái)，本章對(duì)軟件在多個(gè)平臺(tái)上進(jìn)行了測(cè)試，測(cè)試設(shè)備是基于Android系統(tǒng)的小米3手機(jī)和基于iOS系統(tǒng)的iPhone 7手機(jī)，測(cè)試真機(jī)參數(shù)如表1所示。

5 結(jié)束語(yǔ)

該電影產(chǎn)業(yè)大數(shù)據(jù)可視化Hybrid App的開發(fā)過程集網(wǎng)絡(luò)技術(shù)、移動(dòng)應(yīng)用開發(fā)技術(shù)、數(shù)據(jù)可視化技術(shù)于一體。首先使用了HTTPS請(qǐng)求抓包技術(shù)對(duì)國(guó)內(nèi)某最大在線售票系統(tǒng)的iOS端應(yīng)用進(jìn)行抓包獲取到相關(guān)API從而得到干凈、準(zhǔn)確、實(shí)時(shí)、有效的數(shù)據(jù)。其次采用了基于Cordova + Ionic的混合模式移動(dòng)應(yīng)用開發(fā)技術(shù)進(jìn)行Hybrid App開發(fā)，從而解決了跨平臺(tái)、開發(fā)周期短、開發(fā)人員只有個(gè)人的難題，并且取得了用戶界面美觀、用戶交互性能好的成果。期間還采用了基于Chart.js的數(shù)據(jù)可視化技術(shù)進(jìn)行電影產(chǎn)業(yè)相關(guān)數(shù)據(jù)的展示，輕量級(jí)的數(shù)據(jù)可視化框架Chart.js解決了移動(dòng)平臺(tái)性能上的瓶頸，若使用D3.js這類重量級(jí)框架則會(huì)導(dǎo)致應(yīng)用卡頓等問題的出現(xiàn)。

參考文獻(xiàn)：

[1] 辛?xí)灶? 經(jīng)濟(jì)地理學(xué)視域中電影產(chǎn)業(yè)的網(wǎng)絡(luò)研究[D].上海：華東師范大學(xué)， 2017.

[2] 楊艷云. 基于Hybrid App的移動(dòng)應(yīng)用工具集的設(shè)計(jì)與實(shí)現(xiàn)[D].西安：西安電子科技大學(xué)， 2015.

[3] 商錦， 林亮， 王雨，等. Ionic在混合模式APP中的應(yīng)用[J]. 軟件導(dǎo)刊， 2017， 16（5）：132-134.

[4] 朱凱南， 李艷平， 申閆春，等. 基于Ionic和Cordova的跨平臺(tái)移動(dòng)APP的研究與應(yīng)用[J]. 電腦知識(shí)與技術(shù)， 2016， 12（1）：119-121.

[通聯(lián)編輯：謝媛媛]