Преобразование проекта Cordova в проект PhoneGap

Статья
09/13/2015

PhoneGap — это платформа с открытым исходным кодом для быстрого создания кроссплатформенных мобильных приложений с помощью HTML5, JavaScript и CSS. Adobe PhoneGap Build — это облачная служба, которая позволяет быстро создавать мобильные приложения и легко компилировать их без использования пакетов SDK, компиляторов и оборудования. В этой статье описывается, как преобразовать проект Apache Cordova, созданный с помощью Visual Studio, в проект PhoneGap и использовать облачную службу PhoneGap Build.

Одно из главных различий проектов Visual Studio и PhoneGap — определение приложения в файле конфигурации (config.xml). Чтобы преобразовать проект Visual Studio в проект PhoneGap, необходимо выполнить следующие задачи.

Создание нового проекта Cordova с помощью Visual Studio
Создание структуры проекта PhoneGap
Обновление файла config.xml
Отправка данных в облачную сборку
Подписание кода и предоставление приложения

Создание нового проекта Cordova с помощью Visual Studio

Для создания пакетов приложений облачной службе PhoneGap Build требуются только веб-активы приложения, которые ограничиваются файлами HTML, CSS, JS, изображениями и похожими файлами. Если вы добавите файлы с машинным кодом (H, M, JAVA и т. д.), службе PhoneGap Build, скорее всего, не удастся скомпилировать приложение. Так как структура проекта, созданная с помощью Visual Studio, соответствует структуре проекта Cordova, в папке www проекта теперь размещаются все веб-активы, необходимые для приложения.

Структура проекта Cordova в Visual Studio

После создания проекта Visual Studio веб-активы можно переместить в проект PhoneGap Build. Мы рекомендуем создать новую папку (вне папки с проектом Visual Studio) для проекта PhoneGap, а затем скопировать в нее папку www.

Создание структуры проекта PhoneGap

При структурировании проекта PhoneGap убедитесь, что файлы config.xml и index.html находятся на верхнем уровне структуры папок приложения (здесь в качестве папки верхнего уровня мы используем папку www). Во всем остальном структура приложения может быть любой. Скопируйте файл config.xml из корневой папки проекта в папку www проекта PhoneGap Build. Также скопируйте собственные ресурсы из папки res (res\icons и res\screens соответственно) в папку www проекта PhoneGap Build.

После копирования всех файлов и папок проект PhoneGap Build должен выглядеть следующим образом.

Структура проекта PhoneGap

Так как приложение может содержать файлы и папки, которые не требуются в составе окончательного упакованного приложения (например, неиспользуемые экраны-заставки, пакеты Bower, артефакты Grunt, нескомпилированные файлы и т. д.), служба PhoneGap Build поддерживает особый файл с расширением PGBOMIT.

Создав и добавив файл PGBOMIT в папку, вы укажете службе PhoneGap Build, что папку следует исключить в качестве источника собственных файлов приложения. (Однако эту папку можно использовать для хранения любых файлов, требуемых во время сборки проекта PhoneGap вплоть до этапа компиляции.) Типичным примером является размещение файла PGBOMIT в папке, содержащей значки и экраны-заставки. Поэтому поместите файл PGBOMIT в папку www/res проекта PhoneGap Build. В результате ни один из файлов и ни одна из папок, находящихся в папке www/res, не будут включены в двоичный пакет приложения, кроме скопированных и используемых в качестве значков и экранов-заставок для определенной платформы. На рисунке ниже показан файл PGBOMIT в папке www/res.

Расположение файла pgbomit

Так как служба PhoneGap Build по умолчанию не поддерживает папку merges проекта CLI Cordova, необходимо скопировать содержимое для конкретной платформы из папки merges проекта CLI Cordova в папку www проекта PhoneGap Build.

Обновление файла Config.xml

Служба PhoneGap Build поддерживает файл конфигурации XML, config.xml, который сильно отличается от создаваемого проектом Visual Studio. С его помощью можно изменять такие элементы, как название приложения, значки, экраны-заставки и другие свойства.

Для начала удалите пространство имен VS и добавьте пространство имен PhoneGap в файл config.xml. Ниже показан результат.

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0"
  id="io.cordova.appb64ec64666e9432a9caf5f01009feb88"
  version="1.0.0.0"
  xmlns:gap="http://phonegap.com/ns/1.0"
  xmlns="http://www.w3.org/ns/widgets">
<name>SlidePuzzle</name>

Значки

Значок по умолчанию должен иметь имя icon.png и находиться в корневой папке приложения. Если иное не указано в файле config.xml, каждая платформа будет пытаться использовать файл icon.png по умолчанию во время компиляции.

<icon src="icon.png" />

Если для платформы Android требуются особые значки, ниже приведен пример того, как нужно изменить файл config.xml в соответствии с содержимым папки res\icons\android в ранее созданном проекте PhoneGap Build.

<icon gap:platform="android" gap:qualifier="ldpi"
    src=" res/icons/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi"
    src=" res/icons/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi"
    src=" res/icons/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi"
    src=" res/icons/android/icon-96-xhdpi.png" />

Дополнительные сведения об указании элементов значков в файле config.xml см. в этой статье.

Экраны-заставки

В файле config.xml можно не указать ни одного или указать несколько элементов экранов-заставок. Элемент экрана-заставки может иметь атрибуты src, gap:platform, width и height так же, как элемент <icon>. Так же, как в случае с файлами значков, сохраните файлы экранов-заставок в формате PNG. Если иное не указано в файле config.xml, каждая платформа будет использовать файл splash.png по умолчанию во время компиляции. Если атрибут gap:platform не указан, изображение по умолчанию будет скопировано во все платформы, что увеличит размер каждого пакета с приложением.

Экран-заставка по умолчанию должен иметь имя splash.png и находиться в корневой папке приложения.

<gap:splash src="splash.png" />

Если для платформы Android требуются особые экраны-заставки, ниже приведен пример того, как нужно изменить файл config.xml в соответствии с содержимым папки res\screens\android в ранее созданном проекте PhoneGap Build.

<gap:splash gap:platform="android" gap:qualifier="port-ldpi" 
    src=" res/screens/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" 
    src=" res/screens/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" 
    src=" res/screens/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" 
    src=" res/screens/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="land-ldpi" 
    src=" res/screens/android/screen-ldpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-mdpi" 
    src=" res/screens/android/screen-mdpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-hdpi" 
    src=" res/screens/android/screen-hdpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-xhdpi" 
    src=" res/screens/android/screen-xhdpi-landscape.png" />

Дополнительные сведения об указании элементов экранов-заставок в файле config.xml см. в этой статье.

Подключаемые модули

Чтобы расширить доступ к собственным функциям платформы, предоставляемым контейнером собственных приложений PhoneGap, служба PhoneGap Build поддерживает выбор подключаемых модулей PhoneGap из белого списка. Список поддерживаемых подключаемых модулей см. на странице Подключаемые модули. Если добавить подключаемые модули, которых нет в белом списке Adobe, сборка завершится сбоем. Чтобы импортировать подключаемый модуль в проект PhoneGap Build, необходимо добавить соответствующий элемент <gap:plugin> в файл config.xml. Если опустить атрибут version, при сборке приложения всегда будет использоваться последняя версия подключаемого модуля.

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

<gap:plugin name="com.phonegap.plugins.example" version="2.2.1" />

Так как среда Visual Studio вставляет элемент <vs:plugin> в файл config.xml для каждого подключаемого модуля, их нужно заменить на элементы <gap:plugin>. В рассматриваемом примере проекта используются два подключаемых модуля и две соответствующие строки в файле config.xml.

<vs:plugin name="org.apache.cordova.device-motion" version="0.2.10" />
<vs:plugin name="org.apache.cordova.camera" version="0.3.2" />

В проекте PhoneGap Build эти строки нужно заменить на следующие:

<gap:plugin name="org.apache.cordova.device-motion" version="0.2.10" />
  <gap:plugin name="org.apache.cordova.camera" version="0.3.2" />

Дополнительные сведения об изменении подключаемых модулей см. в этой статье.

Отправка проекта в PhoneGap

Завершив все необходимые изменения, вы можете отправить приложение в службу PhoneGap Build. Сначала создайте учетную запись в службе PhoneGap Build. Затем войдите в учетную запись на странице https://build.phonegap.com/apps, чтобы отправить приложение. Приложение можно отправить из репозитория GIT или с компьютера в виде файла ZIP. В этом примере мы отправим с локального компьютера файл ZIP, содержащий папку www. После отправки файла ZIP вы увидите, что приложение готово к сборке.

Cordova_Pgap_Build_BuildReady

После нажатия кнопки Ready to Build (Готово к сборке) служба PhoneGap Build начнет сборку для платформ, определенных в файле config.xml. Так как мы не указали определенную платформу, служба выполнит сборку для всех трех платформ (iOS, Android и Windows). По завершении сборки вы увидите ее результат.

Полностью подписанный пакет сборки PhoneGap

Подписание кода и предоставление приложения

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

Подписывание кода пакета PhoneGap для iOS

Чтобы выполнить сборку пакета выпуска APK для Android, готового для отправки в магазин, в службе PhoneGap Build можно указать сведения о хранилище ключей и соответствующие пароли здесь:

Подписывание кода пакета PhoneGap для Android

Для Android мы используем ранее созданное хранилище ключей, а затем выполним повторную сборку приложения. Чтобы создать новое хранилище, воспользуйтесь этим руководством. Теперь служба сборки создаст полностью подписанный пакет выпуска, который можно скачать для публикации в магазине или установить на связанном устройстве.