基于Hybrid App的電影產(chǎn)業(yè)數(shù)據(jù)可視化的研究與實現(xiàn)

黃萍 曹璽

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

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

中圖分類號：TP311? ? 文獻(xiàn)標(biāo)識碼：A? ? ? 文章編號：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 背景

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

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

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

2.1 Hybrid App

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

2.2 Ionic+Cordova

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

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

2.3 Charles+Chart.js

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

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

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

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

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

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

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

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

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

3.2.1 首頁模塊

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

3.2.2 電影模塊

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

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

3.3.3 影院模塊

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

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

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

3.3.5 個人模塊

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

3.3 程序打包

3.3.1 打包手機(jī)Web

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

3.3.2 打包IOS程序

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

3.3.3 打包Android程序

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

4 測試

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

5 結(jié)束語

該電影產(chǎn)業(yè)大數(shù)據(jù)可視化Hybrid App的開發(fā)過程集網(wǎng)絡(luò)技術(shù)、移動應(yīng)用開發(fā)技術(shù)、數(shù)據(jù)可視化技術(shù)于一體。首先使用了HTTPS請求抓包技術(shù)對國內(nèi)某最大在線售票系統(tǒng)的iOS端應(yīng)用進(jìn)行抓包獲取到相關(guān)API從而得到干凈、準(zhǔn)確、實時、有效的數(shù)據(jù)。其次采用了基于Cordova + Ionic的混合模式移動應(yīng)用開發(fā)技術(shù)進(jìn)行Hybrid App開發(fā)，從而解決了跨平臺、開發(fā)周期短、開發(fā)人員只有個人的難題，并且取得了用戶界面美觀、用戶交互性能好的成果。期間還采用了基于Chart.js的數(shù)據(jù)可視化技術(shù)進(jìn)行電影產(chǎn)業(yè)相關(guān)數(shù)據(jù)的展示，輕量級的數(shù)據(jù)可視化框架Chart.js解決了移動平臺性能上的瓶頸，若使用D3.js這類重量級框架則會導(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的移動應(yīng)用工具集的設(shè)計與實現(xiàn)[D].西安：西安電子科技大學(xué)， 2015.

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

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

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