Mengetahui Nama Negara Berdasarkan Zona Waktu di Browser (Menggunakan TypeScript dan JavaScript)

Saat membangun aplikasi web atau mobile, sering kali kita perlu menyesuaikan tampilan atau informasi yang disajikan berdasarkan zona waktu pengguna. Misalnya, menampilkan waktu atau tanggal lokal yang sesuai dengan lokasi pengunjung situs, atau bahkan menyesuaikan konten berdasarkan negara atau wilayah pengguna. Salah satu cara mudah untuk mengetahui negara pengguna berdasarkan waktu yang ada di browser adalah dengan menggunakan zona waktu yang ditarik langsung dari browser itu sendiri.

Pada artikel kali ini, kita akan membahas cara mendapatkan nama negara berdasarkan zona waktu yang ada di browser menggunakan dua pendekatan: TypeScript dan JavaScript. Tanpa basa-basi lagi, mari kita mulai!

Apa itu Zona Waktu?

Zona waktu (timezone) adalah perbedaan waktu antara satu tempat dengan tempat lain di bumi. Setiap zona waktu di dunia memiliki nama unik, seperti "Asia/Jakarta", "Europe/London", atau "America/New_York". Nama-nama ini digunakan untuk mengatur perbedaan waktu di setiap wilayah agar waktu yang ditampilkan sesuai dengan lokasi geografis.

Langkah 1: Memetakan Zona Waktu ke Negara

Untuk memulai, kita perlu membuat pemetaan zona waktu ke negara atau wilayah yang sesuai. Dengan pemetaan ini, kita bisa mengetahui negara apa yang terhubung dengan zona waktu tertentu.

const timezoneCountryMap = {
    "Asia/Jakarta": "Indonesia",
    "Asia/Kolkata": "India",
    "Europe/London": "United Kingdom",
    "America/New_York": "United States",
    "Europe/Paris": "France",
    "Asia/Tokyo": "Japan",
    "Europe/Berlin": "Germany",
    "Asia/Sydney": "Australia",
    "Africa/Nairobi": "Kenya",
    "Europe/Moscow": "Russia",
    // Tambahkan lebih banyak zona waktu dan negara sesuai kebutuhan
};
            

Langkah 2: Mendapatkan Zona Waktu Pengguna

Langkah berikutnya adalah mendapatkan zona waktu yang digunakan oleh browser pengguna. Dengan menggunakan fitur Intl.DateTimeFormat().resolvedOptions().timeZone, kita dapat memperoleh zona waktu yang sedang aktif di perangkat pengguna.

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log('Zona waktu browser:', timezone);
            

Langkah 3: Menentukan Nama Negara Berdasarkan Zona Waktu

Setelah mendapatkan zona waktu dari browser, kita dapat menggunakan pemetaan yang sudah dibuat untuk mendapatkan nama negara yang sesuai. Jika zona waktu ditemukan dalam pemetaan, kita akan mengembalikan nama negara terkait. Jika tidak, kita dapat memberikan nilai default seperti "Negara Tidak Dikenal".

const timezoneCountryMap = {
    "Asia/Jakarta": "Indonesia",
    "Asia/Kolkata": "India",
    "Europe/London": "United Kingdom",
    "America/New_York": "United States",
    "Europe/Paris": "France",
    "Asia/Tokyo": "Japan",
    "Europe/Berlin": "Germany",
    "Asia/Sydney": "Australia",
    "Africa/Nairobi": "Kenya",
    "Europe/Moscow": "Russia",
    // Tambahkan lebih banyak zona waktu dan negara sesuai kebutuhan
};

function getCountryByTimezone() {
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    return timezoneCountryMap[timezone] || "Negara Tidak Dikenal";
}

console.log(getCountryByTimezone());
            

Langkah 4: Versi JavaScript

Jika Anda lebih memilih menggunakan JavaScript (tanpa tipe seperti di TypeScript), Anda dapat menghapus tipe data dan tetap menggunakan logika yang sama:

const timezoneCountryMap = {
    "Asia/Jakarta": "Indonesia",
    "Asia/Kolkata": "India",
    "Europe/London": "United Kingdom",
    "America/New_York": "United States",
    "Europe/Paris": "France",
    "Asia/Tokyo": "Japan",
    "Europe/Berlin": "Germany",
    "Asia/Sydney": "Australia",
    "Africa/Nairobi": "Kenya",
    "Europe/Moscow": "Russia",
    // Tambahkan lebih banyak zona waktu dan negara sesuai kebutuhan
};

function getCountryByTimezone() {
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    return timezoneCountryMap[timezone] || "Negara Tidak Dikenal";
}

console.log(getCountryByTimezone());
            

Kenapa Ini Berguna?

Pemetaan zona waktu ini berguna dalam berbagai skenario, seperti:

• Menampilkan waktu lokal: Anda dapat menampilkan waktu sesuai dengan zona waktu pengguna tanpa perlu mengonfigurasi pengaturan secara manual.
• Konten lokal: Beberapa aplikasi atau situs web menyesuaikan konten berdasarkan lokasi pengunjung. Misalnya, menampilkan mata uang lokal, bahasa, atau bahkan pengaturan pajak yang sesuai dengan negara pengguna.
• Analisis pengunjung: Untuk keperluan analisis, kita bisa mengetahui dari mana pengunjung situs berasal berdasarkan zona waktu mereka.

Kode Lengkap

Untuk kode (Javascript atau Typescript) lengkapnya dapat dilihat disini : https://gist.github.com/dyazincahya/d3ba6cfd7bb95039bc4c6db76ee1f814

Kesimpulan

Menggunakan informasi zona waktu yang disediakan oleh browser untuk mendapatkan nama negara adalah cara yang mudah dan efisien untuk menyesuaikan pengalaman pengguna dengan lokasi geografis mereka. Dengan menggunakan pemetaan zona waktu yang tepat, Anda dapat memberikan pengalaman yang lebih relevan bagi pengguna, baik dalam aplikasi web maupun mobile.

Jika Anda menggunakan TypeScript atau JavaScript, keduanya menyediakan solusi yang hampir identik untuk menangani hal ini. Pemetaan zona waktu ke negara adalah cara yang cerdas untuk menyesuaikan aplikasi dengan audiens global tanpa harus mengandalkan data geografis yang lebih rumit.

Selamat mencoba!