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

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

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

Необходимые компоненты

Для работы с этим учебником необходимы указанные ниже компоненты.

  • Visual Studio 2022 со следующими рабочими нагрузками.
    • ASP.NET и веб-разработка
    • Разработка Azure
    • "Разработка приложений для универсальной платформы Windows".
  • Учетная запись Azure.
  • Интерфейс командной строки Azure.
    • Войдите в az login систему и выберите соответствующую подписку перед началом работы.
  • (Необязательно) Интерфейс командной строки разработчика Azure.

Это руководство предназначено только для работы в Windows.

загрузка примера приложения;

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

  2. Откройте раскрывающийся список "Код", а затем нажмите кнопку "Скачать ZIP".

    Screenshot of the Code menu on GitHub.

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

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

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

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

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

Screenshot of the file explorer for the solution.

Развертывание серверной службы в 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 Администратор istrator. Вам потребуется позже при доступе к базе данных.

  5. После завершения развертывания получите выходные переменные, так как эти данные содержат важные сведения, необходимые позже:

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

    Пример выходных данных:

    Screenshot of command line results.

  6. Запишите каждое из значений в выходных данных для последующего использования.

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

TodoApp.sln Откройте visual Studio.

  1. В области справа выберите пункт "Решения" Обозреватель.

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

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

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

    Screenshot of the target selection window.

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

    Screenshot of the specific target selection window.

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

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

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

    Screenshot of the app service selection window.

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

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

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

    Screenshot showing the S Q L server configuration selection.

  12. Нажмите кнопку База данных SQL Azure, а затем нажмите кнопку "Далее".

  13. Выберите базу данных быстрого запуска, а затем нажмите кнопку "Далее".

    Screenshot of the database selection window.

  14. Заполните форму с помощью имени пользователя и пароля SQL, которые были в выходных данных развертывания, а затем нажмите кнопку "Далее".

    Screenshot of the database settings window.

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

  16. Нажмите кнопку "Закрыть " после завершения.

  17. Выберите "Опубликовать", чтобы опубликовать приложение в созданной ранее службе приложение Azure.

    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-адрес службы.

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

  3. В верхней строке выберите любую конфигурацию ЦП и целевой объект TodoApp.UWP :

    UWP Configuration

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

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

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

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

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

    UWP Running App

Следующие шаги

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