Создание приложения .NET MAUI с помощью мобильных приложений Azure

Статья
01/12/2024

Заметка

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

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

Это руководство необходимо выполнить до других учебников по MAUI .NET с помощью функции мобильных приложений в Службе приложений Azure.

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

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

Visual Studio 2022 со следующими рабочими нагрузками:
- ASP.NET и веб-разработка
- Разработка Azure
- Разработка мобильных устройств с помощью .NET
учетной записи Azure.
Azure CLI.
- Войдите с помощью az login и выберите соответствующую подписку перед началом работы.
(Необязательно)интерфейс командной строки разработчика Azure.
виртуального устройства Android
со следующими параметрами:
- Телефон: любой образ телефона — мы используем Пиксель 5 для тестирования.
- Системный образ: Android 11 (API 30 с API Google)
Доступный Mac (для компиляции и запуска версии iOS):
- Установка XCode
- Откройте Xcode после установки, чтобы он смог добавить все дополнительные необходимые компоненты.
- После открытия выберите настройки XCode...>компонентыи установите симулятор iOS.
- Следуйте инструкциям, чтобы Pair to Mac.

Для компиляции версии iOS требуется mac.

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

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

Откройте репозиторий azure-mobile-apps в браузере.
Откройте раскрывающийся список кода , а затем выберите Скачать ZIP-.
После завершения скачивания откройте папку загрузки и найдите файл azure-mobile-apps-main.zip.
Щелкните правой кнопкой мыши скачанный файл и выберите Извлечь все....

Если вы предпочитаете, можно использовать 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. Чтобы выполнить все действия (подготовка и развертывание):

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

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

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

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

Создание ресурсов в Azure.

Откройте терминал и измените каталог в папку, содержащую файл TodoApp.sln. Этот каталог также содержит azuredeploy.json.
Убедитесь, что вы выполнили вход и выбрали подписку с помощью Azure CLI.
Создайте новую группу ресурсов:
```
az group create -l westus -g quickstart
```
Эта команда создает группу ресурсов quickstart в регионе "Западная часть США". Вы можете выбрать любой нужный регион, предоставив вам возможность создавать ресурсы. Убедитесь, что вы используете одно и то же имя и регион, где бы они ни упоминались в этом руководстве.
Создайте ресурсы с помощью развертывания группы:
```
az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
```
Выберите надежный пароль для пароля администратора SQL. Вам потребуется позже при доступе к базе данных.
После завершения развертывания получите выходные переменные, так как эти данные содержат важные сведения, необходимые позже:
```
az deployment group show -g quickstart -n azuredeploy --query properties.outputs
```
Пример выходных данных:
Запишите каждое из значений в выходных данных для последующего использования.

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

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

В правой области выберите обозреватель решений .
Щелкните правой кнопкой мыши проект TodoAppService.NET6, а затем выберите Задать в качестве запускаемого проекта.
В верхнем меню выберите Сборка>Опубликовать TodoAppService.NET6.
В окне Публикации выберите целевой объект: Azure, а затем нажмите клавишу Далее.
Выберите конкретный целевой объект: Службы приложений Azure (Windows), а затем нажмите клавишу Далее.
При необходимости войдите и выберите соответствующее имя подписки .
Убедитесь, что представления задано значение группы ресурсов.
Разверните группу ресурсов quickstart, а затем выберите службу приложений, созданную ранее.
Выберите Готово.
После завершения процесса создания профиля публикации выберите Закрыть.
Найдите зависимостей служб и выберите тройную точку рядом с базой данных SQL Server, а затем выберите Connect.
Выберите Базу данных SQL Azure, а затем выберите Далее.
Выберите краткое руководство базы данных, а затем нажмите кнопку Далее.
Заполните форму с помощью имени пользователя и пароля SQL, которые были в выходных данных развертывания, а затем нажмите кнопку Далее.
Выберите Готово.
По завершении нажмите кнопку Закрыть.
Выберите опубликовать, чтобы опубликовать приложение в созданной ранее службе приложений Azure.
После публикации серверной службы откроется браузер. Добавьте /tables/todoitem?ZUMO-API-VERSION=3.0.0 в URL-адрес:

Настройка примера приложения

Клиентское приложение должно знать базовый URL-адрес серверной части, чтобы он смог взаимодействовать с ним.

Если вы использовали azd up для подготовки и развертывания службы, для вас был создан файл Constants.cs, и этот шаг можно пропустить.

Разверните проект TodoApp.Data.
Щелкните правой кнопкой мыши проект TodoApp.Data, а затем выберите Добавить класс>....
Введите Constants.cs в качестве имени, а затем выберите Добавить.
Откройте файл Constants.cs.example и скопируйте содержимое (CTRL-A, а затем Ctrl-C).
Переключитесь на Constants.cs, выделите весь текст (Ctrl-A), а затем вставьте содержимое из примера файла (Ctrl-V).
Замените 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.
Сохраните файл. (Ctrl-S).

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

В обозревателе решений разверните папку maui.
Щелкните правой кнопкой мыши проект TodoApp.MAUI и выберите Задать в качестве запускаемого проекта.
В верхней строке выберите соответствующий эмулятор Android:
Если эмуляторы Android недоступны, необходимо создать его. Дополнительные сведения см. в настройке эмулятора Android. Чтобы создать новый эмулятор Android, выполните следующие действия.
- Выберите Сервис>Android>Диспетчер устройств Android.
- Выберите + Создать.
- Выберите следующие параметры в левой части:
  - Имя: quickstart
  - Базовое устройство: пиксель 5
  - Процессор: x86_64
  - ОС: Android 11.0 — API 30
  - API Google: проверено
- Выберите Создать.
- При необходимости примите лицензионное соглашение. Затем будет скачан образ.
- После появления кнопки "Пуск" нажмите клавишу "Пуск".
- Если вам будет предложено Hyper-V аппаратное ускорение, ознакомьтесь с документацией, чтобы включить аппаратное ускорение перед продолжением. Эмулятор будет медленным без включения аппаратного ускорения.
Кончик

Запустите эмулятор Android, прежде чем продолжить. Это можно сделать, открыв диспетчер устройств Android и нажав запустить рядом с выбранным эмулятором.
Нажмите клавишу F5, чтобы создать и запустить проект.

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

Введите текст в поле, а затем нажмите клавишу ВВОД, чтобы вставить новый элемент.
Выберите элемент, чтобы задать или очистить завершенный флаг.
Нажмите значок обновления, чтобы перезагрузить данные из службы.

снимок экрана: работающее приложение Android с списком действий.

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

В обозревателе решений разверните папку maui.
Щелкните правой кнопкой мыши проект TodoApp.MAUI и выберите Задать в качестве запускаемого проекта.
В верхней строке выберите компьютер Windows.
Нажмите клавишу F5, чтобы создать и запустить проект.

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

Введите текст в поле, а затем нажмите клавишу ВВОД, чтобы вставить новый элемент.
Выберите элемент, чтобы задать или очистить завершенный флаг.
Нажмите значок обновления, чтобы перезагрузить данные из службы.

снимок экрана: работающее приложение Windows с списком действий.

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

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

Поделиться через