22 February 2016

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

Development of mobile applicationsDevelopment for AndroidCanvas
imageМногие считают, что гибридные приложения не могут иметь хорошую производительность, особенно в плане построения страницы (то есть имеют низкий FPS). Это ошибочное мнение. Если умело собрать приложение, то можно добиться хороших показателей. В статье рассмотрен пример сборки такого гибридного приложения под Android в Windows 7 (хотя для iOs будет почти тоже самое).

Допустим, у нас есть готовое приложение на HTML5, в котором вывод изображения полностью производиться через элемент Canvas (я использовал Phaser framework, 50 движущихся спрайтов). На ПК данное приложение запускается без проблем (60 FPS). На топовых фирменных смартфонах тоже все хорошо (50-60 FPS). Но если мы возьмем средненький планшет, результат будет просто ужасным (3-15 FPS), даже не смотря на хорошие характеристики устройства.
Поэтому нашей целью является создание полностью готового для публикации apk с хорошими показателями производительности.

На данный момент существуем множество инструментов для достижения данной цели. Наиболее популярные из них:
• Cordova
Ludei
Intel XDK

Проект Ludei (Cocoon.js) производит построение приложение в облаке, достаточно прост в понимании концепции. Советую обратить внимание на клиентское приложение CocoonJS Launcher App, которое позволяет легко производить отладку приложения прямо на устройстве. Это может очень помочь при разработке приложения. Но использовать данный сервис для построения приложения не советую, т.к. имеется достаточно много багов и в приложение добавляется фирменная заставка.

Intel XDK – это отличный инструмент, с которого я советую начать. Построение приложения так же производиться в облаке. По сути Intel XDK представляет собой удобное GUI для Cordova c полным набором настроек, плагинов и эмулятором.

С помощью Cordova построение производиться уже на вашем компьютере. Это подход имеет всего два преимущества:
• Сборка производиться быстрее,
• Используются последние версии компонентов.
При этом есть недостаток:
• Требуется организовать окружение.
В статье мы будет рассматривать именно последний вариант, так как с ним в основном возникают проблемы, и так как в итоге вы все равно или поздно перейдете на него.

И так начнем. Устанавливаем:
  1. Node.js
  2. git клиент
  3. Java Development Kit (JDK) 7
  4. Android Studio

Далее открываем Android SDK Manager и устанавливаем:
• Android 5.1.1 (API 22) platform SDK
• Android SDK Build-tools version 19.1.0 или выше
• Android Support Repository (Extras)

Затем в Android Studio сгенерируем набор ключей для подписи apk. Для этого в меню выбираем Build > Generate Signed APK. В открывшемся окне нажимаем Create new. Откроется новое окно, в котором вводим все данные (данные, естественно, сами запоминаем).
image
После всего можно закрыть Android Studio и больше никогда не открывать.

Затем нужно изменить переменную окружения PATH:
1. Нажмите на меню " Пуск " в левом нижнем углу рабочего стола, щелкните правой кнопкой мыши на Мой комьютер, а затем нажмите кнопку Свойства.
2. Нажмите кнопку Дополнительные параметры системы в столбце слева.
3. В открывшемся диалоговом нажмите Переменные среды.
4. Выберите переменную PATH и нажмите редактировать.
5. Добавьте следующее в PATH, в зависимости от того куда был установлен пакет SDK (у меня f:\AndroidSDK), например:

C:\Users\Root\AppData\Local\Android\sdk\tools;c:\Program Files\Ant\bin;C:\Users\Root\AppData\Roaming\npm;f:\AndroidSDK\platform-tools;f:\AndroidSDK\tools

6. Сохраните значение и закройте оба диалоговые окна.

А только теперь, собственно, устанавливаем Cordova. Открываем командную строку и запускаем:

npm install -g cordova

Затем создаем свой проект. Для этого выполним команду следующего вида:

cordova create projectDirectory com.companyName.appName AppName

Данная команда имеет следующие параметры:
projectDirectory – директория вашего проекта.
com.companyName.appName — указывает идентификатор вашего проекта в обратном формате доменных имен.
AppName — указывает отображаемое имя приложения.
Все эти параметры можно легко поменять позже в файле config.xml.
После выполнения команды будет создан каталог вашего проекта. В этом каталоге будет находиться директория www, в которой будут файлы страницы приложения по умолчанию. Удалите содержимое данной директории и скопируйте в неё файлы вашего web-приложения. Стартовый файл назовите index.html.

Далее работаем уже в директории проекта.

cd hello

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

cordova platform add android

После выполнения команды появиться каталог projectDirectory\platforms\android и вы сможете собрать debug.apk (отладочный пакет). Сборка отладочного пакета осуществляется командой:

cordova build android


Теперь добавим автоматическую подпись пакета. Cordova подписывает пакет при помощи Gradle. Поэтому мы можем сразу задать установки ключей. Для этого в директории projectDirectory\platforms\android создайте текстовый файл release-signing.properties в котором пропишите следующие настройки:

storeFile=../../ keystore.jks
storeType=jks
keyAlias=myalias
keyPassword=passwordhere
storePassword=passwordhere

Как вы поняли, нужно использовать данные, которые были указаны при создании ключей.

Далее проведем первое испытание – соберем подписанный apk для публикации.

cordova build android --release

На выполнение команды потребуется несколько минут. По окончанию построения готовый apk мы можем найти в директории projectDirectory\platforms\android\build\outputs\apk

Испытаем полученный apk на среднем планшете и… мы получим опять ужасные результаты (5 FPS). На этом этапе многие разработчики теряют надежду. После такого облома они либо бегут на www.ludei.com (потому что там хоть на выходе получается что-то вменяемое), либо присоединяются к «армии мудаков», которые убеждены, что гибридные приложение полный отстой.

На самом деле терять надежду ещё рано. Есть такой замечательный проект – Crosswalk. С помощью данного проекта можно в нативное приложение под Android встроить браузер Google Chrome и в нем проигрывать ваш проект. Преимущества очевидны: производительность хорошего браузера и независимость от ОС устройства.
В Cordova проект Crosswalk добавляется, как плагин. Значит, пора расширить наше приложение плагинами. Делается это очень легко. В командной строке запущенной из директории проекта запускаем команды:

cordova plugin add cordova-plugin-splashscreen

В проект будет добавлена возможность установить стартовую заставку. Обязательно установить этот плагин.
Далее можете добавить плагины по вашим запросам. Вот лишь некоторые из них:

cordova plugin add cordova-plugin-vibration

(плагин добавляет возможность управлять вибрацией)

cordova plugin add cordova-plugin-globalization

(плагин добавляет возможность определить локализацию устройства)

cordova plugin add cordova-plugin-inappbrowser

(плагин добавляет возможность делать запросы к серверу)

Ну, и наконец, добавим Crosswalk:

cordova plugin add cordova-plugin-crosswalk-webview


После установки соберем очередной apk и испытаем его на устройстве. Мы, скорее всего, получим также паршивые результаты (15 FPS)…
Тут теряют надежды те, которые её не потеряли при первом испытании. И эти разработчики пополняют «армию мудаков», которые убеждены, что гибридные приложение полный отстой.
Но ещё рано сдаваться… Тут начинается «магия».

Для браузера Google Chrome существует специальный GPU-blacklist, который ограничивает использование WebGL. Это очередная забагованная функция от Google. Почему забагованная?
Во-первых, функция ограничивает не только движок WebGL, но весьма ощутимо снижает производительность движка Canvas.
Во-вторых, хоть функция называется «черный список GPU», работает она как «белый список». То есть, если у вас топовый фирменый смартфон, то он есть в этом списке и ваше приложение прекрасно работает. А если у вас какой-нибудь «китаец» (или даже фирманный не топовый телефон), то его уже нет в списке, и, соответственно, производительность приложения низкая.
Google объясняет это заботой о пользователях. Мол, на не топовых фирменных смартфонах браузер может работать нестабильно. Ага, конечно… По моим наблюдениям вся эта «нестабильность» сводиться к закрытию приложения при сверхвысоких нагрузках (например, одновременное создание 200-300 объектов).

Чтобы добиться максимальной производительности. Отключим данную функцию. Для этого создадим в директории projectDirectory\platforms\android\assets текстовый файл xwalk-command-line в котором будет лишь одна строка:

xwalk --ignore-gpu-blacklist

Все. Снова собираем очередной проект и испытываем… В итоге отличная производительность (50-60 FPS). Результат достигнут.

Что дальше? А дальше осталось настроить файл конфигурации, иконки и заставки. С этим, я думаю, вы справитесь сами. Кстати, стартовая заставка поддерживает технологию 9-patch Image. Для этого нужно лишь добавить к названию файла цифру 9.

Как видите, гибридные приложения в умелых руках могут иметь высокую производительность. Надеюсь, эта статья поможет вам в их создании. Удачного дня.
Tags:CordovaCanvasAndroid
Hubs: Development of mobile applications Development for Android Canvas
+1
15.2k 88
Comments 3
Popular right now
Top of the last 24 hours