Быстрое создание скелета кросс-платформенного приложения на Apache Cordova

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

К счастью, приложений в наши дни создаётся много, поэтому можно воспользоваться наработками, которые имеют свободные лицензии и всячески поощряют собственное использование. Поскольку речь сейчас идёт о сборке web front-end проекта, то нам понадобится установленный node.js версии 5 или выше.

Способ 1: стандартный генератор проекта

Самый очевидный способ создать проект — воспользоваться инструкцией прямо с apache.cordova.org.

 npm install cordova -g 

В любой директории с проектами создаём проект, добавляем браузер как платформу и немедленно запускаем:

 cordova create TestApp 
 cd TestApp 
 cordova platform add browser
 cordova run browser 

Готово!

Что это нам даёт?
Собственно скелет приложения, инфраструктуру для запуска и конфигурации платформ.

Чего нам не хватает?
Мы не можем запустить тесты. Мы не можем сделать упакованное приложение, может быть, мы хотим обфусцировать код или воспользоваться транспайлером, и вообще у нас нет какой-то линии сборки, чтобы можно было указать действия над кодом и ресурсами до того как они пойдут в пакет. Сразу оговорюсь, что можно добавить скрипты на хуки, которые предоставляет Cordova, но с тем же успехом мы можем начать писать здесь же gulp/gruntfile.

В каком случае нас это устраивает?
Если все шаги сборки были выполнены до этого и в директории www уже есть то, что пойдёт в пакет или если нас не очень волнует отсутствие всех этих приготовлений. Самый универсальный и самый подходящий для прототипирования простого приложения способ.

Способ 2: сторонние генераторы

Генераторы, они же шаблоны, они же архетипы[0]. Идея не нова — существует некий скрипт, который создаёт структуру для нашего приложения с минимальным функционалом. В случае front-end популярны yeoman генераторы, но можно где-то встретить и другую форму таких скриптов.
В качестве примера возьмём generator-graybullet-cordova. Это yeoman генератор, поэтому нам придётся сперва установить yeoman

 npm install -g yo 

Хорошим первым шагом будет перейти на страницу с документацией и держать её где-нибудь, пока у нас не будет всё прекрасно. Обычно там же есть инструкция по установке.
https://github.com/graybullet/generator-graybullet-cordova

 npm install -g generator-graybullet-cordova 

Если вчитаться, можно увидеть, что автор надеется использовать вдобавок generator-webapp. Поэтому мы его тоже установим.

 npm install -g generator-webapp 

Прямо в документации шаги по установке указаны, запускаем:

 yo graybullet-cordova 

Нас тут же встречает интерактивное меню, которое интересуется именем проекта, его package id и платформами, а ещё желаемыми плагинами.
После этого нас встречает второе интерактивное меню, которое уточняет желаемые зависимости для нашего front-end приложения. Неплохо.

Здесь вступает в работу generator-webapp, поэтому можно отвлечься минут на пять. К сожалению, это не самый быстрый генератор, к тому же он пользуется bower, который в последнее время впал в немилость по определённым причинам.

Почти 150 мегабайт трудов самого свежего веб-девелопмента спустя мы имеем возможность собрать наше приложение с помощью gulp.

 gulp 

Можно снова отвлечься и вспомнить, что если нам нужна какая-то платформа кроме браузера, для сборки на ней потребуются установленные библиотеки и иные зависимости. Например, Android SDK, Java или целый XCode с OS X. Cordova — хорошая вещь для кроссплатформенных приложений, но в конечном итоге нам всё равно понадобится пакет, собранный для этой самой платформы, инструментами, ею предоставляемыми.

Если что, нам напомнят, что пошло не так.

В случае успеха мы можем увидеть следующее:

Это означает, что пакет готов. Но как насчёт остальных инструментов? Смотрим gulpfile (находится в корне) и обнаруживаем serve, serve:dist, serve:test из generator-webapp, что поможет нам разрабатывать и build, emulate, run из cordova, что поможет нам запускать на устройстве.

 gulp serve:test 

Открывает нам в браузере страницу с тестами на mocha.

 gulp run 

Запускает наш браузер, как если бы это была платформа, на которой расположено наше готовое приложение.

 gulp serve 

Запускает браузер и показывает наше приложение, как если бы это был обычный веб-сайт, т. е. без библиотеки cordova и специфичных API. Автором генератора был заложен специальный скрипт (stub), который выполняет роль библиотеки cordova, который можно каким-то образом расширять, если наше приложение сильно зависит от определённых API.

Резюмируя, что мы получили?
Скелет приложения, скрипты сборки и запуска тестов. Инфраструктуру для конфигурации платформ (с помощью команды cordova внутри директории cordova). Инфраструктуру для запуска в разных конфигурациях.

Чего нам не хватает?
Это уже сильно зависит от требований к приложению, которое будет создаваться. Базовые задачи все покрыты, gulpfile можно редактировать.

В каком случае нас это устраивает?
Когда нас устраивает комбинация gulp+bower+wiredep для сборки и мы не хотим вносить много изменений в этот процесс. Самый подходящий способ сделать приложение из ничего, когда надо, чтобы над ним можно было сразу же работать.

Заключение

Конечно же, генераторов для front-end приложений сейчас существует много. Многие из них завязаны на вполне определённые фреймворки или даже на целые стеки фреймворков. Вполне возможно найти то, что устраивает для вашего приложения. Но рано или поздно сгенерированный конфигурационный файл придётся менять, поскольку сборщики, платформы, плагины имеют свойство устаревать.
Поэтому есть смысл разобраться в сгенерированном скрипте сборки полностью или написать свой с нуля, а потом уже использовать сгенерированный стандартный проект Cordova в качестве последнего шага сборки.

[0] Google-Fu List: generator, boilerplate, archetype, starter (kit/app), template.