Разработка кроссплатформенного приложения с помощью Ionic Framework
Всем привет! Не так давно в одном из комментариев я пообещал написать вводную статью для быстрого знакомства с возможностями Ionic Framework (далее IF). Стараюсь сдерживать свои обещания. Для начала мне хотелось бы выложить список ссылок которыми часто пользуюсь при разработке с помощью IF:
Что будем писать? Небольшое приложение, которое будет брать данные о погоде с openweathermap.org для г. Москва и отображать их. Разработка будет вестить в ОС Linux Mint для целевой платформы Android. Для компиляции под IOS необходимо иметь в наличии ноутбук или компьютер фирмы Apple. Предполагается что читатель знаком с ЯП JavaScript и основами AngularJS (ну или быстро во всем разбирается).
ВведениеIF — это open source SDK для разработки гибридных мобильных приложений с использованием всей мощи HTML5, CSS3 и JavaScript, прекрасный пример симбиоза Cordova и AngularJS. Приложения, созданные с его помощью, можно посмотреть на showcase.ionicframework.com. Порог вхождения невысок, но для создания серьезного приложения необходимы продвинутые знания AngularJS и особенностей работы Cordova для целевой платформы. Так давайте установим его скорее! Установка
Этот этап достаточно прост если у вас уже есть NodeJS. Для этого наберите в консоли:
sudo npm i -g cordova ionic
У вас установлен и настроен Android SDK? Если нет, то вам поможет эта инструкция. Для разработчиков Windows есть вводное видео по установке. Также существует Vagrant сборка со всем предустановленым ПО. Будем считать что проблем у вас не возникло (а если возникли, то на форуме точно есть описание решения похожих проблем, в основном это установка и настройка Android SDK, но есть и траблы с плагинами. Также можно посмотреть на SO, там достаточно много информации по теме). Настало время созидать.Создание проекта
Тут тоже все достаточно просто. IF предлагает на выбор 3 шаблона для приложения — blank (пустой), tabs (на основе табов) и sidemenu (с боковым меню). Достаточно интуитивно, не находите? Все что нужно, это набрать в консоли:
ionic start MSKWeather tabs
Тем самым мы говорим IF создать проект с именем MSKWeather и шаблоном tabs. Не забудьте перейти в вашу папку с проектами и выполнить эту команду там. После создания можно перейти в папку с заготовкой:
cd MSKWeather
Я сознательно использую непустой проект дабы сэкономить свое и ваше время и показать возможности фреймворка, ведь гораздо проще и быстрее выкинуть ненужное и изменять под себя чем программировать с нуля. Для быстрого старта сойдет и такой подход. Тем не менее я надеюсь, что к концу статьи у вас наступит понимание архитектуры фреймворка и вы с легкостью начнете с blank шаблона, а затем поблагодарите меня за мою лень. Итак, разберем структуру проекта IF.Структура проекта
В корне проекта есть файл config.xml, отвечающий за основные настройки нашего приложения. К нему (а также к другим файлам) мы вернемся чуть позже, а пока перейдем в папку www (кстати я использую Sublime и уже открыл папку проекта в нем) и увидим заготовку нашего приложения. Бросается в глаза наличие index.html — это и есть связующее звено для всех компонентов будущего приложения (внезапно!). Рассмотрим что нам предоставляет фреймворк из коробки:
Крутая кодировка и запрет на масштабирование приложения пользователем. Уже подключенные стили и скрипты, а также привязка AngularJS в теге body, но самое главное
{{city.desc}}
Страна: {{data.city.country}}
Население: {{data.city.population}} чел.
Широта: {{data.city.coord.lon}}
Долгота: {{data.city.coord.lat}}
На дату: 
Как видно, изменения подхватились и у нас остался один таб с иконкой облака. Теперь нам нужно удалить tab-account.html и tab-chats.html (ибо уже не нужны), а также переименовать chat-detail.html в city-detail.html, а tab-dash.html в tab-city.html соответственно. Это будут наши шаблоны для выбора города и его детализации соответственно. А еще давайте изменим имя представления и url для доступа. Файл tabs.html теперь должен выглядеть так:
{{city.name}}
Замечательно! Теперь перейдем к city-detail.html. Данные запрашиваются за неделю, поэтому нам здесь тоже понадобится список. Чтобы понять что именно отображать, необходимо перейти по адресу api.openweathermap.org/data/2.5/forecast/daily? id=524901, и посмотреть структуру ответа сервера (мне нравится сервис jsoneditoronline.org для просмотра и форматирования).Ответ сервера
{
«cod»:»200»,
«message»: 0.0165,
«city»: {
«id»: 524901,
«name»: «Moscow»,
«coord»: {
«lon»: 37.615555,
«lat»: 55.75222
},
«country»: «RU»,
«population»: 1000000
},
«cnt»: 7,
«list»: [
{
«dt»: 1428915600,
«temp»: {
«day»: 283.84,
«min»: 278.31,
«max»: 284.09,
«night»: 278.31,
«eve»: 283.05,
«morn»: 281.75
},
«pressure»: 1010.15,
«humidity»: 74,
«weather»: [
{
«id»: 802,
«main»: «Clouds»,
«description»: «scattered clouds»,
«icon»:»03d»
}
],
«speed»: 5.02,
«deg»: 243,
«clouds»: 32
},
{
«dt»: 1429002000,
«temp»: {
«day»: 279.6,
«min»: 275.65,
«max»: 280.3,
«night»: 275.65,
«eve»: 279.3,
«morn»: 278.04
},
«pressure»: 994.7,
«humidity»: 89,
«weather»: [
{
«id»: 500,
«main»: «Rain»,
«description»: «light rain»,
«icon»:»10d»
}
],
«speed»: 5.01,
«deg»: 200,
«clouds»: 64,
«rain»: 1.86
},
{
«dt»: 1429088400,
«temp»: {
«day»: 277.79,
«min»: 273.76,
«max»: 278.35,
«night»: 277.3,
«eve»: 278.35,
«morn»: 273.76
},
«pressure»: 998.51,
«humidity»: 73,
«weather»: [
{
«id»: 500,
«main»: «Rain»,
«description»: «light rain»,
«icon»:»10d»
}
],
«speed»: 6.53,
«deg»: 221,
«clouds»: 76,
«rain»: 0.53
},
{
«dt»: 1429174800,
«temp»: {
«day»: 282.85,
«min»: 276.5,
«max»: 282.85,
«night»: 276.5,
«eve»: 278.69,
«morn»: 279.93
},
«pressure»: 991.07,
«humidity»: 0,
«weather»: [
{
«id»: 501,
«main»: «Rain»,
«description»: «moderate rain»,
«icon»:»10d»
}
],
«speed»: 5.36,
«deg»: 287,
«clouds»: 47,
«rain»: 4.22
},
{
«dt»: 1429261200,
«temp»: {
«day»: 280.71,
«min»: 274.5,
«max»: 280.71,
«night»: 274.5,
«eve»: 277.19,
«morn»: 280.17
},
«pressure»: 995.12,
«humidity»: 0,
«weather»: [
{
«id»: 501,
«main»: «Rain»,
«description»: «moderate rain»,
«icon»:»10d»
}
],
«speed»: 5.32,
«deg»: 285,
«clouds»: 65,
«rain»: 3.23
},
{
«dt»: 1429347600,
«temp»: {
«day»: 281.27,
«min»: 276.59,
«max»: 281.27,
«night»: 276.59,
«eve»: 278.67,
«morn»: 279.17
},
«pressure»: 1002.53,
«humidity»: 0,
«weather»: [
{
«id»: 500,
«main»: «Rain»,
«description»: «light rain»,
«icon»:»10d»
}
],
«speed»: 9.51,
«deg»: 359,
«clouds»: 67,
«rain»: 0.62
},
{
«dt»: 1429434000,
«temp»: {
«day»: 282.04,
«min»: 278.38,
«max»: 282.04,
«night»: 279.1,
«eve»: 280.23,
«morn»: 278.38
},
«pressure»: 1006.22,
«humidity»: 0,
«weather»: [
{
«id»: 500,
«main»: «Rain»,
«description»: «light rain»,
«icon»:»10d»
}
],
«speed»: 5.5,
«deg»: 311,
«clouds»: 88,
«rain»: 0.97
}
]
}
Что-ж, для этих данных необходимо создать простенький шаблон, пример которого приведен ниже:
Город: {{data.city.name}}
Температура: {{(day.temp.day — 273.15).toFixed (2)}} C
Архив с кодом я конечно-же приложу к статье, так что у вас будет возможность всячески поиграться с полями. Как видите, процесс разработки прост, понятен и приятен (серъезно, надеюсь не нужно объяснять что куда в этом шаблоне?). Ну и напоследок…Обновление данных (pull-to-refresh)
Нравится мне эта вкусняшка. Что нужно? Всего лишь добавить
Чтобы скомпилировать приложение и запустить в эмуляторе, нужно выполнить:
ionic platform add android (ну или ios)
ionic build android (ios)
ionic emulate android (ios)
В случае техники Apple вам нужно будет поставить ios-sym. Для деплоя смотрите инструкции к вашей целевой платформе. Например для Android необходимо будет сгенерировать ключ и подписать приложение, что неплохо описывается здесь. Как сгенерировать иконки и сплэши к платформам описано здесьАрхив с проектом
Заключение Надеюсь у меня получилось донести основные концепции IF, а также сподвигнуть вас попробовать этот фреймворк для своих проектов. Замечания и предложения принимаются строго в ЛС, статья будет редактироваться и дополняться на основе ваших отзывов (планирую из этого поста сделать сборник best practices). Всем спасибо за внимание и удачного кодинга!
