Разработка приложения с использованием технологий PhoneGap, JavaScript, html и jQuery Mobile

Разработка приложения с использованием технологий PhoneGap,

М.И. Притчина,

студентка 5-го курса, специальность «Информационные системы и технологии»

Е.А. Зотова,

студентка 5-го курса, специальность «Информационные системы и технологии»

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

Для пользователя web-сервис предоставляет возможность доступа к информации с любого компьютера или мобильного устройства и отсутствие необходимости установки ПО на устройство.

На данный момент web-сервисы для мобильных устройств все же не могут обеспечить полноценную замену native-приложениям, так как не имеют возможности взаимодействовать с большей частью аппаратных возможностей устройств, таких как акселерометр, компас, работа с внутренней памятью устройства, с контактами, сохраненными на устройстве. Высокая цена на передаваемый интернет-траффик и неравномерность зоны покрытия мобильных сетей часто не позволяют полноценно пользоваться web-приложениями и сервисами с мобильных устройств. Поэтому все же большинство приложений и сервисов пользователи предпочитают видеть в виде нативных приложений, не требующих передачи больших объемов данных через интернет-соединение, и доступных в режиме оффлайн.

50

нии такой связки возможно сочетать достоинства web-приложений, таких как кроссплатформенность, простота написания кода, большое количество специалистов и справочной информации, и native-приложений: работа без подключения к сети, хранение данных на стороне клиента, доступ к аппаратной части устройства.

Для иллюстрации удобства работы с данными технологиями продемонстрирован процесс написания простейшего приложения -конвертера расстояний.

Первым шагом является создание нового проекта в среде разработки Eclipse для Android или Xcode для iOS (рис. 1).

IV"

и 1 target, Ю5 SDK 5,0 Ш commorLjs

Т ^ WWW

comments

config.xrnl ш -Z.O.Q.js

S] index.html w ^)jquery.mobile  ^ images

Q jquery-L.7_2.min

^sij jquery.mobile-L.2.G.min.css

il jquery.mobile-l,2.0,mir.js

Рис. 1. Исходные файлы проекта

Затем требуется написать HTML-код страниц приложения и поместить его в файл index.html, в проекте допускается использовать множество HTML-страниц, но начальная страница обязательно должна иметь имя index. При использовании фреймворка jQuery Mobile значительно уменьшается время написания кода за счет того, что jQuery Mobile автоматически выставляет размеры и позиции элементов в зависимости от размера экрана для улучшения внешнего вида приложения и повышения уровня комфорта работы с сенсорными экранами.

<!DOCTYPE HTML>

<html>

<head>

<title>KoHBepTep</title>

<meta name=»viewport» content=»initial-scale=1.0, user-scalable=no» charset=»utf-8»/>

51

2.0. 0.js»></script>

<link rel=»stylesheet» href=»jquery.mobile/jquery.mobile-

1.2.0. min.css» />

script>

</head>

Листинг 1. Подлючение библиотек

Внешний вид приложения и методы взаимодействия с пользователем определяются в HTML коде. В данном примере использованы: jQuery Mobile разметка страницы и расширенные методы работы с элементами форм на странице (листинг 2).

<body>

<div data-role=»page» id=»index-page»>

<div data-role=»header» data-position=»fixed»> <h6>KoHBepTep</h6>

</div>

<div data-role=»content»>

<label for=»input»>BBeflHTe число:</1аЬе1>

<input type=»number» name=»input» id=»input» value=»0» onchange=»convert()»>

<label for=»inpPow» dass=»seled»>eдиницыl ввода:</1аЬе1>

<select name=»inpPow» id=»inpPow» data-native-menu=»false» onchange=»convert()» data-theme=»b»>

<option value=»0»>килoмeтpыK/optюn>

<option value=»1»>MeTpu</option>

<option value=»2»>сантимeтpыK/optюn>

<option value=»3»>миллимeтpыK/optюn>

</select>

<label for=»outPov» dass=»seled»>eдиницыl вывода:</1аЬе1>

<select name=»outPov» id=»outPov» data-native-menu=»false» onchange=»convert()» data-theme=»e»>

<option value=»0»>килoмeтpыK/optюn>

<option value=»1»>мeтpы</option>

<option value=»2»>сантимeтpыK/optюn>

<option value=»3»>миллимeтpыK/optюn>

</select>

52

<h2><div id=»output»>0</div></h2>

</div>

<div data-role=»footer» data-position=»fixed»></div>

</div>

</body>

</html>

Листинг 2. HTML код страницы

Для выбора величин измерения используются стандартные тэги HTML <select>. jQuery Mobile придает им привлекательный вид, не зависящий от платформы устройства (рис. 2).

Рис. 2. Слева: приложение без использования jQuery Mobile, справа: приложение с использованием jQuery Mobile

Логика работы приложения вынесена в отдельный файл common.js. В нем считываются значения элементов формы и производятся вычисления для конвертации расстояний (листинг 3).

function convert(){

var input=0; var output=0; var inpPow=0; var outPov=0;

var temp=new Array([0,3,5,6],[-3,0,2,3],[-5-2,0,1],[-6-3-1,0]); input=document.getElementById("input").value; inpPow=document.getElementById("inpPow").value; outPov=document.getElementById("outPov").value;

53

output=input*Math.pow(10,temp[inpPow][outPov]);

document.getElementById("output").innerHTML=output;

}

Для вычисления сконвертированной величины используется вспомогательный массив temp, представляющий собой таблицу соотношения величин между собой в виде степеней числа 10 (табл. 1).

Таблица 1

единицы км м см мм

км 100 103 105 106

м 10-3 100 102 103

см 10-5 10-2 100 101

мм 10-6 10-3 101 100

Вспомогательная таблица для конвертации чисел

Для компиляции приложения можно использовать средства среды Eclipse и Xcode или воспользоваться онлайн сервисом Adobe PhoneGap build (https://build.phonegap.com). Компиляция в онлайн сервисе более проста и не требует установки или покупки специального ПО, но из-за автоматического добавления множества технических файлов скомпилированные приложения занимают больший объем памяти на устройстве, и медленнее выполняются.

Так же стоит отметить удобство портирования уже готового HTML кода. В качестве приложения может выступать почти любая готовая HTML5 страница (рис. 3).

Рис. 3. web-страница, портированная в приложение для iPhone5

54