Создание мобильных приложений с помощью «Апач Кордова»

«Апач Кордова» — это инструмент, который конвертирует веб-приложения в кроссплатформенные мобильные приложения. «Кордова» в основном используется для создания приложений для платформ «Андроид» и «Ай ОС», однако на ней также можно разрабатывать приложения для «Виндоус», «Мак ОС» и «Линукс». Инструмент полностью бесплатен, прост в использовании и позволяет выполнять расширенную настройку с помощью «Ява Скрипта» (если это необходимо).

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

Введение

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

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

А хорошая новость заключается в том, что вам не нужно быть разработчиком «Андроид» или «Ай ОС», чтобы создавать приложения для этих платформ. Как только вы запустите свою систему разработки, создание мобильных версий ваших «Вердж3Д»-приложений станет довольно простым делом!

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

Начало работы с «Апач Кордова»

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

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

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

На «Мак ОС»/«Линукс»:

sudo npm install -g cordova

На «Виндоус»:

npm install -g cordova

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

npx cordova platform add android

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

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

С его помощью вы можете создать шаблон приложения «Кордова» прямо из «Вердж3Д».

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

Создание приложения для «Андроид»

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

cordova platform add android

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

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

После установки «Андроид Студио» необходимо указать путь к ней в значении переменной ANDROID_SDK_ROOT. В «Виндоус» вам также нужно будет установить значение переменной 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 в «Андроид Студио»:

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


    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

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

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

cordova emulate android

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

cordova run android

Создание приложения для «Ай ОС»

Перейдите в каталог, где находится ваш шаблон приложения «Кордова», затем добавьте платформу «Ай ОС»:

cordova platform add 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

чтобы собрать и запустить его в эмуляторе «Ай ОС».

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

cordova run ios

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

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

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

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

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

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

Для «Мак ОС», установите ImageMagick через Homebrew:

brew install imagemagick

Для «Убунту Линукс» используйте менеджер пакетов APT:

sudo apt install imagemagick

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

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

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

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

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

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

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

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

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

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

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

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