CC BY
58
Разработка приложения с использованием технологий PhoneGap,
JavaScript, HTML и jQuery Mobile
М.И. Притчина,
студентка 5-го курса, специальность «Информационные системы и технологии»
Е.А. Зотова,
студентка 5-го курса, специальность «Информационные системы и технологии»
В настоящее время все больше разработчиков и пользователей отказываются от native-приложений в пользу web-сервисов. Такое решение удобно для разработчиков, так как web-приложения являются кроссплатформенными, а, следовательно, не требуют длительного и дорогостоящего портирования приложения под различные платформы.
Для пользователя web-сервис предоставляет возможность доступа к информации с любого компьютера или мобильного устройства и отсутствие необходимости установки ПО на устройство.
На данный момент web-сервисы для мобильных устройств все же не могут обеспечить полноценную замену native-приложениям, так как не имеют возможности взаимодействовать с большей частью аппаратных возможностей устройств, таких как акселерометр, компас, работа с внутренней памятью устройства, с контактами, сохраненными на устройстве. Высокая цена на передаваемый интернет-траффик и неравномерность зоны покрытия мобильных сетей часто не позволяют полноценно пользоваться web-приложениями и сервисами с мобильных устройств. Поэтому все же большинство приложений и сервисов пользователи предпочитают видеть в виде нативных приложений, не требующих передачи больших объемов данных через интернет-соединение, и доступных в режиме оффлайн.
В качестве возможного решения может выступить связка технологий PhoneGap, JavaScript, HTML и jQuery Mobile. При использова-
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 автоматически выставляет размеры и позиции элементов в зависимости от размера экрана для улучшения внешнего вида приложения и повышения уровня комфорта работы с сенсорными экранами.
Для работы приложения требуется подключить следующие файлы: библиотека PhoneGap, css-файл для оптимизации внешнего вида приложения, файл для реализации функционала ядра jQuery, файл jQuery Mobile для оптимизации работы JavaScript на мобильных устройствах (листинг 1).
<!DOCTYPE HTML>
<html>
<head>
<title>KoHBepTep</title>
<meta name=»viewport» content=»initial-scale=1.0, user-scalable=no» charset=»utf-8»/>
51
<script type=»text/javascript» charset=»utf-8» src=»cordova-
2.0. 0.js»></script>
<link rel=»stylesheet» href=»jquery.mobile/jquery.mobile-
1.2.0. min.css» />
<script type=»text/javascript» charset=»utf-8» src= «jquery.mobile/ jquery-1.7.2.min»></script>
<script type=»text/javascript» charset=»utf-8» src=»jquery.mobNe/ jquery.mobile-1.2.0.min.js»></script>
<script type=»text/javascript» charset=»utf-8» src=»common.js»></
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;
}
Листинг 3. JavaScript код приложения
Для вычисления сконвертированной величины используется вспомогательный массив 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
