Создание приложения Windows (WinUI3) с помощью мобильных приложений Azure

  • Статья

Заметка

Этот продукт отставлен. Сведения о замене проектов с помощью .NET 8 или более поздней версии см. вбиблиотеке Community Toolkit Datasync.

В этом руководстве показано, как добавить облачную серверную службу в классическое приложение пакета SDK для приложений Windows (WinUI3) с помощью мобильных приложений Azure и серверной части мобильного приложения Azure. Вы создадите как серверную часть мобильного приложения, так и простой список todo приложение, которое хранит данные приложения в Azure.

Это руководство необходимо выполнить перед всеми другими руководствами по Windows (WinUI3) об использовании функции мобильных приложений в Службе приложений Azure.

Необходимые условия

Чтобы завершить работу с этим руководством, вам потребуется:

  • Visual Studio 2022 со следующими рабочими нагрузками.
    • ASP.NET и веб-разработка
    • Разработка Azure
    • Разработка классических приложений .NET
    • Разработка универсальной платформы Windows
    • В области сведения о установке диалогового окна установки выберите Шаблоны C# пакета SDK для windows (в нижней части списка).
    • На вкладке отдельных компонентов диалогового окна установки в разделе пакетов SDK, библиотек и платформ убедитесь, что выбран пакет SDK для Windows 10. Выберите версию, равную или более поздней версии 10.0.19041.0.
  • учетной записи Azure.
  • Azure CLI.
    • Войдите с помощью az login и выберите соответствующую подписку перед началом работы.
  • (Необязательно)интерфейс командной строки разработчика Azure.

Дополнительные сведения о средствах, необходимых для разработки пакета SDK для приложений Windows, см. в средства установки пакета SDK для приложений Windows.

Это руководство можно выполнить только в системе Windows.

Скачивание примера приложения

  1. Откройте репозиторий azure-mobile-apps в браузере.

  2. Откройте раскрывающийся список кода , а затем выберите Скачать ZIP-.

    снимок экрана: меню

  3. После завершения скачивания откройте папку загрузки и найдите файл azure-mobile-apps-main.zip.

  4. Щелкните правой кнопкой мыши скачанный файл и выберите Извлечь все....

    Если вы предпочитаете, можно использовать PowerShell для расширения архива:

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

Примеры находятся в папке в извлеченных файлах. Пример быстрого запуска называется TodoApp. Пример можно открыть в Visual Studio, дважды щелкнув файл TodoApp.sln.

снимок экрана проводника для решения.

Развертывание серверной части в Azure

Заметка

Если серверная часть уже развернута с другого быстрого запуска, можно использовать ту же серверную часть и пропустить этот шаг.

Чтобы развернуть серверную службу, мы будем:

  • Подготовка службы приложений Azure и базы данных SQL Azure в Azure.
  • Используйте Visual Studio для развертывания кода службы в только что созданной службе приложений Azure.

Использование интерфейса командной строки разработчика Azure для выполнения всех действий

Пример TodoApp настроен для поддержки Интерфейса командной строки разработчика Azure. Чтобы выполнить все действия (подготовка и развертывание):

  1. установитеинтерфейса командной строки разработчика Azure.
  2. Откройте терминал и измените каталог в папку, содержащую файл TodoApp.sln. Этот каталог также содержит azure.yaml.
  3. Запустите azd up.

Если вы еще не вошли в Azure, браузер запускает запрос на вход. Затем вам будет предложено использовать подписку и регион Azure. Затем интерфейс командной строки разработчика Azure подготавливает необходимые ресурсы и развертывает код службы в регионе Azure и выбранной подписке. Наконец, интерфейс командной строки разработчика Azure записывает для вас соответствующий Constants.cs-файл.

Вы можете запустить команду azd env get-values, чтобы просмотреть сведения о проверке подлинности SQL, если вы хотите напрямую получить доступ к базе данных.

Если вы выполнили действия с интерфейсом командной строки разработчика Azure, перейдите к следующему шагу. Если вы не хотите использовать интерфейс командной строки разработчика Azure, выполните действия, описанные вручную.

Создание ресурсов в 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. Запишите каждое из значений в выходных данных для последующего использования.

Публикация кода службы

Откройте TodoApp.sln в Visual Studio.

  1. В правой области выберите обозреватель решений .

  2. Щелкните правой кнопкой мыши проект TodoAppService.NET6, а затем выберите Задать в качестве запускаемого проекта.

  3. В верхнем меню выберите Сборка>Опубликовать TodoAppService.NET6.

  4. В окне Публикации выберите целевой объект: Azure, а затем нажмите клавишу Далее.

    снимок экрана окна выбора целевого объекта.

  5. Выберите конкретный целевой объект: Службы приложений Azure (Windows), а затем нажмите клавишу Далее.

    снимок экрана: окно выбора определенного целевого объекта.

  6. При необходимости войдите и выберите соответствующее имя подписки .

  7. Убедитесь, что представления задано значение группы ресурсов.

  8. Разверните группу ресурсов quickstart, а затем выберите службу приложений, созданную ранее.

    снимок экрана окна выбора службы приложений.

  9. Выберите Готово.

  10. После завершения процесса создания профиля публикации выберите Закрыть.

  11. Найдите зависимостей служб и выберите тройную точку рядом с базой данных SQL Server, а затем выберите Connect.

    снимок экрана: выбор конфигурации сервера S Q L.

  12. Выберите Базу данных SQL Azure, а затем выберите Далее.

  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 в качестве имени, а затем выберите Добавить.

    снимок экрана: добавление файла 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-адрес службы на вкладке Публикации. Убедитесь, что вы используете URL-адрес https.

  7. Сохраните файл. (Ctrl-S).

Создание и запуск примера приложения

  1. В обозревателе решений разверните папку windows.

  2. Щелкните правой кнопкой мыши проект TodoApp.WinUI и выберите Задать в качестве запускаемого проекта.

  3. Убедитесь, что верхняя панель отображает TodoApp.WinUI (Package) в качестве целевого объекта отладки:

    снимок экрана: панель конфигурации Visual Studio.

  4. Нажмите клавишу F5, чтобы создать и запустить проект.

После запуска приложения появится пустой список с текстовым полем. Вы можете:

  • Введите текст, а затем нажмите клавишу ВВОД или значок +, чтобы добавить элемент.

  • Установите или снимите флажок, чтобы пометить любой элемент, как это сделано.

  • Нажмите значок обновления, чтобы перезагрузить данные из службы.

    снимок экрана приложения Windows, работающего в Windows.

Дальнейшие действия

Перейдите к руководству, добавив проверку подлинности в приложение.