使用 Azure 移动应用生成 Windows (UWP) 应用

注意

此产品已停用。 有关使用 .NET 8 或更高版本的项目的替换,请参阅 Community Toolkit Datasync 库

本教程介绍如何使用 Azure 移动应用和 Azure 移动应用后端将基于云的后端服务添加到通用 Windows 平台(UWP)桌面应用。 你将创建一个新的移动应用后端和一个简单的 Todo 列表 应用,用于在 Azure 中存储应用数据。

有关在 Azure 应用服务中使用移动应用功能的其他所有 Windows(UWP)教程都需要本教程。

先决条件

若要完成本教程,需要:

  • 使用以下工作负载 Visual Studio 2022
    • ASP.NET 和 Web 开发
    • Azure 开发
    • 通用 Windows 平台开发
  • azure 帐户
  • Azure CLI
    • 使用 az login 登录,并在开始之前选择适当的订阅。
  • (可选)Azure 开发人员 CLI

本教程只能在 Windows 系统上完成。

下载示例应用

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

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

    GitHub 上“代码”菜单的屏幕截图。

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

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

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

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

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

解决方案的文件资源管理器的屏幕截图。

将后端部署到 Azure

注意

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

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

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

使用 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 管理员密码选择强密码。 稍后访问数据库时需要用到它。

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

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

    示例输出为:

    命令行结果的屏幕截图。

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

发布服务代码

在 Visual Studio 中打开 TodoApp.sln

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

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

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

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

    目标选择窗口的屏幕截图。

  5. 选择特定目标:Azure 应用服务(Windows),然后按 下一

    特定目标选择窗口的屏幕截图。

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

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

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

    应用服务选择窗口的屏幕截图。

  9. 选择 完成

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

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

    显示 S Q L 服务器配置选择的屏幕截图。

  12. 选择 Azure SQL 数据库,然后选择 下一

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

    数据库选择窗口的屏幕截图。

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

    数据库设置窗口的屏幕截图。

  15. 选择 完成

  16. 完成后,选择 关闭

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

    显示发布按钮的 屏幕截图。

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

    显示发布服务后浏览器输出的屏幕截图。

配置示例应用

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

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

  1. 展开 TodoApp.Data 项目。

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

  3. 输入 作为名称,然后选择“添加

    将Constants.cs文件添加到项目的屏幕截图。

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

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

  6. https://APPSERVICENAME.azurewebsites.net 替换为服务的后端 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. 在解决方案资源管理器中,展开 windows 文件夹。

  2. 右键单击 TodoApp.UWP 项目,然后选择 设置为启动项目

  3. 在顶部栏中,选择 任何 CPU 配置和 TodoApp.UWP 目标:

    UWP 配置

  4. F5 生成并运行项目。

应用启动后,会看到一个包含文本框的空列表。 您可以:

  • 输入一些文本,然后按 + 图标添加项目。

  • 设置或清除复选框以将任何项目标记为已完成。

  • 按刷新图标从服务重新加载数据。

    运行应用 的 UWP

后续步骤

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