Membuat Websites Location Aware dengan HTML5 Geolocation

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Asumsi dapat menjadi bisnis yang berisiko di dunia UX, tetapi beberapa asumsi dapat memungkinkan Anda untuk memberikan pengalaman pengguna yang lebih khusus kepada pengunjung Anda. Kami akan melihat peningkatan pengalaman pengguna dengan location aware situs web Anda.

User experience telah bermunculan maju menjadi yang terdepan dalam desain web dalam sepuluh tahun terakhir atau lebih. Sebagai pengguna, kami terus-menerus diminta untuk memberikan informasi terbaru tentang kita sendiri. Apa pun dari Twitter yang bertanya kepada kami, 'Apa yang terjadi?' ke Facebook menanyakan apa yang kami 'sukai'. Semua ini memungkinkan perusahaan-perusahaan ini, antara lain, untuk membangun profil Anda yang cukup rinci dan akurat sehingga mereka dapat memberi Anda pengalaman pengguna yang lebih pribadi.

Sekitar waktu yang sama yang HTM5 diumumkan, API lain diperkenalkan kepada kita dari W3C. Aku cukup yakin Anda mungkin pernah mendengar tentang hal itu; Geolocation API. Hal ini memungkinkan situs Anda untuk menerima informasi posisi geografis yang menggunakan JavaScript.

Bagaimana Geolocation Bekerja?

Data Geolokasi dapat diakses melalui berbagai sumber yang berbeda. Secara tradisional di website, itu akan ditentukan oleh alamat IP pengunjung. Kemudian akan terhubung ke layanan WHOIS dan mengambil alamat fisik pengunjung dari informasi whois mereka. Namun baru-baru ini, cara yang lebih populer dan akurat untuk mengakses informasi ini telah menjadi umum; menggunakan chip GPS bawaan perangkat. Ini ditemukan di sebagian besar ponsel pintar dan tablet dan bertanggung jawab atas peningkatan popularitas layanan sadar lokasi yang mungkin kita gunakan. Berpikir tentang Foursquare atau aplikasi lain yang Anda mungkin 'check in'.

Privasi Pengguna

Dalam spesifikasi API yang dirilis oleh W3C menyatakan:

User Agents tidak boleh mengirim informasi lokasi ke situs Web tanpa izin tertulis dari pengguna.

Sebelum perangkat atau browser dapat mengakses data geolokasi pengunjung, pengunjung harus terlebih dahulu meng-authotorize itu. Beginilah tampilannya di Google Chrome:

Sekarang, lebih dari sebelumnya, pengguna memperhatikan tentang informasi yang disimpan oleh situs web tentang mereka dan pengguna Anda perlu merasa yakin dengan apa Anda menggunakan data mereka. Beri tahu mereka mengapa Anda membutuhkan informasi ini dan tunjukkan bagaimana itu akan berguna bagi mereka dalam menciptakan pengalaman online yang lebih baik.

Saat menggunakan situs web atau aplikasi geolokasi, praktik yang baik adalah mengontrol jumlah informasi yang Anda bagikan dengan orang lain. Sebagian besar aplikasi dan layanan berbagi lokasi menawarkan semacam kontrol privasi, jadi pastikan untuk menggunakannya dan jangan pernah membagikan alamat pribadi Anda.

Menggunakan Geolocation

Setelah Anda memiliki situs atau aplikasi yang location aware, Anda dapat memberikan konten yang lebih akurat dan tepat untuk pengunjung Anda Mari kita lihat bagaimana geolokasi berguna.

Geomarketing

Geomarketing adalah istilah yang relatif baru dan dapat digambarkan sebagai:

Integrasi intelijen geografis ke dalam berbagai aspek pemasaran, termasuk penjualan dan distribusi.

Meskipun istilah baru, prinsip sebenarnya dari geo marketing telah ada untuk sementara waktu. Facebook telah memanfaatkan pendekatan ini untuk beberapa waktu sekarang. Facebook akan mengumpulkan data berbasis lokasi (berdasarkan alamat IP pengguna) dari ini, maka Tampilkan iklan sesuai untuk wilayah geografis. Google dan mesin pencari lainnya juga telah membuat penggunaan ini dan termasuk hasil pencarian berbasis lokasi untuk pengguna mereka.

Crowdsourcing

Bukan hanya pemasar yang dapat mengambil manfaat dari layanan geolokasi, tetapi tipe kreatif juga memanfaatkannya (mungkin bahkan tanpa menyadarinya). Orang telah menggunakannya untuk mendapatkan akses ke sejumlah besar orang, yang semuanya terletak di area yang sama dan memiliki tujuan yang sama untuk 'membuat sesuatu terjadi'. Ini dapat berkisar dari flash mob, hingga rutinitas tarian berskala besar, hingga menciptakan kelompok komunitas untuk orang-orang yang memiliki minat yang sama.

Ini juga telah digunakan dalam situasi seperti gempa Haiti pada tahun 2010, ketika kelompok besar orang biasa berkumpul bersama untuk mengumpulkan bantuan semua melalui kekuatan jaringan sosial dan lokasi geografis.

Penawaran

Baru-baru ini sejumlah besar 'situs penawaran' mulai bermunculan di mana-mana. Terutama adalah Groupon yang diluncurkan pada bulan November 2008. Groupon menawarkan layanan deal-of-the-day kepada penggunanya dan setiap hari situs memiliki jumlah penawaran yang telah ditentukan untuk setiap penawaran. Setiap item harus cukup menarik minat pengguna untuk mendaftar untuk penawaran itu; untuk melakukannya mereka menerimanya, tetapi hanya jika itu mencapai jumlah orang yang telah ditentukan.

Konsep ini mengurangi risiko bagi pengecer dan memungkinkan mereka untuk menjual dalam jumlah besar, menjadikan konsep itu pemenang semua. Kekuatan Groupon terletak pada integrasi ketat yang dimilikinya dengan lokasi penggunanya. Dengan menawarkan penggunanya penawaran dan penawaran lokal, ia telah menjadi salah satu situs kupon paling populer dan formatnya direplikasi berkali-kali.

Contoh Praktis

Sekarang Anda mengerti lebih banyak tentang geolokasi, mari kita lihat beberapa contoh dunia nyata.

The Rocky Horror Show

The rocky horror website memungkinkan Anda mendapatkan waktu tayang untuk pertunjukan di tempat yang dekat dengan Anda. Cukup buka situs dan klik 'Find my location'.

Flickr Places

Menggunakan teknologi yang sama, Flickr menunjukkan apa yang telah diunggah orang lain ke situs web di dekat tempat Anda berada.

Mapumental

Mapumanetal muncul pada tahun 2006 ketika Departemen Transportasi di Inggris menghubungi startup untuk bekerja dengan informasi yang mereka miliki tentang data transportasi umum. Mereka menggambarkan apa yang mereka lakukan di Mapumental sebagai 'Kami membuat peta yang membantu orang membuat keputusan yang lebih baik, lebih cepat.' Ini menawarkan berbagai alat dan layanan yang menawarkan cara untuk memvisualisasikan data perjalanan waktu nyata.

Menerapkan Geolocation

Jika sebelumnya Anda belum menerapkan geolokasi ke situs web atau aplikasi apa pun maka kabar baiknya adalah, itu tidak bisa lebih sederhana. Dalam tutorial ini saya akan menunjukkan bagaimana Anda bisa mendapatkan lokasi pengguna di situs web atau aplikasi web Anda.

HTML Markup

Saya telah merancang ini sehingga Anda dapat menambahkannya ke situs web Anda sendiri dengan cukup mudah. Tujuannya adalah agar pengguna menekan tombol yang kemudian akan mendapatkan lokasi mereka, menampilkannya di situs dengan sedikit bantuan dari Google Maps API's.

Kami mulai dengan pembungkus untuk memusatkan desain. Saya telah memilih untuk melakukan ini pada lebar 960px tetapi Anda dapat memilih untuk menggunakan ukuran apa pun yang sesuai dengan desain Anda. Di dalam 'wrapper' ini saya telah membuat sebuah div yang merupakan tempat peta akan diletakkan begitu telah dihasilkan. Aku telah memberikan ini ID dari 'Map'.

Dalam div 'Map' saya kemudian memiliki rentang yang saya berikan kelas yang disebut 'helper'. Ini akan menjadi panduan pembantu kecil yang akan menginstruksikan pengguna apa yang harus mereka lakukan. Ini mungkin tampak sedikit tidak perlu tetapi selalu merupakan praktik yang baik untuk membantu pengguna bila memungkinkan.

Kami kemudian memiliki gambar preloader yang saya berikan ID 'preloader'. Jika Anda mencari untuk menemukan preloaders maka Anda dapat memeriksa preloaders.net.

Inilah yang harus Anda miliki sejauh ini:



<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-->

Setelah div 'map' saya menggunakan anchor tag sederhana yang akan bertindak sebagai tombol bagi pengguna untuk mengklik. Ini memiliki kelas (yup Anda dapat menebaknya) 'tombol'.

Setelah pengguna mengklik tombol, kami tidak hanya ingin menampilkan peta, tetapi juga berguna untuk menampilkan lokasi, garis bujur dan garis lintang pengguna. Untuk ini saya buat div dengan ID dari 'result' yang kemudian berisi tiga meliputi masing-masing dengan kelas yang relevan. Untuk markup itu saja. Ini adalah apa yang harus seperti seluruh markup:



<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 cukup sederhana. Berikut ini adalah secara penuh:


@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%;
}

Satu hal yang perlu diperhatikan adalah preloader adalah satu-satunya elemen div yang benar-benar diposisikan. Ini benar-benar diposisikan dalam kaitannya dengan div 'peta'. Untuk mencapai ini, pastikan bahwa div 'map' sudah diatur posisinya menjadi relatif. Ini akan memungkinkan preloader diposisikan ke induknya sebagai lawan dari keseluruhan dokumen.

jQuery

Google menawarkan serangkaian API untuk layanan PETA yang bebas hingga batas penggunaan tertentu. Setelah itu, akan dikenakan biaya.

Untungnya, kedua layanan yang akan kita gunakan benar-benar gratis; sebenarnya salah satu teknik tidak menggunakan API sama sekali, melainkan menggunakan iframe embed peta standar di mana kita akan mengubah beberapa nilai yang kita dapatkan dari browser pengguna.

Pertama, dalam beberapa <script>


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

Setelah kami selesai melakukannya, kami harus memeriksa apakah browser mendukung Geolocation API. Kita dapat menguji ini dengan pernyataan 'if' berikut.


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

Setelah kami menetapkan dukungan peramban, kami kemudian akan mendeteksi klik tombol di bagian di mana ia berkomentar 'Browser supports it, we're good to go'.

Event klik tombol akan terlihat seperti ini:


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

Setelah tombol diklik, itu akan menunjukkan preloader. Bagian penting untuk dilihat di sini adalah baris ke-2 hingga terakhir yang berisi 'navigator'. Apa yang dikatakan secara efektif adalah: 'dapatkan lokasi pengguna dan jika berhasil mengirim posisi lokasi ke fungsi 'exportPosition', jika tidak, kirim kesalahan ke fungsi errorPosition'.

Jadi mari kita masuk dan membuat fungsi-fungsi ini. Fungsi kesalahan cukup mudah:


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

Dalam fungsi di atas Anda dapat melihat bahwa fungsi tersebut akan mengingatkan dan kesalahan, kemudian menunjukkan preloader lagi.

Dalam fungsi sukses di bawah ini yang disebut 'exportPosisi' kita mendapatkan garis lintang dan bujur yang disediakan oleh geolokasi API dan mengatur ini sebagai variabel dengan nama yang sama.

Setelah kami memiliki ini, kami kemudian dapat menggunakannya dalam kode embr iframe dari Google Maps. Kami juga dapat menggunakannya dalam span yang menampilkan garis bujur dan garis lintang kepada pengguna. Ini dia tampilannya:


	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);
		
	}

Bagian yang penting adalah url iframe. Di dalam url saya memasukkan variabel '+ latitude +' dan '+ longitude +'. Dari dekat ini terlihat seperti:

<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>

Ini akan menyisipkan MAP dalam div 'peta' dan juga mengungkapkan garis bujur dan lintang kepada pengguna. Ada juga satu hal lagi yang ingin kita ketahui; ini adalah nama lokasi pengguna. Untuk melakukan ini kita perlu melakukan panggilan ke Google Maps API melalui AJAX. Kami menambahkan fungsi AJAX ini dalam fungsi 'exportPosition'. Ini terlihat seperti:


//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();
	  }
	});

Dalam respons success, kami mengambil nama lokasi yang diterima kembali dari panggilan AJAX dan menambahkannya ke span '.location' Jika, karena alasan apa pun, ada kesalahan dalam panggilan itu, maka ia akan menjalankan fungsi 'errorPosition' dan memperingatkan pengguna bahwa ia tidak dapat menemukan lokasi mereka.

API Geolokasi bekerja di semua browser modern. Namun beberapa versi Safari menggunakan CoreLocation untuk mendapatkan data geolokasi, yang berarti Anda harus terhubung ke internet menggunakan WIFI. Jika Anda terhubung melalui ethernet atau serupa, maka Anda mungkin memiliki masalah pengumpulan data lokasi.

Perlu juga ditunjukkan bahwa file tutorial ini perlu diunggah ke server web langsung agar berfungsi dan tidak akan berfungsi di localhost.

Kesimpulan

Saya harap sekarang Anda memiliki pemahaman yang lebih besar tentang API geolocation , cara kerjanya, dan bagaimana Anda dapat menerapkannya dengan sedikit usaha. Dengan menggunakan geolokasi dengan cara yang kreatif dan efektif, Anda seharusnya dapat memberikan pengalaman pengguna yang lebih baik bagi pengguna Anda.

Sudahkah Anda menerapkan API geolokasi ke situs mana pun yang Anda kerjakan untuk mendorong pengalaman pengguna yang lebih baik? Pernahkah Anda melihatnya digunakan dengan cara yang keren dan kreatif? Beri tahu kami di komentar di bawah.