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

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

Введение

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

Аппаратное обеспечение. Вы можете разрабатывать приложения для Android на любом компьютере под управлением Windows, macOS или Linux, в то время как для разработки приложений для устройств Apple потребуется MacOS.
Базовые навыки работы с консолью Windows/macOS/Linux (она же командный интерпретатор). Если у вас их нет, пожалуйста, найдите в Интернете учебники для начинающих.
Время. Следуя этому руководству, вы сможете создать свое первое приложение очень быстро. Однако могут пройти часы или дни, прежде чем вы получите одобрение своего аккаунта разработчика и опубликуете свое приложение в App Store / Google Play.
Деньги. Создание и запуск приложений на собственных устройствах совершенно бесплатны. Однако для публикации в Google Play вам потребуется $25 (единовременная оплата), а для App Store - $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. Однако, чтобы упростить работу, мы интегрировали конструктор шаблонов Cordova прямо в App Manager.

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

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

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

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

cordova platform add android

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

Во-первых, вам нужно установить Android Studio, возьмите его здесь.

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

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

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

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

cordova requirements

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

cordova build android

Чтобы запустить его в эмуляторе Android, выполните:

cordova emulate android

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

cordova run android

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

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

cordova platform add ios

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

Сначала вам нужно установить XCode, скачайте его из Mac App Store.

Затем установите менеджер пакетов 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. Инструкции для ознакомления вы найдёте здесь .

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

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

Смотрите официальное руководство Cordova о том, как назначить пользовательский значок для вашего приложения.

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

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

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

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

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

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

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

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

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

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

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

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