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

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

Обзор

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

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

Предпосылки

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

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

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

  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/ в браузере.

Скачивание и запуск приложения Apache Cordova

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

  2. В Visual Studio выберите платформу решения (Android, iOS или Windows) в раскрывающемся списке рядом со стрелкой запуска. Выберите определенное устройство развертывания или эмулятор, щелкнув раскрывающийся список на зеленой стрелке. Вы можете использовать платформу Android по умолчанию и эмулятор Рябь. Более сложные руководства (например, 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');

    становится

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

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

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

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

Вы можете повторить шаги 3–5 для других платформ.

  • Last updated on