基于WebGL的大众点评电视应用开发

论文总字数：23364字

摘 要

随着社会的进步和网络的快速发展，人们对生活的舒适度的追求越来越高，希望能够让一切尽可能的方便，享受高质量的生活。尽管各类电子产品上的应用已经能为用户省去许多麻烦，但是在电视端，类似的应用却并不多见。因此，电视端的大众点评应用就显得十分有吸引力。

本应用以公司自主研发的视九Forge引擎为基础框架，前端用HTML CSS JavaScript语言来实现开发电视端大众点评应用，在系统中要完成的任务为：

1. 前端使用HTML CSS JavaScript语言，并且基于公司视九Forge引擎，完成电视应用界面的编写。其中主要语言为JavaScript。
2. 利用AJAX技术以及HTML DOM方法从大众点评网站获取和解析数据。
3. 后台使用HTML5的LocalStorage、IndexedDB来存储应用中的数据。LocalStroage 主要用于管理编写代码过程中的各种类型的变量，如计数、布尔类型等等。而其中的IndexedDB主要用于管理用户存储的餐厅信息，包括名称、地点、评级、用户评价等等。

关键词：电视端HTML5应用，JavaScript语言，HTML5 LocalStorage，HTML5 IndexedDB

Implement of TV apps DIAN PING Based On WebGL

71Y13144 Jiachenzi Wang

Advisor Qingjian Ni

Abstract

With the rapid development of social progress and networks, many people have increasing demands for comfortable lives , hoping to make everything much more convenient and enjoy their high quality life. Although all kinds of Apps in different electronic products have already solved many troubles for their users, there’s no enough such Apps on TV end. Thus, the DIAN PING Apps on TV end seemed pretty attractive.

The project is based on our self-developed engine , using HTML CSS JavaScript program languages to develop the TV-end app DIAN PING. The main tasks are:

1. Based on the Forge engine, using HTML CSS JavaScript languages to design and implement the front-end programing, actually the main language used is JavaScript.
2. Using the AJAX and HTML DOM method to pull and interpret data.
3. At the back-end, using localStorage and IndexedDB of HTML5 to store all data from the application. The localStorage is used to manage all variables like counter and Boolean ones in the coding process while the IndexedDB is used to manage all data of restaurants that stored by the users.

KEY WORDS： TV end HTML5 APPS, JavaScript ,HTML5 LocalStorage, HTML5 IndexedDB

目 录

摘要 I

Abstract II

第一章 绪论 1

1.1 引言 1

1.2 研究现状 1

1.2.1 WebGL介绍 1

1.2.2 HTML5 localStorage amp; HTML5 IndexedDB 2

1.2.3 JavaScript语言 2

1.3研究内容 3

1.4论文组织结构 3

第二章 系统设计 4

2.1 系统需求 4

2.2 结构设计 4

2.3系统分析 4

2.31 主页模块需求分析 5

2.32 列表页模块需求分析 6

2.33 详情页模块需求分析 7

2.34 搜索页模块需求分析 8

2.35 用例分析 9

2.4 小结 9

第三章 系统框架 10

3.1应用布局 10

3.2 功能函数 10

3.3小结 12

第四章 系统实现 13

4.1系统开发环境及工具 13

4.2 系统实现 13

4.2.1 首页页面结构 13

4.2.2主页界面绘制 15

4.2.3列表页界面绘制 16

4.2.4详情页界面绘制 21

4.2.5收藏列表页界面绘制 22

4.2.6搜索页界面绘制 23

4.2.7数据获取与解析 25

4.3 小结 25

第五章 系统测试和结果分析 26

5.1 用户界面效果测试 26

5.2 用例测试 26

5.3 小结 28

第六章 总结与展望 30

6.1 论文总结 30

6.2 工作展望 31

致谢 32

参考文献 33

第一章 绪论

1.1 引言

随着互联网的发展，用户使用电视的目的从最初的观看节目正在逐渐向使用各类电视端的应用发展。这种拥有例如Android系统的电视被称为互联网智能电视（全称Over-The-TopTV，简称“OTTTV”），它代表了传统和数字媒体如何被互联网融合。智能电视的出现，让电视厂商和系统开发商找到了新的发展方向，也让持续流失的电视用户重新拿起遥控器，体验新的使用电视的愉悦、舒适感。对于智能电视来说，操作系统是其最重要的核心部分，一个好的操作系统，能让电视在软硬件方面、流畅性方面都有更好的表现。伴随着用户对智能电视的热情的不断上涨，期待好的智能电视系统的呼声也越来越高。在这种情况下，日趋成熟的HTML5系统拥有无限好的前景。中国是一个庞大的电视消费市场，且智能电视的发展趋势之一就是由单纯的浏览电视节目向玩游戏、听音乐或使用其他电视应用发展，从而电视将不再仅仅是用于打发时间的工具，而是能给用户提供许多便利的电子产品。因此，HTML5电视应用将会是未来智能电视中不可或缺的，或者说是最重要的一个部分。目前来看，大部分电视应用开发者的重心都在音乐、游戏上，基本都属于娱乐应用的范畴。而能为电视用户提供便利的电视应用可以说是凤毛菱角，而对于很多在家休息的用户来说，解决“吃什么”常常会成为一个很为难的问题。因此，电视端的美食推荐类应用显得极其必要，省去用户翻阅手机的时间，使用电视解决“吃”这一大问题。同时，在技术方面，WebGL作为一种较新的绘图标准，完美地解决了现有的Web交互式动画的需要大量浏览器插件支持和需要许多不同接口实现这两个主要问题。因此，使用WebGL进行应用动效的设计和实现可以很好的达到预期的效果。

因此，在本论文中，目标就是利用OpenGL技术及Web应用开发相关技术，开发一款电视端的HTML5应用。非电视端的用户使用大众点评的目的主要有：看评价、浏览和筛选餐厅、优惠点单、收藏等，而电视端将基于“方便用户寻找餐厅”的目的，对功能进行筛选，主要有：解决“吃什么”、了解某餐厅好不好（查看评价）、收藏、搜索餐厅功能。并且可以随意切换目标城市、地区，解决用户需要在电视屏幕、手机屏幕中来回选择的麻烦。

剩余内容已隐藏，请支付后下载全文，论文总字数：23364字