使用 Azure 移动应用构建 Xamarin.iOS 应用

本教程介绍如何使用 Xamarin.iOS 和 Azure 移动应用后端,将基于云的后端服务添加到 iOS 移动应用。 你将创建一个新的移动应用后端和一个简单的待办事项列表应用,此应用将应用数据存储在 Azure 中

开始学习有关使用 Azure 应用服务中的移动应用功能的其他 Xamarin.iOS 教程之前,必须先完成本教程。

先决条件

要完成本教程,您需要:

  • 具有以下工作负载的 Visual Studio 2022
    • ASP.NET 和 Web 开发
    • Azure 开发
    • 使用 .NET 的移动开发
  • 一个 Azure 帐户。
  • Azure CLI
    • 在开始之前,使用 az login 并选择适当的订阅登录。
  • (可选) Azure 开发人员 CLI
  • 可用的 Mac:
    • 安装 Xcode
    • 安装 Xcode 后将其打开,以便它可以添加任何其他的必需组件。
    • 打开后,选择“Xcode 首选项…”>“组件”,然后安装 iOS 模拟器
    • 按照指南对 Mac 进行配对。

编译 iOS 版本需要 Mac。

下载示例应用

  1. 浏览器中打开 azure-mobile-apps 存储库

  2. 打开 “代码 ”下拉列表,然后选择“ 下载 ZIP”。

    Screenshot of the Code menu on GitHub.

  3. 下载完成后,打开 “下载” 文件夹并找到 azure-mobile-apps-main.zip 该文件。

  4. 右键单击下载的文件,然后选择“ 全部提取...”

    如果愿意,可以使用 PowerShell 扩展存档:

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip
    

这些示例位于 提取文件内的 samples 文件夹中。 快速入门示例命名 TodoApp。 可以通过双击 TodoApp.sln 文件在 Visual Studio 中打开示例。

Screenshot of the file explorer for the solution.

将后端部署到 Azure

注意

如果已从另一个快速入门部署后端,则可以使用相同的后端并跳过此步骤。

若要部署后端服务,我们将:

  • 将Azure App 服务和Azure SQL 数据库预配到 Azure。
  • 使用 Visual Studio 将服务代码部署到新创建的Azure App 服务。

使用 Azure 开发人员 CLI 完成所有步骤

TodoApp 示例配置为支持 Azure 开发人员 CLI。 若要完成所有步骤(预配和部署):

  1. 安装 Azure 开发人员 CLI
  2. 打开终端并将目录更改为包含 TodoApp.sln 该文件的文件夹。 此目录还包含 azure.yaml
  3. 运行 azd up

如果尚未登录到 Azure,浏览器会启动以要求你登录。 然后系统会提示你输入要使用的订阅和 Azure 区域。 然后,Azure 开发人员 CLI 预配必要的资源,并将服务代码部署到所选的 Azure 区域和订阅。 最后,Azure 开发人员 CLI 会为你编写适当的 Constants.cs 文件。

可以运行以下命令 azd env get-values 来查看想要直接访问数据库的 SQL 身份验证信息。

如果已完成 Azure 开发人员 CLI 的步骤, 请继续执行下一步。 如果不想使用 Azure 开发人员 CLI,请继续执行手动步骤。

在 Azure 上创建资源。

  1. 打开终端并将目录更改为包含 TodoApp.sln 该文件的文件夹。 此目录还包含 azuredeploy.json

  2. 确保已 使用 Azure CLI 登录并选择订阅

  3. 创建新的资源组:

    az group create -l westus -g quickstart
    

    此命令在 quickstart “美国西部”区域创建资源组。 可以选择所需的任何区域,前提是可以在其中创建资源。 请确保在本教程中提及相同的名称和区域。

  4. 使用组部署创建资源:

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
    

    为 SQL 管理员istrator 密码选择强密码。 稍后访问数据库时需要用到它。

  5. 部署完成后,获取输出变量,因为这些变量包含稍后需要的重要信息:

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs
    

    示例输出为:

    Screenshot of command line results.

  6. 记下输出中的每个值供以后使用。

发布服务代码

在 Visual Studio 中打开 TodoApp.sln

  1. 在右侧窗格中,选择 “解决方案资源管理器”。

  2. 右键单击 TodoAppService.NET6 该项目,然后选择“ 设置为启动项目”。

  3. 在顶部菜单中,选择“ 生成>发布 TodoAppService.NET6”。

  4. “发布 ”窗口中,选择“目标: Azure”,然后按“ 下一步”。

    Screenshot of the target selection window.

  5. 选择特定目标:Azure App 服务(Windows),然后按“下一步”。

    Screenshot of the specific target selection window.

  6. 如有必要,请登录并选择相应的 订阅名称

  7. 确保 视图 设置为 资源组

  8. quickstart展开资源组,然后选择之前创建的App 服务。

    Screenshot of the app service selection window.

  9. 选择“完成”。

  10. 发布配置文件创建过程完成后,选择“ 关闭”。

  11. 找到服务依赖项并选择 SQL Server 数据库旁边的三点,然后选择连接

    Screenshot showing the S Q L server configuration selection.

  12. 选择Azure SQL 数据库,然后选择“下一步”。

  13. 选择快速入门数据库,然后选择“下一步”。

    Screenshot of the database selection window.

  14. 使用部署输出中的 SQL 用户名和密码填写表单,然后选择“ 下一步”。

    Screenshot of the database settings window.

  15. 选择“完成”。

  16. 完成后选择“ 关闭 ”。

  17. 选择“发布”,将应用发布到之前创建的Azure App 服务。

    Screenshot showing the publish button.

  18. 发布后端服务后,将打开浏览器。 添加到 /tables/todoitem?ZUMO-API-VERSION=3.0.0 URL:

    Screenshot showing the browser output after the service is published.

配置示例应用

客户端应用程序需要知道后端的基 URL,以便它可以与后端通信。

如果用于 azd up 预配和部署服务,则 Constants.cs 已为你创建该文件,你可以跳过此步骤。

  1. TodoApp.Data展开项目。

  2. 右键单击TodoApp.Data项目,然后选择“添加>类...”。

  3. 输入 Constants.cs 为名称,然后选择“ 添加”。

    Screenshot of adding the Constants.cs file to the project.

  4. Constants.cs.example打开该文件并复制内容(Ctrl-A,后跟 Ctrl-C)。

  5. 切换到 Constants.cs,突出显示所有文本(Ctrl-A),然后粘贴示例文件(Ctrl-V)中的内容。

  6. 将服务 https://APPSERVICENAME.azurewebsites.net 后端 URL 替换为该 URL。

    namespace TodoApp.Data
    {
        public static class Constants
        {
            /// <summary>
            /// The base URI for the Datasync service.
            /// </summary>
            public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
        }
    }
    

    可以从“ 发布 ”选项卡获取服务的后端 URL。请确保使用 https URL。

  7. 保存文件。 (Ctrl-S)。

生成并运行应用

  1. 在解决方案资源管理器中,展开 xamarin-native 文件夹。

  2. 右键单击 TodoApp.iOS 项目并选择“设为启动项目”

  3. 在顶部栏中,选择“i电话模拟器配置和 TodoApp.iOS 目标:

    Screenshot showing how to set the run configuration for a Xamarin for i O S app.

  4. 选择适当的 i电话 模拟器(我选择了运行 iOS 15.5 的 i电话 标准版)。

  5. 按 F5 生成并运行项目。

应用启动后,你将看到一个空列表和一个文本框,用于在模拟器中添加项。 你可以:

  • +按按钮添加项目。
  • 选择要设置或清除已完成标志的项目。
  • 按刷新图标从服务重新加载数据。

Screenshot of the running i O S app showing the to do list.

疑难解答

Visual Studio 2022 附带的远程模拟器与 XCode 13.3 不兼容。 将收到以下错误消息:

Screenshot of the error message when launching the i O S simulator.

若要解决此问题,请执行以下操作:

  • 禁用远程模拟器(工具/选项/iOS 设置/un检查远程模拟器到 Windows)。 取消检查后,模拟器将在 Mac 而不是 Windows 上运行。 然后在 Windows 上使用调试器等时,可以直接在 Mac 上与模拟器进行交互。
  • 禁用上述远程模拟器,以便模拟器在 Mac 上运行。 然后使用远程桌面应用从 Windows 连接到 Mac 桌面。 远程桌面选项包括 Devolutions 远程桌面管理器 (快速且有可用免费版本),以及 VNC 客户端(较慢且免费)。
  • 使用物理设备测试而不是模拟器。 可以获取 免费的预配配置文件 以完成身份验证教程。

后续步骤

通过 向应用添加身份验证继续学习本教程。