Pertemuan 13 – Penggunaan Web APIs

Tujuan Pembelajaran

Mahasiswa diharapkan mampu menggunakan Web APIs browser seperti Geolocation, Local Storage, dan Notification untuk menambahkan fitur interaktif dan personalisasi pada aplikasi web.

Pengenalan Web APIs

Web APIs adalah interface yang memungkinkan JS akses fitur browser/device, seperti lokasi, storage, notifikasi. APIs ini buat web lebih powerful tanpa plugin. Contoh: Geolocation dapat lokasi user, Local Storage simpan data lokal, Notification kirim alert.

Penting: APIs butuh permission user, dan hanya work di HTTPS untuk security.

Contoh Web APIs Utama

• Geolocation: Dapat koordinat GPS. navigator.geolocation.getCurrentPosition(success, error).
• Local Storage: Simpan data string di browser. localStorage.setItem('key', 'value').
• Notification: Kirim notif. Notification.requestPermission().then(() => new Notification('Hi!')).

APIs lain: Canvas (gambar), Web Audio (suara), Battery (status baterai).

Contoh Kode Lengkap

// Geolocation
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        position => {
            console.log('Latitude:', position.coords.latitude);
            console.log('Longitude:', position.coords.longitude);
            // Tampilkan di map atau simpan
        },
        error => {
            console.error('Error:', error.message);
        }
    );
} else {
    console.log('Geolocation not supported');
}

// Local Storage
localStorage.setItem('username', 'John');
let user = localStorage.getItem('username');
console.log('User:', user);

// Notification
if ('Notification' in window) {
    Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
            new Notification('Selamat datang di website!');
        }
    });
}
                

Penjelasan: Geolocation dapat lokasi (butuh permission). Local Storage simpan data tanpa expire. Notification kirim alert (butuh allow).

Tips Praktis

• Test APIs di browser console, handle error jika user deny permission.
• Local Storage untuk data sederhana, gunakan IndexedDB untuk kompleks.
• Untuk Geolocation, tampilkan loading saat fetch koordinat.
• APIs modern seperti Web Bluetooth atau Web USB butuh experimental flag.

Ringkasan Materi

Web APIs tambah interaktivitas web tanpa backend. Ini buat app personal seperti weather lokal atau reminder.

Latihan dan Diskusi

1. Buat halaman dengan button "Get Location", tampilkan lat/long di div. 2. Simpan nama user di Local Storage, load saat refresh. 3. Implementasi notif sederhana saat button klik. 4. Diskusikan: Apa risiko security APIs? Jika stuck, cek MDN docs.