Четыре способа построения мобильного приложения, часть 3: PhoneGap.

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

Платформа PhoneGap от компании Adobe позволяет разработчику создать приложение, которое работает на различных мобильных устройствах. Разработчик решает эту задачу путем создания пользовательского интерфейса с применением таких веб-технологий, как HTML, CSS и JavaScript. Инструментальные средства разработки PhoneGap позволяют комплектно загружать HTML, CSS и JavaScript файлы в пакеты развертывания конкретных платформ. PhoneGap поддерживает широкий спектр платформ:

iOS
Android
Windows 8
Windows Phone 7 и 8
BlackBerry 5.x+
WebOS
Symbian
Tizen

В этой статье мы сосредоточимся на создании приложения под названием FasTip, работающим на платформах iOS и Android:

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

Приложения, созданные с помощью PhoneGap, для визуализации контента используют веб-просмотрщик мобильной платформы. Таким образом, отображение контента любых веб-страниц, представляемых пользователям, будет идентично на каждой платформе. Внимательно следите за стилизацией элементов управления на каждой платформе. Этот вопрос подробно рассматривается в следующем разделе мультиплатформенного анализа.

Плагины: устранение пробелов в родных функциях.

PhoneGap обертывает веб-представление вашего HTML, CSS и JavaScript в родном приложении. Это необходимо потому, что веб-представление в приложении по своей природе не поддерживает многие из возможностей устройств, таких как доступ к файловой системе, либо фотоаппарат. PhoneGap имеет механизм перенесения, который позволяет JavaScript запускаться в веб-представлении для вызова машинного кода, содержащегося в приложении. PhoneGap поставляется в комплекте с плагинами для поддержки следующих возможностей устройств:

акселерометр,
камера,
контакты,
файловая система,
воспроизведение медиа-файлов и запись,
сетевой доступ.

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

сканирования штрих-кодов,
блютус,
отправка уведомлений,
текст для речи,
календари,
подключение к Facebook.

Для предыдущих версий PhoneGap, GitHub хранилище содержится набор предварительно встраиваемых плагинов. С выходом PhoneGap 3 и появлением новой архитектуры плагина старое хранилище устарело. Для всех плагинов, совместимых с PhoneGap 3, был создан системный реестр.

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

HTML, CSS и JavaScript фундамент для мобильной разработки.

Большинство возможностей PhoneGap связано с не-визуальными компонентами — это такие вещи, которые позволяют получить доступ к файловой системе, сетевой доступ, доступ к геолокации и т.д. PhoneGap не предоставляет помощи в построении самого пользовательского интерфейса. Для этого, вы должны использовать HTML и CSS основу, которую вы создаете самостоятельно или с помощью фреймворка. Приложения, созданные для мобильных браузеров должны ориентироваться на возможности данной мобильной платформы (скорость обработки, размер экрана, скорость передачи данных в сети, сенсорные события и т.д.).

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

К счастью, были созданы специализированные мобильные фреймворки, которые позволяют справиться с этой задачей. Вот только некоторые из предложений в этой области:

Эти фреймворки варьируются от CSS-ориентированных библиотек (наподобие Topcoat) до MVC-ориентированных библиотек с наборами управления мобильным пользовательским интерфейсом (наподобие Sencha Touch). Подробное обсуждение различий между этими фреймворками выходит за рамки данной статьи и требует выпуска целой серии специализированных статей. Посетите представленные выше веб-сайты и попробуйте некоторые из демонстрационных версий на нескольких мобильных устройствах.

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

Такие фреймворки как Sencha Touch позволяют абстрагировать DOM за счет использования API-интерфейсов, что избавляет разработчика от необходимости беспокоиться об особенностях реализации браузера. Sencha, для облегчения процесса разработки, также предоставляет графические инструменты, такие как Sencha Architect. Sencha обеспечивает коммерческую поддержку и обучение, что имеет особое значение для сбора информации.

Меня часто просят порекомендовать наиболее подходящие фреймворки для мобильной разработки. Выбор подходящего инструмента во многом зависит от функциональности вашего приложения, от мобильных платформ, которые необходимо поддерживать, ваших потребностей для коммерческой поддержки и вашего опыта работы с веб и мобильными разработками в целом. Я воодушевлен интенсивностью развития некоторых фреймворков, в частности Ionic, но по состоянию на момент написания этой статьи Ionic все еще находился в стадии альфа тестирования. Если вы ищете хорошо зарекомендовавший себя фреймворк, с более длинным послужным списком, то в этом случае наиболее подходящим для вас вариантом будет Sencha Touch или jQuery Mobile.

Из соображений целесообразности и наличия в свободном доступе огромного количества специализированных учебных пособий и документации, я решил создать приложение FasTip с использованием jQuery Mobile. Этот фреймворк обеспечивает широкий спектр поддержки для мобильных устройств. Это хороший выбор для приложений, которые не требуют выполнения значительного количества настроек для пользовательского интерфейса. jQuery Mobile отлично подходит для нашего достаточно простого приложения.

PhoneGap или Cordova: о чем можно судить по названию?

В процессе изучения PhoneGap вы почти наверняка столкнетесь с названием Cordova. На самом деле, название Cordova носит инструмент на основе командной строки, который мы будем использовать для создания нашего PhoneGap проекта. Проще говоря, Cordova представляет собой проект с открытым исходным кодом, который является основой PhoneGap. Представьте себе, что это двигатель PhoneGap.

В большинстве случаев названия могут быть взаимозаменяемыми. «PhoneGap» уже стал торговой маркой, и для выпуска проекта с открытым исходным кодом требовалось новое название — таким образом, и появился Cordova. Компания Adobe продолжает использовать «PhoneGap» для коммерческих продуктов. Большинство людей все еще продолжает относить этот проект к PhoneGap.

Установка PhoneGap.

С выпуском версии 3, установка инструментов PhoneGap и разработка проектов были значительно упрощены, благодаря новому интерфейсу командной строки (или CLI). Инструменты командной строки основаны на библиотеке Node.js, таким образом, перед установкой PhoneGap обязательно необходимо установить и Node.js. После того, как будет завершена установка Node.js, просто запустите соответствующую команду для узла менеджера пакетов, чтобы инициировать установку инструментов PhoneGap:

npm install -g cordova

Родной набор средств для разработки программного обеспечения.

Инструменты на основе командной строки являются только частью общего количества инструментов PhoneGap, которые необходимы для разработки. Вам все равно придется использовать набор инструментов для разработки мобильного программного обеспечения для платформ, которые вы предполагаете поддерживать. В этой статье мы в основном будем работать с iOS и Android. Для iOS вам необходимо установить тот же набор инструментов для разработчиков, который мы использовали при создании родных Objective-C (объектно-ориентированная версия языка Си) приложений.

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

Предыдущая статья о родной Android разработке предоставляет определенную помощь в поиске необходимых инструментов и их установке. Кроме того, вы можете обратиться к документации PhoneGap для уточнения деталей по установке инструментов для Android и iOS.

FasTip в PhoneGap.

Учитывая, что наше приложение FasTip является достаточно простым, мы можем не использовать большую часть функциональности PhoneGap для доступа к функциям устройства. Основная часть нашего времени будет сосредоточена на работе с веб-компонентами, необходимыми для создания пользовательского интерфейса. В отличие от родных платформ, в PhoneGap отсутствует интегрированная среда разработки (IDE), которая была бы похожа на Xcode или Eclipse.

Разработчики могут использовать любую интегрированную среду разработки по своему усмотрению. Для разработки веб-приложений я предпочитаю использовать замечательную IDE от JetBrains под названием WebStorm. Мой выбор объясняется тем, что эта среда разработки максимально соответствует потребностям PhoneGap. Основную часть приложения FasTip мы разработали с использованием WebStorm. Перед упаковкой его для мобильных устройств в PhoneGap мы провели испытание в браузере Chrome от компании Google.

На рисунке выше показана загрузка приложения FasTip в WebStorm. Обратите внимание, что этот проект состоит из относительно небольшого количества файлов:

Пользовательский интерфейс формируется в файле index.html. В этом файле содержатся все HTML фрагменты, которые используются данным приложением. HTML начинается со следующего head раздела:

<head>
  <meta name="viewport"
    content="initial-scale=1, minimum-scale=1, maximum-scale=1">
  <meta charset="utf-8">
  <title>FasTip - Tip Calculator</title>
  <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.0.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="js/jquery.js"></script>
  <script src="js/jquery.mobile-1.4.0.js"></script>
</head>

Мета-тег viewport масштабирует ширину страницы в соответствии с шириной браузера устройства. Если данный тег будет отсутствовать, то мобильный браузер не сможет определить, что страница оптимизирована для мобильного использования. В результате браузер будет уменьшать масштаб таким образом, чтобы отобразить страницу, как для персонального компьютера.

Далее мы загружаем два таблицы стилей. Подавляющее большинство CSS таблиц содержится в файле jquery.mobile.css. Кроме того, используется незначительное количество специфических CSS таблиц, ориентированных на конкретное приложение, которые подменяются в файле app.css. В разделе head загружаются скрипты, необходимые для поддержки jQuery и jQuery Mobile.

Навигационные экраны, jQuery Mobile.

В отличие от родных приложений, в которых мы использовали отдельные контроллеры просмотра или создавали события для каждого экрана, в данном примере мы будем размещать HTML-разметку для обоих экранов в одном файле. jQuery Mobile следует концепции разделения страницы на разделы, что напоминает поведение пользователей при перемещении между экранами. На самом деле, пользователь никогда бы не покинул пределы этой веб-страницы.

<div data-role="header">
  <h1>FasTip</h1>
  <a href="#settingsPage" id='settingsButton' class="ui-btn-right&quot
    data-role="button" data-icon="gear">Settings</a>
</div>
<div data-role="content">
  <form>
  <div data-role="fieldcontain">
  <label for="billAmount">Bill Amount:</label>

Представленный выше код находится в HTML файле и предназначен для заголовка главной формы ввода приложения Tip Calculator. Обратите внимание, что многие HTML элементы имеют data – атрибуты. Обратите особое внимание на data-role атрибут, который указывает jQuery Mobile целевые элементы на странице. Атрибут data-role="header" определяет поведение верхней части страницы. Его функциональное назначение аналогично UINavigationController в iOS приложениях. Атрибут data-role="content" – это основное содержимое нашей страницы, которое отображает основную форму калькулятора для расчета чаевых.

Для родных iOS и Android приложений мы должны были написать код, который позволил бы пользователям перемещаться между страницами. В PhoneGap простой анкорный HTML тег перемещает пользователя на страницу настроек:

<a href="#settingsPage" id='settingsButton' class="ui-btn-right"
  data-role="button" data-icon="gear">Settings</a>

Далее в HTML мы увидим следующее:

<div data-role="page" id="settingsPage" data-add-back-btn="true" >
  <div data-role="header">
   <a href="#mainPage" class="ui-btn ui-icon-delete ui-btn-icon-left"
    data-rel="back">Cancel</a>
   <h1>FasTip - Settings</h1>
  </div>
  <div data-role="content">

Данный div элемент в нашем приложении определяет границу страницы настроек. div элемент на странице используется для заголовка и контента по аналогии с главной страницей. Обратите внимание на то, как первый анкорный тег в header div идентифицирует кнопки «назад» и «отмена», которые позволяет пользователю вернуться к первому экрану. Атрибут data-rel="back" означает, что ссылка должна закрыть текущую страницу и перейти на главную страницу, аналогично тому, как это происходит при нажатии кнопки «назад» в браузере. На самом деле, при нажатии специальной кнопки «назад» на Android устройстве будет выполняться та же функция.

jQuery Mobile следит за выполнением переходов между виртуальными «страницами» в нашем приложении. Поскольку большая часть пользовательского интерфейса и взаимодействия между элементами управления определяются декларативно в HTML, нам необходимо написать значительно меньший объем кода, чтобы заставить работать приложение. Весь наш код ограничивается одним app.js файлом, который содержит всего 41 строку. Основная часть нашего приложения начинается с этого фрагмента кода:

$( document ).on( "ready", function(){
  $('#calcTip').on('click', calcTip);
  $('#saveSettings').on('click', saveSettings);

  var tipPercentSetting = localStorage.getItem('tipPercentage');

  if (tipPercentSetting) {
   tipPercent = parseFloat(tipPercentSetting);
  }

  $('#tipPercentage').val(tipPercent);
});

Когда документ будет готов, ко всем кнопкам будут привязаны соответствующие обработчики событий, которые позволят выполнить процесс расчета чаевых и сохранения настроек. В этом примере мы используем объект HTML5 под названием localStorage, который позволяет сохранять настройки процентных расчетов. PhoneGap поддерживает использование объекта localStorage и сохраняет данные в соответствующий каталог на родной платформе для того, чтобы устройства имели возможность использования нормального механизма резервного копирования. Когда пользователь выбирает настройки для сохранения, запускается следующий код:

var saveSettings = function() {
  try {
   var tipPct = parseFloat( $('#tipPercentage').val() );
   localStorage.setItem('tipPercentage', tipPct);
   tipPercent = tipPct;
   window.history.back();

  } catch (ex) {
   alert('Tip percentage must be a decimal value');
  }
};

Обратите внимание на использование объекта localStorage.setItem для расчета процентного значения чаевых, который находится под ключевым словом tipPercentage. Как только пользователь сохраняет процентное значение чаевых, он автоматически возвращается к предыдущему экрану. Поскольку при переходе между страницами jQuery Mobile интегрируется с API интерфейсом истории браузера, мы можем воспользоваться им и просто перейти обратно на предыдущую страницу через window.history.back();. На платформе Android, где устройство поддерживает кнопку «назад» результат ее нажатия будет иметь тот же эффект, что и нажатие кнопки «назад» в браузере. Пользователь будет перемещен на один экран назад.

Для более сложных приложений jQuery Mobile позволяет динамически загружать новые страницы, вместо того, чтобы размещать всю разметку в одном файле. Этот подход будет более предпочтительным в том случае, если ваше приложение имеет несколько экранов. Это объясняется тем, что в этом случае использование разметки в одном файле становится трудным и перед тем, как что-либо визуализировать, мобильному браузеру придется анализировать большой документ. Принудительная обработка браузером большого документа ощутимо замедлит время запуска вашего приложения.

Расчет суммы чаевых выполняется с помощью следующего кода:

var calcTip = function() {

  var billAmt = Number( $('#billAmount').val() );
  var tipAmt = billAmt * tipPercent/100 ;
  var totalAmt = billAmt + tipAmt;
  $('#tipAmount').text('$' + tipAmt.toFixed(2));
  $('#totalAmount').text('$' + totalAmt.toFixed(2));

};

Это стандартный jQuery код для подсчета суммы чаевых, расчета процентного значения чаевых и возврата результатов в соответствующее поле на странице. Когда пользователь нажимает на кнопку calcTip, с помощью обработчика события вызывается функция calcTip, которая закрепляется, когда DOM загружен и готов к использованию:

$( document ).on( "ready", function(){
  $('#calcTip').on('click', calcTip);
  …
});

Взаимосвязи между DOM, HTML и CSS должны быть знакомы любому человеку, который занимается разработкой веб-страниц. Естественно, что для привязки данных, визуализации контента из шаблонов и так далее также могут быть использованы и другие фреймворки, такие как Backbone.js и AngularJS. Один из наиболее важных аспектов PhoneGap заключается в том, что он не регламентирует использование конкретных библиотек или CSS. Используйте любые инструменты, которые, по-вашему мнению, помогут упростить рабочий процесс.

Как получить наш проект в PhoneGap.

PhoneGap предоставляет инструмент на основе командной строки под названием Cordova, который позволяет соз …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Мобильные приложения → 11.02.2014 by Newsbot