Создание мобильных приложений с помощью Апач Кордова — Софт Эйт Софт
Description: Узнайте, как использовать «Апач Кордова» для создания кросс-платформенных приложений для мобильных устройств.

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

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

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

- Введение
- Начало работы с «Апач Кордова»
- Создание шаблона приложения
- Создание приложения для «Андроид»
- Создание приложения для «Ай ОС»
- Улучшаем приложение
  - Изменение имени и значка приложения
  - Обработка событий, специфичных для «Кордовы»
  - Создание нативных диалогов
  - Дополнительные возможности
- Публикация приложения

#

## Введение

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

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

#

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

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

#

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

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

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

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