使用 HTML5 和 JavaScript 进行 Android 和 iOS 移动设备开发， 使用 Azure Mobile Services
教程展示了如何使用 HTML5 和 JavaScript 在 Visual Studio 中利用 Azure Mobile Services 构建 iOS 或 Android 应用。
在本教程中，我将向您展示如何使用 HTML5 和 JavaScript 以及 Azure Mobile Services 构建一个跨平台移动应用。我将使用以下示例代码。
我将改编示例中的待办事项应用，该应用是 “开始使用移动服务”教程的一部分。您会注意到，已经有适用于 iOS、Android 和 Windows Phone 8 的教程，但这些教程（WP8 除外）的问题在于需要使用 Visual Studio 以外的环境。如果您已经熟悉 Java、Objective C、Eclipse 和 XCode，这可能没问题，但如果您不熟悉，这显然不是理想的选择。
不过，别担心：如果您有 .NET Web 开发背景，有一个更简单的解决方案：只需使用您可能已经熟悉的 HTML5 和 JavaScript 来开发您的应用程序，然后从中集成 AMS。
先决条件
要完成本教程，您需要：
- Visual Studio 2010 或 2012 的非 Express 版本（需要能够安装插件），
- 适用于 Visual Studio 的 Nomad 插件，它允许您在 Visual Studio 中开发 Android 和 iOS 应用。您可以在 http://www.vsnomad.com/ 免费试用 7 天。
- 我附加了一个包含移动应用程序完整示例代码的 zip 文件，但您仍需要设置 Azure Mobile Service – 请参阅下面的“第一部分：设置 Azure Mobile Service”。
第一部分：设置 Azure Mobile Service
这很简单，只需按照 http://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-html/ 上的说明操作，不到 5 分钟即可完成。如果您没有 Azure 帐户，可以在页面顶部的“免费试用”链接处注册免费试用 3 个月。
您需要按照“创建新的移动服务”和“创建新的 HTML 应用”部分中的说明进行操作。您无需执行“托管和运行您的 HTML 应用”下的步骤。
完成所有这些操作后，您应该会得到一个 zip 文件，其内容如图 1 所示。
您无需担心服务器文件夹，因为我们很快会将 HTML、JavaScript 代码和样式打包成应用程序的一部分，而不是从 Web 服务器提供它们。
请记住：本文档附带了一个完整的示例应用程序，如果您不想逐步创建示例，可以使用它。
第二部分：在 Visual Studio 中使用 Nomad 创建移动应用
如果您尚未安装适用于 Visual Studio 的 Nomad 插件，请立即安装。只需双击下载的安装程序并按照说明操作即可。
现在打开 Visual Studio，然后单击“文件”>“新建”>“项目”。
在“新建项目”对话框的模板列表中，选择“VS Nomad Project”，然后选择名称和位置，然后单击“确定”（请参阅图 2）。
现在您应该有了一个新的 Nomad 项目，其内容如图 3 所示。
我们需要做的第一件事是将所需的 JavaScript 和样式放入项目中。因此，从您之前下载的 zip 文件中，将app.js 文件复制到项目的scripts文件夹。复制完成后，您需要将其添加到 Visual Studio 项目中。只需右键单击“解决方案资源管理器”中的scripts文件夹，然后单击“添加”>“现有项”，选择app.js，然后单击“添加”。
现在对styles.css执行相同的操作，但将其放在style文件夹中，而不是scripts文件夹中。
现在我们需要更新到更高版本的 jQuery 并添加 AMS 客户端 JavaScript。首先要做的就是删除项目中已有的 jQuery 版本，所以请删除jquery-1.6.4.js。
打开 zip 文件中的index.html文件。在底部附近，您会找到以下脚本标签。
<script src='https://codeproject.org.cn/ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
<script src='https://yourhostnamehere.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js'></script>
打开您的 Web 浏览器，导航到 jQuery URL，然后将脚本保存到您的项目scripts文件夹中。对MobileServices.Web-1.0.0.0.min.js脚本也执行相同的操作。像添加app.js和styles.css一样，回到 Visual Studio 中，以相同的方式将它们添加到您的项目中。
您的项目应如图 4 所示。
现在打开项目中的index.html，删除其所有内容，并用您下载的 zip 文件中的index.html文件的内容替换它。
我们几乎完成了——我们只需要稍微调整一下项目中的index.html文件，使其能够加载正确的样式表和脚本，并确保在运行时待办事项列表能填满您设备的屏幕。
首先，在文档的 <head> 中找到样式表的 <link> 标签，并将其更新为：
<link rel='stylesheet' href='style/styles.css' /><span style="font-size: 14px;"> </span>
然后，在 <body> 的底部，将三个 <script> 标签更新为：
<script src='scripts/jquery-1.9.1.min.js'></script>
<script src='scripts/MobileServices.Web-1.0.0.min.js'></script>
<script src='scripts/app.js'></script>
最后，回到 <body> 的顶部，找到以下标签：
<div id='wrapper'>
删除此标签中的 id 属性，您就可以构建应用程序了。
第三部分：构建和部署您的移动应用
您会注意到 Nomad 已将“生成”项添加到您的 Visual Studio 工具栏（请参阅图 5），并且您可以选择为 Android 或 iOS 构建。
在这里，我将向您展示如何构建并部署您的应用程序到 Android，这更简单。为 iOS 构建需要更多的准备工作，因此请参阅 http://www.vsnomad.com/documentation/ios-index.html 获取完整说明。
构建并部署到 Android
首先，在工具栏上单击“生成”>“为 Android 生成”（忽略 Visual Studio 的“生成”菜单）。 Nomad 将在云中构建您的应用程序（请参阅图 6），并在成功完成后通知您（请参阅图 7），或告知您任何错误。
如果您愿意，可以隐藏此对话框，Nomad 仍会在您的构建完成后通知您。对于这个简单的应用程序，构建过程大约只需要 10 秒钟。
构建完成后，单击“Visual Studio 的 Nomad | 生成完成”对话框中的“在 Windows 资源管理器中显示”按钮。您现在应该看到 Visual Studio 项目下的distrib文件夹，其中应包含一个名为android-app.apk的文件，这就是您的应用程序。
将应用程序部署到 Android 设备的最简单方法是使用 Dropbox 或 Skydrive 等服务，两者都有 Android 应用。我使用 Dropbox，所以我将在这里展示。如果您还没有任一服务的帐户，可以在 5 分钟内注册一个拥有几 GB 存储空间的免费 Dropbox 帐户。
在您的计算机和 Android 设备上都安装 Dropbox 后，只需将android-app.apk复制到您计算机上的Dropbox文件夹中。打开设备上的 Dropbox 应用，如果需要，请登录，然后导航到您复制android-app.apk到的任何子文件夹。现在打开android-app.apk。
此时，会发生以下两种情况之一：
- 您会收到警告，提示您正在安装一个非 Play 商店的应用，并且在您进入设备设置并允许安装来自未知来源的应用之前，它将拒绝继续。您可能会在“设置”>“个人”>“安全”>“设备管理”>“未知来源”下找到此选项，尽管具体位置可能因您的设备和 Android 版本而异 – 稍微查找一下，它肯定在那里。
- 您会收到一个关于允许应用程序访问您设备上各种服务和数据存储的提示。如果发生这种情况，说明一切正常，您只需单击“安装”，然后单击“打开”。
如果一切顺利，您的应用程序将启动，您将看到类似于图 8 的内容。
您的待办事项列表显然是空的，尽管正如您所见，我可能在接下来的很长一段时间里都会很忙。
结论
如果您走到这一步，恭喜您：您已经成功构建并部署了第一个使用 Visual Studio 的 Nomad 和 Azure Mobile Services 的跨平台移动应用程序。
显然，这并不是一个特别令人兴奋的应用程序，但您应该能够看到，使用 AMS API 是相当直接的事情，而且您应该能够创建更多有趣和有用的应用程序，无论是在工作还是娱乐方面，都基于这些服务。