评价我的游戏封面

引言

还记得那句老话“不要以貌取人”吗？嗯，随着我们进入广泛数字分发的时代，实体包装盒可能会消失，但封面艺术仍然有着光明的前景。过去，我们不得不开车去我们最喜欢的电子游戏零售商那里欣赏装饰在游戏盒和包装盒正面精美的封面艺术。现在，我们只需登录我们最喜欢的应用程序市场即可查看令人惊叹的高分辨率封面艺术！

评价我的封面艺术是一款 Windows Phone 8 应用程序，允许用户查看和评价跨 Windows Phone 和 Xbox 平台的 Xbox 游戏封面艺术。一个简单的评分系统将通过在中央数据存储库中汇总社区反馈来识别最佳封面艺术。我将使用此应用程序来演示如何

• 使用 HTML5、CSS3 和 JavaScript (jQuery) 创建网站。
• 创建连接到 Windows Azure 服务的 Windows Phone 8 应用程序。
• 利用 ASP.NET Web API 聚合不同基于 Web 的资源的信息。
• 将 ASP.NET Web API 托管在 Windows Azure 上。
• 在 Windows Azure 上创建和连接到 SQL Server 数据库。
• 创建和连接到托管在 Windows Azure VM 上的 RavenDB（NoSQL 解决方案）。

Windows Azure 的优势

Windows Azure 是部署移动 Web 服务的绝佳平台，因为它允许开发人员专注于创建出色的应用程序，而不是管理基础结构，同时为最终用户提供可靠且高性能的数据服务。当与 ASP.NET Web API 等 RESTful Web 服务技术结合使用时，开发人员可以通过提供轻量级的 JSON 消息来节省用户的数据使用量，并通过将处理任务卸载到云端来节省移动电池寿命。

评价我的封面艺术网站

• 立即开始评价封面艺术（数据尚未持久化）： http://ratemyboxart.azurewebsites.net 
• 查看评价我的封面艺术 Web 服务： http://boxart.azurewebsites.net  
  • /api/boxart/random/10 
  • /api/boxart/count 

背景 

此应用程序显示的封面艺术将来自以下来源

• Windows Phone 8 - http://www.windowsphone.com/en-us/store/xbox-games
• Xbox - http://marketplace.xbox.com/en-us/games

构建网站

我们已经确定了这个项目的最终目标是创建一个 Windows Phone 8 应用程序来查看和评价游戏封面艺术。评分背后引人注目的想法是，随着时间的推移，在有足够多的贡献后，最佳的封面艺术将通过排行榜脱颖而出。为了确保收集到大量的投票，没有理由将此应用程序限制在 Windows Phone 设备上。我们希望用户能够不受平台限制地在他们的桌面、平板电脑和智能手机上浏览和投票。最大化我们用户群的最简单方法是使该应用程序成为一个网站。

选择我们的工具

对于我们的网站，我们将尽量使其保持平台无关性和简单性。考虑到这一点，我们将使用 HTML5、CSS3 和 JavaScript 来构建我们的网站。我们还将利用 jQuery。我将使用 Visual Studio 2012，因为，嗯，我喜欢 Visual Studio。但是，这不是必需的。如果您愿意，您可以使用记事本。

设计

本项目有两个指导原则——让事物美观并保持简单。评价我的封面艺术网站的要求是

• 显示游戏标题。
• 显示游戏封面艺术。
• 允许用户使用 5 星评级系统评价封面艺术。
• 用户输入评分后随机选择下一个要显示的封面艺术。
• 创建用户实时投票活动的提要。
• 创建社区实时投票活动的提要。
• 实现一个显示评分最高 10 个封面艺术的排行榜。

代码

我们在此项目阶段的目标是实现我们的网站设计。请记住，以下功能将在后续阶段实现

• 丰富的封面艺术收藏供查看和评价（仅测试数据集）。
• 用户评分持久化到数据源。
• 社区实时投票活动。
• 评分最高的封面艺术。

HTML5 存储

HTML5 存储（Web Storage）是 Web 浏览器中原生实现的持久化本地存储。它允许网页在本地存储命名的键/值对。这是加载测试数据集以用于构建网站设计和测试客户端功能的好方法。我准备了一些 JSON 格式的测试数据，它非常适合键/值对格式。

var boxArtData =
{
    "boxArt":
        [
            { "Id": 0, "Name": "Game1", "Platform": "X360", 
              "Guid": "", "NumRatings": 0, "NumPoints": 0 },
            { "Id": 1, "Name": "Game2", "Platform": 
              "X360", "Guid": "", "NumRatings": 0, "NumPoints": 0 },
            { "Id": 2, "Name": "Game3", "Platform": 
              "X360", "Guid": "", "NumRatings": 0, "NumPoints": 0 }
        ]
};

从上面的 JSON 元素可以看到，我们将在此项目中使用 BoxArt 模型

• Id（唯一元素标识符）
• Name（封面艺术所属的游戏名称）
• Platform（游戏的平台，以帮助解析媒体来源）
• Guid（媒体、封面艺术图像的 guid）
• NumRatings（社区提交的评分数量）
• NumPoints（社区授予的分数，星级评分）

请注意，封面艺术的平均评分计算为 NumPoints / NumRatings。

将 JSON 数据设置到 HTML5 存储中

localStorage.setItem('rmbaTestDataSet', JSON.stringify(boxArtData));

从 HTML5 存储中获取 JSON 数据

var retrievedObject = localStorage.getItem('rmbaTestDataSet');

有关完整的源代码参考

• rmba-main.js
• rmba-testdataset.js

参考： 

• 深入 HTML5 

HTML5 语义标签

对于网站的布局，我们将采用固定的三列设计，以遵循保持简单的原则。目前我们不会显式定义特定于移动设备的样式，但我们的设计足够简单，可以在移动浏览器上正常工作。

让我们使用新的 HTML5 语义元素来定义页面布局： 

• Header：页面的标题横幅，使用 CSS 的 background-image 元素设置。 
• Section：用于中心列的内容分组。 
• Aside：用于补充主内容的一组内容。用于左列和右列。 
• Footer：通常用于版权或所有者信息。 

有关完整的源代码参考

• Home.html

参考： 

• Dynamic Drive CSS 布局 - 无表格、基于 CSS 的模板 

CSS3 星形选择器 

有关完整的源代码参考

• Home.html
• rmba-main.css 

参考： 

• CSS3 星形评分 × Grimsrud Interaktiv 的实验室

网站 

初始网站并不太有趣，因为它没有后端，但您能了解到它的发展方向： 

Azure 上的 SQL 

好消息！你听说 Xbox One 可以利用 Azure 来分担 CPU 密集型计算任务吗？同样，让我们使用 Azure 来构建评价我的封面艺术的后端基础结构并进行一些计算。在本节中，我们将设置 Azure 上的 SQL Server 实例来存储封面艺术的引用和用户封面艺术评分。

数据模型 

创建数据库的第一项任务是最终确定我们的数据模型。在上一节中，我们提出了一个简单的数据模型来将测试数据存储在 HTML5 存储中。

现在我们有了模型，让我们创建一个本地数据库作为我们的数据存储。我们可以通过组合一些 SQL 脚本从头开始创建数据库，但让我们节省一些时间，做一些更有趣的事情。我们将使用 Entity Framework 5.0 通过 Code First 方法生成数据库，如下所示。

在介绍如何生成数据库之前，关于模型还有一些细节： 

• 默认情况下，Entity Framework 将 ID 或 classnameID 属性解释为主键。在我们的例子中，这意味着 BoxArtId 将是 BoxArt 表的主键，RatingId 将是 Rating 表的主键。
• 数据模型中未显示的是 BoxArt 类中一个名为 Ratings 的导航属性。

 public virtual ICollection<Rating> Ratings { get; set; } 

此导航属性将包含与 BoxArt 实体相关的所有 Rating 实体。这是通过查找 Rating 表中的 BoxArtId 外键列中包含该 BoxArt 主键的所有行来完成的。 

• 导航属性被定义为 virtual，以利用 Entity Framework 的一种称为延迟加载的功能。延迟加载是一种设计模式，即对象的初始化被推迟到需要时。
• 由于 BoxArt 和 Rating 之间的关系是“一对多”关系，因此导航属性必须是 ICollection 类型。
• 协调给定数据模型中 Entity Framework 功能的主要类是数据库上下文类。这是我们将要创建的 BoxArtManagerContext 类。

使用 Entity Framework 生成数据库 

值得一提的是，数据模型以及后续内容都是在 ASP.NET MVC Web API 项目中完成的。这种设置是很有优势的，因为我们不仅在生成数据库，同时也在构建一个中间层、RESTful 服务层来促进应用程序与数据的交互。让我们生成数据库： 

1.  我们将使用 ASP.NET MVC 的脚手架功能来自动生成 BoxArt 和 Rating 的控制器。要开始此过程，请右键单击 Controllers 文件夹并添加一个新 Controller。以 BoxArt 为例，输入以下信息：
2. 启用 Code First 迁移。
3. 创建测试数据来填充数据库。为测试目的用一些默认数据填充数据库将很有用。这可以通过将 seed 方法添加到 Configuration.cs 来轻松完成。
4. 添加迁移。
5. 更新数据库。

部署到 Azure

我不会深入介绍如何部署到 Windows Azure，因为它是一个直接且简单的过程。此外，网上有很多很棒的教程，例如使用 Web API 创建 REST 服务。 

注意 CORS

CORS，或跨域资源共享，需要启用才能让网站和服务跨域进行通信。通常会限制跨域通信以防止跨站点伪造攻击。然而，在一些合法的情况下，这种类型的通信是合理的。例如，对于http://ratemyboxart.azurewebsites.net 与http://boxart.azurewebsites.net 进行数据交换，需要 CORS。

处理数据库 

部署到 Windows Azure 后，您将获得数据库所在的服务器名称。这使得通过 Visual Studio 或 SQL Server Management Studio 处理数据库变得容易。 

历史

1. 第一个挑战：入门 (2013/04/29)
   • 注册了免费的 Windows Azure 试用版。
2. 第二个挑战：构建网站 (2013/05/12)
3. 第三个挑战：Azure 上的 SQL (2013/05/26) 
   • 使用 Code First 迁移创建和部署了 SQL Server 数据库。
   • 创建并部署了 Web API 服务来支持评价我的封面艺术。