Use o GeoIP para transformar dados chatos em uma melhor experiência do usuário

As pessoas são criaturas visuais. Eles gostam de ver coisas bonitas (que vão além de vídeos de gatos). Eu não estou dizendo isso provavelmente ou porque eu gosto! É um fato duro e frio. Junte-o a um tempo de atenção cada vez menor e tenha certeza de que seu aplicativo será julgado pela aparência (nos primeiros 3 segundos) e não pelos recursos ou qualidade. Se você é um desenvolvedor que não pode pagar por um design de GUI personalizado para um aplicativo, isso é especialmente devastador. Não importa o quão bom, rápido ou inovador seu aplicativo seja, se parecer que foi “projetado por um desenvolvedor”, as pessoas não darão uma chance. Felizmente, existem maneiras de contornar esse problema.

Usar um modelo de administração de código aberto testado e comprovado é, sem dúvida, um bom começo. Tão bom quanto usar serviços confiáveis ​​de anotação de dados. Outro truque menos conhecido é transformar dados sem graça, como endereços IP e identificador de agente de usuário do navegador, em dados muito mais interessantes que podem não apenas fornecer mais informações ao usuário, mas também torná-lo divertido e bonito. O melhor é que é um recurso gratuito e direto para adicionar a qualquer aplicativo.

A maneira padrão, chata e feia

Em vez de perder tempo com teoria e situações inventadas, vamos mergulhar em um cenário familiar a quase todos os aplicativos da Web – exibir dados de log de ações do usuário em uma tabela. Embora os dados reais sejam diferentes de sistema para sistema, alguns campos são comuns e incluem o endereço IP, o carimbo de data/hora e a string do agente do usuário. A mera exibição desses dados brutos em uma tabela resulta em uma catástrofe feia que ninguém quer ver, muito menos usar todos os dias. Parece algo como a tabela abaixo. Design em si de lado; os dados são inutilizáveis ​​porque não são ajustados e formatados para humanos. Por exemplo, os endereços IP não são algo que as pessoas costumam lembrar. Essa é uma das principais razões pelas quais usamos nomes de domínio. Mostrar um IP em uma tabela de usuário final como esta é inútil.

Para aqueles que não podem esperar – veja a tabela nova e melhorada.

Alguns ajustes percorrem um longo caminho

Primeiro, perca a coluna ID. Por que alguém precisaria do seu ID de registro de banco de dados interno? É um dado totalmente inútil para seus usuários. Ele ocupa um espaço precioso na tela e desvia a atenção de informações importantes.

O timestamp, em seu formato de timestamp MySQL, é legível por humanos, mas está longe de ser amigável. As coisas são ainda piores se você mantiver e exibir como um timestamp UNIX. Então é 100% ilegível. Diferentes usuários (geralmente com base em sua localização) preferem formatação diferente de hora, data, moedas e dados numéricos. Essas diferenças são sutis, mas devem ser respeitadas. Os usuários agradecem. A idade do evento também é importante. Para os novos, é conveniente mostrar descrições como “10 minutos atrás”, significando que é um evento recente – não há necessidade de mostrar o timestamp completo. Enquanto para os mais antigos, mostramos a hora e a data completas formatadas localmente.

Felizmente, o WordPress possui funções integradas para lidar com tudo. Ao usar o formato de data e hora definido no WP admin – Configurações – Geral, ajustaremos o carimbo de data e hora para caber na formatação do resto do site e, usando a função human_time_diff() , faremos com que seja fácil de usar. O código a seguir pressupõe que você tenha o carimbo de data/hora em um formato MySQL, mas se você o tiver em um carimbo de data/hora UNIX, remova a primeira linha.

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 você deseja mostrar o formato de “diferença humana” para datas anteriores a um dia, multiplique a constante DAY_IN_SECOND pelo número de dias desejado.

Usando dados IP chatos para obter um efeito “uau” com GeoIP

Inúmeros serviços transformam IPs em dados geográficos legíveis por humanos (aqui estão 20 serviços geoIP comparados, se você quiser explorar) que incluem país, estado, cidade, fuso horário, informações sobre moeda e detalhes do ISP. Todos eles se enquadram em duas categorias – APIs remotas e bancos de dados para download. Devido às mudanças diárias nos dados geoIP, para a maioria dos projetos, a API é uma escolha muito melhor. Os serviços variam em preço, facilidade de uso e precisão dos dados retornados. Depois de anos usando vários serviços, nos últimos dois, tenho usado a Geolocalização por IP. Para projetos menores com até 50.000 solicitações de API por mês, o serviço é totalmente gratuito. Uma ótima oferta sem riscos para qualquer projeto e especialmente para testes.

Usar a API é fácil. Registre-se para uma conta (não é necessário cartão de crédito ou absurdo semelhante), pegue sua chave de API na página da conta e simplesmente chame a URL da API com o IP e a chave da API para obter resultados. No código (específico do WordPress), parece algo como o código abaixo. Se você não estiver usando PHP, existem seis SDKs disponíveis para geolocalização por IP, então você encontrará algo que se adapte ao seu projeto. Eles também oferecem um banco de dados para download para projetos maiores; entre em contato com eles para obter detalhes.

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

A API retorna 26 informações com base no IP – teste-o com seu IP. Mostrar tudo isso seria demais, então costumo optar pelo nome do país, bandeira do país e cidade. São dados e sinalizadores suficientes adicionam um toque visual agradável. A solicitação retorna apenas essas três variáveis, para economizar largura de banda. Se você precisar de todos os campos, deixe a chave de matriz de fields em $params vazia. A imagem das bandeiras do país pode ser diretamente vinculada à geolocalização IP, o que é bastante conveniente. Para IPs locais, você não pode mostrar muito, portanto, certifique-se de considerar esse cenário. Você receberá um WP_Error com o código de resposta 423 no caso de um IP local.

A string do agente do usuário oculta uma grande quantidade de dados

A string user-agent é enorme e não se destina ao consumo humano direto. Nenhum humano sensato precisa nem quer todos os dados mostrados nessa bagunça. Precisamos do tipo de dispositivo usado – computador desktop, telefone ou algo intermediário. Em seguida, o sistema operacional – Windows, Mac ou tudo mais; e talvez o navegador utilizado: Chrome, Safari, Internet Explorer e Firefox. Isso dá mais estrutura aos dados e os separa em três informações adicionais úteis para filtragem e segmentação.

Eu sou um grande defensor de usar coisas que outras pessoas (mais espertas que eu) fizeram. Portanto, usaremos uma biblioteca pronta para uso, testada em batalha e bem mantida para analisar a string do agente do usuário. Vá até o WhichBrowser no GitHub para pegar a versão do PHP. Dependendo da configuração do seu ambiente PHP, você pode instalá-lo como um pacote do Composer – as instruções estão no link acima, ou como uma parte independente do PHP. Caso você esteja no segundo grupo inclua o arquivo bootstrap.php e estará pronto para começar.

À medida que melhoramos o timestamp e o IP, a quantidade de código que precisamos é mínima, o WhichBrowser lida com o trabalho 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;
}

Passe a string do user-agent salva para a função wpr_get_browser_info() e você receberá de volta o nome do SO, o nome do navegador e o tipo de dispositivo. Coloque-o na tabela no lugar da string bruta do agente do usuário.

A mesa nova e melhorada

Contemple nossa nova mesa. Trabalhamos com os mesmos dados, mas formatamos e processamos corretamente – para humanos!

Carimbo de data e hora	País	Cidade	Navegador	SO	Dispositivo	Açao
20 minutos atrás	Alemanha	Berlim	Raposa de fogo	Ubuntu	Área de Trabalho	Conecte-se
14 horas atrás	EUA	Filadélfia	Internet Explorer	janelas	Área de Trabalho	Conecte-se
7 de setembro de 2018 às 22h03	Letônia	Riga	Safári	iOS	Móvel	Redefinição de senha
2 de setembro de 2018 às 14h12	EUA	Norte de Bergen	Raposa de fogo	OS X	Área de Trabalho	sair
2 de setembro de 2018 às 12h33	n / D	n / D	cromada	janelas	Área de Trabalho	falha de login

Dê uma olhada na velha mesa mais uma vez para ver como era horrível. Tenha em mente – o design permaneceu o mesmo! Não ajustamos a fonte, as cores ou qualquer coisa visual – apenas os dados! Além disso, com apenas algumas linhas de código.

O que aprendemos?

Aprendemos que nossas GUIs “projetadas pelo desenvolvedor” geralmente não são divertidas de se ver ou usar. Todos os outros grandes e árduos trabalhos que realizamos são fúteis se, à primeira vista, nosso aplicativo parecer uma porcaria. Embora eu esteja longe de ser um designer e não possa dar dicas sobre como projetar uma GUI, ao longo dos anos, aprendi como fazer com que dados chatos pareçam interessantes e mais fáceis de usar. IP Geolocation, WhichBrowser e ferramentas semelhantes podem ajudá-lo a se destacar da multidão com apenas algumas linhas de código. Então, use-os!