Хотите узнать, как написать полноценное мобильное приложение, используя PhoneGap, но не знаете, с чего начать? Следуйте этому учебному пособию, состоящему из двух частей, и я покажу вам, как создать мобильное приложение, которое будет отслеживать, записывать и отображать маршрут вашего упражнения с помощью функций GPS на вашем телефоне!
Обзор проекта
Этот раздел представляет собой общий обзор ExerciseTracker, приложения, которое мы будем создавать.
Домашняя страница проверяет, что телефон имеет активное сетевое соединение (нам нужно это загрузить
Google Maps для прокладки маршрута учений). Он также имеет две кнопки, которые полезны для тестирования приложения, но при желании их можно легко удалить позже.
Страница «Отслеживание тренировки» имеет одно поле для ввода текста, чтобы пользователь мог ввести имя или идентификатор для своей тренировки. Когда они нажмут «Начать отслеживание», телефон начнет записывать свое местоположение GPS. Когда они нажимают «Остановить отслеживание», данные GPS сохраняются на телефоне.
На странице истории перечислены все отслеженные тренировки, которые пользователь выполнил.
На странице «Информация о треке» представлена информация о тренировках. Он отображает общее пройденное расстояние в километрах и общее время, затраченное на тренировку, а затем отображает маршрут, пройденный пользователем на карте Google.
Внедренные технологии
Наше приложение ExerciseTracker будет работать на мобильной платформе PhoneGap . PhoneGap позволяет нам легко создавать мобильные приложения, используя знакомые веб-технологии, такие как HTML 5, CSS и JavaScript, а затем без проблем развертывать их как собственные приложения на платформах, таких как iOS, Android и Windows Phone.
Приложение для отслеживания тренировок, которое мы будем создавать, использует следующие технологии:
- PhoneGap Location API
- jQueryMobile
- Google Maps JavaScript API
- HTML5 и локальное хранилище
Из этой серии руководств, состоящей из двух частей, вы узнаете, как использовать вышеизложенное для создания полноценного приложения PhoneGap.
Начало разработки
Настройка PhoneGap
Первое, что нам нужно сделать, это настроить среду разработки PhoneGap. PhoneGap предоставляет отличную стартовую страницу, которая поможет вам настроить среду разработки PhoneGap для каждой из различных мобильных платформ. Выберите платформу, для которой вы хотите разработать, и следуйте инструкциям по настройке базового приложения PhoneGap. В этом руководстве я буду заниматься настройкой Android (Android 4.0.3 API v15), однако код этого руководства должен работать на всех платформах.
Теперь у вас должен быть минимальный файл index.html, который вы можете просмотреть на эмуляторе вашего устройства.
Зависимости и скрипты
Давайте начнем разработку нашего приложения с загрузки и включения всех необходимых файлов JavaScript и CSS.
- JQuery-1.7.2.min.js
- jquery.mobile-1.1.0.zip
- jquery.mobile.1.1.0.min.css
- jquery.mobile-1.1.0.min.js
- картинки/
- json2.js
- exercisetracker.js (создайте это, наш JS пойдет сюда)
Загрузите и скопируйте каждый из этих файлов в тот же каталог, что и файлы index.html и cordova-1.7.0.js .
На этом этапе структура каталогов моего Android-приложения выглядит следующим образом:
Ваша структура каталогов должна выглядеть следующим образом.
Ключ API Карт Google
Чтобы наше приложение могло использовать Карты Google, у нас должен быть ключ API. Ключи API бесплатны для получения и поддержки до 25 000 запросов в день. Следуйте инструкциям, которые Google предоставляет для регистрации вашего ключа API. Запишите это, поскольку нам это понадобится на следующем шаге!
Скелет index.html
Давайте напишем первую версию index.html . Это будет включать все зависимости JavaScript и CSS, которые будут иметь ExerciseTracker.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE HTML>
<html>
<head>
<title>ExerciseTracker</title>
<script type=»text/javascript» src=»cordova-1.7.0.js»></script>
<script type=»text/javascript» src=»http://maps.googleapis.com/maps/api/js?key=AIzaSyDD353fOPh-KBUQ-2ekPCg75uxXRn0D9Tk&sensor=false»></script>
<script type=»text/javascript» src=»json2.js»></script>
<script type=»text/javascript» src=»jquery-1.7.2.min.js»></script>
<script type=»text/javascript» src=»jquery.mobile-1.1.0.min.js»></script>
<script type=»text/javascript» src=»exercisetracker.js»></script>
<link rel=»stylesheet» href=»jquery.mobile-1.1.0.min.css» />
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
|
Обязательно замените YOUR_API_KEY_HERE своим реальным ключом API Карт Google.
Вы должны иметь возможность запустить это в своем эмуляторе и не получать ошибок.
Создание домашней страницы
Теперь давайте создадим домашнюю страницу. jQueryMobile позволяет нам определять наш пользовательский интерфейс, используя стандартные теги HTML. Страницы в нашем приложении являются элементами <div> , кнопки — элементами <button> или <a> а списки состоят из элементов <ul> и <li> . Мы описываем семантическую информацию о каждом из этих элементов, определяя атрибуты данных. Например, атрибут data-role сообщает jQueryMobile о роли HTML-элемента, а атрибут data-icon указывает, какой значок будет отображаться внутри элемента. Ниже вы можете увидеть, как домашняя страница состоит из элементов HTML с атрибутами data-role .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div data-role=»page» id=»home»>
<div data-role=»header»>
<h1>Home</h1>
<div data-role=»navbar»>
<ul>
<li><a href=»#home» data-transition=»none» data-icon=»home»>Home</a></li>
<li><a href=»#startTracking» data-transition=»none» data-icon=»plus»>Track Workout</a></li>
<li><a href=»#history» data-transition=»none» data-icon=»star»>History</a></li>
</ul>
</div>
</div>
<div data-role=»content»>
<p>Welcome to the <em>ExerciseTracker</em> app.
<button id=»home_network_button» data-icon=»check»>Internet Access Enabled</button>
<button id=»home_clearstorage_button»>Clear local storage</button>
<button id=»home_seedgps_button»>Load Seed GPS Data</button>
</div>
</div>
|
jQueryMobile анализирует и интерпретирует значения различных атрибутов data-role , data-transition и data-icon и автоматически применяет к ним соответствующее форматирование CSS.
Проверка доступа к сети
Теперь нам нужно проверить, есть ли у пользователя доступ к Интернету. Если этого не произойдет, карта Google не будет загружаться, и приложение будет повреждено.
Мы начинаем с прослушивания события deviceready которое запускается после завершения загрузки PhoneGap. Затем мы используем API-интерфейс PhoneGap Connection, чтобы узнать, есть ли у нас доступ к Интернету. Если у нас нет доступа в Интернет, нам нужно обновить кнопку на домашней странице. Мы обновляем текст, устанавливаем новый значок и вызываем метод button('refresh') , что заставляет jQuery Mobile перерисовать кнопку.
|
1
2
3
4
5
6
7
8
9
|
document.addEventListener(«deviceready», function(){
if(navigator.network.connection.type == Connection.NONE){
$(«#home_network_button»).text(‘No Internet Access’)
.attr(«data-icon», «delete»)
.button(‘refresh’);
}
});
|
Создание страницы тренировки трека
Страница тренировки трека
Закончив домашнюю страницу, мы можем приступить к созданию страницы Track Workout. HTML / CSS-код для обеих страниц одинаков, однако в разделе data-role="content" страницы Track Workout мы определяем текстовое поле (чтобы пользователь мог ввести имя для своей тренировки), а также две кнопки которые начинают и останавливают тренировку.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<div data-role=»page» id=»startTracking»>
<div data-role=»header»>
<h1>Track Workout</h1>
<div data-role=»navbar»>
<ul>
<li><a href=»#home» data-transition=»none» data-icon=»home»>Home</a></li>
<li><a href=»#startTracking» data-transition=»none» data-icon=»plus»>Track Workout</a></li>
<li><a href=»#history» data-transition=»none» data-icon=»star»>History</a></li>
</ul>
</div>
</div>
<div data-role=»content»>
<p id=»startTracking_status»></p>
<div data-role=»fieldcontain» class=»ui-hide-label»>
<label for=»track_id»>Track ID/Name:</label>
<input type=»text» name=»track_id» id=»track_id» placeholder=»Workout ID/Name»/>
</div>
<button data-role=»button» id=»startTracking_start»>Start Tracking</button>
<button data-role=»button» id=»startTracking_stop»>Stop Tracking</button>
<p id=»startTracking_debug»></p>
</div>
</div>
|
Отслеживание движений пользователя
Мы можем отслеживать местоположение пользователя, используя PhoneGap Geolocation API . Он предоставляет две основные функции: getCurrentPosition() и watchPosition() . Функция getCurrentPosition() будет использоваться, когда вы хотите получить одноразовое исправление для местоположения пользователя (например, сохранение местоположения пользователя, когда он делает фотографию). Для этого наше приложение будет использовать watchPosition() , которое регулярно опрашивает функцию GPS телефона и получает постоянные обновления о местоположении пользователя.
watchPosition() принимает три аргумента. Первая — это функция, которая вызывается каждый раз, когда телефон успешно возвращает местоположение GPS, вторая — это функция, которая вызывается при возникновении ошибки GPS, а третья — объект настроек .
Каждый раз, когда вызывается функция success, передается объект Position . Он содержит информацию о GPS-местоположении пользователя, например его широту, долготу и высоту. Всякий раз, когда в ExerciseTracker вызывается функция success, мы добавляем последний объект Position в массив tracking_data .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
var track_id = »;
var watch_id = null;
var tracking_data = [];
$(«#startTracking_start»).live(‘click’, function(){
// Start tracking the User
watch_id = navigator.geolocation.watchPosition(
// Success
function(position){
tracking_data.push(position);
},
// Error
function(error){
console.log(error);
},
// Settings
{ frequency: 3000, enableHighAccuracy: true });
// Tidy up the UI
track_id = $(«#track_id»).val();
$(«#track_id»).hide();
$(«#startTracking_status»).html(«Tracking workout: <strong>» + track_id + «</strong>»);
});
|
Вывод
В этом руководстве мы рассмотрели обзор приложения ExerciseTracker, создали домашнюю страницу и приступили к работе на странице Track Workout. В следующем уроке мы завершим страницу «Отслеживание тренировок» и завершим приложение ExerciseTracker, позволив пользователю просматривать сохраненные тренировки, нанесенные на карту Google.