Разработка гибридных приложений для мобильных устройств под Windows Phone

Особенности разработки гибридных мобильных приложений

Показывать лекцию целиком

Концепция гибридного мобильного приложения

Для многих отраслей деятельности человека мобильные устройства стали критически важным и стратегическим каналом продаж, маркетинга и т.п. Но когда предприятие управляет своим брендом через веб-приложение, оно сталкивается с проблемой доставки разнообразной информации как с сервера на мобильные устройства, так и с мобильных устройств на сервер. Базовая концепция мобильного гибридного приложения заключается в совместной работе серверного веб-приложения и клиентского мобильного (нативного - native application shell) приложения. Основное преимущество их совместной работы - возможность сервера получить доступ к таким возможностям клиентских мобильных устройств, как камера, акселерометр, контакты, файловая система или геопозиционирование. Шейн Черч (Shane Church) - директор отдела эффективных технологий в Microsoft приводит в [1] пример внедренного гибридного приложения. Приложение предназначено для мобильных сотрудников, обрабатывающих заказы на техническое обслуживание и ремонт различного муниципального имущества, такого как рекламные щиты, скамейки и пожарные гидранты. Для определения текущего местонахождения сотрудника оно использует преимущества функций, поддерживаемых браузером, а для получения снимков муниципального имущества и их последующей загрузки на сервер - доступ к аппаратным средствам конкретного мобильного устройства.

Гибридные мобильные приложения относятся к классу RIA - приложений (Rich Internet Applications, термин, который переводят как "насыщенные" интернет - приложения). Таким образом, основное отличие работы гибридных мобильных приложений от мобильных веб-сайтов состоит в уходе от клиент-серверной архитектуры, при которой браузер являлся тонким клиентом. При этом запускается полноценное мобильное приложение, для которого взаимодействие с сервером носит только вспомогательный характер. По сути, это приложения, работающие через сеть и предоставляющие мобильному клиенту ресурсы веб-сервера, но обладающие функциональностью полноценных настольных приложений. Для обмена данными между веб - приложениями и нативным кодом мобильных устройств существуют программные структуры (фреймворки), которые выступают в роли моста и обеспечивают общий интерфейс, позволяющий получить доступ к ресурсам мобильных устройств. Примерами популярных технологий для разработки мобильных RIA служат Microsoft Silverlight, Flash/Flex от Adobe, JavaFX от Sun и Apache Cordova (старое название - Phone Gap), которая базируется на HTML5. Давайте кратко их рассмотрим [2].

Microsoft Silverlight

Наверное, самой успешной и получившей наибольшее распространение технологией этого класса стала разработка компании Microsoft. Она представляет собой классическое Rich Internet Application, включая в себя плагин для браузеров, воспроизводящий различный мультимедиа-контент. Microsoft Silverlight родилась как часть, или, вернее, как версия Windows Presentation Foundation (WPF - графическая подсистема для построения пользовательских интерфейсов настольных Windows-приложений) для веб-среды.

Техническая реализация включает построение пользовательского интерфейса на основе языка XAML (extensible Application Markup language - расширяемый язык разметки приложений) и модуля расширения браузера, который обрабатывает XAML-конструкции и отображает итоговый контент в поле обозревателя. Модуль предоставляет разработчикам доступ к объектам XAML-страницы посредством JavaScript, делая возможным создание полноценных графических и мультимедийных приложений. Модуль разработан для всех распространенных браузеров и требует установки.

Первая бета-версия Silverlight была выпущена в декабре 2006 года, а релиз Silverlight 1.0 состоялся в мае 2007 года. Эта версия имела базовые графические возможности, в частности анимацию и базовые элементы пользовательского интерфейса. Основной особенностью Silverlight 2, вышедшего в октябре 2008 года, стала интеграция технологии с платформой .NET Framework. В ней появился большой набор новых элементов управления (например, DataGrid, TreeView), новые возможности для работы с видео и другие возможности. Тогда же появился инструмент разработки - Microsoft Silverlight Tools for Visual Studio 2008, включающий в себя генераторы кода для XAML, шаблоны для мобильных проектов, проектов Visual Basic и С#, средства отладки Silverlight - приложений и прочие необходимые для создания программ вещи.

Silverlight 3 вышел в июне 2009 года. В новую версию были добавлены такие инструменты работы с графикой, как пиксельные шейдеры, обеспечивающие псевдо- рендеринг (так называемый "2,5D") и плавную анимацию (вплоть до реалистичного видео), поддержка аппаратного ускорения при работе с трехмерной графикой, поддержка устройств с multitouch-интерфейсом. В Silverlight 3 был впервые представлен функционал ООВ (out-of-the-browser - вне браузера), дающий некоторые возможности по исполнению Silverlight-приложений вне обозревателя.

Версия Silverlight 4 появилась в апреле 2010 года. В ней было добавлено много просто революционных возможностей. Прежде всего, это поддержка веб-камеры и микрофона и возможность передачи видеопотока от клиента на сервер в любых приложениях, поддержка буфера обмена, dragdrop и показа оповещений, поддержка Managed Extensibility Framework и многое другое. Реализована полноценная поддержка офлайн-приложений с доступом к локальным папкам и внешним СОМ-объектам, а также с возможностью отображения в них HTML через встроенный браузер. Финальный релиз Silverlight 5 стал доступен в декабре 2011-го (бета-версия). Среди новшеств: поддержка графического процессорного 3D, а также ускорение декодирования видео, поддержка технологии XNA, поддержка 64-битных браузеров, изменяемая скорость воспроизведения медиаконтента с автоматической коррекцией звука, поддержка ускорения запуска приложений.

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

Adobe Flex

Технология Macromedia Flash, ставшая собственностью компании Adobe, во многом предвосхитила концепцию RIA. Кроме того от Flash потребовалось нечто существенно большее, чем красивые элементы управления и надоедливые баннеры, родилось воплощение Rich Internet Application от Adobe - платформа Adobe Flex.

Flex расширяет возможности Flash, позволяя описывать интерфейс приложения на языке XML. Физически Flex представляет собой framework, набор классов, расширяющих возможности Flash. Среди базовых возможностей - локализация, валидация вводимых данных, форматоры текстовых полей и прочие возможности, позволяющие вести RAD-разработку. Кроме этого, Flex предоставляет богатые мультимедийные возможности, включая потоковое мультимедиа, доступ к веб-камере и микрофону пользователя. В основе построения интерфейса, так же как и в Silverlight, лежит XML-язык разметки - MXML. Для создания приложений с использованием технологии Flex Adobe System создана мощная среда разработки.

К недостаткам технологии можно отнести некоторую избыточность, заложенную в самой архитектуре Flex-framework. В каждое приложение необходимо включать стандартный набор классов, занимающий более 700 Кб в итоговом swf-файле. Естественно, это не лучшее решение, особенно если речь идет о мобильных устройствах с ограниченными ресурсами. Следует также учитывать, что эта технология, предназначенная для сложных настольных приложений, явно избыточна для более ограниченных мобильных.

JavaFX

Если вспомнить историю создания интернет - приложений, придется признать за компанией Sun первенство в деле создания Rich Internet Application. Первые Java-апплеты, продемонстрированные еще Джеймсом Гослингом при презентации браузера WebRunner в далеком 1994 году, вполне подходили под это определение. Правда, с тех пор прошло много событий, интернет-приложения росли и изменялись, появилась технология Flash, использование клиентских возможностей браузера (JavaScript, DOM) вылилось в термин WEB 2.0, а апплеты как технология, в общем, не сильно изменились. Заняв прочное положение на мобильных устройствах, на десктопах они так и не получили заметного распространения.

Прорыв на рынок RIA компания Sun совершила во второй половине 2000-х, представив новую платформу для веб-приложений -JavaFX. Впервые технология была показана на конференции JavaOne в мае 2007-го. В декабре 2008 года вышла JavaFX 1.0, включающая в себя средства разработки - JavaFX 1.0 SDK, плагин для NetBeans IDE 6.5 и JavaFX 1.0. В 2009 году Sun официально выпустила JavaFX Mobile с JavaFX 1.1 SDK. С этой версией SDK стало возможно создавать приложения для мобильных устройств, поддерживающих J2ME и технологию JavaFX. SDK включает в себя свой отдельный мобильный javaFX эмулятор.

В JavaFX 2.0 (и выше) присутствует веб-компонент, позволяющий встраивать в приложения HTML5 и поддержку тега canvas.

Позиции технологии JavaFX пошатнулись в апреле 2009-го с утерей Sun Microsystem самостоятельности и переходом всех ее разработок под крыло Oracle. Но после некоторого затишья вскоре стало ясно, что технология заброшена не будет. Основная проблема использования JavaFX на мобильных устройствах - это необходимость установленного на них Java Runtime Environment, вследствие чего технология полноценно работает только на операционной системе Android.

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

Формально HTML5 был определен организацией международных стандартов World Wide Web Consortium (W3C), он состоит из более 100 спецификаций, относящихся к веб-технологиям нового поколения. Хотя охватить разом столь широкое понятие, как HTML5, и недвусмысленно определить его очень трудно. По сути, HTML5 - широкий термин, описывающий набор спецификаций HTML, CSS и JavaScript, разработанных для создания веб-сайтов и приложений нового поколения. Примечательно, что в этом определении есть три части: HTML, CSS и JavaScript. Они определяют, как разработчики должны использовать улучшенную разметку, более богатые стилевые возможности и новые JavaScript API. Проще говоря, HTML5 = HTML + CSS + JavaScript.

Почему HTML5 становится важнейшим компонентом разработки гибридных мобильных приложений? Эти приложения имеют принципиальные недостатки, определяемые их архитектурой. Это, в первую очередь, необходимость устанавливать дополнительное программное обеспечение, к которому относятся клиентские плагины, обеспечивающие доступ к внутренним ресурсам мобильных устройств. Вторая проблема, которая на самом деле гораздо серьезней, состоит в том, что эти плагины, написанные на языке конкретной мобильной платформы, являются чужеродной для браузера средой, чаще всего непрозрачной для доступа из серверных сценариев. Фактически HTML/JavaScript/CSS являются в них лишь фронтендом, дополнительным внешним слоем приложения. Таким образом, однородность веб-среды принципиально нарушается. Именно HTML5 предоставляет единую прозрачную среду выполнения для разных мобильных платформ, с доступными разработчику компонентами. Это достигается использованием единых средств HTML/JavaScript/CSS для разработки серверного, клиентского и связывающих их надстроечного компонента.

Рабочая группа по разработке гипертекстовых приложений для веб WHATWG (Web Hypertext Application Technology Working Group) в 2011 году приняла решение отказаться от упоминания версии HTML5, заменив ее простым названием HTML, под которое попадают все последующие версии стандарта.

HTML5 успешно используется для разработки следующих видов мобильных приложений:

  • мобильный виджет - это офлайновое полноценное клиентское приложение, которое имеет доступ к функциям мобильного телефона (геолокация, акселерометр, камера, компас и др.) и может выполнять автономную обработку данных на мобильном устройстве без выхода в интернет;
  • мобильное webapp - приложение также офлайновое, размещается на клиентском устройстве, но может быть размещено на сервере, в отличие от виджета, не имеет доступа к функционалу мобильного устройства;
  • мобильное веб-приложение - онлайновое (от англ. on line - "на связи", "в сети", "находящийся в состоянии подключения") приложение на сервере, которое работает лишь при наличии открытого Интернет-соединения.
  • гибридное мобильное приложение - это офлайновый мобильный виджет, периодически взаимодействующий с серверным приложением.
    •

    Следует заметить, что при работе с "родными" приложениями операционной системы Android термин "виджет" имеет другое значение - там этот термин означает используемые на экране визуальные элементы управления.

    Возможности мобильных виджетов

    Мобильные виджеты, создаваемые, главным образом, средствами языка HTML5, можно считать наиболее перспективными по следующим причинам [3]:

  • Количество мобильных платформ в будущем будет только возрастать. Уже сейчас для обеспечения совместимости с максимальным количеством устройств, требуется создавать приложения для iOS, Android, Palm Pre, Windows Phone, Bada, а также приложение Java ME. Даже в этом случае невозможно охватить все мобильные платформы. Код, основанный на средствах HTML5, можно использовать для всех платформ.
  • Условия рынка требуют быстрой реакции. Невозможно тратить месяцы на разработку своих мобильных клиентских приложений. Виджеты можно разрабатывать достаточно быстро.
  • Каждый производитель устройств уже реализовал поддержку виджетов или аналогичной технологии, либо планирует реализовать такую поддержку в ближайшем будущем.
  • Виджет может послужить отличным дополнением к мобильному веб - приложению. Используя тот же код, что и версия мобильного приложения, виджет может предложить другие возможности, например, интеграцию с устройством.
  • Виджеты могут присутствовать на экране мобильного устройства постоянно, не требуя открыть браузер и ввести URL-адрес.
  • Операторы связи также вступают в мир разработки виджетов со своими собственными платформами.
  • При разработке виджетов используются широко известные технологии (HTML, JavaScript, CSS и Ajax), для которых доступно большое количество технических ресурсов и подготовленных специалистов.
  • Для разработки виджетов можно использовать API HTML5, не ожидая появления мобильных API.
  • Портирование виджетов требует гораздо меньших усилий по сравнению с портированием "родных" приложений.
  • Достаточно легко выполняется портирование мобильных виджетов на платформу настольных виджетов и в обратном направлении.
  • Возможно распространение виджетов бесплатно или продажа их через магазины производителей устройств.
  • Виджеты могут сами себя обновлять.
  • Можно получить доступ к службам платформы с помощью новых программных интерфейсов JavaScript, не доступных в мобильных браузерах.
    •

    Вместе с тем использование данной технологии сопряжено с рядом проблем:

  • Между платформами необходимо выполнять портирование.
  • Отладка требует значительных усилий.
  • Виджет не является "родным" приложением, поэтому обеспечивает не лучшую производительность в сравнении с другими решениями.
  • Виджеты не подходят для создания некоторых типов приложений (этот круг постоянно сужается, например, за счет использования виджетов для разработки игр).
  • Виджеты являются не простыми веб-сайтами, а полноценными приложениями, использующими JavaScript. Использование хороших практик и приемов программирования при этом является обязательным.
  • Большинство платформ не позволяет создавать приложения, предназначенные для работы в фоновом режиме.
  • В виджетах нельзя создавать трехмерные эффекты (или, по крайней мере, пока не рекомендуется из-за плохого быстродействия).
  • В настоящее время в виджетах сложно или невозможно реализовать процессы с интенсивным использованием процессора, такие как распознавание изображений, AR-решения или распознавание голоса.
    •

    Apache Cordova

    Это бесплатный open-source ("открытое ПО") фреймворк для создания гибридных мобильных приложений (http://cordova.apache.org/). Позволяет создавать приложения для мобильных устройств, используя JavaScript, HTML и CSS, без необходимости знания "родных" языков программирования (например, C#, Java, Objective-C), под все мобильные операционные системы (Windows Phone, iOS, Android, Bada и т. д.).

    Далее приведена таблица поддерживаемых в Cordova возможностей для каждой конкретной операционной системы (http://cordova.apache.org/docs/en/3.0.0/guide).

    (рис 1.1)

    Нередко этот фреймворк, являющийся промежуточным слоем между родной средой выполнения мобильного приложения и JavaScript API, называют "оберточным"(wrapper) компонентом разработки мобильных приложений.

    Компания Microsoft, развивающая стратегию усовершенствования разработки для Windows Phone, также поддерживает Cordova и HTML5 в сфере мобильных разработок [4]. Microsoft стремится обеспечить разработчикам платформу, которая позволит им воспользоваться имеющимися навыками и технологиями для быстрого создания приложений. Однако HTML5 не будет единственным решением для разработки клиентских приложений на основе платформы Microsoft. Поддержка "родного" языка программирования XAML/C# для Windows Phone позволяет разработчикам создавать реалистичные и инновационные приложения и игры, которые запускаются локально.

    Далее приводятся фрагменты рекламного сайта компании "ICENIUM" [5] с примерами гибридных проектов для мобильных устройств, выполненных на базе HTML5 и Apache Cordova.

    Демонстрационный проект Назначение проекта (приложения)
    Coffee House

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

    		Приложение демонстрирует, как использовать Apache Cordova и JQueryMobile в дороге, чтобы посмотреть маршруты, выполнить регистрацию авиабилетов, изменить выбор места.
    Geolocation

    		Вы хотите помочь пользователям мобильных устройств найти свои любимые кафе, магазине или перемещаться по городу? Это приложение позволяет сделать это, используя Apache Cordova Geolocation API для получения информации о геолокации устройства.
    Compass

    		Вам нужно знать, в каком направлении ваше устройство перемещается, или может быть вам нужна помощь в выходе из леса? В этом приложение используется Apache Cordova API Compass, позволяющий получить направление движения мобильного устройства.
    Camera

    		В этом примере используется Apache Cordova Camera API, позволяющий задействовать камеру и галерею изображений устройства с использованием видео-редактора.
    Accelerometer

    		Приложение позволяет отслеживать перемещения ваших мобильных устройств, чтобы добавить дополнительный уровень интерактивности в ваши приложения. Использует функцию Accelerometer Apache Cordova API для доступа к акселерометру и отслеживания изменений в движении, связанных с текущей ориентацией мобильного устройства в пространстве.

    Скриншоты некоторых из вышеприведенных примеров приложений:

    Приложение "Coffee House"

    Начальный экран Лента новостей
    Зарегистрированные платежные карты Посмотреть данные карты

    Приложение "Airlines"

    Логин экрана Главный экран
    Экскурсии Регистрация на экскурсии
    Посадочный талон Выбор места

    Приложение "Geolocation"

    Главный экран Трек геолокации

    Примеры качественных гибридных приложений для Windows Phone, сделанных с использованием HTML5, можно увидеть также на сайте фирмы DevExpress [6].

    Эффективность гибридных мобильных приложений для бизнеса

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

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

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

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

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^