使用 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. 在搜索框中,键入“Web 应用”

  4. 在结果列表中,从“市场”中选择“Web 应用”

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

  6. 选择 Web 应用的唯一名称

  7. 选择默认 的“发布 ”选项作为 “代码”。

  8. 运行时堆栈中,需要在 ASP.NETNode 下选择版本。 如果要生成 .NET 后端,请选择 ASP.NET 下的版本。 否则,如果要面向基于节点的应用程序,请从 Node 中选择一个版本。

  9. 选择正确的 操作系统(Linux 或 Windows)。

  10. 选择要在其中部署此应用 的区域

  11. 选择相应的App 服务计划,然后按“审阅”并创建

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

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

  14. 部署完成后,单击 “部署详细信息 ”部分,然后单击 Microsoft.Web/sites 类型的资源。 它将导航到刚刚创建的应用服务 Web 应用。

  15. 单击“设置”下的“配置”边栏选项卡,并在“应用程序设置”中,单击“新建应用程序设置”按钮。

  16. 在“添加/编辑应用程序设置”页中,将名称输入为 MobileAppsManagement_EXTENSION_VERSION,将“值”输入为 latest 并点击“确定”。

你已准备好将此新创建的应用服务 Web 应用用作移动应用。

创建数据库连接并配置客户端和服务器项目

  1. 下载以下平台的客户端 SDK 快速入门:

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Cordova
    Windows (C#)

    注意

    如果使用 iOS 项目,则需从最新 GitHub 版本中下载“azuresdk-iOS-*.zip”。 将 MicrosoftAzureMobile.framework 文件解压缩并添加到项目的根目录中。

  2. 需要添加数据库连接,或者连接到现有的连接。 首先,确定是要创建数据存储,还是使用现有的数据存储。

    • 创建新的数据存储:若要创建数据存储,请使用以下快速入门:

      快速入门:开始使用 Azure SQL 数据库中的单一数据库

    • 现有数据源:若要使用现有的数据库连接,请按以下说明操作

      1. SQL 数据库连接字符串格式 - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} :服务器的名称,此项可以在数据库的概览页中找到,通常采用“server_name.database.windows.net”格式。 {port} :通常为 1433。 {your_catalogue} :数据库的名称。 {your_username} :用于访问数据库的用户名。 {your_password} :用于访问数据库的密码。

        详细了解 SQL 连接字符串格式

      2. 移动应用添加连接字符串。可以在应用服务中管理应用程序的连接字符串,方法是使用菜单中的“配置”选项。

        若要添加连接字符串,请执行以下操作:

        1. 单击“应用程序设置” 选项卡。

        2. 单击“[+] 新建连接字符串”。

        3. 需为连接字符串提供“名称”、“值”和“类型”。

        4. 键入 MS_TableConnectionString 作为“名称”

        5. “值”应该是在前面的步骤中生成的连接字符串。

        6. 如果向 SQL Azure 数据库添加连接字符串,请在“类型”下选择“SQLAzure”。

  3. Azure 移动应用有适用于 .NET 和 Node.js 后端的 SDK。

    • Node.js backend

      若要使用 Node.js 快速入门应用,请按以下说明操作。

      1. 在 Azure 门户中转到“简易表”即可看到以下屏幕。

        Node 简易表

      2. 请确保已在 “配置 ”选项卡中添加 SQL 连接字符串。然后选中 “我确认这将覆盖所有网站内容 ”框,然后单击“ 创建 TodoItem 表 ”按钮。

        Node 简易表的“配置”

      3. 在“简易表”中单击“+ 添加”按钮。

        Node 简易表的“添加”按钮

      4. 创建允许匿名访问的 TodoItem 表。

        Node 简易表的“添加表”

    • .NET 后端

      若要使用 .NET 快速入门应用,请按以下说明操作。

      1. azure-mobile-apps-quickstarts 存储库下载 Azure 移动应用 .NET 服务器项目。

      2. 在 Visual Studio 中以本地方式生成 .NET 服务器项目。

      3. 在 Visual Studio 中打开解决方案资源管理器,右键单击 ZUMOAPPNAMEService 项目,单击“发布”, 此时会出现“Publish to App Service”窗口。 如果在 Mac 上工作,请单击此处了解部署应用的其他方式。

        Visual Studio 发布

      4. 选择“应用服务” 作为发布目标,接着单击“选择现有”,然后单击窗口底部的“发布”按钮。

      5. 首先需通过 Azure 订阅登录 Visual Studio。 选择 SubscriptionResource Group,然后选择应用的名称。 准备就绪后,单击“确定”,这样就会将本地的 .NET 服务器项目部署到应用服务后端。 部署完成后,系统会在浏览器中将你重定向到 http://{zumoappname}.azurewebsites.net/

运行 Xamarin.Forms 解决方案

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

Visual Studio(Windows 和 Mac)

  1. 转到 Azure 门户,并导航到已创建的移动应用。 在 Overview 边栏选项卡上,查找作为移动应用公共终结点的 URL。 示例 - 我的应用名称“test123”的站点名将为 https://test123.azurewebsites.net

  2. 打开此文件夹(xamarin.forms/ZUMOAPPNAME)中的文件 Constants.cs。 应用程序名称为 ZUMOAPPNAME

  3. Constants.cs 类中,将 ZUMOAPPURL 变量替换为上面的公共终结点。

    public static string ApplicationURL = @"ZUMOAPPURL";

    变为

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. 按照下面的说明运行 Android 或 Windows 项目;如果有联网的 Mac 计算机可用,则运行 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 表。 存储在表中的项由移动应用后端返回,数据显示在列表中。

注意

用于访问移动应用后端的代码位于解决方案的共享代码项目的 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 表。 存储在表中的项由移动应用后端返回,数据显示在列表中。

注意

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

(可选)运行 Windows 项目

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

Visual Studio

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

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

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

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

注意

Windows 项目不能在 macOS 上运行。

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

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

UWP 待办事项应用

注意

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

故障排除

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

请注意,在 Android 项目中引用的所有支持包必须都具有相同的版本。 对于 Android 平台,Azure 移动应用 NuGet 包具有 Xamarin.Android.Support.CustomTabs 依赖项,因此,如果你的项目使用较新的支持包,则你需要直接安装具有所需版本的此包以避免冲突。