Создание приложения Xamarin.Forms в Azure

  • Статья

Обзор

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

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

Предварительные требования

Для работы с этим учебником требуется:

  • Активная учетная запись Azure. Если у вас нет учетной записи, можно зарегистрироваться для получения бесплатной пробной версии Azure и получить до 10 бесплатных мобильных приложений, которые можно использовать и после окончания пробного периода. Дополнительные сведения см. на странице Создайте бесплатную учетную запись Azure уже сегодня.

  • Инструменты Visual Studio для Xamarin в Visual Studio 2017 или более поздней версии или Visual Studio для Mac. Инструкции можно найти на странице установки Xamarin.

  • (Необязательно) Чтобы создать приложение iOS, потребуется компьютер Mac с установкой Xcode 9.0 или более поздней версии. Visual Studio для Mac можно использовать для разработки приложений iOS или Visual Studio 2017 или более поздней версии (если компьютер Mac доступен в сети).

Создание серверной части при помощи функции "Мобильные приложения"

  1. Войдите на портал Azure.

  2. Щелкните Создать ресурс.

  3. В поле поиска введите веб-приложение.

  4. В списке результатов выберите веб-приложение из Marketplace.

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

  6. Выберите уникальное имя веб-приложения.

  7. Выберите параметр публикации по умолчанию в качестве кода.

  8. В стеке среды выполнения необходимо выбрать версию в разделе ASP.NET или Node. Если вы создаете серверную часть .NET, выберите версию в разделе ASP.NET. В противном случае, если вы нацелены на приложение на основе узла, выберите одну из версий из Node.

  9. Выберите правильную операционную систему под управлением Linux или Windows.

  10. Выберите регион , в котором должно быть развернуто это приложение.

  11. Выберите соответствующий Служба приложений план и нажмите кнопку "Проверить" и создать.

  12. В поле Группа ресурсоввыберите существующую группу ресурсов или создайте новую (с тем же именем, что и у приложения).

  13. Нажмите кнопку Создать. Прежде чем продолжать, подождите несколько минут, пока будет выполнено развертывание службы. Проверьте значок уведомлений (колокольчик) в заголовке портала на предмет обновлений состояния.

  14. После завершения развертывания щелкните раздел сведений о развертывании и выберите ресурс типа Microsoft.Web/sites. Он перейдет к только что созданному веб-приложению Служба приложений.

  15. Щелкните колонку "Конфигурация" в разделе "Параметры" и в параметрах приложения нажмите кнопку "Новый параметр приложения ".

  16. На странице параметров приложения "Добавить или изменить" введите имя как MobileAppsManagement_EXTENSION_VERSION и значение в качестве последних и нажмите кнопку "ОК".

Все вы можете использовать это только что созданное веб-приложение Служба приложений в качестве мобильного приложения.

Создание подключения к базе данных и настройка клиентского и серверного проекта

  1. Скачайте краткие руководства по клиентскому пакету SDK для следующих платформ:

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Cordova
    Windows (C#)

    Примечание

    Если вы используете проект iOS, необходимо скачать azuresdk-iOS-*.zip из последнего выпуска GitHub. Распакуйте файл и добавьте его MicrosoftAzureMobile.framework в корневой каталог проекта.

  2. Необходимо добавить подключение к базе данных или подключиться к существующему соединению. Сначала определите, будет ли вы создавать хранилище данных или использовать существующий.

    • Создайте новое хранилище данных: если вы собираетесь создать хранилище данных, используйте следующее краткое руководство.

      Краткое руководство. Начало работы с отдельными базами данных в базе данных Azure SQL

    • Существующий источник данных. Если вы хотите использовать существующее подключение к базе данных, следуйте приведенным ниже инструкциям.

      1. формат строки подключения База данных SQL —Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Имя сервера, это можно найти на странице обзора базы данных и обычно находится в виде "server_name.database.windows.net". {port} обычно 1433. {your_catalogue} Имя базы данных. {your_username} Имя пользователя для доступа к базе данных. {your_password} Пароль для доступа к базе данных.

        Дополнительные сведения о формате строки подключения SQL

      2. Добавьте строку подключения в мобильное приложение в Служба приложений, вы можете управлять строками подключения для приложения с помощью параметра "Конфигурация" в меню.

        Чтобы добавить строку подключения, выполните приведенные далее действия.

        1. Перейдите на вкладку "Параметры приложения ".

        2. Щелкните [+] Новая строка подключения.

        3. Необходимо указать имя, значение и тип для строки подключения.

        4. Имя типа какMS_TableConnectionString

        5. Значение должно быть строкой подключения, сформированной на шаге ранее.

        6. При добавлении строки подключения в базу данных SQL Azure выберите SQLAzure под типом.

  3. Мобильные приложения Azure имеют пакеты SDK для .NET и Node.js серверной части.

    • Серверная часть Node.js

      Если вы собираетесь использовать Node.js приложение быстрого запуска, следуйте приведенным ниже инструкциям.

      1. В портал Azure перейдите к простым таблицам, вы увидите этот экран.

        Простые таблицы node

      2. Убедитесь, что строка подключения SQL уже добавлена на вкладке "Конфигурация ". Затем установите флажок подтверждения того, что это перезапишет все содержимое сайта и нажмите кнопку "Создать таблицу TodoItem ".

        Конфигурация простых таблиц node

      3. В простых таблицах нажмите кнопку +Добавить .

        Кнопка добавления простых таблиц узла

      4. Создайте таблицу TodoItem с анонимным доступом.

        Добавление таблицы с простыми таблицами узла

    • Сервер .NET

      Если вы собираетесь использовать приложение быстрого запуска .NET, следуйте приведенным ниже инструкциям.

      1. Скачайте проект сервера .NET мобильных приложений Azure из репозитория azure-mobile-apps-quickstarts.

      2. Выполните сборку проекта сервера .NET локально в Visual Studio.

      3. В Visual Studio откройте Обозреватель решений, щелкните правой Publish to App Service кнопкой мыши ZUMOAPPNAMEService проект и выберите команду "Опубликовать", появится окно. Если вы работаете на Mac, ознакомьтесь с другими способами развертывания приложения здесь.

        Публикация Visual Studio

      4. Выберите Служба приложений в качестве целевого объекта публикации, а затем нажмите кнопку "Опубликовать" в нижней части окна.

      5. Сначала необходимо войти в Visual Studio с помощью подписки Azure. SubscriptionВыберите и Resource Groupвыберите имя приложения. Когда все будет готово, нажмите кнопку "ОК", вы развернете проект сервера .NET локально в серверной части Служба приложений. По завершении развертывания вы будете перенаправлены http://{zumoappname}.azurewebsites.net/ в браузер.

Запуск решения Xamarin.Forms

Инструменты Visual Studio для Xamarin необходимы, чтобы открыть решение, как описано в инструкциях по установке Xamarin. Если эти инструменты уже установлены, сделайте следующее, чтобы скачать и открыть решение:

Visual Studio (Windows и Mac)

  1. Перейдите к портал Azure и перейдите к созданному мобильному приложению. В колонке Overview найдите URL-адрес, который является общедоступной конечной точкой для мобильного приложения. Пример: имя сайта для имени приложения test123 будет иметь значение https://test123.azurewebsites.net.

  2. Откройте файл Constants.cs в этой папке — xamarin.forms/ZUMOAPPNAME. Имя приложения — ZUMOAPPNAME.

  3. В Constants.cs классе замените ZUMOAPPURL переменную общедоступной конечной точкой выше.

    public static string ApplicationURL = @"ZUMOAPPURL";

    becomes

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. Приведенные ниже инструкции позволяют запустить проект Android или Windows, а если в сети есть доступный компьютер Mac, то и проект iOS.

(Необязательно) Запуск проекта Android

В этом разделе вы запустите проект Xamarin.Android. Пропустите этот раздел, если вы не работаете с устройствами Android.

Visual Studio

  1. Щелкните правой кнопкой мыши проект Android (Droid) и выберите пункт Назначить запускаемым проектом.

  2. В меню Сборка выберите пункт Диспетчер конфигураций.

  3. В диалоговом окне Диспетчер конфигураций установите флажки Сборка и Развертывание рядом с проектом Android и проверьте наличие флажка Сборка у проекта общего кода.

  4. Чтобы выполнить сборку проекта и запустить приложение в эмуляторе Android, нажмите клавишу F5 или щелкните Пуск.

Visual Studio для Mac

  1. Щелкните правой кнопкой мыши проект Android и выберите пункт Назначить запускаемым проектом.

  2. Чтобы выполнить сборку проекта и запустить приложение в эмуляторе Android, щелкните пункт меню Выполнить, а затем Начать отладку.

В приложении введите содержательный текст, например Изучение Xamarin, и выберите знак плюса (+).

Приложение Android для списка задач

После этого в новую серверную часть, созданную при помощи функции "Мобильные приложения" и размещенную в Azure, будет отправлен запрос POST. Данные из запроса вставляются в таблицу TodoItem. Элементы, хранящиеся в таблице, возвращаются серверной частью, созданной при помощи функции "Мобильные приложения", а данные отображаются в списке.

Примечание

Код, который обращается к серверной части мобильного приложения, расположен в файле C# TodoItemManager.cs в проекте общего кода для вашего решения.

(Необязательно) Запуск проекта iOS

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

Visual Studio

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

  2. В меню Сборка выберите пункт Диспетчер конфигураций.

  3. В диалоговом окне Диспетчер конфигураций установите флажки Сборка и Развертывание рядом с проектом iOS и проверьте наличие флажка Сборка у проекта общего кода.

  4. Чтобы выполнить сборку проекта и запустить приложение в эмуляторе iPhone, нажмите клавишу F5.

Visual Studio для Mac

  1. Щелкните проект iOS правой кнопкой мыши и выберите параметр Назначить запускаемым проектом.

  2. В меню Выполнить выберите Начать отладку, чтобы выполнить сборку проекта и запустить приложение в эмуляторе iPhone.

В приложении введите содержательный текст, например Изучение Xamarin, и выберите знак плюса (+).

Приложение iOS для списка задач

После этого в новую серверную часть, созданную при помощи функции "Мобильные приложения" и размещенную в Azure, будет отправлен запрос POST. Данные из запроса вставляются в таблицу TodoItem. Элементы, хранящиеся в таблице, возвращаются серверной частью, созданной при помощи функции "Мобильные приложения", а данные отображаются в списке.

Примечание

Код, который обращается к серверной части мобильного приложения, расположен в файле C# TodoItemManager.cs в проекте общего кода для вашего решения.

(Необязательно) Запуск проекта Windows

В этом разделе описано, как запустить проект Xamarin.Forms универсальной платформы Windows (UWP) для устройств Windows. Пропустите этот раздел, если вы не работаете с устройствами Windows.

Visual Studio

  1. Щелкните проект UWP правой кнопкой мыши и выберите Назначить запускаемым проектом.

  2. В меню Сборка выберите пункт Диспетчер конфигураций.

  3. В диалоговом окне Диспетчер конфигураций установите флажки Сборка и Развертывание рядом с нужным проектом Windows и проверьте наличие флажка Сборка у проекта общего кода.

  4. Чтобы выполнить сборку проекта и запустить приложение в эмуляторе Windows, нажмите клавишу F5 или щелкните Пуск (Здесь должно быть указано Локальный компьютер).

Примечание

Проект Windows нельзя запускать на macOS.

В приложении введите содержательный текст, например Изучение Xamarin, и выберите знак плюса (+).

После этого в новую серверную часть, созданную при помощи функции "Мобильные приложения" и размещенную в Azure, будет отправлен запрос POST. Данные из запроса вставляются в таблицу TodoItem. Элементы, хранящиеся в таблице, возвращаются серверной частью, созданной при помощи функции "Мобильные приложения", а данные отображаются в списке.

Приложение UWP для списка задач

Примечание

Код, который обращается к серверной части мобильного приложения, располагается в файле C# TodoItemManager.cs в проекте переносимой библиотеки классов для вашего решения.

Устранение неполадок

При проблемах со сборкой проекта запустите диспетчер пакетов NuGet и выполните обновление до последней версии Xamarin.Forms, а для проекта Android — обновите еще и пакеты поддержки Xamarin.Android. Проекты быстрого запуска не всегда включают самые свежие версии.

Обратите внимание, что все пакеты поддержки, на которые содержатся ссылки в проекте Android, должны быть одной версии. Пакет NuGet для мобильных приложений Azure имеет зависимость Xamarin.Android.Support.CustomTabs для платформы Android, поэтому если в проекте используются пакеты поддержки более новой версии, во избежание конфликтов необходимо установить требуемую версию пакета.