Гибридные приложения, разработка c Ionic

1966
views

Гибридные приложения

В эру мобильных технологий каждая уважающая себя компания или владельцы сайтов создают мобильные приложения, что бы пользователям было еще удобней, быстрее и приятней воспользоваться их услугами. И это логично, ведь чем удобней доступ к сервису, тем больше у него аудитория, а следовательно и больше возможной прибыли. Но не все заказчики могут себе позволить найм нужного количества разработчиков для создания нескольких нативных приложений для разных платформ, да и не все студии имеют нужных специалистов. Но представьте себе технологию, которая позволит обычным разработчикам сайтов создавать кросс-платформенные приложения зная лишь как верстать и javascript. Круто? И я так думаю. Ниже я хочу поведать вам о невероятном фреймворке, который позволит компилировать html5+css+js код в нативные приложения сразу под несколько платформ.

Что такое гибридные приложения?

Гибридные приложения, как и обычные приложения, устанавливаются на мобильные устройства. Их можно найти в Play маркете или App Store. Как и сайты, гибридные мобильные приложения состоят из html верстки, css стилей и javascript кода. Ключевым моментом таких приложений заключается в том, что ресурсы приложения обернуты в нативное приложение и выполняются в полноэкранном WebView (считайте что это просто браузер). Такая оболочка позволяет устанавливать связь со всеми устройствами смартфона, такими как камера, акселерометр, физические кнопки, динамики, микрофон,  и т.д. По сути возможности таких приложений ограничены только скоростью обработки и рендеринга встроенного в платформу браузера.

На сегодняшний день самой популярной оболочкой для гибридных приложений является Apache Cordova (Ранее PhoneGap). Это платформа, которая помимо оборачивания кода в WebView предоставляет огромный набор плагинов js API, с помощью которых, можно полноценно взаимодействовать с операционной системой и устройствами смартфона. У Cordova большое сообщество, множество готовых решений и плагинов, но для полноценного приложения не хватает красивого, современного UI, который бы придал приложению удобство управления и ощущение, что это приложение, а не адаптированный сайт.

И тут в игру вступает Ionic!

Именно этому фреймворку я создаю отдельную категорию в блоге и буду вести отдельную серию статей.

Ionic — это фреймворк, с потрясающе проработанным графическим интерфейсом, стилизованный под различные платформы, для максимальной схожести с нативными приложениями. За основу у фреймворка взяты AngularJS и sass, что принесло ему большую популярность у разработчиков, так как эти технологии сводят порог вхождения к минимуму. Ядром фреймворка является Cordova, поэтому все плагины Cordova будут прекрасно работать на ionic.

Помимо платформы и готовых ui компонентов, у Ionic есть продуманный интерфейс командной строки (CLI), который позволяет генерировать иконки, сплеш скрины, запускать livereload сервер в браузере с аппом для дебага и билдить приложения короткими командами в консоли.

Также стоит отметить подробнейшую документацию с примерами.

Работу с Ionic я начал еще когда у них первая версия была в стадии Alpha. Но в момент написания статьи у них была стабильная версия 1.3 и в beta версии Ionic 2 версии.

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

Ну а теперь подробнее о самом фреймворке.

UI

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

Качество элементов и их взаимодействие приятно удивляют.

OS ориентированные стили

У ionic не просто хороший интерфейс, он адаптированный под специфики различных операционных систем и продуман до мелочей. Анимации, иконки, шрифты, все это с одним и тем же кодом будет выглядеть соответствующе операционке, под которую собрано приложение (Android или iOS,  а начиная со второй версии и Windows Phone).

Сборка

Если у вас есть опыт сборки с Cordova, то знаете, что начальная настройка зависимостей не самая легкая часть. Для сборки приложения для определенной операционной системы необходима установка ряда обязательных зависимостей. Например для сборки под iOS необходима Mac OS и установленный Xcode.

С подробной пошаговой инструкцией настройки сборки для каждой платформы можно ознакомиться в документации Ionic.

После установки всех зависимостей станут доступны следующие команды:

iOS

# Сборка тестовой сборки
ionic build ios

# Сборка релизной версии
ionic build ios --release 

# Запуск приложения в эмуляторе
ionic emulate ios

# Запуск приложения на устройстве подключенном по usb
ionic run ios

Android

# Сборка тестовой версии
ionic build android

# Сборка релизной версии
ionic build android --release 

# Запуск приложения в эмуляторе
ionic emulate android

# Запуск приложения на устройстве подключенном по usb
ionic run android

Есть и альтернативный способ сборки, это сервис PhoneGap Build. Бесплатно они соберут ваш исходник под три платформы в облаке. В бесплатной версии ограничениями являются: одно приватное приложение на аккаунт и невозможность сборки приложения с собственными плагинами.

Заставки и иконки приложений

Если вам доводилось когда-то разрабатывать приложения для iPhone  и Android устройств, то наверняка в курсе, что для публикации в App Store или Play маркете для приложения необходимо сделать множество заставочных экранов и иконок для различных размеров экранов.

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

Все что для этого необходимо, это создать два файла (в любом из форматов: png, psd или ai). Файл с иконкой приложения должен называться icon, для его создания рекомендую воспользоваться psd шаблоном. А файл с заставочным экраном должен называться splash, его можно создать по этому psd шаблоноу. Далее их следует поместить в папку resources в корне проекта. Если она отсутствует, ее необходимо создать.
Далее остается выполнить одну из следующих команд:

# Сгенерирует и иконки, и заставку
ionic resources

# Сгенерирует только иконки
ionic resources --icon

# Сгенерирует только заставки
ionic resources --splash

Пути к созданным файлам пропишутся автоматически в файл config.xml

Ionic view

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

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

#Разовая авторизация
ionic login

#Добавить e-mail тестировщика в список рассылки
ionic share E-MAIL_ПОЛЬЗОВАТЕЛЯ

#Залить новую версию аппа на тестирование
ionic upload

Таким образом можно быстро показывать демо версии и проводить тестирование до покупки аккаунта разработчика в Play маркете или App Store.

Производительность

Производительность является ключевым камнем преткновения в гибридных приложениях. Например WebView (технология, которая позволяет существовать гибридным приложениям) не всегда использует конструкторы операционной системы для тривиальных вещей. Это лишь одна из причин, почему гибридные приложения более медлительны, чем нативные.

Но ребята из Ionic постарались свести к минимуму потерь производительности, путем использования оптимизированных компонентов фреймворка и внедрением в их CLI возможность установки Crosswalk.

Crosswalk позволяет запускать приложение на телефоне не с помощью стандартного для OS WebView, а с помощью последней версии chromium.

Это позволит:

  • использовать последние технологии браузеров даже на старых мобильных устройствах (WebRTC,WebGL и т.д.)
  • улучшит debug с помощью Chrome DevTools.
  • повысит производительность html,css и javascript

Для установки Crosswalk в ваше приложение необходимо прежде всего добавить все необходимые мобильные платформы (если вы этого еще не сделали):

#Добавит платформу ios или android для деплоя
ionic platform add ios | android

а затем установить сам плагин Crosswalk:

cordova plugin add cordova-plugin-crosswalk-webview

Теперь приложения будут собираться с установленным Crosswalk. (Размер apk файла увеличится на примерно 20мб).

Вывод

На сегодняшний день Ionic это не просто фреймворк, это целая экосистема для разработки, сборки, тестирования и распространения гибридных мобильных приложений. Это инновация, которая позволит выйти на рынок разработки мобильных аппов javascript разработчикам и создавать красивые, производительные приложения.