基于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.

[通联编辑：谢媛媛]