Utilisez GeoIP pour transformer des données ennuyeuses en une meilleure expérience utilisateur

Les gens sont des créatures visuelles. Ils aiment voir de jolies choses (qui vont au-delà des vidéos de chats). Je ne dis pas cela probablement ou parce que j'aime ça ! C'est un fait dur et froid. Associez-le à une capacité d'attention de plus en plus réduite et soyez assuré que votre application est jugée sur son apparence (dans les 3 premières secondes) plutôt que sur ses fonctionnalités ou sa qualité. Si vous êtes un développeur qui ne peut pas se permettre de payer pour une conception d'interface graphique personnalisée pour une application, cela est particulièrement dévastateur. Peu importe la qualité, la rapidité ou l'innovation de votre application, si elle semble avoir été "conçue par un développeur", les gens ne lui donneront même pas une chance. Heureusement, il existe des moyens de contourner ce problème.

L'utilisation d'un modèle d'administration open source éprouvé est sans aucun doute un bon début. Aussi bon que d'utiliser des services d'annotation de données fiables. Une autre astuce moins connue consiste à transformer des données ennuyeuses telles que les adresses IP et l'identifiant de l'agent utilisateur du navigateur en données beaucoup plus intéressantes qui peuvent non seulement fournir plus d'informations à l'utilisateur, mais aussi les rendre amusantes et attrayantes. La meilleure chose à faire est qu'il s'agit d'une fonctionnalité gratuite et simple à ajouter à n'importe quelle application.

La manière standard, ennuyeuse et laide

Au lieu de perdre du temps sur la théorie et les situations inventées, nous plongerons dans un scénario familier à presque toutes les applications Web - afficher les données du journal des actions de l'utilisateur dans un tableau. Bien que les données réelles diffèrent d'un système à l'autre, certains champs sont communs, notamment l'adresse IP, l'horodatage et la chaîne de l'agent utilisateur. Le simple fait d'afficher ces données brutes dans un tableau entraîne une horrible catastrophe que personne ne veut regarder, et encore moins utiliser tous les jours. Cela ressemble à quelque chose comme le tableau ci-dessous. Design lui-même de côté; les données sont inutilisables car elles ne sont pas ajustées et formatées pour les humains. Par exemple, les adresses IP ne sont pas quelque chose dont les gens se souviennent souvent. C'est l'une des principales raisons pour lesquelles nous utilisons des noms de domaine. Afficher une adresse IP dans une table d'utilisateurs finaux comme celle-ci est limite inutile.

Pour ceux qui ne peuvent pas attendre, consultez le nouveau tableau amélioré.

Quelques ajustements vont un long chemin

Tout d'abord, perdez la colonne ID. Pourquoi quelqu'un aurait-il besoin de votre ID d'enregistrement de base de données interne ? C'est une donnée totalement inutile pour vos utilisateurs. Il occupe un espace précieux sur l'écran et détourne l'attention des informations importantes.

L'horodatage, dans son format d'horodatage MySQL, est lisible par l'homme, mais il est loin d'être convivial. Les choses sont encore pires si vous le conservez et l'affichez sous la forme d'un horodatage UNIX. Alors c'est 100% illisible. Différents utilisateurs (généralement en fonction de leur emplacement) préfèrent un formatage différent de l'heure, de la date, des devises et des données numériques. Ces différences sont subtiles mais doivent être respectées. Les utilisateurs l'apprécient. L'âge de l'événement est également important. Pour les nouveaux, il est pratique d'afficher des descriptions comme "il y a 10 minutes", ce qui signifie qu'il s'agit d'un événement récent - pas besoin d'afficher l'horodatage complet. Alors que pour les plus anciens, nous affichons l'heure et la date complètes au format local.

Heureusement, WordPress a des fonctions intégrées pour tout gérer. En utilisant le format de date et d'heure défini dans WP admin - Paramètres - Général, nous ajusterons l'horodatage pour l'adapter au formatage du reste du site et en utilisant la fonction human_time_diff() nous le rendrons convivial. Le code suivant suppose que vous avez l'horodatage au format MySQL, mais si vous l'avez dans un horodatage UNIX, supprimez la première ligne.

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

Si vous souhaitez afficher le format « différence humaine » pour les dates antérieures à un jour, multipliez la constante DAY_IN_SECOND par le nombre de jours souhaité.

Utiliser des données IP ennuyeuses pour obtenir un effet "wow" avec GeoIP

De nombreux services transforment les IP en données géographiques lisibles par l'homme (voici 20 services géoIP comparés si vous souhaitez explorer) qui incluent le pays, l'état, la ville, le fuseau horaire, les informations sur la devise et les détails du FAI. Ils appartiennent tous à deux catégories : les API distantes et les bases de données téléchargeables. En raison des changements quotidiens apportés aux données géoIP, pour la plupart des projets, l'API est un bien meilleur choix. Les services varient en termes de prix, de facilité d'utilisation et de précision des données renvoyées. Après des années d'utilisation de divers services, depuis deux ans, j'utilise la géolocalisation IP. Pour les petits projets avec jusqu'à 50 000 requêtes API par mois, le service est entièrement gratuit. Une excellente offre sans risque pour tout projet et en particulier pour les tests.

L'utilisation de l'API est simple. Créez un compte (pas besoin de carte de crédit ou de bêtises similaires), récupérez votre clé API sur la page du compte et appelez simplement l'URL de l'API avec l'adresse IP et la clé API pour obtenir des résultats. Dans le code (spécifique à WordPress), cela ressemble à quelque chose comme le code ci-dessous. Si vous n'utilisez pas PHP, six SDK sont disponibles pour la géolocalisation IP, vous trouverez donc quelque chose qui convient à votre projet. Ils offrent également une base de données téléchargeable pour les projets plus importants ; contactez-les pour plus de détails.

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 renvoie 26 informations basées sur l'IP - testez-les avec votre IP. Afficher tout cela serait trop, donc j'opte généralement pour le nom du pays, le drapeau du pays et la ville. C'est assez de données et le drapeau ajoute une belle touche visuelle. La requête renvoie uniquement ces trois variables, pour économiser de la bande passante. Si vous avez besoin de tous les champs, laissez simplement la clé du tableau des fields dans $params vide. L'image des drapeaux de pays peut être directement liée à partir de la géolocalisation IP, ce qui est très pratique. Pour les adresses IP locales, vous ne pouvez pas afficher grand-chose, alors assurez-vous de tenir compte de ce scénario. Vous obtiendrez un WP_Error avec le code de réponse 423 dans le cas d'une adresse IP locale.

La chaîne utilisateur-agent cache une multitude de données

La chaîne de l'agent utilisateur est énorme et n'est pas destinée à la consommation humaine directe. Aucun humain sain d'esprit n'a besoin ni ne veut de toutes les données présentées dans ce gâchis. Nous avons besoin du type d'appareil utilisé - ordinateur de bureau, téléphone ou quelque chose entre les deux. Ensuite, le système d'exploitation - Windows, Mac ou tout le reste ; et éventuellement le navigateur utilisé : Chrome, Safari, Internet Explorer et Firefox. Cela donne plus de structure aux données et les sépare en trois informations supplémentaires utiles pour le filtrage et la segmentation.

Je suis un grand partisan de l'utilisation de choses que d'autres personnes (plus intelligentes que moi) ont faites. Par conséquent, nous utiliserons une bibliothèque prête à l'emploi, testée au combat et bien entretenue pour analyser la chaîne de l'agent utilisateur. Rendez-vous sur WhichBrowser sur GitHub pour récupérer la version PHP. En fonction de la configuration de votre environnement PHP, vous pouvez soit l'installer en tant que package Composer - les instructions se trouvent sur le lien ci-dessus, soit en tant qu'élément PHP autonome. Si vous êtes dans le deuxième groupe, incluez le fichier bootstrap.php et vous serez prêt à partir.

Comme nous l'amélioration de l'horodatage et de l'adresse IP, la quantité de code dont nous avons besoin est minime, WhichBrowser gère le gros du travail.

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

Transmettez la chaîne d'agent utilisateur enregistrée à la fonction wpr_get_browser_info() et vous récupérerez le nom du système d'exploitation, le nom du navigateur et le type de périphérique. Placez-le dans le tableau à la place de la chaîne brute de l'agent utilisateur.

La nouvelle table améliorée

Voici notre nouvelle table. Nous avons travaillé avec les mêmes données, mais formatées et traitées correctement – ​​pour les humains !

Horodatage	Pays	Ville	Navigateur	SE	Appareil	Action
Il ya 20 minutes	Allemagne	Berlin	Firefox	Ubuntu	bureau	connexion
il y a 14 heures	Etats-Unis	crême Philadelphia	Internet Explorer	les fenêtres	bureau	connexion
7 septembre 2018 à 22h03	Lettonie	Riga	Safari	iOS	portable	Réinitialisation du mot de passe
2 septembre 2018 à 14h12	Etats-Unis	Nord de Bergen	Firefox	OS X	bureau	Se déconnecter
2 septembre 2018 à 12h33	n / A	n / A	Chrome	les fenêtres	bureau	échec de la connexion

Jetez un coup d'œil à l'ancienne table une fois de plus pour voir à quel point c'était horrible. Gardez à l'esprit que le design est resté le même ! Nous n'avons pas ajusté la police, les couleurs ou quoi que ce soit de visuel, juste les données ! De plus, avec à peine quelques lignes de code.

Qu'avons-nous appris ?

Nous avons appris que nos interfaces graphiques "conçues par le développeur" ne sont souvent pas amusantes à regarder ou à utiliser. Tout autre travail formidable et acharné que nous effectuons est futile si, à première vue, notre application ressemble à de la merde. Bien que je sois loin d'être un concepteur et que je ne puisse pas vous donner d'indications sur la conception d'une interface graphique, au fil des années, j'ai appris à rendre les données ennuyeuses intéressantes et plus conviviales. IP Geolocation, WhichBrowser et des outils similaires peuvent vous aider à vous démarquer de la foule avec seulement quelques lignes de code. Alors, utilisez-les !