基于Hybrid App的電影產業數據可視化的研究與實現

黃萍 曹璽

摘要：在剖析混合模式移動應用開發相關技術基礎上，從系統架構和系統設計等方面闡述了運用混合模式移動應用開發技術、數據采集技術以及數據可視化技術相結合，開發設計跨iOS、Android、手機Web平臺的電影產業數據可視化應用的過程，為Hybrid App的可視化開發提供一定的參考依據。

關鍵詞：混合模式移動應用開發;數據可視化;電影產業數據;跨平臺;移動應用

中圖分類號：TP311? ? 文獻標識碼：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 背景

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

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

2 相關技術與開發工具介紹

2.1 Hybrid App

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

2.2 Ionic+Cordova

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

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

2.3 Charles+Chart.js

該項目使用網絡抓包工具Charles來進行影業相關數據的采集。它是一個http協議調試的代理工具，能夠記錄并檢查電腦和互聯網之間的http通訊、斷點設置以及所有進出Charles數據。利用Charles的網絡抓包技術對國內某電影票務系統進行HTTPS請求抓包，獲取到電影資訊、電影詳情、影院信息、預告片等諸多接口。

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

3 跨平臺的電影產業數據可視化APP開發

3.1 項目框架結構

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

該電影產業大數據可視化Hybrid App整體采用Cordova框架，主體為Web View，iOS端由UIWebView或WKWebView實現，Android端由Webview或Crosswalk實現。系統的結構框架圖如圖1所示。

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

3.2 項目模塊設計與實現

該電影產業大數據可視化Hybrid App共劃分為首頁模塊、電影模塊、影院模塊、數據模塊、個人模塊五大模塊，系統功能結構模塊如圖2所示。

3.2.1 首頁模塊

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

3.2.2 電影模塊

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

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

3.3.3 影院模塊

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

3.3.4 數據模塊

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

3.3.5 個人模塊

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

3.3 程序打包

3.3.1 打包手機Web

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

3.3.2 打包IOS程序

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

3.3.3 打包Android程序

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

4 測試

該電影產業大數據可視化Hybrid App支持跨平臺，本章對軟件在多個平臺上進行了測試，測試設備是基于Android系統的小米3手機和基于iOS系統的iPhone 7手機，測試真機參數如表1所示。

5 結束語

該電影產業大數據可視化Hybrid App的開發過程集網絡技術、移動應用開發技術、數據可視化技術于一體。首先使用了HTTPS請求抓包技術對國內某最大在線售票系統的iOS端應用進行抓包獲取到相關API從而得到干凈、準確、實時、有效的數據。其次采用了基于Cordova + Ionic的混合模式移動應用開發技術進行Hybrid App開發，從而解決了跨平臺、開發周期短、開發人員只有個人的難題，并且取得了用戶界面美觀、用戶交互性能好的成果。期間還采用了基于Chart.js的數據可視化技術進行電影產業相關數據的展示，輕量級的數據可視化框架Chart.js解決了移動平臺性能上的瓶頸，若使用D3.js這類重量級框架則會導致應用卡頓等問題的出現。

參考文獻：

[1] 辛曉睿. 經濟地理學視域中電影產業的網絡研究[D].上海：華東師范大學， 2017.

[2] 楊艷云. 基于Hybrid App的移動應用工具集的設計與實現[D].西安：西安電子科技大學， 2015.

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

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

[通聯編輯：謝媛媛]