Создание приложения Apache Cordova с помощью мобильных приложений Azure

Статья
05/05/2021

Заметка

Этот продукт отставлен. Сведения о замене проектов с помощью .NET 8 или более поздней версии см. вбиблиотеке Community Toolkit Datasync.

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

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

Необходимые условия

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

рабочая установка Apache Cordova 8.1.2.
Текстовый редактор (например, Visual Studio Code).
учетной записи Azure.
Azure CLI.
- войти в учетную запись Azure и выбрать подписку с помощью Azure CLI.

Это руководство можно выполнить в системах Windows или Mac. Версию приложения iOS можно запускать только на Компьютере Mac. В этом руководстве используется только Windows (с приложением, работающим в Android).

Требуется Apache Cordova 8.1.2 или более ранней версии

Apache Cordova выпустила несовместимое изменение средства в версии 9.0.0. Если у вас установлен Apache Cordova версии 9.0.0 или более поздней версии, подключаемый модуль не будет работать, жалуясь на проблему зависимостей с модулем q.

Visual Studio Code

Существует расширение Apache Cordova для Visual Studio Code, позволяющее запускать приложение с отладкой. Visual Studio Code настоятельно рекомендуется для разработки Apache Cordova.

Установка Gradle

Наиболее распространенная ошибка при настройке Apache Cordova в Windows — установка Gradle. Это устанавливается по умолчанию с помощью Android Studio, но недоступно для обычного использования. Скачайте и распакуйте последнюю версию, а затем добавьте каталог bin в path вручную.

Скачайте проект быстрого запуска Apache Cordova

Проект быстрого запуска Apache Cordova находится в папке samples/cordova репозитория azure/azure-mobile-apps репозитория GitHub. Вы можете скачать репозиторий в виде ZIP-файла, а затем распаковывать его. Файлы будут созданы в папке azure-mobile-apps-main.

После скачивания откройте терминал и измените каталог на расположение файлов.

Развертывание серверной службы

Чтобы развернуть службу быстрого запуска, сначала войдите в Azure с помощью Azure CLI:

az login

Для завершения авторизации откроется веб-браузер.

При необходимости выберите подписку.

Создание группы ресурсов

Введите следующее, чтобы создать группу ресурсов:

az group create -l westus -n zumo-quickstart

Эта команда создает группу ресурсов с именем zumo-quickstart для хранения всех создаваемых ресурсов. Замените westus другим регионом, если у вас нет доступа к региону westus или вы предпочитаете регион ближе к вам.

Развертывание серверной части в Azure

Служба состоит из следующих ресурсов:

План размещения службы приложений на бесплатном плане.
Веб-сайт, размещенный в плане размещения службы приложений.
Сервер SQL Azure.
База данных SQL Azure на уровне "Базовый" (взимается стоимость).

База данных SQL Azure — единственный ресурс, который несет затраты. Дополнительные сведения см. в ценах.

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

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

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

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

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

Наконец, разверните сервер мобильных приложений Azure в созданной службе приложений:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Замените zumo-XXXXXXXX именем службы приложений; отображается в списке выходных данных. В течение 2–3 минут сервер мобильных приложений Azure будет готов к использованию. Вы можете использовать веб-браузер, чтобы убедиться, что серверная часть работает. Наведите веб-браузер на общедоступную конечную точку с /tables/TodoItem, добавленной к ней (например, https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). Браузер отобразит ошибку о отсутствующих параметрах X-ZUMO-VERSION, если сервер работает правильно.

удаление ресурсов

После завершения работы с руководством по краткому руководству вы можете удалить ресурсы с помощью az group delete -n zumo-quickstart.

Руководство состоит из трех частей (включая этот раздел). Не удаляйте ресурсы перед выполнением учебника.

Настройка проекта быстрого запуска Apache Cordova

Запустите npm install, чтобы установить все зависимости.

Добавьте платформу в проект. Например, чтобы добавить платформу Android, используйте следующую команду:

cordova platform add android

При необходимости можно добавить browser, androidи ios. Платформа browser не будет работать с включенной автономной синхронизацией. После добавления всех платформ, которые вы хотите использовать, запустите cordova requirements, чтобы убедиться, что выполнены все требования.

Откройте файл www/js/index.js в текстовом редакторе. Измените определение BackendUrl, чтобы отобразить внутренний URL-адрес. Например, если внутренний URL-адрес был https://zumo-abcd1234.azurewebsites.net, url-адрес серверной части будет выглядеть следующим образом:

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

Сохраните файл. Откройте файл www/index.html в текстовом редакторе. Измените Content-Security-Policy, чтобы обновить URL-адрес, соответствующий внутреннему URL-адресу; Например:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

Чтобы создать приложение, используйте следующую команду:

cordova build

Запуск приложения

При запуске из браузера (с помощью cordova platform add browser), необходимо включить поддержку CORS в службе приложений Azure. Для этого выполните следующую команду:

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

Замените ZUMPAPPNAME именем серверной части службы приложений Azure. После настройки серверной части выполните следующую команду:

cordova run android

После завершения начального запуска можно добавить и удалить элементы из списка. Элементы todo хранятся в экземпляре SQL Azure, подключенном к серверной части мобильных приложений Azure.

Если эмулятор не запускается автоматически, откройте Android Studio, выберите Настроить>AVD Manager. Теперь вы можете запустить эмулятор вручную. Если вы запускаете adb devices -l, вы увидите выбранное эмулированное устройство. Теперь вы сможете запускать cordova run android.

Приложение Apache Cordova

Дальнейшие действия

Продолжайте реализовывать автономной синхронизации данных.

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