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

Это руководство покажет вам, как создать приложение Cordova JS/HTML и развернуть его на различных мобильных платформах с помощью командной строки (CLI) cordova. Для получения подробной справки по Cordova CLI, просмотрите справочную информацию по 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 и package.json:

$ cordova platform add ios
$ cordova platform add android

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

$ 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

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

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

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

$ cordova plugin search camera

Чтобы добавить и сохранить плагин камеры в config.xml и package.json, мы укажем имя пакета 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.