使用 GeoIP 将枯燥的数据转化为更好的用户体验

人是视觉动物。 他们喜欢看漂亮的东西（超越猫视频）。 我不是这么说的，也不是因为我喜欢它！ 这是一个冷酷的事实。 再加上不断减少的注意力，请放心，您的应用程序是通过外观（前 3 秒）而不是功能或质量来判断的。 如果您是一名开发人员，无法为应用程序的自定义 GUI 设计付费，这尤其具有破坏性。 无论您的应用程序多么出色、快速或创新，如果它看起来像是“由开发人员设计”的，人们甚至不会给它机会。 值得庆幸的是，有一些方法可以解决这个问题。

使用久经考验的开源管理模板无疑是一个好的开始。 就像使用可靠的数据注释服务一样好。 另一个鲜为人知的技巧是将诸如 IP 地址和浏览器用户代理标识符之类的枯燥数据变成更有趣的数据，这些数据不仅可以为用户提供更多信息，而且还可以让它变得有趣和好看。 最棒的是——它是一个免费且直接的功能，可以添加到任何应用程序中。

标准，无聊和丑陋的方式

我们将深入研究几乎所有 Web 应用程序都熟悉的场景——在表格中显示用户操作日志数据，而不是在理论和虚构情况上浪费时间。 虽然实际数据因系统而异，但有些字段是常见的，包括 IP 地址、时间戳和用户代理字符串。 仅仅在表格中显示原始数据会导致没人愿意看到的丑陋灾难，更不用说每天使用了。 它看起来像下表。 把设计本身放在一边； 数据不可用，因为它没有为人类调整和格式化。 例如，IP 地址不是人们经常记住的东西。 这是我们使用域名的主要原因之一。 像这样在最终用户表中显示 IP 是没有用的。

对于那些迫不及待的人 - 请参阅新的和改进的表。

一些调整有很长的路要走

首先，丢失 ID 列。 为什么有人需要您的内部数据库记录 ID？ 对于您的用户来说，这是完全无用的数据。 它占用了宝贵的屏幕空间，并将注意力从重要信息上移开。

时间戳，以其 MySQL 时间戳格式，是人类可读的，但它远非用户友好。 如果您将其保留并显示为 UNIX 时间戳，情况会更糟。 然后它是 100% 不可读的。 不同的用户（通常基于他们的位置）喜欢不同的时间、日期、货币和数字数据格式。 这些差异是微妙的，但应该得到尊重。 用户对此表示赞赏。 事件的年龄也很重要。 对于新鲜的，可以方便地显示“10 分钟前”这样的描述，表示这是最近的事件——无需显示完整的时间戳。 而对于较旧的，我们会显示完整的本地格式化时间和日期。

值得庆幸的是，WordPress 具有处理一切的内置函数。 通过使用在 WP 管理员 - 设置 - 常规中设置的日期和时间格式，我们将调整时间戳以适应站点其余部分的格式，并通过使用human_time_diff()函数，我们将使其用户友好。 以下代码假定您有 MySQL 格式的时间戳，但如果您有 UNIX 时间戳，请删除第一行。

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

如果要显示超过一天的日期的“人为差异”格式，请将DAY_IN_SECOND常量与所需的天数相乘。

使用无聊的 IP 数据通过 GeoIP 实现“哇”的效果

许多服务将 IP 转换为人类可读的地理数据（如果您想探索，这里有 20 个 geoIP 服务比较），其中包括国家、州、城市、时区、货币信息和 ISP 详细信息。 它们都分为两类——远程 API 和可下载的数据库。 由于 geoIP 数据每天都在变化，对于大多数项目来说，API 是一个更好的选择。 服务的价格、易用性和返回数据的准确性各不相同。 经过多年使用各种服务后，最近两年，我一直在使用 IP Geolocation。 对于每月最多 50,000 个 API 请求的小型项目，该服务是完全免费的。 对任何项目，尤其是测试而言，这是一个很棒的、无风险的报价。

使用 API 很容易。 注册一个帐户（不需要信用卡或类似的废话），从帐户页面获取您的 API 密钥，然后只需使用 IP 和 API 密钥调用 API URL 即可获得结果。 在代码中（特定于 WordPress），它看起来像下面的代码。 如果您不使用 PHP，则有六个可用于 IP 地理定位的 SDK，因此您会找到适合您项目的东西。 他们还为大型项目提供可下载的数据库； 联系他们了解详情。

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 根据 IP 返回多达 26 条信息——使用您的 IP 对其进行测试。 显示所有这些内容太多了，所以我通常选择国家名称、国旗和城市。 这是足够的数据和标志增加了一个很好的视觉效果。 该请求仅返回这三个变量，以节省一些带宽。 如果您需要所有字段，只需将$params中的fields数组键留空。 国旗图片可以直接从IP Geolocation热链接，非常方便。 对于本地 IP，您不能显示太多，因此请确保您考虑了这种情况。 如果是本地 IP，您将收到带有响应代码 423 的WP_Error 。

用户代理字符串隐藏了大量数据

用户代理字符串很大，并不意味着直接供人类使用。 没有理智的人类需要，也不希望所有数据都显示在混乱中。 我们需要使用的设备类型——台式电脑、电话或介于两者之间的设备。 然后是操作系统——Windows、Mac 或其他一切； 也许使用的浏览器：Chrome、Safari、Internet Explorer 和 Firefox。 这为数据提供了更多的结构，并将其分成三个额外的信息，用于过滤和分割。

我非常提倡使用其他人（比我聪明）制作的东西。 因此，我们将使用一个现成的、经过实战测试的、维护良好的库来解析用户代理字符串。 前往 GitHub 上的 WhichBrowser 获取 PHP 版本。 根据您的 PHP 环境设置，您可以将其安装为 Composer 包 - 说明在上面的链接中，或者作为一个独立的 PHP 片段。 如果您在第二组中，请包含 bootstrap.php 文件，您就可以开始了。

由于我们改进了时间戳和 IP，我们需要的代码量很少，WhichBrowser 可以处理繁重的工作。

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

将保存的用户代理字符串传递给wpr_get_browser_info()函数，您将获得操作系统名称、浏览器名称和设备类型。 将它放在表中以代替原始用户代理字符串。

新的和改进的表

看我们的新桌子。 我们使用相同的数据，但对其进行了正确的格式化和处理——为人类服务！

时间戳	国家	城市	浏览器	操作系统	设备	行动
20分钟前	德国	柏林	火狐	Ubuntu	桌面	登录
14 小时前	美国	费城	IE浏览器	视窗	桌面	登录
2018 年 9 月 7 日晚上 10:03	拉脱维亚	里加	苹果浏览器	iOS	移动的	重设密码
2018 年 9 月 2 日下午 2:12	美国	北卑尔根	火狐	操作系统	桌面	登出
2018 年 9 月 2 日下午 12:33	不适用	不适用	铬合金	视窗	桌面	登录失败

再看一眼旧桌子，看看它有多糟糕。 请记住——设计保持不变！ 我们没有调整字体、颜色或任何视觉上的东西——只是数据！ 此外，几乎没有几行代码。

我们学到了什么？

我们了解到，我们的“由开发人员设计”的 GUI 通常看起来或使用起来并不有趣。 如果乍一看，我们的应用程序看起来像垃圾，那么我们付出的所有其他伟大而艰苦的工作都是徒劳的。 虽然我远不是一名设计师，也无法为您提供任何有关设计 GUI 的指导，但多年来，我已经学会了如何让枯燥的数据看起来更有趣和更易于使用。 IP Geolocation、WhichBrowser 和类似工具只需几行代码即可帮助您脱颖而出。 所以，使用它们！