Создание приложения Xamarin.Forms с помощью и функции "Мобильные приложения Azure"

Статья
01/16/2024

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

Это руководство нужно пройти перед другими руководствами по Xamarin.Forms, посвященными использованию функции "Мобильные приложения" в Службе приложений Azure.

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

Операции, описанные в этом руководстве, можно выполнять в Mac или Windows. Для работы с этим учебником необходимы указанные ниже компоненты.

Visual Studio 2022 со следующими рабочими нагрузками.
- ASP.NET и веб-разработка
- Разработка Azure
- Разработка мобильных приложений на .NET
Учетная запись Azure.
Интерфейс командной строки Azure.
- Войдите в az login систему и выберите соответствующую подписку перед началом работы.
(Необязательно) Интерфейс командной строки разработчика Azure.
Виртуальное устройство Android со следующими параметрами:
- Телефон: любой образ телефона — мы используем Пиксель 5 для тестирования.
- Системный образ: Android 11 (API 30 с API Google)

При компиляции выпуска приложения iOS у вас должен быть доступный Mac:

Установка Xcode
После установки необходимо открыть Xcode для добавления обязательных компонентов.
После открытия выберите элементы XCode Preferences... (Параметры Xcode)>Components (Компоненты) и установите симулятор iOS.
Если вы работаете с руководством для Windows, воспользуйтесь руководством по связыванию с Mac.

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

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

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

Установите интерфейс командной строки разработчика 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 Администратор istrator. Вам потребуется позже при доступе к базе данных.
После завершения развертывания получите выходные переменные, так как эти данные содержат важные сведения, необходимые позже:
```
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, а затем выберите Подключение.
Нажмите кнопку База данных 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

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

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

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

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

Screenshot of the running Android app.

Сборка и запуск приложения iOS

Примечание.

Необходимо следовать руководству по паре с Mac. При компиляции или запуске приложений iOS без связанного компьютера Mac будут возникать ошибки.

В обозревателе решений разверните папку xamarin-forms .
Щелкните правой кнопкой мыши проект TodoApp.Forms.iOS и выберите пункт Назначить запускаемым проектом.
В верхней строке выберите конфигурацию симулятора i Телефон и целевой объект TodoApp.Forms.iOS:
Выберите симулятор i Телефон
Нажмите клавишу 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. Затем вы можете взаимодействовать с симулятором непосредственно на Компьютере Mac при использовании отладчика и т. д. в Windows.
Отключите удаленный симулятор, как описано выше, чтобы симулятор работал на Компьютере Mac. Затем используйте приложение удаленного рабочего стола для подключения к рабочему столу Mac из Windows. Параметры удаленного рабочего стола включают диспетчер удаленных рабочих столов (быстрая и бесплатная версия), а клиенты VNC (медленнее и бесплатно).
Используйте физическое устройство для тестирования вместо симулятора. Чтобы завершить работу с руководством по проверке подлинности, можно получить бесплатный профиль подготовки.

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

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