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

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

2-е издание, исправленное

Самойлова Т.А.
Сенчилов В.В.

Национальный Открытый Университет “ИНТУИТ”
2016

2

Разработка гибридных приложений для мобильных устройств под Windows Phone/ Т.А. Самойлова,
В.В. Сенчилов - М.: Национальный Открытый Университет “ИНТУИТ”, 2016

Данный курс ориентирован на начинающих разработчиков мобильных приложений.
Курс иллюстрирует основные возможности средств разработки в среде Visual Studio с применением
технологии Apache Cordova и неотъемлемых от неё HTML5, CSS3 и JavaScript. Представлено
использование возможностей ASP.NET для разработки серверных сценариев, обменивающихся
данными с клиентскими приложениями. Курс посвящен вопросам разработки гибридных мобильных
приложений для Windows Phone с применением технологии Apache Cordova. Первый раздел курса
содержит обзор технологий и инструментов, используемых в разработке клиентской и серверной
частей приложений: HTML5, ASP.NET, Visual Studio, WebMatrix, SQL Server, Windows Azure. Так
как клиентская часть гибридного приложения для Windows Phone пишется на HTML5, в следующем
разделе курса предлагается освежить знания учащихся в области HTML-разметки, таблиц стилей
CSS3 и языка программирования JavaScript, применяя их для создания мобильных виджетов. Далее
речь пойдет о средствах Apache Cordova для доступа к ресурсам мобильного устройства, таких как
камера, акселерометр, компас и др., а также о средствах сохранения данных в хранилище мобильного
устройства. Поскольку в гибридных приложениях происходит обмен данными между клиентской и
серверной частями, далее рассматриваются средства управления процессом обмена данными между
мобильным виджетом и веб-сервером. В заключительном разделе даны возможности технологии
ASP.NET для создания серверных сценариев гибридных мобильных приложений.

(c) ООО “ИНТУИТ.РУ”, 2014-2016
(c) Самойлова Т.А., Сенчилов В.В., 2014-2016

3

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

Концепция гибридного приложения для мобильных устройств (Hybrid Mobile Apps),
применение в одном решении клиентской и серверной разработки. История,
архитектуры, технологии разработки, ориентированные на мобильные платформы.
HTML5 и мобильные виджеты, преимущества и недостатки, производительность.
Поддержка компанией Microsoft фреймворка Apache Cordova. Использование
гибридных мобильных приложений в бизнесе, примеры готовых проектов.

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

Для многих отраслей деятельности человека мобильные устройства стали критически
важным и стратегическим каналом продаж, маркетинга и т.п. Но когда предприятие
управляет своим брендом через веб-приложение, оно сталкивается с проблемой
доставки разнообразной информации как с сервера на мобильные устройства, так и с
мобильных устройств на сервер. Базовая концепция мобильного гибридного
приложения заключается в совместной работе серверного веб-приложения и
клиентского мобильного (нативного - 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].

4

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 года. В ней было добавлено много просто
революционных возможностей. Прежде всего, это поддержка веб-камеры и микрофона
и возможность передачи видеопотока от клиента на сервер в любых приложениях,
поддержка буфера обмена, drag&drop и показа оповещений, поддержка Managed
Extensibility Framework и многое другое. Реализована полноценная поддержка офлайнприложений с доступом к локальным папкам и внешним СОМ-объектам, а также с
возможностью отображения в них HTML через встроенный браузер. Финальный релиз
Silverlight 5 стал доступен в декабре 2011-го (бета-версия). Среди новшеств: поддержка
графического процессорного 3D, а также ускорение декодирования видео, поддержка

5

технологии 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. Впервые технология была показана на

6

конференции 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 году приняла решение

7

отказаться от упоминания версии HTML5, заменив ее простым названием HTML, под
которое попадают все последующие версии стандарта.

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

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

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

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

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

1. Количество мобильных платформ в будущем будет только возрастать. Уже сейчас

для обеспечения совместимости с максимальным количеством устройств,
требуется создавать приложения для iOS, Android, Palm Pre, Windows Phone, Bada,
а также приложение Java ME. Даже в этом случае невозможно охватить все
мобильные платформы. Код, основанный на средствах HTML5, можно
использовать для всех платформ.

2. Условия рынка требуют быстрой реакции. Невозможно тратить месяцы на

разработку своих мобильных клиентских приложений. Виджеты можно
разрабатывать достаточно быстро.

3. Каждый производитель устройств уже реализовал поддержку виджетов или

аналогичной технологии, либо планирует реализовать такую поддержку в
ближайшем будущем.

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

5. Виджеты могут присутствовать на экране мобильного устройства постоянно, не

требуя открыть браузер и ввести URL-адрес.

6. Операторы связи также вступают в мир разработки виджетов со своими

собственными платформами.

8

7. При разработке виджетов используются широко известные технологии (HTML,

JavaScript, CSS и Ajax), для которых доступно большое количество технических
ресурсов и подготовленных специалистов.

8. Для разработки виджетов можно использовать API HTML5, не ожидая появления

мобильных API.

9. Портирование виджетов требует гораздо меньших усилий по сравнению с

портированием “родных” приложений.

10. Достаточно легко выполняется портирование мобильных виджетов на платформу

настольных виджетов и в обратном направлении.

11. Возможно распространение виджетов бесплатно или продажа их через магазины

производителей устройств.

12. Виджеты могут сами себя обновлять.
13. Можно получить доступ к службам платформы с помощью новых программных

интерфейсов JavaScript, не доступных в мобильных браузерах.

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

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

производительность в сравнении с другими решениями.

4. Виджеты не подходят для создания некоторых типов приложений (этот круг

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

5. Виджеты являются не простыми веб-сайтами, а полноценными приложениями,

использующими JavaScript. Использование хороших практик и приемов
программирования при этом является обязательным.

6. Большинство платформ не позволяет создавать приложения, предназначенные для

работы в фоновом режиме.

7. В виджетах нельзя создавать трехмерные эффекты (или, по крайней мере, пока не

рекомендуется из-за плохого быстродействия).

8. В настоящее время в виджетах сложно или невозможно реализовать процессы с

интенсивным использованием процессора, такие как распознавание изображений,
AR-решения или распознавание голоса.

Apache Cordova

Это бесплатный open-source (“открытое ПО”) фреймворк для создания гибридных
мобильных приложений (ссылка: http://cordova.apache.org/ - 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
- http://cordova.apache.org/docs/en/3.0.0/guide).

9

Рис. 1.1. 

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

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

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

Таблица 1.1.

10