Использование возможностей HTML5 и Apache Cordova для доступа к ресурсам мобильного устройства

Доступ к ресурсам мобильного устройства средствами HTML5 и фреймворка Apache Cordova

Современные мобильные устройства давно уже превратились в сложные электронные приборы. Раньше у мобильного телефона была одна основная функция - телефония, второстепенной функцией была возможность отправки и приема текстовых сообщений (SMS). Сейчас же сложно назвать, какая функция мобильного телефона является основной. Да и сами телефоны стали называться иначе - смартфонами. Большинство пользователей покупают смартфоны именно из-за функций, которые для обычного телефона являются необязательными - доступ к камере, микрофону, службам местоположения (компас, акселерометр, GPS-навигация), к датчикам света, температуры, давления и т. д.

Чтобы смартфон был конкурентоспособным, он должен предоставлять много разных возможностей, для управления которыми в клиентских приложениях разрабатываются программные средства. В приложениях Apache Cordova эти средства основаны на JavaScript API - функциях HTML5. Понятие API - application programming interface - подразумевает набор готовых классов, процедур, функций, структур и констант, предоставляемых приложением, библиотекой, сервисом для использования в других программах. Вот неполный список используемых JavaScript API: HTML5 Audio, HTML5 Video, Canvas, localStorage, DeviceStorage API, Contacts API, Geolocation API, Mobile Connection API, WebSMS, WiFi Information API, Camera API. Разработчик имеет два способа их применения. Первый заключается в непосредственном использовании свойств и методов объектов из соответствующих JavaScript API - функций. Второй, более углубленный для реализации программистом, - в использовании Cordova - плагинов посредством содержащихся в них готовых объектов camera, compass, storage, file, contacts, accelerometer и ряде других. Во втором случае разработчик получает доступ к разнообразному набору свойств и методов объекта каждого из плагинов. Начиная с версии cordova-3.0.0, соответствующие плагины входят в поставку отдельными zip-архивами, каждый из которых можно независимо от остальных добавить в проект по прилагаемым инструкциям. Описание методов и свойств объектов camera, storage, file, contacts, accelerometer, device, globalization и ряда других из плагинов Cordova API можно найти на веб-сайте Cordova [1]. Чтобы JavaScript-код плагинов выполнился на мобильном устройстве вне браузера (на backend), он должен быть правильно интерпретирован и, конечно же, выполнен. Этими возможностями обладает специальная программа Node.js [3], подключаемая к Cordova - проектам. Node.js использует для кода плагинов движок V8 VM от Google - ту же самую среду исполнения для JavaScript, которую использует браузер Google Chrome.

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

Настройка файла WMAppManifest.xml приложения

Рассмотрим настройку приложений, созданных в Visual Studio по шаблону Apache Cordova, которые будут содержать доступ к ресурсам мобильного устройства. Перед выполнением такого приложения, операционная система Windows Phone должна убедиться, что данный ресурс существует. Для описания необходимых ресурсов используется файл WMAppManifest.xml из папки свойств (Properties) проекта, который есть даже у самых простых приложений. Этому файлу соотвествует следующее окно редактора файла манифеста (вкладка "Возможности"):

увеличить изображение
Рис. 15.1.

Используемые в проекте ресурсы отмечаются в окне редактора манифеста. Список некоторых из представленных ресурсов:

• ID_CAP_ISV_CAMERA - предоставляет доступ к камере.
• ID_CAP_LOCATION - предоставляет доступ к службам местоположения.
• ID_CAP_MEDIALIB_AUDIO - предоставляет доступ к звуковым элементам и библиотеке мультимедиа. Позволяет добавлять и удалять песни.
• ID_CAP_MEDIALIB_PHOTO - предоставляет доступ (только для чтения) к фотографиям в библиотеке мультимедиа. Позволяет приложению сохранять фотографии в папках "Галерея камеры"и "Сохраненные фото".
• ID_CAP_MICROPHONE - предоставляет доступ к микрофону.
• ID_CAP_PHONEDIALER - предоставляет возможность совершения телефонных вызовов с визуальным уведомлением пользователя или без него.
• ID_CAP_WEBBROWSERCOMPONENT - предоставляет доступ к компоненту веб-браузера.
• ID_CAP_REMOVABLE_STORAGE - предоставляет доступ к хранилищу данных на внешнем компоненте, например, SD-карте.
• ID_CAP_NETWORKING - предоставляет доступ к сетевым службам. Эта возможность должна быть раскрыта, прежде чем приложение сможет пользоваться платным трафиком, когда устройство находится в роуминге.
• ID_CAP_CONTACT - предоставляет доступ к данным о контактах.

Далее приводятся примеры создания JavaScript-кода в проектах Cordova среды Visual Studio для управления некоторыми из многочисленных ресурсов мобильных устройств.

Управление плеером посредством JavaScript

Простое воспроизведение аудио и видео средствами HTML5 выполняется тегами <audio> или <video>, например <video src = "trailer.mp4" controls></video> или <audio src = "djazz.mp3" controls></audio>

Используя только HTML-разметку, это, пожалуй, все, что можно выжать из элементов <audio> и <video>. Но для обоих элементов существует обширная объектная модель JavaScript API, посредством которой можно управлять воспроизведением с помощью сценариев. Более того, используя этот подход, можно даже настроить некоторые детали, такие как, например, скорость воспроизведения или добавление звуковых эффектов в игру, что невозможно со стандартными аудио- и видеопроигрывателями. JavaScript API для аудио и видео содержит набор свойств и методов управления этими ресурсами. Примеры методов для доступа к мультимедиа:

• play() - начинает или возобновляет воспроизведение медиафайла;
• pause() - приостанавливает воспроизведение медиафайла;
• load() - загружает новый медиафайл, замещая старый.

Примеры свойств этого API:

• volume - задает значение громкости от 0.0 до 1.0 (максимальная громкость);
• duration - продолжительность проигрывания в секундах;
• playbackRate - текущая скорость воспроизведения файла;
• currentTime - текущая позиция воспроизведения медиафайла в секундах.

Пример обращения к методам и свойствам этого API в JavaScript - коде, находящемся в файле "js/my_API.js":

function Player_Manager(cmd) {
    var player = document.getElementById("player");
    //document.getElementById("pp").innerHTML = "END 1";
    if (cmd == 'play') player.play();
    if (cmd == 'pause') player.pause();
    if (cmd == 'plus') player.volume+= 0.1;
    if (cmd == 'minus') player.volume-= 0.1;
};

Подключение файла в Cordova-проекте:

<script type="text/javascript" src="js/my_API.js"></script>

Теги для изображения плеера и управляющих клавиш:

<audio controls ="controls" preload = "none" id ="player">
                <source src ="midnight-ride.mp3" type ="audio/mp3" />
                <a href ="midnight-ride.mp3">Download</a>
            </audio>
            Управляем плеером
            <br>
              <input type ="button" id ="btn_play" value="/Включ/" onclick = "Player_Manager('play');" />
             <input type ="button" id ="btn_pause" value="/Выкл /" onclick = "Player_Manager('pause');" /><br>
             <input type ="button" id ="btn_plus"  value="/Гром /" onclick = "Player_Manager('plus');" />
             <input type ="button" id ="btn_minus" value="/Тише /" onclick = "Player_Manager('minus');" />

Результат обращения к программе в эмуляторе мобильного устройства (кнопками регулируются включение, выключение и громкость):

увеличить изображение
Рис. 15.2.