Memahami 3 Api Model pada HTML5 Part 3

Juli 23, 2022

Implementasi 3 Api Model pada HTML5 Part 3

Sebelumnya, kita telah membahas tentang Geolocation API pada artikel “Memahami 3 API Model pada HTML5 Part 2”. Pada artikel tersebut, kita telah menjelaskan pengertian Geolocation API, browser mana saja yang mendukung Geolocation API, penggunaan Geolocation API pada HTML, beserta handling error dan rejection pada Geolocation API. Namun, untuk memahami Geolocation API secara utuh, kita perlu mengetahui lebih dalam tentang method-method yang ada pada Geolocation API.

Untuk itu, kali ini kita akan membahas artikel baru, yaitu “Memahami API Model pada HTML5 Part 3”, yang akan membahas method-method yang ada pada Geolocation API dan bagaimana cara mengimplementasikannya. Dengan memahami artikel ini, diharapkan kita bisa menguasai Geolocation API dengan lebih baik dan bisa memanfaatkannya secara maksimal.

Method Geolocation API

Geolocation API memiliki dua method utama, yaitu getCurrentPosition() dan Object Geolocation. Method getCurrentPosition() digunakan untuk mendapatkan informasi posisi pengguna atau client secara real-time. Sedangkan Object Geolocation, yang terdiri dari beberapa method, digunakan untuk memanipulasi informasi posisi yang telah didapatkan sebelumnya.

Dengan getCurrentPosition(), kita bisa mendapatkan informasi seperti garis lintang dan bujur, kecepatan gerakan, dan akurasi dari posisi pengguna. Sedangkan Object Geolocation memiliki beberapa method seperti watchPosition(), clearWatch(), dan getCurrentPosition(). watchPosition() digunakan untuk mengupdate informasi posisi secara real-time, clearWatch() digunakan untuk menghentikan pengambilan informasi posisi secara periodik, dan getCurrentPosition() digunakan untuk mengambil posisi saat ini.

Mengerti tentang kedua method ini akan memudahkan kita dalam menggunakan Geolocation API untuk memenuhi kebutuhan kita dalam mengakses informasi posisi pengguna atau client secara real-time.

Method getCurrentPosition()

Dalam Geolocation API, method getCurrentPosition() memiliki peran penting dalam mengembalikan nilai data objek saat kode berhasil dijalankan. Properti seperti latitude, longitude, dan accuracy selalu di-return, sedangkan properti lainnya juga akan di-return jika tersedia.

Dengan menggunakan method ini, kamu dapat mengakses data posisi pengguna atau client secara real-time. Hal ini memungkinkan kamu untuk menampilkan informasi lokasi dengan akurasi yang tinggi pada aplikasi atau website yang kamu bangun. Tentunya, hal ini akan memberikan pengalaman yang lebih interaktif dan menarik bagi pengguna.

Properti	Return Data
coords.latitude	Latitude atau garis lintang sebagai angka desimal (selalu return)
coords.longitude	Longitude atau garis bujur sebagai angka desimal (selalu return)
coords.accuracy	Accuracy atau akurasi posisi (selalu return)
coords.altitude	Altitude atau ketinggian dalam meter di atas permukaan laut (return jika tersedia)
coords.latitudeAccuracy	Akurasi ketinggian latitude (return jika tersedia)
coords.heading	Heading dalam derajat searah jarum jam dari utara (return jika tersedia)
coords.speed	Kecepatan dalam m/s atau meter per second (return jika tersedia)
timestamp	Tanggal atau waktu (return jika tersedia)

Object Geolocation

dua method yang sangat berguna dalam Object Geolocation, yaitu:

watchPosition(): Method ini berfungsi untuk mengembalikan posisi pengguna secara real-time dan terus memperbarui posisi pengguna saat bergerak, seperti GPS pada kendaraan. Dengan menggunakan method ini, kita bisa memantau pergerakan pengguna dan membuat aplikasi yang responsif terhadap perubahan lokasi pengguna.
clearWatch(): Method ini berfungsi untuk mengakhiri method watchPosition(). Jika kita sudah tidak memerlukan pemantauan posisi pengguna lagi, maka kita bisa menggunakan method ini untuk menghentikan pemantauan dan menghemat sumber daya perangkat.

Dengan memahami kedua method tersebut, kita bisa mengembangkan aplikasi yang lebih interaktif dan responsif terhadap perubahan lokasi pengguna.

Berikut ini adalah contoh kode HTML yang mengimplementasikan Geolocation API dan menggunakan method watchPosition() dan clearWatch():

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Geolocation API</title>
</head>
<body>
	<h1>Contoh Geolocation API</h1>
	
	<div id="map"></div>
	
	<script>
		var mapElement = document.getElementById('map');
		
		if (navigator.geolocation) {
			var options = {
				enableHighAccuracy: true,
				timeout: 5000,
				maximumAge: 0
			};

			var watchId = navigator.geolocation.watchPosition(function(position) {
				var lat = position.coords.latitude;
				var lng = position.coords.longitude;
				
				// Tampilkan posisi pengguna pada Google Maps
				var mapUrl = "https://maps.googleapis.com/maps/api/staticmap?center=" + lat + "," + lng + "&zoom=15&size=500x500&markers=color:red%7Clabel:P%7C" + lat + "," + lng + "&key=API_KEY";
				mapElement.innerHTML = "<img src='" + mapUrl + "'>";
			}, function(error) {
				console.error(error);
			}, options);

			// Berhenti memperbarui posisi pengguna setelah 30 detik
			setTimeout(function() {
				navigator.geolocation.clearWatch(watchId);
			}, 30000);
		} else {
			console.error("Browser tidak mendukung Geolocation API");
		}
	</script>
</body>
</html>

Pada contoh di atas, method watchPosition() digunakan untuk memperbarui posisi pengguna secara real time dan menampilkan posisi pengguna pada Google Maps dengan menggunakan API Key dari Google Maps. Sedangkan method clearWatch() digunakan untuk menghentikan memperbarui posisi pengguna setelah 30 detik.

Implementasi Geolocation API pada HTML5

Setelah mempelajari Geolocation API secara teori, saatnya untuk bereksperimen dan mempraktekkan langsung! Di bawah ini, tersedia kode demo yang sangat menarik dan menggabungkan semua metode dan objek yang telah kita pelajari sebelumnya.

Demo ini terdiri dari tiga tombol yang memungkinkan kita untuk memilih tindakan yang ingin dilakukan. Selain itu, demo ini juga secara otomatis mendeteksi apakah browser kita mendukung Geolocation API atau tidak.

Dengan menggunakan demo ini, setiap kali kita meminta untuk mendeteksi posisi perangkat, lokasi akan ditampilkan secara langsung kepada kita. Demikianlah, Geolocation API memungkinkan kita untuk memanfaatkan informasi lokasi secara optimal pada website atau aplikasi web yang kita buat. Yuk, mari kita mulai bereksperimen dan mencoba kode demo ini!

mengetahui seluk beluk Geolocation API, kemudian saatnya untuk kita bereksperimen. Di bawah ini, terdapat kode demo yang berfungsi penuh dan menggunakan semua metode dan objek yang telah kita pelajari dalam artikel ini. Penggunaannya cukup simpel, setiap kali terdapat permintaan untuk mendeteksi posisi perangkat, maka data lokasi akan tampil kepada pengguna.

Berikut adalah contoh kode HTML yang menggunakan seluruh method, atribut, dan parameter pada Geolocation API:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Contoh Geolocation API</title>
  <script>
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError, {
          enableHighAccuracy: true,
          maximumAge: 0,
          timeout: 5000
        });
      } else {
        alert("Geolocation tidak didukung oleh browser Anda.");
      }
    }
    
    function showPosition(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      var accuracy = position.coords.accuracy;
      document.getElementById("result").innerHTML = "Latitude: " + latitude + "<br>Longitude: " + longitude + "<br>Akurasi: " + accuracy + " meter";
    }
    
    function showError(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          alert("Akses ke lokasi ditolak oleh pengguna.");
          break;
        case error.POSITION_UNAVAILABLE:
          alert("Informasi lokasi tidak tersedia.");
          break;
        case error.TIMEOUT:
          alert("Permintaan lokasi timeout.");
          break;
        default:
          alert("Terjadi kesalahan tak terduga.");
          break;
      }
    }
    
    var watchID;
    
    function watchLocation() {
      if (navigator.geolocation) {
        watchID = navigator.geolocation.watchPosition(showPosition, showError, {
          enableHighAccuracy: true,
          maximumAge: 0,
          timeout: 5000
        });
      } else {
        alert("Geolocation tidak didukung oleh browser Anda.");
      }
    }
    
    function clearWatch() {
      navigator.geolocation.clearWatch(watchID);
      document.getElementById("result").innerHTML = "Pemantauan lokasi dihentikan.";
    }
  </script>
</head>
<body>
  <h1>Contoh Geolocation API</h1>
  <button onclick="getLocation()">Dapatkan Lokasi Saya</button>
  <button onclick="watchLocation()">Pantau Lokasi Saya</button>
  <button onclick="clearWatch()">Hentikan Pemantauan</button>
  <div id="result"></div>
</body>
</html>

Dalam contoh kode ini, terdapat tiga tombol yang masing-masing memanggil method getLocation(), watchLocation(), dan clearWatch(). Ketika tombol pertama ditekan, method getCurrentPosition() akan dipanggil untuk mendapatkan posisi pengguna saat ini dan menampilkan informasi lokasinya pada elemen dengan ID “result”. Ketika tombol kedua ditekan, method watchPosition() akan dipanggil untuk terus memantau pergerakan pengguna dan menampilkan informasi lokasinya pada elemen yang sama. Tombol ketiga digunakan untuk menghentikan pemantauan lokasi yang sedang berlangsung. Selain itu, terdapat juga parameter enableHighAccuracy, maximumAge, dan timeout pada method getCurrentPosition() dan watchPosition() yang dapat diatur sesuai kebutuhan.

Kesimpulan

Setelah membaca artikel ini, kamu akan mengerti bahwa Geolocation API sangat bermanfaat untuk memberikan petunjuk arah kepada pengguna dan untuk beberapa tujuan lainnya. Namun, kamu juga perlu memperhatikan dukungan API ini pada versi browser atau perangkatmu karena pada versi lawas kebanyakan belum mendukung Geolocation API.

Namun jangan khawatir, dengan Geolocation API kamu bisa dengan mudah menampilkan data lokasi pengguna, memperbarui posisi pengguna secara real-time, dan menangani error dan rejection. Kamu juga bisa menggunakan Google Maps API untuk menampilkan hasil lokasi pada peta.

Tidak hanya itu, Geolocation API juga memiliki method seperti getCurrentPosition() dan Object Geolocation yang sangat berguna untuk mengembalikan data posisi pengguna serta melakukan watch pada posisi pengguna secara real-time. Kamu bahkan bisa menghentikan watchPosition() dengan menggunakan clearWatch().

Jadi, sekarang kamu sudah tahu bagaimana cara menggunakan Geolocation API. Selanjutnya, cobalah bereksperimen dengan membuat kode demo menggunakan semua metode dan objek yang telah kamu pelajari. Pastikan juga untuk menyesuaikan versi pada browser atau perangkatmu. Selamat mencoba!

Nabil Irawan

Juli 23, 2022

Belajar HTML