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

Создание приложения Apache Cordova

  • Статья

Обзор

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

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

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

Для работы с данным руководством вам потребуется:

Можно также обойтись без Visual Studio и использовать командную строку Apache Cordova напрямую. Эта командная строка пригодится, если вы работаете с данным руководством на компьютере Mac. Компиляция клиентских приложений Apache Cordova с помощью командной строки в этом учебнике не рассматривается.

Создание серверной части мобильного приложения Azure

  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. В простых таблицах нажмите кнопку +Добавить .

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

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

        Добавление таблицы в простые таблицы node

    • Сервер .NET

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

      1. Скачайте проект сервера мобильных приложений Azure .NET из репозитория 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/ в браузер.

Загрузка и запуск приложения Apache Cordova

  1. Перейдите к файлу решения в клиентском проекте (SLN) и откройте его с помощью Visual Studio.

  2. В Visual Studio выберите платформу решения (Android, iOS или Windows) в раскрывающемся списке, находящемся возле стрелки запуска. Щелкните зеленую стрелку и выберите устройство развертывания или эмулятор в появившемся раскрывающемся списке. Вы можете использовать стандартную платформу Android и эмулятор Ripple. В руководствах для продвинутых пользователей (например, по push-уведомлениям) требуется выбрать поддерживаемое устройство или эмулятор.

  3. Откройте файл ToDoActivity.java в этой папке — ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. Имя приложения — ZUMOAPPNAME.

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

  5. Перейдите к файлу index.js в ZUMOAPPNAME/www/js/index.js и в onDeviceReady() методе замените ZUMOAPPURL параметр общедоступной конечной точкой выше.

    client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

    becomes

    client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');

  6. Чтобы создать и запустить приложение Cordova, нажмите клавишу F5 или щелкните зеленую стрелку. Если отображается диалоговое окно безопасности в эмуляторе, которое требует доступ к сети, примите запрос.

  7. После запуска приложения на устройстве или эмуляторе введите содержательный текст введите новый текст, например "Завершить учебник" , а затем нажмите кнопку "Добавить ".

Сервер вносит данные из запроса в таблицу TodoItem в базе данных SQL и возвращает сведения о сохраненных элементах в мобильное приложение. В мобильном приложении эти данные отображаются в списке.

Шаги 3–5 можно повторить для других платформ.