Utilizați GeoIP pentru a transforma datele plictisitoare într-o experiență de utilizator mai bună

Oamenii sunt creaturi vizuale. Le place să vadă lucruri frumoase (care merg dincolo de videoclipurile cu pisici). Nu spun asta probabil sau pentru că îmi place! Este un fapt greu, rece. Combinați-l cu o atenție din ce în ce mai scăzută și fiți siguri că aplicația dvs. este judecată după aspect (în primele 3 secunde) și nu după caracteristici sau calitate. Dacă sunteți un dezvoltator care nu își permite să plătească pentru un design GUI personalizat pentru o aplicație, acest lucru este deosebit de devastator. Indiferent cât de bună, rapidă sau inovatoare este aplicația ta dacă pare că a fost „proiectată de un dezvoltator”, oamenii nici măcar nu-i vor da o șansă. Din fericire, există modalități de a rezolva această problemă.

Folosirea unui șablon de administrator open-source încercat și testat este, fără îndoială, un început bun. La fel de bun ca și folosirea unor servicii fiabile de adnotare a datelor. Un alt truc mai puțin cunoscut este de a transforma datele plictisitoare, cum ar fi adresele IP și identificatorul de agent de utilizator al browserului, în date mult mai interesante, care nu numai că pot oferi mai multe informații utilizatorului, dar le pot face și distractive și arătoase. Cel mai bun lucru este că este o funcție gratuită și simplă de adăugat la orice aplicație.

Modul standard, plictisitor și urât

În loc să pierdem timpul cu teorie și situații inventate, ne vom scufunda într-un scenariu familiar aproape tuturor aplicațiilor web - afișând datele din jurnalul de acțiuni ale utilizatorului într-un tabel. În timp ce datele reale diferă de la sistem la sistem, unele câmpuri sunt comune, iar acestea includ adresa IP, marca temporală și șirul user-agent. Doar afișarea acestor date brute într-un tabel are ca rezultat o catastrofie urâtă la care nimeni nu vrea să se uite, cu atât mai puțin să o folosească în fiecare zi. Arată ceva ca tabelul de mai jos. Proiectează-te în sine; datele sunt inutilizabile deoarece nu sunt ajustate și formatate pentru oameni. De exemplu, adresele IP nu sunt ceva ce oamenii își amintesc adesea. Acesta este unul dintre motivele principale pentru care folosim nume de domenii. Afișarea unui IP într-un tabel de utilizator final ca acesta este inutilă.

Pentru cei care abia așteaptă – vezi tabelul nou și îmbunătățit.

Câteva ajustări fac un drum lung

În primul rând, pierdeți coloana ID. De ce ar avea cineva nevoie de ID-ul de înregistrare a bazei de date interne? Este o bucată de date complet inutilă pentru utilizatorii dvs. Ocupă spațiu prețios pe ecran și atrage atenția de la informațiile importante.

Marca de timp, în formatul său de marcaj de timp MySQL, poate fi citită de om, dar este departe de a fi ușor de utilizat. Lucrurile sunt și mai rele dacă îl păstrați și afișați ca marcaj temporal UNIX. Atunci este 100% ilizibil. Utilizatori diferiți (de obicei în funcție de locația lor) preferă formatare diferită a orei, datei, monedelor și datelor numerice. Aceste diferențe sunt subtile, dar trebuie respectate. Utilizatorii apreciază. Vârsta evenimentului este, de asemenea, importantă. Pentru cele proaspete, este convenabil să afișați descrieri precum „acum 10 minute”, ceea ce înseamnă că este un eveniment recent – ​​nu este nevoie să afișați marcajul de timp complet. În timp ce pentru cei mai în vârstă arătăm ora și data complet formatate local.

Din fericire, WordPress are funcții încorporate pentru a face față tuturor. Utilizând formatul de dată și oră setat în WP admin – Setări – General, vom ajusta marca temporală pentru a se potrivi cu formatarea restului site-ului și, folosind funcția human_time_diff() , îl vom face ușor de utilizat. Următorul cod presupune că aveți marcajul de timp într-un format MySQL, dar dacă îl aveți într-un marcaj de timp UNIX, eliminați prima linie.

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

Dacă doriți să afișați formatul „diferență umană” pentru datele mai vechi de o zi, înmulțiți constanta DAY_IN_SECOND cu numărul dorit de zile.

Folosind date IP plictisitoare pentru a obține un efect „wow” cu GeoIP

Numeroase servicii transformă IP-urile în date geografice care pot fi citite de om (iată 20 de servicii geoIP în comparație dacă doriți să explorați) care includ țara, statul, orașul, fusul orar, informațiile despre monedă și detaliile ISP. Toate se încadrează în două categorii – API-uri la distanță și baze de date descărcabile. Din cauza modificărilor zilnice ale datelor geoIP, pentru majoritatea proiectelor, API-ul este o alegere mult mai bună. Serviciile variază în ceea ce privește prețul, ușurința de utilizare și precizia datelor returnate. După ani în care am folosit diverse servicii, în ultimele două, folosesc IP Geolocation. Pentru proiecte mai mici cu până la 50.000 de solicitări API pe lună, serviciul este complet gratuit. O ofertă grozavă, fără riscuri, pentru orice proiect și mai ales pentru testare.

Utilizarea API-ului este ușoară. Înregistrați-vă pentru un cont (nu este nevoie de card de credit sau de prostii similare), luați cheia API din pagina contului și doar apelați adresa URL API cu IP-ul și cheia API pentru a obține rezultate. În cod (specific WordPress), arată ceva ca codul de mai jos. Dacă nu utilizați PHP, există șase SDK-uri disponibile pentru Geolocalizare IP, așa că veți găsi ceva care se potrivește proiectului dvs. De asemenea, oferă o bază de date descărcabilă pentru proiecte mai mari; contactați-i pentru detalii.

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-ul returnează 26 de informații bazate pe IP - testați-l cu IP-ul dvs. Afișarea tuturor acestor lucruri ar fi prea mult, așa că de obicei optez pentru numele țării, steagul țării și orașul. Sunt suficiente date și flag adaugă o notă vizuală plăcută. Solicitarea returnează doar acele trei variabile, pentru a economisi o anumită lățime de bandă. Dacă aveți nevoie de toate câmpurile, lăsați cheia matricei fields din $params goală. Imaginea steagurilor de țară poate fi conectată direct de la Geolocalizare IP, ceea ce este destul de convenabil. Pentru IP-urile locale, nu puteți afișa multe, așa că asigurați-vă că luați în considerare acel scenariu. Veți primi un WP_Error cu codul de răspuns 423 în cazul unui IP local.

Șirul user-agent ascunde o mulțime de date

Șirul user-agent este imens și nu este destinat consumului uman direct. Niciun om sănătos nu are nevoie și nici nu vrea toate datele afișate în acea mizerie. Avem nevoie de tipul de dispozitiv folosit – computer desktop, telefon sau ceva între ele. Apoi sistemul de operare – Windows, Mac sau orice altceva; și poate browserul folosit: Chrome, Safari, Internet Explorer și Firefox. Acest lucru oferă datelor mai multă structură și le separă în trei informații suplimentare utile pentru filtrare și segmentare.

Sunt un mare susținător al folosirii lucrurilor făcute de alți oameni (mai deștepți decât mine). Prin urmare, vom folosi o bibliotecă gata de utilizare, testată de luptă și bine întreținută pentru a analiza șirul user-agent. Mergeți la WhichBrowser pe GitHub pentru a prelua versiunea PHP. În funcție de configurarea mediului PHP, îl puteți instala fie ca pachet Composer – instrucțiunile sunt pe linkul de mai sus, fie ca o bucată de sine stătătoare a PHP. În cazul în care vă aflați în al doilea grup, includeți fișierul bootstrap.php și veți fi gata de plecare.

Pe măsură ce am îmbunătățit marca temporală și IP, cantitatea de cod de care avem nevoie este minimă, WhichBrowser se ocupă de sarcinile grele.

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

Transmiteți șirul user-agent salvat la funcția wpr_get_browser_info() și veți primi înapoi numele sistemului de operare, numele browserului și tipul dispozitivului. Puneți-l în tabel în locul șirului brut user-agent.

Tabelul nou și îmbunătățit

Iată noua noastră masă. Am lucrat cu aceleași date, dar le-am formatat și procesat corespunzător – pentru oameni!

Timestamp-ul	Țară	Oraș	Browser	OS	Dispozitiv	Acțiune
acum 20 de minute	Germania	Berlin	Firefox	Ubuntu	desktop	Autentificare
acum 14 ore	STATELE UNITE ALE AMERICII	Philadelphia	Internet Explorer	Windows	desktop	Autentificare
7 septembrie 2018, ora 22:03	Letonia	Riga	Safari	iOS	mobil	resetare parola
2 septembrie 2018, ora 14:12	STATELE UNITE ALE AMERICII	North Bergen	Firefox	OS X	desktop	deconectare
2 septembrie 2018, ora 12:33	N / A	N / A	Crom	Windows	desktop	autentificare eșuată

Mai aruncă o privire la vechea masă pentru a vedea cât de îngrozitor a fost. Rețineți - designul a rămas același! Nu am ajustat fontul, culorile sau nimic vizual - doar datele! Mai mult, cu abia câteva linii de cod.

Ce am învățat?

Am aflat că GUI-urile noastre „proiectate de dezvoltator” nu sunt adesea distractive de privit sau de utilizat. Toate celelalte lucrări grozave și grele pe care le depunem sunt zadarnice dacă, la prima vedere, aplicația noastră arată ca o prostie. Deși sunt departe de a fi un designer și nu vă pot oferi indicații despre proiectarea unei GUI, de-a lungul anilor, am învățat cum să fac ca datele plictisitoare să pară interesante și mai ușor de utilizat. Geolocalizarea IP, WhichBrowser și instrumente similare vă pot ajuta să vă evidențiați din mulțime cu doar câteva linii de cod. Deci, folosește-le!