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

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

Введение

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

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

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

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

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

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

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

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

sudo npm install -g cordova

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

npm install -g cordova

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

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

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

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

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

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

cordova platform add android

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

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

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

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

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

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

cordova requirements

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

cordova build android

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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