Создание вашего первого приложения Cordova

Это руководство показывает, как создать приложение Cordova на JavaScript/HTML и развернуть его на различных мобильных платформах с использованием командной строки (CLI) cordova. Для получения подробной информации о командной строке Cordova, ознакомьтесь со справочной информацией по CLI.

Установка Cordova CLI

Инструмент командной строки Cordova распространяется как пакет npm.

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

1. Загрузите и установите Node.js. После установки вы сможете вызвать node и npm в вашей командной строке.

2. (Необязательно) Загрузите и установите клиент git, если у вас его еще нет. После установки вы сможете вызвать git в вашей командной строке. CLI использует его для загрузки ресурсов, когда они ссылаются на URL-адрес репозитория git.

3. Установите модуль cordova с помощью утилиты npm Node.js. Модуль cordova будет автоматически загружен утилитой npm.

• в ОС X и Linux:

  $ sudo npm install -g cordova
  

  В ОС X и Linux может потребоваться добавить префикс npm к команде sudo, чтобы установить этот инструмент разработки в каталоги с ограниченным доступом, такие как /usr/local/share. Если вы используете утилиту nvm/nave или имеете права записи в каталог установки, вы можете опустить префикс sudo. Доступны дополнительные советы по использованию npm без sudo, если вы хотите это сделать.

• в Windows:

  C:\>npm install -g cordova
  

Флаг -g выше сообщает npm установить cordova глобально. В противном случае он будет установлен в подкаталоге node_modules текущего рабочего каталога.

После установки вы должны иметь возможность запустить cordova в командной строке без аргументов, и она должна вывести текст справки.

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

Перейдите в каталог, где хранятся ваши исходные коды, и создайте проект Cordova:

$ cordova create hello com.example.hello HelloWorld

Это создает необходимую структуру каталогов для вашего приложения Cordova. По умолчанию скрипт cordova create генерирует каркас веб-приложения, домашняя страница которого – файл www/index.html проекта.

См. также

• Справочная документация по команде Cordova create
• Структура каталогов проекта Cordova
• Шаблоны проектов Cordova

Добавление платформ

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

$ cd hello

Добавьте платформы, на которых вы хотите запустить своё приложение. Мы добавим платформы 'ios' и 'android' и убедимся, что они сохранены в config.xml:

$ cordova platform add ios --save
$ cordova platform add android --save

Чтобы проверить текущий набор платформ:

$ cordova platform ls

Выполнение команд для добавления или удаления платформ влияет на содержимое каталога platforms проекта, где каждая указанная платформа появляется как подкаталог.

Примечание: при использовании CLI для сборки приложения не следует редактировать файлы в каталоге /platforms/. Файлы в этом каталоге регулярно перезаписываются при подготовке приложений к сборке или при повторной установке плагинов.

См. также

• Справочная документация по команде Cordova platform

Установка необходимых компонентов для сборки

Для сборки и запуска приложений необходимо установить SDK для каждой платформы, на которой вы хотите запустить приложение. В качестве альтернативы, если вы используете браузер для разработки, вы можете использовать платформу browser , которая не требует никаких платформ SDK.

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

$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed

Requirements check results for ios:
Apple OS X: not installed
Cordova tooling for iOS requires Apple OS X
Error: Some of requirements check failed

См. также

• Требования к платформе Android
• Требования к платформе iOS
• Требования к платформе Windows

Сборка приложения

По умолчанию, скрипт cordova create генерирует каркас веб-приложения, начальная страница которого находится в файле www/index.html проекта. Любую инициализацию следует указать как часть обработчика события deviceready, определённого в www/js/index.js.

Запустите следующую команду для сборки проекта для всех платформ:

$ cordova build

Вы можете выборочно ограничить область каждой сборки определенными платформами - 'ios' в данном случае:

$ cordova build ios

См. также

• Справочная документация по команде Cordova build

Тестирование приложения

SDK для мобильных платформ часто поставляются с эмуляторами, которые выполняют изображение устройства, так что вы можете запускать приложение с главного экрана и увидеть, как оно взаимодействует со многими функциями платформы. Выполните команду, такую как следующая, чтобы пересобрать приложение и просмотреть его в эмуляторе определённой платформы:

$ cordova emulate android

Следующая команда cordova emulate обновляет изображение эмулятора, чтобы отобразить последнее приложение, которое теперь доступно для запуска с главного экрана:

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

$ cordova run android

Перед выполнением этой команды необходимо настроить устройство для тестирования, следуя процедурам, которые различаются для каждой платформы.

См. также

• Настройка эмулятора Android
• Справочная документация по команде Cordova run
• Справочная документация по команде Cordova emulate

Добавление плагинов

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

Плагин предоставляет Javascript API для функциональности нативной SDK. Плагины обычно размещаются в npm, и вы можете найти их на странице поиска плагинов. Некоторые ключевые API предоставляются проектом Apache Cordova с открытым исходным кодом, и они называются Основными API плагинов. Вы также можете использовать CLI для запуска страницы поиска:

$ cordova plugin search camera

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

$ cordova plugin add cordova-plugin-camera
Fetching plugin "cordova-plugin-camera@~2.1.0" via npm
Installing "cordova-plugin-camera" for android
Installing "cordova-plugin-camera" for ios

Плагины также можно добавлять с помощью каталога или репозитория git.

ПРИМЕЧАНИЕ: CLI добавляет код плагина, соответствующий каждой платформе. Если вы хотите разрабатывать с помощью инструментов командной строки более низкого уровня или платформ SDK, как обсуждалось в Обзоре, вам нужно запустить утилиту Plugman, чтобы добавить плагины отдельно для каждой платформы. (Дополнительная информация см. в Использование Plugman для управления плагинами.)

Используйте plugin ls (или plugin list, или plugin самостоятельно), чтобы просмотреть установленные плагины. Каждый отображается по своему идентификатору:

$ cordova plugin ls
cordova-plugin-camera 2.1.0 "Camera"
cordova-plugin-whitelist 1.2.1 "Whitelist"

См. также

• Справочная документация по команде Cordova plugin
• Страница поиска плагинов Cordova
• Основные API плагинов

Использование слияний для настройки каждой платформы

Хотя Cordova позволяет легко развертывать приложение на многих платформах, иногда вам нужно добавить настройки. В этом случае вам не следует изменять исходные файлы в различных каталогах www внутри каталога верхнего уровня platforms, потому что они регулярно заменяются кроссплатформенными исходными данными из каталога верхнего уровня www.

Вместо этого, каталог верхнего уровня merges предоставляет место для указания ресурсов, которые нужно развернуть на определенных платформах. Каждый подкаталог, специфичный для платформы, в merges, дублирует структуру каталогов исходного кода www, позволяя вам переопределять или добавлять файлы по мере необходимости. Например, вот как вы можете использовать merges для увеличения размера шрифта по умолчанию для устройств Android:

• Отредактируйте файл www/index.html, добавив ссылку на дополнительный CSS-файл, в данном случае overrides.css.

  <link rel="stylesheet" type="text/css" href="css/overrides.css" />
  

• Необязательно создайте пустой файл www/css/overrides.css, который будет применяться для всех сборок, кроме Android, предотвращая ошибку отсутствия файла.

• Создайте подкаталог css внутри merges/android, затем добавьте соответствующий файл overrides.css. Укажите CSS, который переопределяет размер шрифта по умолчанию 12 пунктов, указанный в www/css/index.css, например:

  body { font-size:14px; }
  

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

Вы также можете использовать merges для добавления файлов, отсутствующих в исходном каталоге www . Например, приложение может добавить графику кнопки назад в интерфейс iOS, хранящийся в merges/ios/img/back_button.png , в то время как версия Android может вместо этого перехватывать события backbutton с соответствующей аппаратной кнопки.

Обновление Cordova и вашего проекта

После установки утилиты cordova вы всегда можете обновить её до последней версии, выполнив следующую команду:

$ sudo npm update -g cordova

Используйте этот синтаксис, чтобы установить определенную версию:

$ sudo npm install -g cordova@3.1.0-0.2.0

Запустите cordova -v , чтобы увидеть текущую версию. Чтобы найти последнюю версию cordova, вы можете запустить:

$ npm info cordova version

Чтобы обновить платформы, которые вы используете:

$ cordova platform update android --save
$ cordova platform update ios --save
...etc.