V Международная студенческая научная конференция Студенческий научный форум - 2013

В связи с ростом числа мобильных устройств на рынке информационных технологий (ИТ) разработка мобильных приложений стала одной из самых популярных отраслей в 2012 году. До этого момента оборот уже составлял 30 миллиардов долларов. Вечная конкуренция различных мобильных операционных систем позволяет быстро развивать сами операционные системы.

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

В этой статье рассказывается, как создать мобильное приложение с клиент-серверной архитектурой, которое позволит отображать местоположения пользователя, а так же устанавливать метки на геолокационной карте сервиса OpenStreetMap и также просматривать их.

Так как разрабатываемое приложение имеет достаточно большой объем, то в статье будут приведены только самые необходимые части кода. Полностью код готового приложения можно посмотреть по адресу http://nauchilsya.ru/files/project.rar.

Статья рассчитана на web-программистов, которые хотят научиться разрабатывать приложения на основе web-технологий.

1. Описание технологий и подходов для разработки приложения

Платформа PhoneGap (Cardova) была выбрана для разработки приложения, т.к. должно быть реализовано кроссплатформенное приложения, которое может работать под управлением таких ОС как Android, iOS, Windows Phone и т.д.

Из-за некоторых отличий в функциональности ядра Internet explorer некоторые команды, написанные на Java Script, могут отличаться (например, обработчики touch событий).

Подробное описание платформы PhoneGap представлено в [1].

Язык разметки HTML. HTML (HyperText Markup Language) — язык гипертекстовой разметки документов. Назначение HTML в том, чтобы сделать документы пригодными для чтения с экрана монитора.

Необходимо построить разметку документа таким образом, чтобы она выглядела очень похожей в различных мобильных операционных системах и при различном разрешении экрана мобильного устройства.

CSS. CSS (Cascading Style Sheets — каскадные таблицы стилей) — технология оформления веб-страниц. Таблицы (точнее — списки) CSS служат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML.

Необходимо создать стили для различных мобильных устройств и операционных систем и выбирать и подключать нужные стили после определения информации о устройстве через Java Script.

Язык JavaScript. JavaScript — интерпретируемый язык программирования, являющийся одной из реализаций языка ECMAScript и основанный на концепции прототипов, пришедшей из языка Self. JScript – реализация стандарта ECMAScript от Microsoft, аналог JavaScript.

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

Необходимо описать ядро обработки полученных данных в приложении, а так же функции, которые являются уникальными для различных мобильных устройств. За счет того, что ядро будет работать без проблем на всех необходимых операционных системах, необходимо будет изменить только малую часть описанных функций [2].

Технология Ajax. AJAX (Asynchronous JavaScript and XML — «асинхронный JavaScript и XML») — это подход к построению интерактивных пользовательских интерфейсов web-приложений. При использовании AJAX web-страница не перезагружается полностью в ответ на каждое действие пользователя. Вместо этого с web-сервера догружаются только нужные пользователю данные. AJAX — это не самостоятельная технология, а идея.

AJAX базируется на двух основных принципах:

• использование DHTML для динамического изменения содержания страницы;

• использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью.

Сравнение стандартного подхода и AJAX приведено в таблице [3].

Классическая модель web-приложения	Модель AJAX
1) Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент. 2) Браузер формирует и отправляет запрос серверу. 3) В ответ сервер генерирует совершенно новую веб-страницу и отправляет её браузеру и т. д. После чего браузер полностью перегрузит динамическую страницу.	1) Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент. 2) Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы. 3) Браузер отправляет соответствующий запрос на сервер. 4) Сервер возвращает только ту часть документа, на которую пришел запрос. 5) Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы).

Формат данных JSON и JSONP. JSON (англ. JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. За счёт своей лаконичности по сравнению с XML, формат JSON может быть более подходящим для сериализации сложных структур. Если говорить о веб-приложениях, в таком ключе он уместен в задачах обмена данными как между браузером и сервером (AJAX), так и между самими серверами (программные HTTP-интерфейсы). Формат JSON также хорошо подходит для хранения сложных динамических структур в реляционных базах данных или файловом кэше.

Поскольку формат JSON является подмножеством синтаксиса языка JavaScript, то он может быть быстро десериализован встроенной функцией eval(). Кроме того, возможна вставка вполне работоспособных JavaScript-функций. В PHP, начиная с версии 5.2.0, поддержка JSON включена в ядро в виде функций json_decode() и json_encode(), которые сами преобразуют типы данных JSON в соответствующие типы PHP и наоборот [4].

Необходимо использовать формат данных JSONP (JSON Padding) или «JSON с подкладкой» c помощью которого мы сможем создавать кроссдоменные запросы и обмениваться данными с сервером и клиентом.

Язык PHP. PHP (PHP: Hypertext Preprocessor — «PHP: Препроцессор Гипертекста») — скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. В настоящее время поддерживается подавляющим большинством представителей хостинга.

PHP отличается наличием ядра и подключаемых модулей, «расширений»: для работы с базами данных, сокетами, динамической графикой, криптографическими библиотеками, документами формата PDF и т.п. Интерпретатор PHP подключается к веб-серверу либо через модуль, созданный специально для этого сервера (например, для Apache или IIS), либо в качестве CGI-приложения.

Необходимо разработать серверную часть, используя язык PHP, с помощью которого будет происходить обработка отправляемых с клиента данных и сохранение данных в БД My SQL, а так же их извлечения для передачи их с помощью JSONP запроса на клиентскую часть.

Язык запросов SQL. SQL — Структурированный Язык Запросов. Это язык, который дает Вам возможность создавать и работать в реляционных базах данных, являющихся наборами связанной информации, сохраняемой в таблицах.

Необходимо написать SQL запросы, которые позволят сформировать нужным образом все необходимые данные для клиентской части, а также сохранить все необходимые данные, которые приходят от клиента.

Библиотеки jQuery и jQuery mobile. Query — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

jQuery mobile — библиотека, которая является дополнением к jQuery, позволяющая писать веб-приложения для мобильных телефонов для разных платформ.

2. Архитектура распределенного приложения

Разрабатываемое приложение будет иметь клиент-серверную архитектуру (рис. 1), где в качестве клиента будет выступать мобильное устройство.

Предполагается следующая логика работы приложения: клиент обращается к хранилищу данных на сервере, отправляя данные для хранения в базе данных, а также запрашивая необходимые данные из нее. Клиент также получает изображения карты, используя сервис OpenStreetMap посредством управления с помощью библиотеки OpenLayers.js.

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

Вся логика работы с базой данных и обработка полученной информации для приведения ее к удобному для хранения и передачи виду описывается на сервере.

Рис. 1. Архитектура распределенного приложения

2.1. Клиентская часть приложения

Данная часть разрабатывается с использованием платформы PhoneGap и таких технологий как HTML, CSS, JavaScript. Для разработки функциональной части приложения понадобились следующие библиотеки, которые будут располагаться на стороне клиента:

1) cordova-2.2.0.js — библиотека, позволяющая взаимодействовать с нативными возможностями мобильного устройства;

2) OpenLayers.js — библиотека, позволяющая работать с картографическим сервисом Open Street Map (OSM);

3) jquery-1.7.1.min.js — библиотека, позволяющая работать с DOM структурой HTML-документа;

Файловая структура клиентской части приложения может быть представлена, как это показано на рис. 2.

Рис.2. Файловая структура

Файл index.html является главным файлом, в котором описывается вся логика приложения.

Директория css содержит стили оформления и изображения, которые используются в этих стилях.

В папке js хранятся файлы всех используемых скриптов.

В папке markers хранятся иконки маркеров, которые можно использовать в приложении.

Для взаимодействия клиента с сервером используется функция requestToServer, которая использует библиотеку jQuery:

function requestToServer(url, success, myObjects)

{

$.ajax({

type: "GET",

crossDomain: true,

contentType: "application/json; charset=utf-8",

dataType: 'jsonp',

jsonp: 'jsonp_callback',

url: url,

data: "arrObjects=" + JSON.stringify(myObjects),

success: function(data)

{

success(data);

},

error: function()

{

alert('Server connection error!!!');

}

});

}

Функция requestToServer передает данные, используя GET зарос и формат данных JSONP, который позволяет нам отправлять данные с определенной структурой с клиента на сервер, причем запрос может быть кроссдоменным (в нашем случае это очень важно, т.к. клиентская часть находится на мобильном устройстве). jsonp_callback указывает идентификатор переменной, которая будет возвращена сервером в ответ на любой запрос клиента.

Функция содержит 3 параметра:

1) url указывает на адрес, по которому будет передаваться информация;

2) success — функция, которая будет вызываться при успешном ответе сервера на запрос клиента;

3) myObjects — данные, которые необходимо передать по указанному url.

Если ответа от сервера продолжительное время нет или ответ имеет неверных формат, то вызывается часть error этой функции.

2.1.1. Дизайн мобильного приложения

Дизайн приложения было решено реализовать в Metro стиле, т.к. он быстр и прост в описании с помощью стилей оформления CSS. На рис. 2-4 можно увидеть дизайн приложения, которое было разработано.

Рис. 2. Общий вид приложения

Рис. 3. Добавление маркера

Рис. 4. Просмотр маркера

2.1.2. Функциональная часть

Разрабатывая мобильное приложение, можно выделить следующие функциональные блоки:

1) отображение карты;

2) отображение маркеров;

3) создание нового маркера;

4) нахождение местоположения пользователя.

Управление приложением будет производиться с помощью единого интерфейса.

Отображение карты

Для работы с картой нам первоначально необходимо подключить библиотеку OpenLayers.js. Она позволяет общаться с картографическим сервисом OpenStreetMap. Скачать последнюю версию можно по ссылке http://trac.osgeo.org/openlayers/wiki/HowToDownload.

Подключаем библиотеку следующим образом:

Для того, чтобы карта отобразилась, необходимо создать div элемент с иднетификатором, который будет соответствовать div элементу карты:

Теперь привяжем div элемент к карте:

var map;

map =new OpenLayers.Map({

div: "megamap",

layers: [new OpenLayers.Layer.OSM()],

controls: [

new OpenLayers.Control.Navigation({

dragPanOptions: {

enableKinetic: true

}

}),

new OpenLayers.Control.Zoom({

zoomInId: "customZoomIn",

zoomOutId: "customZoomOut"

})

]

});

С помощью строки layers: [new OpenLayers.Layer.OSM()] мы создаем слой с картой.

На карту также добавлены 2 элемента control:

1) OpenLayers.Control.Navigation позволяет адекватно работать на мобильных устройствах с сенсорным экраном;

2) OpenLayers.Control.Zoom позволяет добавить кнопки масштабирования, а атрибуты zoomInId и zoomOutId позволяют указать произвольные блоки, которые будут выполнять их функцию.

Отображение маркеров

Для того чтобы маркеры отображались на карте, необходимо добавить еще один слой. Было решено использовать векторный слой, так как он является более функциональным и является хорошей альтернативой OpenLayers.Layer.Markers. Главная особенность в том, что у события у векторного слоя отличаются от событий слоя Markers.

Для работы с векторным слоем создана переменная vectorLayer. С её помощью будут выполняться все операции с ним.

Далее необходимо описать действия при выделении и снятии выделения с маркера:

var selectControl;

selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,

{

onSelect: onPopupFeatureSelect,

onUnselect: onPopupFeatureUnselect

});

map.addControl(selectControl);

selectControl.activate();

function onPopupFeatureSelect(feature)

{

feature_active = feature;

if (feature.marker_id == undefined)

{

return;

}

else if (feature.marker_id != "my_position")

{

num_marker = feature.marker_id.slice(7);

}

else

{

alert("Это наше местоположение ");

return;

}

document.getElementById("title_marker").innerHTML = quest_object[num_marker]title;

document.getElementById("msg_marker").innerHTML = quest_object[num_marker].msg;

document.getElementById("marker_desc").style.display

}

function onPopupFeatureUnselect(feature)

{

close_description();

}

onPopupFeatureSelect — функция, которая выполняется при выполнении события выделения маркера.

onPopupFeatureUnselect — функция, которая выполняется при выполнении событии снятия выделения.

Для того, чтобы получить все маркеры, которые хранятся в БД на сервере, необходимо отправить запрос с помощью вышеописанной функции requestToServer. После этого, полученные данные необходимо нужным образом обработать. Пример листинга скрипта приведен ниже:

//Загрузкавсехмаркеров

function load_markers()

{

requestToServer(serverLink+"/server2/ajax.load_markers.php", load_ok, "");

}

//Функция размещения всех маркеров на карте, которые были получены

//с сервера

function load_ok(data)

{

quest_object = null;

quest_object = [];

vectorLayer.removeAllFeatures();

if (data.success)

{

for(var i=0; i

domian.com — доменное имя сервера, где храниться БД.

DBName — имя БД.

user — имя пользователя для доступа к БД.

password — пароль пользователя для доступа к БД.

С помощью строки SETNAMESutf8 устанавливаем кодировку, в которой будет происходить общение с БД.

Функция mysqlQuery является основной функцией, с помощью которой будет происходить обращение к БД и получение от нее ответа.

Сохранение маркера

Для того чтобы разрешить кроссдоменный запрос, необходимо прописать в заголовке Access-Control-Allow-Origin и название домена, от которого он приходит. Так как используется мобильное устройство, то значение домена отсутствует, поэтому вносим значение, полученное от самого клиента, т.е. header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']).

Для того чтобы указать, какие запросы разрешено выполнять, используется атрибут заголовка Access-Control-Allow-Methods.

Сервер может некоторое время выделить клиенту разрешение для выполнения запросов. Это можно сделать с помощью атрибута Access-Control-Max-Age и установить время в секундах.

Так как данные со стороны клиентской части передаются в формате JSONP, то прежде, чем их использовать, их необходимо декодировать. Для этого используется функция json_decode. Листинг скрипта приведен ниже:

 

Код для цитирования: Скопировать