Usa GeoIP per trasformare i dati noiosi in una migliore esperienza utente

Le persone sono creature visive. A loro piace vedere cose carine (che vanno oltre i video di gatti). Non lo dico probabilmente o perché mi piace! È un fatto duro, freddo. Abbinalo a una capacità di attenzione sempre minore e stai certo che la tua applicazione viene giudicata dall'aspetto (nei primi 3 secondi) piuttosto che dalle caratteristiche o dalla qualità. Se sei uno sviluppatore che non può permettersi di pagare per un design GUI personalizzato per un'app, questo è particolarmente devastante. Non importa quanto sia buona, veloce o innovativa la tua app se sembra che sia stata "progettata da uno sviluppatore", le persone non le daranno nemmeno una possibilità. Per fortuna ci sono modi per aggirare questo problema.

L'utilizzo di un modello di amministrazione open source collaudato è senza dubbio un buon inizio. Buono quanto l'utilizzo di servizi di annotazione dei dati affidabili. Un altro trucco meno noto è trasformare dati noiosi come gli indirizzi IP e l'identificatore dell'agente utente del browser in dati molto più interessanti che non solo possono fornire più informazioni all'utente, ma anche renderlo divertente e bello. La cosa migliore è che è una funzionalità gratuita e semplice da aggiungere a qualsiasi app.

Il modo standard, noioso e brutto

Invece di perdere tempo in teoria e in situazioni inventate, ci immergeremo in uno scenario familiare a quasi tutte le app Web, visualizzando i dati del registro delle azioni dell'utente in una tabella. Sebbene i dati effettivi differiscano da sistema a sistema, alcuni campi sono comuni e includono l'indirizzo IP, il timestamp e la stringa dell'agente utente. La semplice visualizzazione di dati grezzi in una tabella si traduce in una brutta catastrofe che nessuno vuole guardare, per non parlare di usarla ogni giorno. Sembra qualcosa come la tabella qui sotto. Design stesso a parte; i dati sono inutilizzabili perché non sono modificati e formattati per gli esseri umani. Ad esempio, gli indirizzi IP non sono qualcosa che le persone ricordano spesso. Questo è uno dei motivi principali per cui utilizziamo i nomi di dominio. Mostrare un IP in una tabella dell'utente finale come questa è quasi inutile.

Per coloro che non vedono l'ora, consulta la tabella nuova e migliorata.

Alcuni aggiustamenti fanno molto

Innanzitutto, perdi la colonna ID. Perché qualcuno dovrebbe aver bisogno del tuo ID record del database interno? È un dato assolutamente inutile per i tuoi utenti. Occupa spazio prezioso sullo schermo e distoglie l'attenzione da informazioni importanti.

Il timestamp, nel suo formato MySQL timestamp, è leggibile dall'uomo, ma è tutt'altro che facile da usare. Le cose sono ancora peggio se lo conservi e lo visualizzi come timestamp UNIX. Allora è illeggibile al 100%. Utenti diversi (di solito in base alla loro posizione) preferiscono una diversa formattazione di ora, data, valute e dati numerici. Queste differenze sono sottili ma dovrebbero essere rispettate. Gli utenti lo apprezzano. Anche l'età dell'evento è importante. Per quelli nuovi, è conveniente mostrare descrizioni come "10 minuti fa", a significare che si tratta di un evento recente, non è necessario mostrare il timestamp completo. Mentre per i più vecchi mostriamo l'ora e la data formattate localmente.

Per fortuna WordPress ha funzioni integrate per gestire tutto. Usando il formato di data e ora impostato in WP admin – Settings – General regoleremo il timestamp per adattarlo alla formattazione del resto del sito e usando la funzione human_time_diff() lo renderemo facile da usare. Il codice seguente presuppone che tu abbia il timestamp in un formato MySQL, ma se lo hai in un timestamp UNIX rimuovi la prima riga.

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

Se vuoi mostrare il formato "differenza umana" per date più vecchie di un giorno, moltiplica la costante DAY_IN_SECOND per il numero di giorni desiderato.

Utilizzo di dati IP noiosi per ottenere un effetto "wow" con GeoIP

Numerosi servizi trasformano gli IP in dati geografici leggibili dall'uomo (ecco 20 servizi geoIP a confronto se vuoi esplorare) che includono paese, stato, città, fuso orario, informazioni sulla valuta e dettagli dell'ISP. Rientrano tutti in due categorie: API remote e database scaricabili. A causa delle modifiche giornaliere ai dati geoIP, per la maggior parte dei progetti, l'API è una scelta molto migliore. I servizi variano per prezzo, facilità d'uso e precisione dei dati restituiti. Dopo anni di utilizzo di vari servizi, per gli ultimi due ho utilizzato la geolocalizzazione IP. Per i progetti più piccoli con un massimo di 50.000 richieste API al mese, il servizio è completamente gratuito. Un'ottima offerta senza rischi per qualsiasi progetto e soprattutto per i test.

Usare l'API è facile. Registrati per un account (non sono necessarie carte di credito o sciocchezze simili), prendi la tua chiave API dalla pagina dell'account e chiama semplicemente l'URL API con l'IP e la chiave API per ottenere risultati. Nel codice (specifico per WordPress), assomiglia al codice qui sotto. Se non stai utilizzando PHP, sono disponibili sei SDK per la geolocalizzazione IP, quindi troverai qualcosa che si adatta al tuo progetto. Offrono anche un database scaricabile per progetti più grandi; contattarli per i dettagli.

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

L'API restituisce ben 26 informazioni basate sull'IP: testalo con il tuo IP. Visualizzare tutto ciò sarebbe troppo, quindi di solito opto per il nome del paese, la bandiera del paese e la città. Sono sufficienti i dati e la bandiera aggiunge un bel tocco visivo. La richiesta restituisce solo queste tre variabili, per risparmiare un po' di banda. Se hai bisogno di tutti i campi, lascia vuota la chiave dell'array dei fields in $params . L'immagine delle bandiere del paese può essere collegata direttamente dalla geolocalizzazione IP, il che è abbastanza conveniente. Per gli IP locali, non puoi mostrare molto, quindi assicurati di tenere conto di quello scenario. Otterrai un WP_Error con codice di risposta 423 in caso di IP locale.

La stringa dell'agente utente nasconde una grande quantità di dati

La stringa user-agent è enorme e non pensata per il consumo umano diretto. Nessun essere umano sano di mente ha bisogno né vuole tutti i dati mostrati in quel pasticcio. Abbiamo bisogno del tipo di dispositivo utilizzato: computer desktop, telefono o qualcosa di intermedio. Quindi il sistema operativo: Windows, Mac o qualsiasi altra cosa; e magari il browser utilizzato: Chrome, Safari, Internet Explorer e Firefox. Ciò conferisce ai dati una maggiore struttura e li separa in tre ulteriori informazioni utili per il filtraggio e la segmentazione.

Sono un grande sostenitore dell'uso di cose fatte da altre persone (più intelligenti di me). Pertanto utilizzeremo una libreria pronta per l'uso, testata in battaglia e ben mantenuta per l'analisi della stringa dell'agente utente. Vai su WhichBrowser su GitHub per prendere la versione PHP. A seconda della configurazione dell'ambiente PHP, puoi installarlo come pacchetto Composer – le istruzioni sono sul link sopra, o come pezzo autonomo di PHP. Nel caso in cui ti trovi nel secondo gruppo includi il file bootstrap.php e sarai pronto per partire.

Poiché il timestamp e il miglioramento dell'IP, la quantità di codice di cui abbiamo bisogno è minima, WhichBrowser gestisce il lavoro pesante.

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

Passa la stringa user-agent salvata alla funzione wpr_get_browser_info() e otterrai il nome del sistema operativo, il nome del browser e il tipo di dispositivo. Inseriscilo nella tabella al posto della stringa dell'agente utente non elaborato.

Il nuovo e migliorato tavolo

Ecco la nostra nuova tavola. Abbiamo lavorato con gli stessi dati, ma li abbiamo formattati ed elaborati correttamente, per gli esseri umani!

Timestamp	Paese	Città	Browser	Sistema operativo	Dispositivo	Azione
20 minuti fa	Germania	Berlino	Firefox	Ubuntu	desktop	Accedere
14 ore fa	Stati Uniti d'America	Filadelfia	Internet Explorer	finestre	desktop	Accedere
7 settembre 2018, ore 22:03	Lettonia	Riga	Safari	iOS	mobile	reimpostazione della password
2 settembre 2018 @ 14:12	Stati Uniti d'America	Bergen del nord	Firefox	OS X	desktop	disconnettersi
2 settembre 2018, ore 12:33	n / a	n / a	Cromo	finestre	desktop	accesso fallito

Dai un'occhiata al vecchio tavolo ancora una volta per vedere quanto fosse orribile. Tieni a mente: il design è rimasto lo stesso! Non abbiamo modificato il carattere, i colori o qualsiasi cosa visiva, solo i dati! Inoltre, con poche righe di codice.

Cosa abbiamo imparato?

Abbiamo appreso che le nostre GUI "progettate dallo sviluppatore" spesso non sono divertenti da guardare o utilizzare. Tutto l'altro grande e duro lavoro che abbiamo fatto è inutile se, a prima vista, la nostra app sembra una schifezza. Anche se sono lontano da un designer e non posso darti indicazioni sulla progettazione di una GUI, nel corso degli anni ho imparato come rendere i dati noiosi interessanti e più facili da usare. Geolocalizzazione IP, WhichBrowser e strumenti simili possono aiutarti a distinguerti dalla massa con poche righe di codice. Quindi, usali!