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

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

Аннотация: Средства Apache Cordova для разработки виджетов в Visual Studio. Объекты фреймворка Cordova для доступа к ресурсам мобильного устройства. Установка шаблона Cordova - проекта в Visual Studio. Структура папок шаблона. Создание и запуск проекта на эмуляторе Windows Phone и реальном устройстве. Архитектура одно- и многостраничных приложений.

Возможности 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. Эти плагины представлены в следующей таблице.

Таблица 3.1.
Плагин Описание
Geolocation Предоставляет функциональность, сходную с функциональностью W3C Geolocation API.
Accelerometer Предоставляет приемники событий для датчика ускорений.
Camera Обеспечивает доступ к камере.
Notification Обеспечивает доступ к звуку, эффектам вибрации и другим возможностям уведомления.
Contacts Позволяет вам управлять списком контактов из расписания пользователя.
File Обеспечивает чтение, запись и управление файлами в файловой системе.
SMS Позволяет вам отсылать SMS-сообщения.
Phone Позволяет вам выполнять телефонные звонки.
Maps Позволяет вам открывать карту.
Audio Позволяет вам записывать и воспроизводить аудиофайлы.
Settings Получает информацию об устройстве.
HTTP Выполняет GET-запрос по указанному URL-адресу.

Например, чтобы сделать фотографию, мы можем использовать плагин "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, и ваш пользователь не имеет ни малейшего представления, что это не родное приложение.

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 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);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Александр Бут-Гусаим
Александр Бут-Гусаим
Россия, Тула
Виктор Ефремов
Виктор Ефремов
Россия