Use GeoIP para transformar datos aburridos en una mejor experiencia de usuario

Las personas son criaturas visuales. Les gusta ver cosas bonitas (que van más allá de los videos de gatos). ¡No digo esto probablemente o porque lo disfruto! Es un hecho duro y frío. Combínelo con un período de atención cada vez menor y tenga la seguridad de que su aplicación se juzga por la apariencia (en los primeros 3 segundos) en lugar de por las características o la calidad. Si es un desarrollador que no puede permitirse pagar un diseño de GUI personalizado para una aplicación, esto es especialmente devastador. No importa cuán buena, rápida o innovadora sea su aplicación, si parece que fue "diseñada por un desarrollador", la gente ni siquiera le dará una oportunidad. Afortunadamente, hay formas de evitar este problema.

El uso de una plantilla de administrador de código abierto probada y comprobada es, sin duda, un buen comienzo. Tan bueno como usar servicios confiables de anotación de datos. Otro truco menos conocido es convertir datos aburridos, como las direcciones IP y el identificador del agente de usuario del navegador, en datos mucho más interesantes que no solo pueden proporcionar más información al usuario, sino que también lo hacen divertido y atractivo. Lo mejor es que es una función gratuita y sencilla para agregar a cualquier aplicación.

La forma estándar, aburrida y fea

En lugar de perder el tiempo con la teoría y las situaciones inventadas, nos sumergiremos en un escenario familiar para casi todas las aplicaciones web: mostrar los datos del registro de acciones del usuario en una tabla. Si bien los datos reales difieren de un sistema a otro, algunos campos son comunes y estos incluyen la dirección IP, la marca de tiempo y la cadena de agente de usuario. Simplemente mostrar esos datos sin procesar en una tabla da como resultado una fea catástrofe que nadie quiere ver, y mucho menos usar todos los días. Se parece a la tabla de abajo. Diseño en sí mismo a un lado; los datos no se pueden usar porque no están ajustados ni formateados para humanos. Por ejemplo, las direcciones IP no son algo que la gente recuerde con frecuencia. Esa es una de las principales razones por las que usamos nombres de dominio. Mostrar una IP en una tabla de usuario final como esta es casi inútil.

Para aquellos que no pueden esperar, vean la tabla nueva y mejorada.

Unos pocos ajustes recorren un largo camino

Primero, pierda la columna ID. ¿Por qué alguien necesitaría su ID de registro de base de datos interna? Es un dato completamente inútil para sus usuarios. Ocupa un valioso espacio en la pantalla y desvía la atención de la información importante.

La marca de tiempo, en su formato de marca de tiempo MySQL, es legible por humanos, pero está lejos de ser fácil de usar. Las cosas son aún peores si lo mantiene y lo muestra como una marca de tiempo UNIX. Entonces es 100% ilegible. Diferentes usuarios (generalmente en función de su ubicación) prefieren diferentes formatos de hora, fecha, monedas y datos numéricos. Esas diferencias son sutiles pero deben ser respetadas. Los usuarios lo agradecen. La edad del evento también es importante. Para los nuevos, es conveniente mostrar descripciones como "hace 10 minutos", lo que significa que es un evento reciente, no es necesario mostrar la marca de tiempo completa. Mientras que para los más antiguos, mostramos la hora y la fecha completas con formato local.

Afortunadamente, WordPress tiene funciones integradas para manejar todo. Al usar el formato de fecha y hora establecido en WP admin – Configuración – General, ajustaremos la marca de tiempo para que se ajuste al formato del resto del sitio y al usar la función human_time_diff() lo haremos fácil de usar. El siguiente código asume que tiene la marca de tiempo en un formato MySQL, pero si la tiene en una marca de tiempo UNIX, elimine la primera línea.

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 desea mostrar el formato de "diferencia humana" para fechas anteriores a un día, multiplique la constante DAY_IN_SECOND con el número de días deseado.

Uso de datos de IP aburridos para lograr un efecto "wow" con GeoIP

Numerosos servicios transforman IP en datos geográficos legibles por humanos (aquí hay 20 servicios geoIP comparados si desea explorar) que incluyen país, estado, ciudad, zona horaria, información de moneda y detalles de ISP. Todos se dividen en dos categorías: API remotas y bases de datos descargables. Debido a los cambios diarios en los datos de geoIP, para la mayoría de los proyectos, la API es una opción mucho mejor. Los servicios varían en precio, facilidad de uso y precisión de los datos devueltos. Después de años de usar varios servicios, durante los últimos dos he estado usando Geolocalización IP. Para proyectos más pequeños con hasta 50 000 solicitudes de API por mes, el servicio es completamente gratuito. Una gran oferta sin riesgos para cualquier proyecto y especialmente para pruebas.

Usar la API es fácil. Regístrese para obtener una cuenta (no se necesita tarjeta de crédito ni tonterías similares), tome su clave API de la página de la cuenta y simplemente llame a la URL API con la IP y la clave API para obtener resultados. En el código (específico de WordPress), se parece al siguiente código. Si no está utilizando PHP, hay seis SDK disponibles para la geolocalización de IP, por lo que encontrará algo que se adapte a su proyecto. También ofrecen una base de datos descargable para proyectos más grandes; póngase en contacto con ellos para más detalles.

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

La API devuelve la friolera de 26 piezas de información basadas en la IP: pruébalo con tu IP. Mostrar todo eso sería demasiado, por lo que generalmente opto por el nombre del país, la bandera del país y la ciudad. Son suficientes datos y la bandera agrega un buen toque visual. La solicitud devuelve solo esas tres variables, para ahorrar algo de ancho de banda. Si necesita todos los campos, simplemente deje la clave de matriz de fields en $params vacía. La imagen de las banderas de los países se puede vincular directamente desde la geolocalización de IP, lo cual es bastante conveniente. Para las direcciones IP locales, no puede mostrar mucho, así que asegúrese de tener en cuenta ese escenario. Obtendrá un WP_Error con el código de respuesta 423 en el caso de una IP local.

La cadena de agente de usuario oculta una gran cantidad de datos

La cadena de agentes de usuario es enorme y no está destinada al consumo humano directo. Ningún ser humano cuerdo necesita ni quiere todos los datos que se muestran en ese lío. Necesitamos el tipo de dispositivo utilizado: computadora de escritorio, teléfono o algo intermedio. Luego, el sistema operativo: Windows, Mac o todo lo demás; y tal vez el navegador utilizado: Chrome, Safari, Internet Explorer y Firefox. Eso le da más estructura a los datos y los separa en tres piezas adicionales de información útiles para filtrar y segmentar.

Soy un gran defensor de usar cosas que otras personas (más inteligentes que yo) hicieron. Por lo tanto, usaremos una biblioteca lista para usar, probada en batalla y bien mantenida para analizar la cadena de agente de usuario. Dirígete a WhichBrowser en GitHub para obtener la versión de PHP. Dependiendo de la configuración de su entorno PHP, puede instalarlo como un paquete Composer (las instrucciones se encuentran en el enlace anterior) o como una pieza independiente de PHP. En caso de que esté en el segundo grupo, incluya el archivo bootstrap.php y estará listo para comenzar.

A medida que mejoramos la marca de tiempo y la IP, la cantidad de código que necesitamos es mínima, WhichBrowser se encarga del trabajo pesado.

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

Pase la cadena de agente de usuario guardada a la función wpr_get_browser_info() y obtendrá el nombre del sistema operativo, el nombre del navegador y el tipo de dispositivo. Póngalo en la tabla en lugar de la cadena de agente de usuario sin formato.

La mesa nueva y mejorada

He aquí nuestra nueva mesa. Trabajamos con los mismos datos, pero los formateamos y procesamos correctamente, ¡para humanos!

marca de tiempo	País	Ciudad	Navegador	sistema operativo	Dispositivo	Acción
Hace 20 minutos	Alemania	Berlina	Firefox	ubuntu	escritorio	acceso
hace 14 horas	Estados Unidos	Filadelfia	explorador de Internet	ventanas	escritorio	acceso
7 de septiembre de 2018 a las 22:03	letonia	riga	Safari	iOS	móvil	restablecimiento de contraseña
2 de septiembre de 2018 a las 14:12	Estados Unidos	Bergen del norte	Firefox	sistema operativo X	escritorio	cerrar sesión
2 de septiembre de 2018 a las 12:33	n / A	n / A	Cromo	ventanas	escritorio	inicio de sesión fallido

Eche un vistazo a la vieja mesa una vez más para ver lo horrible que era. Tenga en cuenta: ¡el diseño se mantuvo igual! No ajustamos la fuente, los colores ni nada visual, ¡solo los datos! Además, con apenas unas pocas líneas de código.

¿Qué hemos aprendido?

Aprendimos que nuestras GUI "diseñadas por desarrolladores" a menudo no son divertidas de ver o usar. Todos los demás grandes y duros trabajos que realizamos son inútiles si, a primera vista, nuestra aplicación parece una mierda. Si bien estoy lejos de ser un diseñador y no puedo darle ningún consejo sobre el diseño de una GUI, a lo largo de los años, he aprendido cómo hacer que los datos aburridos parezcan interesantes y más fáciles de usar. La geolocalización de IP, WhichBrowser y herramientas similares pueden ayudarlo a destacarse entre la multitud con solo unas pocas líneas de código. Entonces, ¡úsalos!