Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 324 / 21 | Длительность: 11:36:00
Специальности: Программист
Лекция 1:

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

Лекция 1: 123 || Лекция 2 >
Аннотация: Концепция гибридного приложения для мобильных устройств (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].

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, а также ускорение декодирования видео, поддержка технологии 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 термин "виджет" имеет другое значение - там этот термин означает используемые на экране визуальные элементы управления.

Лекция 1: 123 || Лекция 2 >
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?