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

Apache Cordova — это инструмент, который конвертирует веб-приложения в кроссплатформенные мобильные приложения. Cordova в основном используется для создания приложений для платформ Android и iOS, однако на ней также можно разрабатывать приложения для Windows, macOS и Linux. Инструмент полностью бесплатен, прост в использовании и позволяет выполнять расширенную настройку с помощью JavaScript (если это необходимо).

Чтобы увидеть работу Cordova, скачайте игру «Приключения фермера» из магазина «Апп Стор».

Введение

Прежде чем начать работу с Cordova, убедитесь, что у вас в наличии следующее:

Аппаратное обеспечение. Вы можете разрабатывать приложения для Android на любом компьютере под управлением Windows, macOS или Linux, в то время как для разработки приложений для устройств Apple потребуется компьютер «Мак».
Базовые навыки работы с консолью Windows/macOS/Linux (она же командный интерпретатор). Если у вас их нет, пожалуйста, найдите в Интернете учебники для начинающих.
Время. Следуя этому руководству, вы сможете создать свое первое приложение очень быстро. Однако могут пройти часы или дни, прежде чем вы получите одобрение своего аккаунта разработчика и опубликуете свое приложение в «Апп Стор»/Google Play.
Деньги. Создание и запуск приложений на собственных устройствах совершенно бесплатны. Однако для публикации в Google Play вам потребуется $25 (единовременная оплата), а для «Апп Стор» — $99 (ежегодная оплата).

А хорошая новость заключается в том, что вам не нужно быть разработчиком Android или iOS, чтобы создавать приложения для этих платформ. Как только вы запустите свою систему разработки, создание мобильных версий ваших Verge3D-приложений станет довольно простым делом!

Другой способ распространения приложений на десктопах и мобильных платформах — использование устанавливаемых прогрессивных веб-приложений.

Начало работы с Apache Cordova

Для работы с Cordova вам понадобится утилита npm, которая является частью среды разработки Node.js. Вы можете установить ее, следуя этим инструкциям.

В Linux вам лучше установить npm с помощью пакетного менеджера. Смотрите здесь для получения дополнительной информации.

После установки npm двоичные файлы Cordova можно установить с помощью следующей команды.

На macOS/Linux:

sudo npm install -g cordova

На Windows:

npm install -g cordova

Вместо глобальной установки Cordova в систему, вы можете использовать утилиту npx, например:

npx cordova platform add android

Создание шаблона приложения

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

С его помощью вы можете создать шаблон приложения Cordova прямо из Verge3D.

Когда ваш шаблон будет готов, скачайте его, а затем распакуйте ЗИП-архив в какую-либо директорию.

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

Перейдите в каталог, где находится ваш шаблон приложения Cordova, затем добавьте платформу Android:

cordova platform add android

Теперь самое сложное. Чтобы иметь возможность создавать и тестировать свое приложение в эмуляторе Android или на реальных устройствах, вам потребуется установить и настроить дополнительное программное обеспечение.

Во-первых, вам нужно установить Android Studio (Android Studio), который скачивается здесь.

После установки Android Studio необходимо указать путь к ней в значении переменной ANDROID_SDK_ROOT. В Windows вам также нужно будет установить значение переменной JAVA_HOME с путем к каталогу Java.

Смотрите здесь о том, как выставить эти переменные.

Последнее, что вам понадобится, это инструмент сборки Gradle. Ознакомьтесь с инструкцией здесь .

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

cordova requirements

Если какая-то зависимость отсутствует, команда сообщит об этом:


    Requirements check results for android:
    Java JDK: installed 1.8.0
    Android SDK: installed true
    Android target: not installed
    Please install the Android SDK Platform "platforms;android-30"
    Gradle: installed /home/alex/Downloads/gradle-6.3/bin/gradle
    Some of requirements check failed

В частности сообщение выше указывает на необходимость установки (или обновления) компонента Android SDK в Android Studio:

Если все зависимости установлены, вы увидите следующее:


    Requirements check results for android:
    Java JDK: installed 1.8.0
    Android SDK: installed true
    Android target: installed android-30
    Gradle: installed /home/alex/Downloads/gradle-6.3/bin/gradle

Чтобы собрать приложение, выполните:

cordova build android

Чтобы запустить его в эмуляторе Android, убедитесь что вы добавили виртуальное устройство в окне Device Manager Android Studio (оно должно соответствовать версии Android SDK, установленной ранее):

далее выполните команду:

cordova emulate android

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

cordova run android

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

Перейдите в каталог, где находится ваш шаблон приложения Cordova, затем добавьте платформу iOS:

cordova platform add ios

Теперь самое сложное. Чтобы иметь возможность создавать и тестировать свое приложение в эмуляторе iOS или на реальных устройствах, вам потребуется установить и настроить дополнительное программное обеспечение.

Сначала вам нужно установить XCode, скачайте его из «Мак Апп Стор».

Затем установите менеджер пакетов Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

После этого вам понадобятся инструменты ios-deploy .

brew install ios-deploy

Тогда вам понадобится менеджер зависимостей CocoaPods:

sudo gem install cocoapods

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

cordova requirements

Пришло время запустить ваше приложение, выполните:

cordova emulate ios

чтобы собрать и запустить его в эмуляторе iOS.

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

cordova run ios

Для запуска на реальном устройстве ваше приложение должно быть зарегистрировано в XCode. Инструкции для ознакомления вы найдёте здесь .

Улучшаем приложение

Изменение имени и значка приложения

Чтобы иметь возможность генерировать значки приложений, установите изображение 512х512 в настройках приложения:

Далее, каждый раз при создании шаблона приложения Cordova, это изображение будет использоваться как исходное при генерации линейки иконок с размерами, требуемыми для Android и «АйОСа». Само масштабирование производится утилитой ImageMagick.

Если в установили Verge3D в Windows, ImageMagick уже входит в дистрибутив, поэтому конвертация произойдёт автоматически.

Для macOS, установите ImageMagick через Homebrew:

brew install imagemagick

Для Ubuntu Linux используйте менеджер пакетов APT:

sudo apt install imagemagick

Обработка событий, специфичных для Cordova

Есть 3 события, присущие Cordova, доступные через JavaScript или пазлы, которые вы можете использовать, чтобы сделать ваши приложения более удобными для мобильных устройств:

deviceready - срабатывает, когда ваше приложение полностью инициализировано. Вы также можете использовать его для определения того, когда ваше приложение запущено на Cordova.
pause — срабатывает, когда приложение переходит в фоновый режим или переключается на другое приложение. Используйте его для приостановки рендеринга приложения / воспроизведения звука / видео и т.д.
resume — срабатывает, когда ваше приложение становится активным. Это событие противоположно pause.

Убедитесь, что вы фиксируете эти события в элементе document. Также используйте опцию in parent doc в случае, если ваше приложение работает в iframe (см. более подробную информацию об этой связке здесь).

Создание нативных диалогов

Используйте плагин cordova-plugin-dialogs.

Дополнительные возможности

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

Публикация приложения

Ознакомьтесь с инструкцией здесь.

Остались вопросы?

Задайте их на нашем форуме!