- PVSM.RU - https://www.pvsm.ru -
Ionic framework [1] — один из самых широко обсуждаемых фреймворков. Как гласит официальный сайт, Ionic — это SDK для создания гибридных мобильных приложений, набор CSS и JS компонент, созданный на основе AngularJS, SASS, Apache Cordova.
На момент написания статьи репозиторий Ionic насчитывает 15300 звездочек, а сумма инвестиций в компанию Drifty, чьим продуктом является Ionic, уже достигла [2] $3.7 миллиона.
Посмотрим, что интересного предлагает Ionic для разработчика.
По сути это обёртка над Cordova CLI [3], предоставляющая дополнительные возможности:
Наличие Ionic CLI совсем не обязательно, однако это гораздо облегчает разработку приложения. Самые, на наш взгляд, значительные возможности:
$ ionic resources
Данная команда позволяет [4] из исходных файлов (.psd, .png, .ai) сгенерировать иконки всех размеров, сплешскрин под целевые платформы. Для этого достаточно иметь исходную иконку размером не менее 192×192px, и исходную картинку для сплешскрина размером не менее 2208×2208px, подготовленную по специальному PSD шаблону [5].
$ ionic serve --lab
отображает в браузере ваше приложение одновременно для iOS и Android платформ
Данная опция в том числе поддерживает live reload.
$ ionic upload
Данная команда позволяет загрузить ваше приложение в облака для дальнейшего тестирования в Ionic view [6]. Здесь надо остановиться поподробнее.
Ionic View — это мобильное приложение для iOS [7] и Android [8], с помощью которого можно делиться вашими разрабатываемыми приложениями с заказчиком, тестеровщиками, коллегами. Команда `$ ionic upload` синхронизирует приложение на вашем компьютере с сервером, после чего его можно запустить на телефоне.
Стоит отметить, что сейчас Ionic View находится в стадии beta. В процессе использования на Android, у нас довольно часто происходили непонятные баги — то белая страница без признаков жизни, то приложение и вовсе не запускалось. Как оказалось — не все Cordova плагины поддерживаются [9] в текущей версии Ionic View.
С помощью команды `$ ionic share <email>`
можно «поделиться» вашим приложением с другим аккаунтом, а если на данный email не зарегистрирован аккаунт, то будет выслано приглашение для регистрации.
IonicBox [10] — это сборка Vagrant для разработки на Ionic. В виртуальной машине (Ubuntu 14.04) установлены Node.js, Git, Java SDK 7, Apache Ant, Android SDK Cordova, Ionic.
Для наиболее быстрого старта разработки требуется зайти в папку с вашим приложением и выполнить:
$ vagrant init drifty/ionic-android
$ vagrant up
При этом скачается уже сконфигурированный VagrantBox, а код вашего приложения будет доступен через shared folders по пути /vagrant
.
Обратите внимание, что с помощью Ionic Box вы можете разрабатывать только Android приложения. По умолчанию, при запуске $ ionic run android
, приложение будет установлено на ваш реальный девайс, подключенный с помощью USB. Здесь [11] можно прочитать, как запускать приложение на виртуальном девайсе с помощью Genymotion.
Мы всё же советуем настраивать инструменты для разработки на вашем компьютере, однако Ionic Box — хороший вариант для быстрого старта.
Хоть это и не часть экосистемы Ionic, но стоит обратить внимание. Genymotion [12] — это очень (!) быстрый Android эмулятор, построенный на основе VirtualBox. Он настолько быстр, что пользоваться чем-то другим уже невозможно. Просто попробуйте.
В случае работы Genymotion+Ionic запуск приложения немного меняется, вместо $ ionic emulate android
надо выполнять $ ionic run android
, т.к. данный эмулятор определяется как устройство реальное, а не виртуальное.
Если у вас стоит Android Studio, то вы запросто можете запускать проекты на Genymotion прямо оттуда, выбрав одну из запущенных виртуальных машин в диалоговом окне. Например, можно запустить 4 виртуальных машины с разными версиями Android и быстро открыть в каждой из них своё приложение — очень удобно. Более того, имеется плагин [13] Genymotion для Android Studio, позволяющий управлять виртуальными машинами (эмуляторами).
Из минусов — не все виртуальные машины работают одинаково быстро. Например, Nexus 5 (Android 5.0) работает почему-то медленно, а, например, Galaxy S3 (Android 4.1) работает молниеносно.
Для личного использования Genymotion бесплатен.
Ionic Creator [14] — как вы уже догадались по картинке, это drag'n'drop builder интерфейса приложения. С недавних пор он стал публичным, и войти или зарегистрироваться можно здесь [15].
В Creator встроены базовые шаблоны страниц, которые упрощают прототипирование. На данный момент шаблоны следующие:
Элементов, которые можно добавлять на страницы, много: кнопки, формы, разделители, HTML/Markdown вставки, картинки и многое другое. Страницы можно связывать между собой, на событие клика кнопки можно вешать переход к другим страницам приложения.
Существует возможность экспорта приложения. Тут есть опции — это
В последнем случае установка выглядит так:
$ ionic start [appName] creator:%your_unique_hash%
Заявлена возможность тестирования приложений, созданных в Creator, прямо в Ionic View. Однако такой возможности в версии Android мы не обнаружили.
Из минусов — Creator плохо работает в Firefox, лучше использовать Creator в Chrome.
Интересным выглядит генератор тем [16], с помощью которого можно легко увидеть как будут выглядеть основные элементы Ionic приложения.
Ionicons [17] — это огромный набор иконок, которые встроены в Ionic. Иконки довольно часто пополняются, а для быстрого поиска нужной иконки по ключевому слову реализован удобный фильтр-поиск.
ng-cordova [18] — это набор из более чем 60 плагинов, которые являются AngularJS обертками для наиболее популярных Cordova и Phonegap плагинов, предоставляя уйму возможностей: сканирование баркодов, загрузка файлов, работа с социальными сетями, геолокация, определение статуса сети, API для работы с вибро и многое другое [19].
Ionic Showcase [20] — это коллекция приложений, написанных на Ionic профессионалами и не только. Есть возможность отправить [21] и своё приложение.
В блоге Ionic [22] часто постят обзоры на самые популярные приложения из Ionic Showcase. По сути, это еще одно подтверждение тому, что гибридные приложения занимают свою нишу и стремительно развиваются, а в некоторых случаях абсолютно не уступают нативным приложениям.
Наверняка, все AngularJS разработчики ждут появления AngularJS 2, и встаёт вопрос — что же будет с Ionic, у которого нет ещё даже версии 1.0?
Как уверяют разработчики, работа над Ionic 2 уже ведётся, и после выхода AngularJS 2 Ionic будет полностью его поддерживать. Подробнее об этом можно почитать в этом посте [23] в официальном блоге.
Вообще, команда Ionic тесно сотрудничает с разработчиками AngularJS, и намерения по поводу AngularJS 2 очень радуют. Начиная с прошлой недели, в блоге начали выходить посты Angular 2 Series [24] — короткие заметки о различных частях и особенностях нового фреймворка.
Ionic Material [25] — надстройка над фрейморком Ionic для материализации интерфейса. Лучше один раз увидеть — на сайте замечательное кликабельное демо [26].
Ionic Material не конфликтует со стандартными стилями и классами фреймворка Ionic и по заверению разработчика выполнен строго по гайдлайнам Google.
Split View — это возможность отображения страницы с не закрывающимся боковым меню при достижении некоторой ширины экрана.
Добавить эту возможность можно просто написав директиву expose-aside-when
в теге бокового меню:
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu expose-aside-when="large">
</ion-side-menu>
</ion-side-menus>
Так же легко указывать и произвольные значения ширины:
<ion-side-menu expose-aside-when="(min-width:750px) and (max-width:1200px)"
Crosswalk [30] — это опенсорсный продукт, позволяющий на старых версиях Android (4.0-4.3) использовать не встроенный WebView, а Chrome WebView, указывая нужную версию.
Наличие Crosswalk позволяет добиться вплоть до 10-кратного увеличения скорости отрисовки HTML/CSS и позволяет увеличить производительность Javascript, при этом увеличивая размер вашего приложение на ~10-15 МБ.
Также для разработчика открывается возможность отлаживать приложение с помощью Chrome DevTools.
Добавить Crosswalk в ваше Ionic приложение можно с помощью следующих команд:
$ ionic browser add crosswalk
$ ionic run android
Также можно установить конкретную версию:
$ ionic browser add crosswalk@11.40.277.7
Добавить возможность обновления содержимого по свайпу вниз с помощью Ionic займет у вас не более 7-10 минут. Вот пример из реального приложения — необходимо добавить pull-to-refresh функциональность к списку задач. Сначала надо изменить HTML, добавив в существующий код тег <ion-refresher>
:
<ion-content class="has-header">
<ion-refresher pulling-text="Pull to refresh..." on-refresh="refresh()"></ion-refresher>
<ion-list class="todos" show-delete="false" can-swipe="true">
...
вывод списка задач
...
</ion-list>
</ion-content>
Из кода легко понять, что при свайпе вниз, вызовется функция refresh() в текущем контроллере. Напишем её:
$scope.refresh = function() {
Task.get().then(function (tasks) {
$scope.tasks = tasks;
})
.finally(function() {
// останавливаем иконку загрузки
$scope.$broadcast('scroll.refreshComplete');
});
};
Вот и всё готово. Попробовать и посмотреть код можно здесь [33].
Один из наиболее живых и интересных блогов по Ionic:
Автор: borNfree
Источник [37]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/88524
Ссылки в тексте:
[1] Ionic framework: http://ionicframework.com/
[2] достигла: https://www.crunchbase.com/organization/drifty
[3] Cordova CLI: https://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html
[4] позволяет: http://blog.ionic.io/automating-icons-and-splash-screens/
[5] PSD шаблону: http://code.ionicframework.com/resources/splash.psd
[6] Ionic view: http://view.ionic.io/
[7] iOS: https://itunes.apple.com/us/app/ionic-view/id849930087?mt=8
[8] Android: https://play.google.com/store/apps/details?id=com.ionic.viewapp
[9] не все Cordova плагины поддерживаются: http://blog.ionic.io/view-app-is-alive/#howitworks
[10] Image: https://github.com/driftyco/ionic-box
[11] Здесь: https://github.com/driftyco/ionic-box/issues/17#issuecomment-57971827
[12] Genymotion: https://www.genymotion.com/#!/
[13] плагин: https://www.genymotion.com/#!/developers/user-guide#genymotion-plugin-for-android-studio
[14] Image: http://ionicframework.com/creator/
[15] здесь: https://creator.ionic.io/
[16] генератор тем: http://ionic-theme-editor.herokuapp.com/
[17] Ionicons: http://ionicons.com/
[18] Image: http://ngcordova.com/
[19] многое другое: http://ngcordova.com/docs/plugins/
[20] Ionic Showcase: http://showcase.ionicframework.com/
[21] отправить: http://showcase.ionicframework.com/submit
[22] блоге Ionic: http://blog.ionic.io/
[23] этом посте: http://blog.ionic.io/angular-2-ionic/
[24] Angular 2 Series: http://blog.ionic.io/angular-2-series-introduction/
[25] Ionic Material : http://ionicmaterial.com/
[26] демо: http://ionicmaterial.com/#preview
[27] Image: http://blog.ionic.io/splitview-has-landed/
[28] Codepen: http://codepen.io/ionic/pen/cDbFg
[29] Документация: http://ionicframework.com/docs/api/directive/exposeAsideWhen/
[30] Crosswalk: https://crosswalk-project.org/
[31] Пост в блоге: http://blog.ionic.io/crosswalk-comes-to-ionic/
[32] Документация Ionic+Crosswalk: http://docs.ionic.io/cli/crosswalk/
[33] здесь: http://codepen.io/perrygovier/pen/nqIrC
[34] blog.nraboy.com: https://blog.nraboy.com/
[35] видеоблог: https://www.youtube.com/user/nicraboy
[36] ionicinaction.com: http://ionicinaction.com/
[37] Источник: http://habrahabr.ru/post/254681/
Нажмите здесь для печати.