使用 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 和類似工具只需幾行代碼即可幫助您脫穎而出。 所以，使用它們！