Sıkıcı Verileri Daha İyi Bir Kullanıcı Deneyimine Dönüştürmek için GeoIP Kullanın

İnsanlar görsel yaratıklardır. Güzel şeyler görmeyi severler (kedi videolarının ötesine geçen). Bunu büyük ihtimalle ya da hoşuma gittiği için söylemiyorum! Bu zor, soğuk bir gerçek. Bunu giderek azalan bir dikkat süresi ile birleştirin ve uygulamanızın özellikler veya kaliteden ziyade görünüşe göre (ilk 3 saniyede) değerlendirildiğinden emin olun. Bir uygulama için özel bir GUI tasarımı için ödeme yapamayan bir geliştiriciyseniz, bu özellikle yıkıcıdır. Uygulamanız ne kadar iyi, hızlı veya yenilikçi olursa olsun, "bir geliştirici tarafından tasarlanmış" gibi görünüyorsa, insanlar ona bir şans bile vermez. Neyse ki bu sorunu aşmanın yolları var.

Denenmiş ve test edilmiş bir açık kaynaklı yönetici şablonu kullanmak şüphesiz iyi bir başlangıçtır. Güvenilir veri açıklama hizmetlerini kullanmak kadar iyidir. Daha az bilinen bir başka numara da, IP adresleri ve tarayıcı kullanıcı aracısı tanımlayıcısı gibi sıkıcı verileri, yalnızca kullanıcıya daha fazla bilgi sağlamakla kalmayıp aynı zamanda eğlenceli ve güzel görünen çok daha ilginç verilere dönüştürmektir. En iyi yanı, herhangi bir uygulamaya eklemek için ücretsiz ve basit bir özellik olmasıdır.

Standart, sıkıcı ve çirkin yol

Teori ve uydurulmuş durumlarla zaman kaybetmek yerine, neredeyse tüm web uygulamalarına aşina olan bir senaryoya dalacağız – kullanıcı eylem günlüğü verilerini bir tabloda görüntüleyeceğiz. Gerçek veriler sistemden sisteme farklılık gösterse de, bazı alanlar ortaktır ve bunlar arasında IP adresi, zaman damgası ve kullanıcı aracısı dizesi bulunur. Sadece bu ham verileri bir tabloda göstermek, her gün kullanmak bir yana, kimsenin bakmak bile istemediği çirkin bir felaketle sonuçlanır. Aşağıdaki tabloya benziyor. Kendini bir kenara tasarla; veriler, insanlar için ayarlanmadığı ve biçimlendirilmediği için kullanılamaz. Örneğin, IP adresleri insanların sıklıkla hatırladığı bir şey değildir. Alan adlarını kullanmamızın ana nedenlerinden biri budur. Bunun gibi bir son kullanıcı tablosunda bir IP göstermek, sınırda işe yaramaz.

Bekleyemeyenler için – yeni ve geliştirilmiş tabloya bakın.

Birkaç ayarlama uzun bir yol kat ediyor

İlk olarak, kimlik sütununu kaybedin. Neden herhangi biri sizin dahili veritabanı kaydı kimliğinize ihtiyaç duysun? Bu, kullanıcılarınız için tamamen yararsız bir veri parçasıdır. Değerli ekran gayrimenkulünü kaplar ve dikkati önemli bilgilerden uzaklaştırır.

MySQL zaman damgası biçimindeki zaman damgası, insan tarafından okunabilir, ancak kullanıcı dostu olmaktan uzaktır. UNIX zaman damgası olarak saklar ve görüntülerseniz işler daha da kötüleşir. O zaman %100 okunamıyor. Farklı kullanıcılar (genellikle konumlarına göre) farklı saat, tarih, para birimleri ve sayısal veriler biçimlendirmesini tercih eder. Bu farklar ince ama saygı duyulmalıdır. Kullanıcılar bunu takdir ediyor. Etkinliğin yaşı da önemlidir. Yeni olanlar için, "10 dakika önce" gibi açıklamaları göstermek uygundur; bu, bunun yakın tarihli bir olay olduğunu belirtir - tam zaman damgasını göstermeye gerek yoktur. Daha eski olanlar için ise yerel olarak biçimlendirilmiş tam saat ve tarihi gösteriyoruz.

Neyse ki WordPress, her şeyle başa çıkmak için yerleşik işlevlere sahiptir. WP admin – Ayarlar – Genel'de ayarlanan tarih ve saat biçimini kullanarak, zaman damgasını sitenin geri kalanının biçimlendirmesine uyacak şekilde ayarlayacağız ve human_time_diff() işlevini kullanarak onu kullanıcı dostu yapacağız. Aşağıdaki kod, MySQL biçiminde bir zaman damgasına sahip olduğunuzu varsayar, ancak bir UNIX zaman damgasında varsa, ilk satırı kaldırın.

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;
}

Bir günden eski tarihler için "insan farkı" biçimini göstermek istiyorsanız, DAY_IN_SECOND sabitini istediğiniz gün sayısıyla çarpın.

GeoIP ile “vay” efekti elde etmek için sıkıcı IP verilerini kullanma

Çok sayıda hizmet, IP'leri ülke, eyalet, şehir, saat dilimi, para birimi bilgisi ve ISP ayrıntılarını içeren insan tarafından okunabilir coğrafi verilere dönüştürür (burada keşfetmek isterseniz 20 geoIP hizmeti karşılaştırılmıştır). Hepsi iki kategoriye ayrılır - uzak API'ler ve indirilebilir veritabanları. GeoIP verilerindeki günlük değişiklikler nedeniyle, çoğu proje için API çok daha iyi bir seçimdir. Hizmetler, fiyat, kullanım kolaylığı ve iade edilen verilerin kesinliği bakımından farklılık gösterir. Yıllarca çeşitli hizmetleri kullandıktan sonra, son iki yıldır IP Geolocation kullanıyorum. Ayda 50.000'e kadar API isteği içeren daha küçük projeler için hizmet tamamen ücretsizdir. Herhangi bir proje ve özellikle test için harika, risksiz bir teklif.

API'yi kullanmak kolaydır. Bir hesaba kaydolun (kredi kartı veya benzeri bir saçmalık gerekmez), hesap sayfasından API anahtarınızı alın ve sonuçları almak için yalnızca IP ve API anahtarıyla API URL'sini arayın. Kodda (WordPress'e özgü), aşağıdaki koda benziyor. PHP kullanmıyorsanız, IP Geolocation için altı SDK mevcuttur, bu nedenle projenize uygun bir şey bulacaksınız. Ayrıca daha büyük projeler için indirilebilir bir veritabanı sunarlar; Ayrıntılar için onlarla iletişime geçin.

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, IP'ye dayalı olarak 26 parça bilgi döndürür - IP'nizle test edin. Bunların hepsini göstermek çok fazla olurdu, bu yüzden genellikle ülke adını, ülke bayrağını ve şehri seçerim. Yeterli veri ve bayrak hoş bir görsel dokunuş katıyor. İstek, bant genişliğinden tasarruf etmek için yalnızca bu üç değişkeni döndürür. Tüm alanlara ihtiyacınız varsa, $params içindeki fields dizi anahtarını boş bırakın. Ülke bayrakları görüntüsü, oldukça uygun olan IP Geolocation'dan doğrudan bağlantıya bağlanabilir. Yerel IP'ler için fazla bir şey gösteremezsiniz, bu nedenle bu senaryoyu hesaba kattığınızdan emin olun. Yerel bir IP olması durumunda yanıt kodu 423 olan bir WP_Error alırsınız.

Kullanıcı aracısı dizesi çok sayıda veriyi gizler

Kullanıcı aracısı dizisi çok büyüktür ve doğrudan insan tüketimine yönelik değildir. Aklı başında hiçbir insan bu karmaşada gösterilen tüm verilere ihtiyaç duymaz ve istemez. Kullanılan cihaz türüne ihtiyacımız var - masaüstü bilgisayar, telefon veya arada bir şey. Ardından işletim sistemi – Windows, Mac veya diğer her şey; ve belki kullanılan tarayıcı: Chrome, Safari, Internet Explorer ve Firefox. Bu, verilere daha fazla yapı kazandırır ve onu filtreleme ve segmentlere ayırma için yararlı olan üç ek bilgi parçasına ayırır.

Başkalarının (benden daha akıllı) yaptığı şeyleri kullanmanın büyük bir savunucusuyum. Bu nedenle, kullanıcı aracısı dizesini ayrıştırmak için kullanıma hazır, savaşta test edilmiş, iyi korunmuş bir kitaplık kullanacağız. PHP sürümünü almak için GitHub'da WhatBrowser'a gidin. PHP ortam kurulumunuza bağlı olarak, onu bir Composer paketi olarak kurabilirsiniz - talimatlar yukarıdaki bağlantıda veya bağımsız bir PHP parçası olarak. İkinci gruptaysanız, bootstrap.php dosyasını ekleyin ve gitmeye hazır olacaksınız.

Zaman damgası ve IP iyileştirmesi yaptığımızdan, ihtiyacımız olan kod miktarı minimumdur, HangiBrowser ağır işlerin üstesinden gelir.

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;
}

Kaydedilen kullanıcı aracısı dizesini wpr_get_browser_info() işlevine iletin ve işletim sistemi adını, tarayıcı adını ve cihaz türünü geri alırsınız. Ham kullanıcı aracısı dizesinin yerine tabloya koyun.

Yeni ve geliştirilmiş tablo

Yeni masamıza bakın. Aynı verilerle çalıştık, ancak bunları doğru şekilde biçimlendirdik ve işledik – insanlar için!

zaman damgası	Ülke	Şehir	Tarayıcı	işletim sistemi	Cihaz	Aksiyon
20 dakika önce	Almanya	Berlin	Firefox	Ubuntu	masaüstü	giriş yapmak
14 saat önce	Amerika Birleşik Devletleri	Philadelphia	Internet Explorer	pencereler	masaüstü	giriş yapmak
7 Eylül 2018 @ 22:03	Letonya	Riga	Safari	iOS	mobil	parola sıfırlama
2 Eylül 2018 @ 02:12	Amerika Birleşik Devletleri	Kuzey Bergen	Firefox	OS X	masaüstü	çıkış Yap
2 Eylül 2018 @ 12:33	n/a	n/a	Krom	pencereler	masaüstü	Başarısız oturum açma

Ne kadar korkunç olduğunu görmek için eski masaya bir kez daha bakın. Unutmayın - tasarım aynı kaldı! Yazı tipini, renkleri veya görsel herhangi bir şeyi ayarlamadık - sadece veriler! Üstelik sadece birkaç satır kodla.

Ne öğrendik?

"Geliştirici tarafından tasarlanan" GUI'lerimize bakmanın veya kullanmanın genellikle eğlenceli olmadığını öğrendik. Uygulamamız ilk bakışta saçmalık gibi görünüyorsa, harcadığımız diğer tüm büyük ve zor işler boşunadır. Bir tasarımcı olmaktan çok uzaktayım ve size bir GUI tasarlama konusunda herhangi bir ipucu veremesem de, yıllar boyunca sıkıcı verilerin nasıl ilginç ve daha kullanıcı dostu görünmesini sağlayacağımı öğrendim. IP Geolocation, WhoBrowser ve benzeri araçlar, yalnızca birkaç satır kodla kalabalığın arasından sıyrılmanıza yardımcı olabilir. Öyleyse onları kullan!