使用 Azure 创建 Xamarin.Forms 应用

本教程说明如何使用作为后端的 Azure 应用服务的移动应用功能,向 Xamarin.Forms 移动应用添加基于云的后端服务。 请创建一个新的移动应用后端和一个简单的待办事项列表 Xamarin.Forms 应用,此应用将应用数据存储在 Azure 中。

只有在完成本教程后,才可学习有关 Xamarin.Forms 的所有其他移动应用教程。

先决条件

要完成本教程,需要以下各项:

  • 有效的 Azure 帐户。如果没有帐户,可以注册 Azure 试用版并获取多达 10 个免费的移动应用,即使在试用期结束之后仍可继续使用这些应用。有关详细信息,请参阅 Azure 试用

  • 用于 Xamarin 的 Visual Studio Tools,包含在 Visual Studio 2017 或 Visual Studio for Mac 中。 有关说明,请参阅 Xamarin 安装页

  • (可选)若要生成 iOS 应用,必须使用装有 Xcode 9.0 或更高版本的 Mac。 可以使用 Visual Studio for Mac 来开发 iOS 应用,也可以使用 Visual Studio 2017(前提是网络上的 Mac 可用)。

创建新的移动应用后端

若要创建新的移动应用后端,请执行以下操作:

  1. 登录到 Azure 门户

  2. 单击创建资源

  3. 在“搜索”框中键入移动应用

    突出显示“移动应用快速入门”的 Azure 门户

  4. 在结果列表中,选择移动应用快速入门,然后选择创建

  5. 选择一个唯一应用名称。 此名称也将成为应用服务的域名的一部分。

  6. 资源组下,选择现有资源组, 创建新组(使用与应用相同的名称)。

  7. 单击创建。 稍等几分钟,等服务部署成功后再继续。 查看门户标题中的通知(铃铛)图标以获取状态更新。

现在已设置可供移动应用程序使用的移动应用后端。 接下来,为简单的待办事项列表后端下载服务器项目,然后将其发布到 Azure。

配置服务器项目

若要将服务器项目配置为使用 Node.js 或 .NET 后端,请执行以下操作:

  1. 单击“应用服务”按钮,然后依次选择移动应用后端、“快速入门”、客户端平台(iOS、Android、Xamarin、Cordova)。

    突出显示移动应用快速启动的 Azure 门户

  2. 如果未配置数据库连接,请创建一个,方法是执行以下操作:

    Azure 门户:移动应用:连接到数据库

    a. 新建 SQL 数据库和服务器。 可能需要将连接字符串名称字段保留为默认值 MS_TableConnectionString,然后才能完成下面的步骤 3。

    Azure 门户:移动应用:新建数据库和服务器

    b. 等到成功创建数据连接。

    成功创建数据连接的 Azure 门户通知

    c. 数据连接必须成功。

    Azure 门户通知“你已经有一个数据连接”

  3. 在“2. 定义警报详细信息“下,创建表 API”下,为“后端语言”选择“Node.js”。

  4. 接受确认,然后选择“创建 TodoItem 表”。
    此操作会在数据库中创建一个新的代办事项表。

    Important

    将现有的后端切换到 Node.js 会覆盖所有内容。 若改为创建 .NET 后端,请参阅使用适用于移动应用的 .NET 后端服务器

下载并运行 Xamarin.Forms 解决方案

必须使用用于 Xamarin 的 Visual Studio Tools 来打开解决方案,详见 Xamarin 安装说明。 如果该工具已安装,请按以下步骤来下载并打开解决方案:

Visual Studio

  1. 转到 Azure 门户

  2. 在移动应用的设置边栏选项卡上,单击“快速入门”(在“部署”下)>“Xamarin.Forms”。 在步骤 3 下,单击“创建新应用”(如果尚未选择它)。 接下来,单击“下载” 按钮。

    此操作下载一个项目,其中包含连接到移动应用的客户端应用程序。 将压缩的项目文件保存到本地计算机,并记下保存位置。

  3. 解压缩下载的项目,然后在 Visual Studio 2017 中打开它。

    在 Visual Studio 中解压缩的项目

  4. 按照下面的说明运行 Android 或 Windows 项目;如果有联网的 Mac 计算机可用,则运行 iOS 项目。

Visual Studio for Mac

  1. 转到 Azure 门户

  2. 在移动应用的设置边栏选项卡上,单击“快速入门”(在“部署”下)>“Xamarin.Forms”。 在步骤 3 下,单击“创建新应用”(如果尚未选择它)。 接下来,单击“下载” 按钮。

    此操作下载一个项目,其中包含连接到移动应用的客户端应用程序。 将压缩的项目文件保存到本地计算机,并记下保存位置。

  3. 解压缩下载的项目,然后在 Visual Studio for Mac 中打开它。

    Visual Studio for Mac 中的解压缩项目

  4. 按照下面的说明运行 Android 或 iOS 项目。

(可选)运行 Android 项目

在本部分,请运行 Xamarin.Android 项目。 如果不使用 Android 设备,可以跳过本部分。

Visual Studio

  1. 右键单击 Android (Droid) 项目,然后选择“设为启动项目”。

  2. 在“生成”菜单上,选择“配置管理器”。

  3. 在“配置管理器”对话框中,选中 Android 项目旁边的“生成”和“部署”复选框,并确保共享的代码项目已将“生成”框选中。

  4. 若要生成项目并在 Android 模拟器中启动应用,请按 F5 键或单击“启动”按钮。

Visual Studio for Mac

  1. 右键单击 Android 项目,然后选择“设为启动项目”。

  2. 若要生成项目,并在 Android 模拟器中启动应用,请选择“运行”菜单,然后选择“开始调试”。

在应用中键入有意义的文本(例如“Learn Xamarin”),然后选择加号 (+)。

Android 待办事项应用

此操作向在 Azure 中托管的新移动应用后端发送 post 请求。 来自请求的数据被插入到 TodoItem 表。 存储在表中的项由移动应用后端返回,数据显示在列表中。

Note

用于访问移动应用后端的代码位于解决方案的共享代码项目的 TodoItemManager.cs C# 文件中。

(可选)运行 iOS 项目

在本部分,请运行适用于 iOS 设备的 Xamarin iOS 项目。 如果不使用 iOS 设备,可以跳过本部分。

Visual Studio

  1. 右键单击 iOS 项目,然后选择“设为启动项目”。

  2. 在“生成”菜单上,选择“配置管理器”。

  3. 在“配置管理器”对话框中,选中 iOS 项目旁边的“生成”和“部署”复选框,并确保共享的代码项目已将“生成”框选中。

  4. 若要生成项目并在 iPhone 模拟器中启动应用,请选择 F5 键。

Visual Studio for Mac

  1. 右键单击 iOS 项目,然后选择“设为启动项目”。

  2. 在“运行”菜单上,选择“开始调试”以生成项目,并在 iPhone 模拟器中启动应用。

在应用中键入有意义的文本(例如“Learn Xamarin”),然后选择加号 (+)。

iOS 待办事项应用

此操作向在 Azure 中托管的新移动应用后端发送 post 请求。 来自请求的数据插入到 TodoItem 表。 存储在表中的项由移动应用后端返回,数据显示在列表中。

Note

你会发现,用于访问移动应用后端的代码位于解决方案的共享代码项目的 TodoItemManager.cs C# 文件中。

(可选)运行 Windows 项目

在本部分,请运行适用于 Windows 设备的 Xamarin.Forms 通用 Windows 平台 (UWP) 项目。 如果不使用 Windows 设备,可以跳过本部分。

Visual Studio

  1. 右键单击任意 UWP 项目,然后选择“设为启动项目”。

  2. 在“生成”菜单上,选择“配置管理器”。

  3. 在“配置管理器”对话框中,选中所选 Windows 项目旁边的“生成”和“部署”复选框,并确保共享的代码项目已将“生成”框选中。

  4. 若要生成项目并在 Windows 模拟器中启动应用,请按 F5 键或单击“启动”按钮(应该显示为“本地计算机”)。

Note

Windows 项目不能在 macOS 上运行。

在应用中键入有意义的文本(例如“Learn Xamarin”),然后选择加号 (+)。

此操作向在 Azure 中托管的新移动应用后端发送 post 请求。 来自请求的数据插入到 TodoItem 表。 存储在表中的项由移动应用后端返回,数据显示在列表中。

UWP 待办事项应用

Note

可在解决方案的可移植类库项目的 TodoItemManager.cs C# 文件中找到用于访问移动应用后端的代码。

故障排除

如果在生成解决方案时遇到问题,请运行 NuGet 包管理器并将其更新到 Xamarin.Forms 的最新版本,然后在 Android 项目中更新 Xamarin.Android 支持包。 快速入门项目并非始终包含最新版本。

后续步骤