Gunakan GeoIP untuk Mengubah Data yang Membosankan Menjadi Pengalaman Pengguna yang Lebih Baik

Manusia adalah makhluk visual. Mereka suka melihat hal-hal cantik (yang melampaui video kucing). Saya tidak mengatakan ini mungkin atau karena saya menikmatinya! Ini fakta yang keras dan dingin. Pasangkan dengan rentang perhatian yang semakin berkurang dan yakinlah bahwa aplikasi Anda dinilai berdasarkan penampilan (dalam 3 detik pertama) daripada berdasarkan fitur atau kualitas. Jika Anda seorang pengembang yang tidak mampu membayar untuk desain GUI khusus untuk suatu aplikasi, ini sangat merugikan. Tidak peduli seberapa bagus, cepat, atau inovatif aplikasi Anda jika terlihat seperti "dirancang oleh pengembang", orang bahkan tidak akan memberikannya kesempatan. Untungnya ada cara untuk mengatasi masalah ini.

Menggunakan template admin open-source yang telah dicoba dan diuji tidak diragukan lagi merupakan awal yang baik. Sama baiknya dengan menggunakan layanan anotasi data yang andal. Trik lain yang kurang dikenal adalah mengubah data membosankan seperti alamat IP dan pengidentifikasi agen pengguna browser menjadi data yang jauh lebih menarik yang tidak hanya dapat memberikan lebih banyak informasi kepada pengguna tetapi juga membuatnya menyenangkan dan menarik. Hal terbaiknya adalah – ini adalah fitur gratis dan mudah untuk ditambahkan ke aplikasi apa pun.

Cara standar, membosankan & jelek

Alih-alih membuang waktu untuk teori dan mengarang situasi, kami akan menyelami skenario yang akrab bagi hampir semua aplikasi web – menampilkan data log tindakan pengguna dalam sebuah tabel. Sementara data aktual berbeda dari sistem ke sistem, beberapa bidang umum, dan itu termasuk alamat IP, stempel waktu, dan string agen pengguna. Hanya menampilkan data mentah itu dalam sebuah tabel menghasilkan bencana buruk yang tidak ingin dilihat siapa pun, apalagi digunakan setiap hari. Itu terlihat seperti tabel di bawah ini. Desain itu sendiri samping; data tidak dapat digunakan karena tidak disesuaikan dan diformat untuk manusia. Misalnya, alamat IP bukanlah sesuatu yang sering diingat orang. Itulah salah satu alasan utama kami menggunakan nama domain. Menampilkan IP di tabel pengguna akhir seperti ini adalah batas yang tidak berguna.

Bagi mereka yang tidak sabar – lihat tabel baru & lebih baik.

Beberapa penyesuaian sangat membantu

Pertama, hilangkan kolom ID. Mengapa ada orang yang membutuhkan ID catatan database internal Anda? Ini adalah bagian data yang sama sekali tidak berguna bagi pengguna Anda. Dibutuhkan layar real-estate yang berharga dan menarik perhatian dari informasi penting.

Stempel waktu, dalam format stempel waktu MySQL, dapat dibaca manusia, tetapi jauh dari ramah pengguna. Hal-hal bahkan lebih buruk jika Anda menyimpan dan menampilkannya sebagai stempel waktu UNIX. Maka itu 100% tidak terbaca. Pengguna yang berbeda (biasanya berdasarkan lokasi mereka) lebih menyukai format waktu, tanggal, mata uang, dan data numerik yang berbeda. Perbedaan itu halus tetapi harus dihormati. Pengguna menghargainya. Usia acara juga penting. Untuk yang baru, akan lebih mudah untuk menampilkan deskripsi seperti “10 menit yang lalu”, yang menandakan bahwa ini adalah peristiwa baru-baru ini – tidak perlu menunjukkan stempel waktu lengkap. Sementara untuk yang lebih lama, kami menampilkan waktu dan tanggal yang diformat secara lokal.

Untungnya WordPress memiliki fungsi bawaan untuk menangani semuanya. Dengan menggunakan format tanggal dan waktu yang diatur di admin WP – Pengaturan – Umum, kami akan menyesuaikan stempel waktu agar sesuai dengan format situs lainnya dan dengan menggunakan fungsi human_time_diff() kami akan membuatnya mudah digunakan. Kode berikut mengasumsikan Anda memiliki stempel waktu dalam format MySQL, tetapi jika Anda memiliki stempel waktu UNIX, hapus baris pertama.

function wpr_format_timestamp( $timestamp ) {
  // convert MySQL timestamp to UNIX timestamp
  $timestamp = strtotime( $timestamp );
  
  if ( current_time( 'timestamp' ) - $timestamp > DAY_IN_SECONDS * 1) {
    // our event is older than a day
    // we'll show full timestamp formatted as per WP settings
    $out  = date( get_option( 'date_format', $timestamp );
    $out .= ' @ ' . get_option( 'time_format' ), $timestamp );
  } else {
    // timestamp is not older than a day
    // we'll show a message like "2 hours ago"
    $out  = human_time_diff( $timestamp, current_time( 'timestamp' ) );
    $out .=  ' ago';
  }
  
  return $out;
}

Jika Anda ingin menampilkan format “perbedaan manusia” untuk tanggal yang lebih lama dari satu hari, kalikan konstanta DAY_IN_SECOND dengan jumlah hari yang diinginkan.

Menggunakan data IP yang membosankan untuk mencapai efek "wow" dengan GeoIP

Banyak layanan mengubah IP menjadi data geografis yang dapat dibaca manusia (inilah 20 layanan geoIP dibandingkan jika Anda ingin menjelajahinya) yang mencakup negara, negara bagian, kota, zona waktu, info mata uang, dan detail ISP. Semuanya terbagi dalam dua kategori – API jarak jauh dan database yang dapat diunduh. Karena perubahan harian pada data geoIP, untuk sebagian besar proyek, API adalah pilihan yang jauh lebih baik. Layanan bervariasi dalam harga, kemudahan penggunaan, dan ketepatan data yang dikembalikan. Setelah bertahun-tahun menggunakan berbagai layanan, selama dua terakhir, saya telah menggunakan IP Geolocation. Untuk proyek yang lebih kecil dengan hingga 50.000 permintaan API per bulan, layanan ini sepenuhnya gratis. Penawaran hebat dan bebas risiko untuk proyek apa pun dan terutama untuk pengujian.

Menggunakan API itu mudah. Daftarkan akun (tidak perlu kartu kredit atau omong kosong serupa), ambil kunci API Anda dari halaman akun dan cukup panggil URL API dengan IP dan kunci API untuk mendapatkan hasil. Dalam kode (khusus WordPress), terlihat seperti kode di bawah ini. Jika Anda tidak menggunakan PHP, ada enam SDK yang tersedia untuk IP Geolocation, jadi Anda akan menemukan sesuatu yang sesuai dengan proyek Anda. Mereka juga menawarkan database yang dapat diunduh untuk proyek yang lebih besar; hubungi mereka untuk detailnya.

function wpr_get_ip_info( $ip ) {
  $endpoint = 'https://api.ipgeolocation.io/ipgeo';
  
  // grab the API key from https://app.ipgeolocation.io/
  // if needed register for a free account, no credit card info needed
  $api_key = 'PUT-YOUR-API-KEY-HERE';
  
  $params = array('apiKey' => $api_key, 'ip' => $ip, 'fields' => 'city,country_name,country_flag');
  $url = $endpoint . '?' . http_build_query($params, '', '&');

  $response = wp_remote_request( $url );
  
  if (is_wp_error($response)) {
    return $response;
  }
  
  if (wp_remote_retrieve_response_code($response) != 200) {
    return new WP_Error('geoip_bad_response', 'Response code ' . wp_remote_retrieve_response_code($response));
  }
  
  $body = wp_remote_retrieve_body($response);
  
  if (empty($body)) {
    return new WP_Error('geoip_bad_response', 'Empty body.');
  }
  
  $body = json_decode($body, true);
  
  // returned variable is an array with following fields: ip, country_name, country_flag, city
  return $body;
}

API mengembalikan 26 informasi berdasarkan IP – ujilah dengan IP Anda. Menampilkan semua itu akan terlalu banyak, jadi saya biasanya memilih nama negara, bendera negara, dan kota. Cukup data dan bendera menambahkan sentuhan visual yang bagus. Permintaan hanya mengembalikan ketiga variabel tersebut, untuk menghemat bandwidth. Jika Anda membutuhkan semua bidang, biarkan saja kunci larik fields di $params kosong. Gambar bendera negara dapat langsung di-hotlink dari IP Geolocation yang cukup nyaman. Untuk IP lokal, Anda tidak dapat menampilkan banyak, jadi pastikan Anda memperhitungkan skenario itu. Anda akan mendapatkan WP_Error dengan kode respons 423 jika ada IP lokal.

String agen pengguna menyembunyikan banyak data

String agen pengguna sangat besar dan tidak dimaksudkan untuk konsumsi manusia secara langsung. Tidak ada kebutuhan manusia waras atau ingin semua data ditampilkan dalam kekacauan itu. Kami membutuhkan jenis perangkat yang digunakan – komputer desktop, telepon, atau lainnya. Kemudian OS – Windows, Mac atau yang lainnya; dan mungkin browser yang digunakan: Chrome, Safari, Internet Explorer dan Firefox. Itu memberi data lebih banyak struktur, dan memisahkannya menjadi tiga bagian informasi tambahan yang berguna untuk memfilter dan menyegmentasikan.

Saya adalah pendukung besar penggunaan hal-hal yang dibuat orang lain (lebih pintar dari saya). Oleh karena itu kami akan menggunakan perpustakaan siap pakai, teruji pertempuran, terpelihara dengan baik untuk mengurai string agen pengguna. Buka WhereBrowser di GitHub untuk mengambil versi PHP. Bergantung pada pengaturan lingkungan PHP Anda, Anda dapat menginstalnya sebagai paket Komposer – instruksi ada di tautan di atas, atau sebagai bagian mandiri dari PHP. Jika Anda berada di grup kedua, sertakan file bootstrap.php dan Anda siap melakukannya.

Saat kami meningkatkan stempel waktu dan IP, jumlah kode yang kami butuhkan minimal, YangBrowser menangani pekerjaan berat.

function wpr_get_browser_info( $user_agent ) {
  // assuming you don't use Composer, manually include WhichBrowser
  require_once 'whichBrowser-lib/bootstrap.php';
  
  // parse the user agent string
  $browser = new WhichBrowser\Parser( $user_agent );
  
  // grab the type and then the subtype
  // see WhichBrowser for more info
  $tmp = $browser->getType();
  $tmp = explode( ':', $tmp );
  $result['type'] = $tmp[0];
  
  // and the OS and browser name
  $result['os'] = $browser->os->name;
  $result['browser'] = $browser->browser->name;
  
  return $result;
}

Lewati string agen pengguna yang disimpan ke fungsi wpr_get_browser_info() dan Anda akan mendapatkan kembali nama OS, nama browser, dan jenis perangkat. Letakkan di tabel sebagai pengganti string agen pengguna mentah.

Tabel baru & lebih baik

Lihatlah meja baru kami. Kami bekerja dengan data yang sama, tetapi memformat dan memprosesnya dengan benar – untuk manusia!

stempel waktu	Negara	Kota	Peramban	OS	Perangkat	Tindakan
20 menit yang lalu	Jerman	Berlin	Firefox	Ubuntu	Desktop	Gabung
14 jam yang lalu	Amerika Serikat	Philadelphia	Internet Explorer	jendela	Desktop	Gabung
7 September 2018 @ 22:03	Latvia	Riga	Safari	iOS	seluler	pengaturan ulang kata sandi
2 September 2018 @ 14:12	Amerika Serikat	Bergen Utara	Firefox	OS X	Desktop	keluar
2 September 2018 @ 12:33 malam	tidak ada	tidak ada	Chrome	jendela	Desktop	gagal masuk

Lihatlah meja lama sekali lagi untuk melihat betapa mengerikannya itu. Ingatlah – desainnya tetap sama! Kami tidak menyesuaikan font, warna, atau visual apa pun – hanya data! Apalagi, dengan hampir beberapa baris kode.

Apa yang telah kita pelajari?

Kami belajar bahwa GUI "dirancang oleh pengembang" kami seringkali tidak menyenangkan untuk dilihat atau digunakan. Semua kerja keras dan hebat lainnya yang kami lakukan sia-sia jika, pada pandangan pertama, aplikasi kami terlihat seperti sampah. Meskipun saya jauh dari seorang desainer dan tidak dapat memberi Anda petunjuk apa pun tentang mendesain GUI, selama bertahun-tahun, saya telah belajar bagaimana membuat data yang membosankan terlihat menarik dan lebih ramah pengguna. Geolokasi IP, Peramban Mana, dan alat serupa dapat membantu Anda menonjol dari yang lain hanya dengan beberapa baris kode. Jadi, gunakan mereka!