Użyj GeoIP, aby przekształcić nudne dane w lepsze wrażenia użytkownika

Ludzie są wizualnymi stworzeniami. Lubią oglądać ładne rzeczy (które wykraczają poza filmy z kotami). Nie mówię tego prawdopodobnie lub dlatego, że to lubię! To twardy, zimny fakt. Połącz go z coraz mniejszą koncentracją i miej pewność, że Twoja aplikacja jest oceniana na podstawie wyglądu (w ciągu pierwszych 3 sekund), a nie funkcji lub jakości. Jeśli jesteś programistą, którego nie stać na opłacenie niestandardowego projektu GUI dla aplikacji, jest to szczególnie dewastujące. Bez względu na to, jak dobra, szybka lub innowacyjna jest Twoja aplikacja, jeśli wygląda na to, że została „zaprojektowana przez programistę”, ludzie nawet nie dadzą jej szansy. Na szczęście istnieją sposoby na obejście tego problemu.

Korzystanie ze sprawdzonego i przetestowanego szablonu administratora o otwartym kodzie źródłowym jest niewątpliwie dobrym początkiem. Tak samo dobre, jak korzystanie z niezawodnych usług adnotacji danych. Inną mniej znaną sztuczką jest przekształcenie nudnych danych, takich jak adresy IP i identyfikator klienta użytkownika przeglądarki, w znacznie bardziej interesujące dane, które mogą nie tylko dostarczyć użytkownikowi więcej informacji, ale także sprawić, że będzie to zabawne i atrakcyjne. Najlepsze jest to, że jest to bezpłatna i prosta funkcja, którą można dodać do dowolnej aplikacji.

Standardowy, nudny i brzydki sposób

Zamiast marnować czas na teorię i wymyślane sytuacje, zanurzymy się w scenariuszu znanym prawie wszystkim aplikacjom internetowym – wyświetlając dane dziennika działań użytkownika w tabeli. Chociaż rzeczywiste dane różnią się w zależności od systemu, niektóre pola są wspólne, w tym adres IP, znacznik czasu i ciąg agenta użytkownika. Samo wyświetlenie tych surowych danych w tabeli skutkuje brzydką katastrofą, na którą nikt nie chce patrzeć, nie mówiąc już o używaniu jej na co dzień. Wygląda podobnie do poniższej tabeli. Zaprojektuj się na bok; dane są bezużyteczne, ponieważ nie są dostosowane i sformatowane dla ludzi. Na przykład adresy IP nie są czymś, o czym ludzie często pamiętają. To jeden z głównych powodów, dla których używamy nazw domen. Pokazywanie adresu IP w takiej tabeli użytkownika końcowego jest bezużyteczne.

Dla tych, którzy nie mogą się doczekać – zobacz nowy i ulepszony stół.

Kilka korekt to długa droga

Najpierw zgub kolumnę ID. Dlaczego ktoś miałby potrzebować twojego wewnętrznego identyfikatora rekordu bazy danych? To kompletnie bezużyteczna część danych dla Twoich użytkowników. Zajmuje cenną powierzchnię ekranu i odwraca uwagę od ważnych informacji.

Znacznik czasu w formacie znacznika czasu MySQL jest czytelny dla człowieka, ale nie jest przyjazny dla użytkownika. Sprawy mają się jeszcze gorzej, jeśli zachowujesz i wyświetlasz go jako znacznik czasu UNIX. Wtedy jest w 100% nieczytelny. Różni użytkownicy (zazwyczaj na podstawie ich lokalizacji) preferują różne formatowanie czasu, daty, walut i danych liczbowych. Te różnice są subtelne, ale należy je uszanować. Użytkownicy to doceniają. Ważny jest również wiek imprezy. W przypadku świeżych wygodnie jest wyświetlać opisy, takie jak „10 minut temu”, co oznacza, że ​​jest to niedawne wydarzenie – nie trzeba pokazywać pełnego znacznika czasu. Podczas gdy dla starszych pokazujemy pełny lokalnie sformatowany czas i datę.

Na szczęście WordPress ma wbudowane funkcje, które radzą sobie ze wszystkim. Korzystając z formatu daty i godziny ustawionego w WP admin – Ustawienia – Ogólne, dostosujemy znacznik czasu do formatowania reszty witryny, a za pomocą funkcji human_time_diff() uczynimy ją przyjazną dla użytkownika. Poniższy kod zakłada, że ​​masz znacznik czasu w formacie MySQL, ale jeśli masz go w znaczniku czasu UNIX, usuń pierwszy wiersz.

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

Jeśli chcesz wyświetlić format „różnicy między ludźmi” dla dat starszych niż jeden dzień, pomnóż stałą DAY_IN_SECOND przez żądaną liczbę dni.

Używanie nudnych danych IP do uzyskania efektu „wow” z GeoIP

Liczne usługi przekształcają adresy IP w czytelne dla człowieka dane geograficzne (oto 20 usług geoIP w porównaniu, jeśli chcesz je zbadać), które obejmują kraj, stan, miasto, strefę czasową, informacje o walucie i dane dostawcy usług internetowych. Wszystkie dzielą się na dwie kategorie – zdalne interfejsy API i bazy danych do pobrania. Ze względu na codzienne zmiany danych geoIP, w przypadku większości projektów, API jest znacznie lepszym wyborem. Usługi różnią się ceną, łatwością obsługi i precyzją zwracanych danych. Po latach korzystania z różnych usług, od dwóch ostatnich korzystam z geolokalizacji IP. W przypadku mniejszych projektów do 50 000 żądań API miesięcznie usługa jest całkowicie bezpłatna. Świetna, pozbawiona ryzyka oferta dla każdego projektu, a zwłaszcza do testowania.

Korzystanie z API jest łatwe. Zarejestruj konto (nie potrzebujesz karty kredytowej ani podobnych bzdur), pobierz klucz API ze strony konta i po prostu wywołaj adres URL API z adresem IP i kluczem API, aby uzyskać wyniki. W kodzie (specyficznym dla WordPressa) wygląda to podobnie do kodu poniżej. Jeśli nie używasz PHP, dostępnych jest sześć pakietów SDK do geolokalizacji IP, więc znajdziesz coś, co pasuje do Twojego projektu. Oferują również bazę danych do pobrania dla większych projektów; skontaktuj się z nimi, aby uzyskać szczegółowe informacje.

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 zwraca aż 26 informacji na podstawie adresu IP – przetestuj go ze swoim adresem IP. Wyświetlanie tego wszystkiego byłoby za dużo, więc zwykle wybieram nazwę kraju, flagę kraju i miasto. Wystarczy danych, a flaga dodaje ładnego wizualnego akcentu. Żądanie zwraca tylko te trzy zmienne, aby zaoszczędzić trochę przepustowości. Jeśli potrzebujesz wszystkich pól, po prostu pozostaw klucz tablicy fields w $params pusty. Obraz flag krajów może być bezpośrednio połączony z geolokalizacją IP, co jest dość wygodne. W przypadku lokalnych adresów IP nie możesz pokazać zbyt wiele, więc upewnij się, że uwzględniasz ten scenariusz. Otrzymasz WP_Error z kodem odpowiedzi 423 w przypadku lokalnego adresu IP.

Ciąg agenta użytkownika ukrywa bogactwo danych

Ciąg agenta użytkownika jest ogromny i nie jest przeznaczony do bezpośredniego spożycia przez ludzi. Żadna rozsądna ludzka potrzeba ani nie chce wszystkich danych pokazanych w tym bałaganie. Potrzebujemy rodzaju używanego urządzenia – komputer stacjonarny, telefon lub coś pomiędzy. Następnie system operacyjny – Windows, Mac lub wszystko inne; a może używana przeglądarka: Chrome, Safari, Internet Explorer i Firefox. Daje to bardziej strukturę danych i dzieli je na trzy dodatkowe informacje przydatne do filtrowania i segmentacji.

Jestem wielkim zwolennikiem używania rzeczy stworzonych przez innych ludzi (mądrzejszych ode mnie). Dlatego użyjemy gotowej do użycia, sprawdzonej w boju, dobrze utrzymanej biblioteki do parsowania ciągu agenta użytkownika. Udaj się do WhatBrowser na GitHub, aby pobrać wersję PHP. W zależności od konfiguracji środowiska PHP możesz zainstalować go jako pakiet Composer – instrukcje znajdują się w powyższym linku lub jako samodzielny fragment PHP. Jeśli jesteś w drugiej grupie, dołącz plik bootstrap.php i będziesz gotowy do pracy.

Ponieważ poprawiamy znacznik czasu i adres IP, ilość potrzebnego kodu jest minimalna, a WhatBrowser radzi sobie z dużym obciążeniem.

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

Przekaż zapisany ciąg agenta użytkownika do funkcji wpr_get_browser_info() , a otrzymasz nazwę systemu operacyjnego, nazwę przeglądarki i typ urządzenia. Umieść go w tabeli w miejscu nieprzetworzonego ciągu agenta użytkownika.

Nowa i ulepszona tabela

Oto nasz nowy stół. Pracowaliśmy z tymi samymi danymi, ale odpowiednio je sformatowaliśmy i przetworzyliśmy – dla ludzi!

Znak czasu	Kraj	Miasto	Przeglądarka	OS	Urządzenie	Akcja
20 minut temu	Niemcy	Berlin	Firefox	Ubuntu	pulpit	Zaloguj sie
14 godzin temu	USA	Filadelfia	Internet Explorer	Okna	pulpit	Zaloguj sie
7 września 2018 o 22:03	Łotwa	Ryga	Safari	iOS	mobilny	resetowania hasła
2 września 2018 o 14:12	USA	Północne Bergen	Firefox	OS X	pulpit	Wyloguj
2 września 2018 o 12:33	nie dotyczy	nie dotyczy	Chrom	Okna	pulpit	nieudane logowanie

Jeszcze raz spójrz na stary stół, aby zobaczyć, jaki był okropny. Pamiętaj – projekt pozostał taki sam! Nie zmienialiśmy czcionki, kolorów ani niczego wizualnego — tylko dane! Co więcej, z zaledwie kilkoma linijkami kodu.

Czego się nauczyliśmy?

Dowiedzieliśmy się, że nasze „zaprojektowane przez programistę” GUI często nie są zabawne w oglądaniu lub użytkowaniu. Cała inna wielka i ciężka praca, którą włożyliśmy, jest daremna, jeśli na pierwszy rzut oka nasza aplikacja wygląda jak gówno. Chociaż jestem daleko od projektanta i nie mogę dać ci żadnych wskazówek na temat projektowania GUI, przez lata nauczyłem się, jak sprawić, by nudne dane wyglądały interesująco i były bardziej przyjazne dla użytkownika. Geolokalizacja IP, WhichBrowser i podobne narzędzia mogą pomóc Ci wyróżnić się z tłumu za pomocą zaledwie kilku linijek kodu. Więc używaj ich!