Разработка клиентских мобильных виджетов средствами Visual Studio с использованием Apache Cordova

Возможности Apache Cordova для разработки виджетов средствами Visual Studio

Фреймворк Cordova [1] возник как решение проблем работы мобильных приложений, создаваемых на основе HTML5. Например, можно разработать мобильное веб-приложение с JavaScript- и HTML5-контентом, направляя пользователей на URL хостинга. Первой проблемой станет продажа этого приложения через онлайновые магазины. Нельзя отправить в такой магазин URL, по которому размещено ваше веб-приложение, вы не получите за него деньги. Вторая проблема заключается в том, как осуществляется доступ к аппаратному обеспечению мобильного устройства и его графическим возможностям. По части графики в веб-приложениях можно делать только то, что позволяют CSS/HTML/JavaScript. Некоторые функции управления четкостью изображения и пользовательским интерфейсом, доступные в среде операционной системы мобильного устройства, в пространстве браузера недоступны. У браузеров нет широко поддерживаемых API для доступа к телефонным контактам, уведомлениям, камерам, датчикам и прочему. Apache Cordova (далее просто Cordova для краткости) - бесплатная инфраструктура с открытым исходным кодом - решает обе эти проблемы.

Cordova начиналась как PhoneGap, которая была разработана Nitobi. В октябре 2011 года Nitobi была приобретена компанией Adobe Systems вместе с открытым исходным кодом инфраструктуры PhoneGap по лицензии Apache Software Foundation, и название PhoneGap было сменено на Cordova. Переходный период не закончился до сих пор. Cordova предоставляет среду для хостинга разрабатываемого контента HTML5/JavaScript внутри тонкой "родной" оболочки. Для ОС на каждой платформе мобильных устройств она использует родной элемент управления "браузер" для рендеринга контента вашего клиентского приложения, причем ресурсы приложения упаковываются в дистрибутив. В случае Windows Phone ваши HTML5-ресурсы упаковываются в .xap - файл и загружаются в изолированное хранилище, когда запускается ваше Cordova-приложение. Фактически, Cordova-приложение представляет собой мобильный виджет. В период выполнения элемент управления WebBrowser визуализирует контент виджета и исполняет его JavaScript-код.

Cordova позволяет вызывать функции операционной системы с помощью кода JavaScript, размещенного в Web-разметке. Например, фотокамерой управляет следующая простая строка JavaScript: navigator.camera.getPicture(). Cordova также предоставляет набор стандартных API для доступа к функциям, общим для всех мобильных устройств. К некоторым из этих функций относятся хранилище (локальное хранилище и базы данных HTML5), контакты, камера, геопозиционирование, акселерометр. Каждая из этих функций предоставляется как JavaScript API, который используется из необходимого кода на JavaScript. Cordova берет на себя всю черновую работу, связанную с предоставлением необходимой родной реализации, и тем самым гарантирует, что вы будете иметь дело с одинаковыми JavaScript API независимо от ОС мобильного устройства, на котором выполняется ваш код. Тем самым, она позволяет выполнять одно и то же HTML5-приложение в различных мобильных операционных системах:

Рис. 3.1.

Этот фреймвок уже стал стандартом де факто для платформ WindowsPhone, iOS, Android и многих других. Его следует воспринимать как надстройку над SDK мобильной платформы, ориентированную на разработку виджетов (клиентской части) гибридных приложений, хотя в ней с успехом можно разрабатывать и офлайновые мобильные виджеты. В 2012 году авторы свободного JavaScript - фреймворка Apache Cordova сообщили о том, что их проект "повысили" до уровня ведущего (top-level projects, TLP) в некоммерческой организации Apache Software Foundation (ASF).

При выполнении JavaScript-кода внутри проекта Cordova мы можем использовать несколько плагинов Cordova. Эти плагины представлены в следующей таблице.

Например, чтобы сделать фотографию, мы можем использовать плагин "camera" в следующем JavaScript - коде:

function takePicture () {
navigator.camera.getPicture(function(image) {
// Данная функция вызывается с данными фотографии 
// в формате base64
document.getElementById("img").src="data:image/base64;" + image;
}, null, {quality: 8}); 
}

Ресурсы Cordova-приложений упаковываются в собственный формат мобильного устройства. Например:

• для Windows Phone, на выходе получается .xap - файл;
• для iOS на выходе формируется .ipa - файл (iPhone Application Archive);
• для Android на выходе - .apk - файл (Android Application Package).

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