Додавання на сайти можливості визначення місцезнаходження користувача за допомогою HTML5 Geolocation

() translation by (you can also view the original English article)

При роботі з досвідом користувача може бути ризикованим покладатися на припущення, проте деякі з них можуть дозволити вам надати вашим користувачам більш індивідуалізований досвід користування. Ми розглянемо, як покращити досвід взаємодії користувача завдяки додаванню на ваші веб-сайти можливості визначення його місцезнаходження.

Досвід користування зайняв одне з головних місць в області веб-дизайну в останні десять років. Нас як користувачів постійно просять надати оновлену інформацію про себе. Всі: від Твіттера, запитуючого «Що відбувається», до Фейсбука, який цікавиться, що нам «подобається». Все це дозволяє цим компаніям, окрім решти, скласти ваш доволі докладний та точний профіль, завдяки чому вони можуть надати вам більш персоналізований досвід користувача.

Приблизно у той же час, коли було об'явлено про вихід HTML5, інший API було представлено нам W3C. Я цілком впевнений, що ви, напевно, чули про нього - API Geolocation. Завдяки ньому на вашому сайті з'являється можливість отримувати інформацію про географічне місцезнаходження за допомогою JavaScript.

Як працює геолокація?

Дані про місцезнаходження можуть бути отримані за допомогою безлічі різних джерел. Звичайно на веб-сайтах вони визначалися би виходячи з ІР-адреса користувача. Далі на його основі за допомогою сервісу WHOIS (* скор. від who is who; мережна інтернет-програма, що дозволяє абонентам звертатися із запитами до зберіганої у DDN NIC бази даних про користувачів мережі, домени, доступні мережі та інші об'єкти. Тут і надалі примітка перекладача) було би отримано адресу фізичного місцезнаходження користувача завдяки інформації whois (* адреса, адреса електронної пошти, номер телефону, контакти тощо). Проте нещодавно став загальноприйнятим популярніший та точніший спосіб отримання цієї інформації – завдяки використанню вбудованого GPS-чипа (* GPS – супутникова система позиціювання, яка дає змогу за допомогою спеціального приймача здійснити швидке автоматичне визначення координат у будь-якій точці світу (точність коливається від 10 до 100 м) і швидкості переміщення різноманітних об'єктів на поверхні Землі й у повітряному просторі. Складається з 24 супутників, які належать уряду США). Такі чипи наявні у більшості смартфонів та планшетів і є причиною росту популярності сервісів з можливістю визначення місцезнаходження користувача, яким ми могли би скористатися. Пригадайте Foursquare (* мобільний додаток, що надає інформацію про місця, розташовані недалеко від поточного місцезнаходження користувачів та рекомендовані їм для відвідування на основі раніше отриманої інформації) або будь-який інший додаток, за допомогою якого ви могли би відмітитися у різних закладах.

Захист персональної інформації користувачів сайту

У специфікації API Geolocation, випущеній W3C, вказано:

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

Перед тим як пристрій або браузер зможуть отримати дані про місцезнаходження користувача, він повинен для початку дати на це дозвіл. Нижче показано, як це виглядає у Google Chrome:

Зараз, як ніколи, користувачі звертають увагу на те, яку інформацію веб-сайти зберігають про них, і ваші користувачі повинні будуть точно знати, для чого ви використовуєте їх дані. Проінформуйте їх про те, для чого вам потрібна ця інформація, та підкресліть, як це допоможе створити для них кращий досвід взаємодії у мережі.

При використанні веб-сайту або додатка з можливістю відмітити себе на карті згідно з усталеною практикою варто контролювати кількість інформації, якою ви ділитися з іншими людьми. Більшість додатів та сервісів, що надають можливість поділитися своїм місцезнаходженням, дійсно надають якусь можливість контролю над персональною інформацією, так що обов'язково користуйтеся цим та ніколи не діліться вашою домашньою адресою.

Варіанти використання можливості визначення географічного місцезнаходження Інтернет-користувача

Після додання на ваш сайт можливості визначення місцезнаходження ви отримуєте можливість надати точніший та відповідніший контент вашим користувачам. Давайте подивимося, де може стати у пригоді інформація про географічне місцезнаходження користувача.

Геомаркетинг

Геомаркетинг – відносно новий термін, визначення якого може бути сформульовано наступним чином:

Використання географічних даних у різних аспектах маркетингу, включаючи продаж та поширення товарів.

Хоча це й новий термін, фактичний принцип геомаркетингу вже був популярний якийсь час. На Фейсбуці цей підхід вже використовується упродовж деякого часу. Фейсбук зібрав би за допомогою нього дані, пов'язані з місцезнаходженням користувача, а потім показав би рекламу, що відповідає знайденому географічному регіону. Google та інші пошукові системи також скористалися цим принципом та додають для користувачів до списку результатів пошуку результати, пов'язані з місцезнаходженням.

Краудсорсинг

(* краудсорсинг – залучення робітників-добровольців, часто некваліфікованих Інтернет-користувачів, наприклад для наповнення сайту тим чи іншим контентом). Не тільки маркетологи можуть скористатися сервісами з можливістю визначення місцезнаходження, але й представники творчої діяльності також вигадали від їх використання (напевно, навіть не підозрюючи про це). Люди скористалися ними для отримання доступу до великої аудиторії людей, всі члени якої розташовуються на той самій території та об'єднані однієї ціллю «щось зробити». Це можуть бути як флеш-моби (* коротка масова акція, що, зазвичай, не має певної мети та організована за допомогою інтернету або мобільного зв'язку), так і великомасштабні танцювальні номери, так і створення груп активістів для людей зі спільними інтересами.

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

Пропонування

Нещодавно стала з'являтися всюди велика кількість «сайтів із пропонуваннями». Одним з найяскравіших їх представників є Groupon (* найбільший у світі сайт колективних покупок), запущений у листопаді 2008 року. Groupon надає своїм користувачам сервіси швидкого продажу (* від англ. deal-of-the-day ( daily deal, або flash sales, або one deal a day); щоденна угода) і кожного дня на сайті пропонується заздалегідь встановлена кількість знижок для кожного пропонування. Потрібно, щоб для кожного пропонування набралося достатньо зацікавлених осіб; у цьому випадку вони отримують його, але тільки якщо досягається визначена кількість людей.

Завдяки цьому підходу для продавців знижується ризик та з'являється можливість продавати оптом, що робить його безпрограшним варіантом. Секрет Groupon полягає у його тісній інтеграції з місцезнаходженням користувачів. Завдяки наданню своїм користувачам локальних пропонувань та угод він став одним з найпопулярніших купонних сайті та його формат було повторено багато разів.

Практичні приклади

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

The Rocky Horror Show

Цей веб-сайт дозволяє вам дізнатися час показу шоу у близько розташованих до вас місцях. Просто перейдіть на сайт та натисніть "Find my location".

Проект Places Flickr

За допомогою тієї самої технології Flickr показує, що було завантажено іншими користувачами на веб-сайт з місць, розташованих рядом з вами.

Mapumental

Mapumanetal з'явився приблизно у 2006 році, коли Міністерство транспорту Сполученого Королівства (Великої Британії та Північної Ірландії) зв'язалося зі стартапом для розроблення сервісу, що використовує наявну у нього інформацію щодо громадського транспорту. Вони описали те, чим займаються у Mapumental, як «Ми створюємо карти, які допомагають людям приймати кращі рішення та швидше». Цей сайт пропонує безліч інструментів та сервісів, які надають способи візуалізації даних про поїздки в режимі реального часу.

Реалізація можливості визначення місцезнаходження користувача

Якщо ви раніше не реалізовували можливість визначення місцезнаходження на жодному веб-сайті або додатку, то хороша новина полягає у тому, що це надзвичайно просто. У цьому посібнику я покажу вам, як ми можете отримати дані про місцезнаходження користувача на вашому веб-сайті або у вашому веб-застосуванні.

HTML-розмітка

Я створив її таким чином, щоб ви могли доволі просто додати її на ваш веб-сайт. Ціль полягає в тому, щоб у користувача була можливість натиснути кнопку, за допомогою чого будуть отримані та відображені на сайті дані про його місцезнаходження завдяки невеликій допомозі з боку API Google Maps.

Ми починаємо з елемента-обгортки для вирівнювання нашого дизайну по центру. Я задав для нього в якості значення ширини 960px, проте ви можете встановити будь-який потрібний для вашого дизайну розмір. В обгортці я додав div, що є місцем, де буде розташовуватися карта одразу після створення. Я задав для нього в якості ID 'map'.

У div з ID 'map' я потім помістив елемент span, для якого додав клас під назвою 'helper'. Він буде виступати у ролі невеликої підказки, що інформує користувачів про те, що їм потрібно виконати. Може здатися, що це зайве, проте згідно з усталеною практикою завжди слід по можливості допомагати користувачам.

Далі йде зображення попереднього завантажувача, для якого я додав ID 'preloader'. Якщо ви підшукуєте попередні завантажувачі, то ви можете відвідати preloaders.net.

Нижче показано, що у вас повинно бути наразі:


<div class="wrapper">

<div id="map">
  <span class="helper">Click the button below to show your location on the map</span>
	<img id="preloader" src="images/257.gif">
</div>

</div><!--End Wrapper-->

Після div з ID 'map' я додав простий якірний елемент, що буде виступати в якості кнопки, яку зможе натиснути користувач. В якості класу для нього задано (так, вірно) 'button'.

Одразу після натиснення кнопки нам не тільки потрібно, щоб було відображено карту, але також могло би бути корисним відобразити місцезнаходження користувача, географічну довжину та широту. Для цього я створив div з ID 'results', що у свою чергу містить три рядкові елементи, кожний з яких має відповідний клас. На цьому все з розміткою. Нижче показано, як повинен виглядати весь код розмітки:


<div class="wrapper">

	<div id="map">
		<span class="helper">Click the button below to show your location on the map</span>
		<img id="preloader" src="images/257.gif">
	</div>

	<a class="button" href="" title="">Find My Location</a>

	<div id="results">
		<span class="longitude"></span><br>
		<span class="lattitude"></span><br>
		<span class="location"></span>
	</div>
	
</div><!--End Wrapper-->

Код CSS

У CSS-коді все доволі зрозуміло. Він представлений повністю нижче:

@charset "utf-8";
html{
	background:#222222;
	font-family:helvetica, arial, sans-serif;
}
.wrapper{
	width:960px;
	margin: 0 auto;
	position:relative;
}
#map{
	position:relative;
	text-align: center;
	color: #363535;
	text-transform: uppercase;
	width: 425px;
	height: 350px;
	margin:0 auto;
	margin-top:20px;
	padding: 5px;
	border: 1px solid black;
	background: #474747;
	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .3);
}
#map .helper{
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: rgb(54, 54, 54);
	width: 180px;
	line-height: 135%;
	margin: 0 auto;
	margin-top: 140px;
}
#map #preloader{
	position: absolute;
	top: 141px;
	left: 190px;
	display:none;
}
#map iframe{
	border:1px solid black;
}
.button{
	padding:13px 40px;
	background-color:#00caa7;
	color:#00caa7;
	border-radius:3px;
	color:white;
	display:block;
	text-decoration:none;
	box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3);
	width:122px;
	margin:0 auto;
	margin-top:20px;
}
.button:hover{
	background-color:#00b495
}
#results{
	color: rgb(0, 180, 149);
	position: absolute;
	margin-top: 20px;
	text-align: center;
	line-height: 23px;
	width: 100%;
}

Слід звернути увагу на те, що попередній завантажувач – єдиний елемент div, для якого встановлено абсолютне позиціонування. Абсолютне позиціонування відносно до div з ID 'map'. Для цього потрібно всього-на-всього впевнитися, що у div з ID 'map' в якості значення position задано relative. Завдяки цьому буде можливим задати для попереднього завантажувача позиціонування відносно його батьківського елемента, а не цілого документа.

jQuery

Google надає набір API для своїх сервісів для роботи з картами, користуватися якими можна безкоштовно, поки не будуть досягнуті певні обмеження використання. Після цього буде стягатися плата.

На щастя, обидва сервіси, які ми будемо використовувати, повністю безкоштовні; у дійсності при використанні одного з прийомів зовсім не використовується API, а використовується звичайний iframe (* є дочірнім контекстом для браузера, завдяки якому до поточної сторінки вбудовується інша сторінка HTML) для вбудування карти, в якому ми змінемо деякі значення на ті, що отримуємо із браузера користувача.

Для початку давайте визначимо в якихось тегах <script> або в окремому JavaScript-файлі деякі змінні для HTML-елементів, які будемо використовувати у коді jQuery.

var button = jQuery('.button');
var preloader = jQuery('#preloader');
var longitudediv = jQuery('.longitude');
var lattitudediv = jQuery('.lattitude');
var locationdiv = jQuery('.location');

Після цього нам потрібно перевірити, що браузер підтримує API Geolocation. Ми можемо це зробити за допомогою наступного виразу 'if':

if (navigator.geolocation) {  	
	// Browser supports it, we're good to go!	  
	} else {  	
	alert('Sorry your browser doesn\'t support the Geolocation API');	 
	}

Після того як ми впевнилися, що браузер підтримує вищезазначену технологію, ми потім будемо відстежувати натиснення кнопки у частині з коментарем 'Browser supports it, we're good to go'.

Обробник події click для кнопки повинен виглядати наступним чином:

button.click(function(e) {
	e.preventDefault();
	preloader.show();
	navigator.geolocation.getCurrentPosition(exportPosition, errorPosition);
});

Після натиснення кнопки за допомогою обробника буде показано попередній завантажувач. Тут важливо звернути на рядки з другого по останній, що містить 'navigator'. За допомогою нього браузеру по суті повідомляється приблизно наступне: «отримай дані про положення користувачів, і якщо цю операцію було виконано вдало, то відправ дані про місцезнаходження до функції 'exportPosition', інакше передай помилку до функції 'errorPosition'».

Давайте перейдемо до написання доку та створимо ці функції: У функції для оброблення помилки все доволі зрозуміло:

1	function errorPosition() {
2	alert('Sorry couldn\'t find your location');
3	pretext.show();
4	}

Ви бачите у функції вище, що за допомогою неї буде виведено повідомлення про помилку, а потім знову показано попередній завантажувач.

У функції, що запускається при вдалому виконання операції, нижче під назвою 'exportPosition' ми отримуємо дані про широту (* latitude) та довготу (* longitude), надані API Geolocation, та встановлюємо їх в якості значень змінних під тими ж іменами.

Після їх отримання ми потім можемо ними скористатися у коді з Google Maps, вбудованому в iframe. Також ми можемо використовувати їх у рядкових елементах, за допомогою яких користувачеві відображуються дані про довготу та широту. Нижче показано, як все це виглядає:

	function exportPosition(position) {

		// Get the geolocation properties and set them as variables
		latitude = position.coords.latitude;
		longitude  = position.coords.longitude;

		// Insert the google maps iframe and change the location using the variables returned from the API
		jQuery('#map').html('<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&amp;ll='+latitude+','+longitude+'&amp;spn=0.332359,0.617294&amp;t=m&amp;z=11&amp;output=embed"></iframe>');
		longitudediv.html('Longitude: '+longitude);
		lattitudediv.html('Latitude: '+latitude);
		
	}

Важливою частиною тут є URL iframe. У ньому я додав змінні '+latitude+' и '+longitude+'. Ближче це виглядає наступним чином:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&amp;ll='+latitude+','+longitude+'&amp;spn=0.332359,0.617294&amp;t=m&amp;z=11&amp;output=embed"></iframe>

Завдяки цьому у div з ID '#map' буде додано карту, а також буде виведено користувачеві дані про широту та довготу. Також є це дещо, що нам хотілося би знати; це назва місцезнаходження користувача. Для цього нам потрібно виконати запит API Google Maps за допомогою AJAX. Ми додаємо наступну функцію AJAX у функції 'exportPosition'. Вона виглядає наступним чином:

//Make a call to the Google maps api to get the name of the location
	jQuery.ajax({
	  url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=true',
	  type: 'POST',
	  dataType: 'json',
	  success: function(data) {
	  	//If Successful add the data to the 'location' div
	 locationdiv.html('Location: '+data.results[0].address_components[2].long_name);
	  },
	  error: function(xhr, textStatus, errorThrown) {
	  		 errorPosition();
	  }
	});

У функції, що запускається при вдалому виконання операції, ми отримуємо назву місцезнаходження, дані про яке було повернено AJA-викликом, і додаємо її до span з класом '.location'. Якщо чомусь при цьому виклику відбулася помилка, то буде викликано функцію 'errorPosition' та виведено користувачеві повідомлення про те, що його місцезнаходження не може бути визначено.

API Geolocation працює в усіх сучасних браузерах. Проте у деяких версіях Safari для отримання даних про місцезнаходження використовується CoreLocation, і це означає, що ви повинні бути підключені до мережі за допомогою WIFI. Якщо ви підключені через Ethernet або щось на зразок цього, то у вас можуть виникнути проблеми при зборі даних про місцезнаходження.

Також варто зазначити, що для вдалої роботи файли цього посібника повинні бути завантажені на робочий веб-сервер і не будуть працювати на локальному сервері.

Завершення

Сподіваюся, що тепер ви краще розумієте API Geolocation, як він працює та як ви можете скористатися ним без особливих зусиль. При творчому та ефективному підході до використання можливості визначення місцезнаходження у вас тепер повинна бути можливість надати вашим користувачам кращий досвід взаємодії.

Чи скористалися ви API Geolocation на якихось сайтах, над якими працювали, для створення кращого досвіду користувача? Чи бачили ви, як їм творчо та вміло скористалися? Дайте нам знати про це нижче у розділі для додання коментарів.