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


Создание приложения Xamarin.Forms с помощью Azure

Обзор

В этом руководстве показано, как добавить облачную серверную службу в мобильное приложение Xamarin.Forms с помощью функции мобильных приложений Службы приложений Azure в качестве серверной части. Вы создаете как новую серверную часть для мобильных приложений, так и простое список-приложение Xamarin.Forms to-do, которое хранит данные приложения в 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. В поле поиска введите Web App.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Кордова
    Windows (C#)

    Замечание

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

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

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

      Быстрый старт: Начало работы с отдельными базами данных в Azure SQL Database

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

      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 перейдите к Easy Tables, и вы увидите этот экран.

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

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

        Конфигурация узла Easy Tables

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

        узел 'Простые таблицы' кнопка

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

        Узел Лёгкие Таблицы Добавить Таблицу

    • .NET-бэкенд

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

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

      2. Создайте проект сервера .NET локально в Visual Studio.

      3. В Visual Studio откройте обозреватель решений, щелкните правой кнопкой мыши проект ZUMOAPPNAMEService, щелкните Опубликовать, отобразится окно Publish to App Service. Если вы работаете на 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";

    становится

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

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

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

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

Visual Studio

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

  2. В меню "Сборка" выберите Configuration Manager.

  3. В диалоговом окне Configuration Manager установите флажки "Сборка и развертывание " рядом с проектом Android и убедитесь, что в проекте общего кода установлен флажок "Сборка ".

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

Visual Studio для Mac

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

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

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

Приложение to-do Android

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

Замечание

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

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

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

Visual Studio

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

  2. В меню "Сборка" выберите Configuration Manager.

  3. В диалоговом окне Configuration Manager установите флажки "Сборка и развертывание " рядом с проектом iOS и убедитесь, что в проекте общего кода установлен флажок "Сборка ".

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

Visual Studio для Mac

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

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

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

iOS-приложение to-do

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

Замечание

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

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

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

Visual Studio

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

  2. В меню "Сборка" выберите Configuration Manager.

  3. В диалоговом окне Configuration Manager установите флажки "Сборка и развертывание " рядом с выбранным проектом Windows и убедитесь, что в проекте общего кода установлен флажок "Сборка ".

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

Замечание

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

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

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

Приложение to-do UWP

Замечание

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

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

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

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