# Memahami Perbedaan deviceorientation vs deviceorientationabsolute pada HTML5

Dalam pengembangan aplikasi web modern, akses ke sensor perangkat (seperti akselerometer dan giroskop) memungkinkan kita menciptakan pengalaman interaktif seperti *game* berbasis gerakan atau navigasi peta. Namun, seringkali pengembang bingung memilih antara `deviceorientation` standar dan versi `absolute`.

## 1\. Apa itu `deviceorientation`?

Event `deviceorientation` memberikan data tentang rotasi fisik perangkat dalam ruang tiga dimensi. Data ini bersifat **relatif**.

*   **Titik Acuan:** Saat sensor pertama kali diaktifkan atau halaman dimuat, perangkat menentukan posisi "0" berdasarkan orientasi saat itu.
    
*   **Karakteristik:** Jika Anda memutar perangkat 90 derajat, ia akan melaporkan perubahan tersebut, tetapi ia tidak tahu pasti apakah ia sedang menghadap ke arah Utara, Selatan, Timur, atau Barat secara geografis.
    
*   **Sumbu Utama:**
    
    *   **Alpha ($\\alpha$):** Rotasi di sekitar sumbu Z (0° hingga 360°).
        
    *   **Beta ($\\beta$):** Rotasi di sekitar sumbu X (depan ke belakang, -180° hingga 180°).
        
    *   **Gamma ($\\gamma$):** Rotasi di sekitar sumbu Y (kiri ke kanan, -90° hingga 90°).
        

* * *

## 2\. Apa itu `deviceorientationabsolute`?

Event `deviceorientationabsolute` adalah varian yang menyediakan data rotasi yang **absolut** terhadap medan magnet Bumi.

*   **Titik Acuan:** Menggunakan koordinat Bumi. Nilai **Alpha ($\\alpha$) sebesar 0°** berarti perangkat sedang menghadap tepat ke **Utara Magnetik**.
    
*   **Sensor yang Digunakan:** Selain giroskop, event ini sangat bergantung pada **Magnetometer** (kompas digital) di dalam ponsel.
    
*   **Kegunaan Utama:** Sangat penting untuk aplikasi *Augmented Reality* (AR) dan navigasi peta di mana arah mata angin yang akurat adalah keharusan.
    

* * *

## 3\. Tabel Perbandingan Utama

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Fitur</strong></p></td><td colspan="1" rowspan="1"><p><strong>deviceorientation</strong></p></td><td colspan="1" rowspan="1"><p><strong>deviceorientationabsolute</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Referensi Arah</strong></p></td><td colspan="1" rowspan="1"><p>Relatif (biasanya terhadap posisi awal).</p></td><td colspan="1" rowspan="1"><p>Absolut (terhadap Utara Magnetik).</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Akurasi Geografis</strong></p></td><td colspan="1" rowspan="1"><p>Rendah.</p></td><td colspan="1" rowspan="1"><p>Tinggi.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Ketersediaan</strong></p></td><td colspan="1" rowspan="1"><p>Hampir di semua smartphone modern.</p></td><td colspan="1" rowspan="1"><p>Tergantung keberadaan sensor Magnetometer.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Kasus Penggunaan</strong></p></td><td colspan="1" rowspan="1"><p>Game balap (kemiringan), kontrol UI.</p></td><td colspan="1" rowspan="1"><p>Kompas, Peta, AR (Augmented Reality).</p></td></tr></tbody></table>

* * *

## 4\. Tantangan Implementasi: Keamanan dan Izin

Sejak pembaruan privasi pada browser modern (seperti iOS 13+ dan versi terbaru Chrome), Anda tidak bisa langsung mengakses sensor ini. Pengembang harus meminta izin secara eksplisit melalui interaksi pengguna (misalnya klik tombol).

Contoh logika permintaan izin pada iOS:

JavaScript

```plaintext
function requestPermission() {
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        DeviceOrientationEvent.requestPermission()
            .then(permissionState => {
                if (permissionState === 'granted') {
                    window.addEventListener('deviceorientation', handleMotion);
                }
            })
            .catch(console.error);
    } else {
        // Untuk perangkat non-iOS atau browser lama
        window.addEventListener('deviceorientation', handleMotion);
    }
}
```

* * *

## 5\. Kesimpulan

Gunakan `deviceorientation` jika Anda hanya peduli pada **perubahan gerakan** (seperti menggerakkan karakter game ke kiri atau kanan). Namun, gunakan `deviceorientationabsolute` jika aplikasi Anda perlu tahu **ke arah mana pengguna menghadap** di dunia nyata.

### Contoh pengaplikasiannya Anda bisa buka: [Qibla.Finlup.Id](https://qibla.finlup.id)