Используйте GeoIP для преобразования скучных данных в лучший пользовательский интерфейс

Люди визуальные существа. Им нравится видеть красивые вещи (которые выходят за рамки видео с кошками). Я не говорю, что это вероятно или потому, что мне это нравится! Это жесткий, холодный факт. Соедините это с постоянно уменьшающимся объемом внимания, и будьте уверены, что ваше приложение будет оцениваться по внешнему виду (в первые 3 секунды), а не по функциям или качеству. Если вы разработчик, который не может позволить себе платить за индивидуальный дизайн графического интерфейса для приложения, это особенно разрушительно. Каким бы хорошим, быстрым или инновационным ни было ваше приложение, если оно выглядит так, как будто оно «разработано разработчиком», люди не дадут ему даже шанса. К счастью, есть способы обойти эту проблему.

Использование проверенного шаблона администратора с открытым исходным кодом, несомненно, является хорошим началом. Так же хорошо, как и использование надежных сервисов аннотирования данных. Другой менее известный трюк — превратить скучные данные, такие как IP-адреса и идентификатор пользовательского агента браузера, в гораздо более интересные данные, которые могут не только предоставить пользователю больше информации, но и сделать его интересным и привлекательным. Лучше всего то, что это бесплатная и простая функция, которую можно добавить в любое приложение.

Стандартный, скучный и уродливый способ

Вместо того, чтобы тратить время на теорию и выдуманные ситуации, мы погрузимся в сценарий, знакомый почти всем веб-приложениям — отображение данных журнала действий пользователя в виде таблицы. Хотя фактические данные различаются от системы к системе, некоторые поля являются общими, включая IP-адрес, отметку времени и строку пользовательского агента. Простое отображение этих необработанных данных в таблице приводит к уродливой катастрофе, на которую никто не хочет смотреть, не говоря уже о том, чтобы использовать ее каждый день. Это выглядит примерно так, как в таблице ниже. Сам дизайн в сторону; данные непригодны для использования, потому что они не приспособлены и не отформатированы для людей. Например, IP-адреса — это не то, что люди часто помнят. Это одна из основных причин, по которой мы используем доменные имена. Отображение IP-адреса в таблице конечных пользователей, подобной этой, практически бесполезно.

Для тех, кто не может ждать – смотрите новую и улучшенную таблицу.

Несколько корректировок имеют большое значение

Во-первых, потеряйте столбец ID. Зачем кому-то нужен ваш внутренний идентификатор записи базы данных? Это совершенно бесполезная часть данных для ваших пользователей. Он занимает драгоценное место на экране и отвлекает внимание от важной информации.

Временная метка в формате временной метки MySQL удобочитаема, но далеко не удобна для пользователя. Все еще хуже, если вы сохраните и отобразите его как временную метку UNIX. Тогда это 100% нечитаемо. Разные пользователи (обычно в зависимости от их местонахождения) предпочитают разное форматирование времени, даты, валюты и числовых данных. Эти различия тонкие, но их следует уважать. Пользователи это ценят. Возраст события также имеет значение. Для новых удобно отображать описание типа «10 минут назад», означающее, что это недавнее событие — нет необходимости показывать полную временную метку. В то время как для более старых мы показываем полное время и дату в локальном формате.

К счастью, в WordPress есть встроенные функции, позволяющие справиться со всем. Используя формат даты и времени, установленный в WP admin — Settings — General, мы настроим метку времени, чтобы она соответствовала форматированию остальной части сайта, а с помощью функции 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 для сравнения, если вы хотите изучить), которые включают страну, штат, город, часовой пояс, информацию о валюте и данные интернет-провайдера. Все они делятся на две категории — удаленные API и загружаемые базы данных. Из-за ежедневных изменений в данных geoIP для большинства проектов лучше использовать API. Услуги различаются по цене, простоте использования и точности возвращаемых данных. После нескольких лет использования различных сервисов последние два года я использовал IP-геолокацию. Для небольших проектов с объемом запросов API до 50 000 в месяц услуга предоставляется совершенно бесплатно. Отличное, безрисковое предложение для любого проекта и особенно для тестирования.

Использовать API легко. Зарегистрируйте учетную запись (кредитная карта или подобная ерунда не требуется), возьмите свой ключ API со страницы учетной записи и просто вызовите URL-адрес API с IP-адресом и ключом API, чтобы получить результаты. В коде (для 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 возвращает колоссальные 26 фрагментов информации на основе IP-адреса — проверьте его на своем IP-адресе. Отображать все это было бы слишком, поэтому я обычно выбираю название страны, флаг страны и город. Данных достаточно, а флажок добавляет приятный визуальный штрих. Запрос возвращает только эти три переменные, чтобы сэкономить пропускную способность. Если вам нужны все поля, просто оставьте ключ массива fields в $params пустым. Изображение флагов стран может быть напрямую привязано к IP-геолокации, что очень удобно. Для локальных IP-адресов вы не можете показать много, поэтому убедитесь, что вы учитываете этот сценарий. Вы получите WP_Error с кодом ответа 423 в случае локального IP.

Строка пользовательского агента скрывает множество данных

Строка пользовательского агента огромна и не предназначена для непосредственного потребления человеком. Ни один разумный человек не нуждается и не хочет, чтобы все данные отображались в этом беспорядке. Нам нужен тип используемого устройства — настольный компьютер, телефон или что-то среднее. Затем ОС — Windows, Mac или все остальное; и, возможно, используемый браузер: Chrome, Safari, Internet Explorer и Firefox. Это делает данные более структурированными и разделяет их на три дополнительные части информации, полезные для фильтрации и сегментации.

Я большой сторонник использования вещей, созданных другими людьми (умнее меня). Поэтому мы будем использовать готовую, проверенную в бою, хорошо поддерживаемую библиотеку для разбора строки пользовательского агента. Перейдите на сайт WhichBrowser на GitHub, чтобы получить версию PHP. В зависимости от настройки вашей среды PHP вы можете установить его либо как пакет Composer — инструкции по ссылке выше, либо как отдельную часть PHP. Если вы относитесь ко второй группе, включите файл bootstrap.php, и вы будете готовы к работе.

Поскольку мы улучшаем отметку времени и IP, объем кода, который нам нужен, минимален, а WhatBrowser берет на себя всю тяжелую работу.

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 минут назад	Германия	Берлин	Fire Fox	Убунту	рабочий стол	авторизоваться
14 часов назад	США	Филадельфия	Интернет-проводник	Окна	рабочий стол	авторизоваться
7 сентября 2018 в 22:03	Латвия	Рига	Сафари	iOS	мобильный	сброс пароля
2 сентября 2018 в 14:12	США	Северный Берген	Fire Fox	ОС Х	рабочий стол	выйти
2 сентября 2018 в 12:33	н/д	н/д	Хром	Окна	рабочий стол	неудачный вход

Взгляните еще раз на старый стол, чтобы увидеть, насколько он был ужасен. Имейте в виду - дизайн остался прежним! Мы не настраивали шрифт, цвета или что-то визуальное — только данные! Более того, с помощью всего лишь нескольких строк кода.

Чему мы научились?

Мы узнали, что наши «разработанные разработчиками» графические интерфейсы часто неинтересны для просмотра или использования. Вся остальная большая и тяжелая работа, которую мы проделали, бесполезна, если на первый взгляд наше приложение выглядит как дерьмо. Хотя я далек от дизайнера и не могу дать вам никаких советов по разработке графического интерфейса, за эти годы я научился делать скучные данные интересными и более удобными для пользователя. IP-геолокация, WhatBrowser и подобные инструменты помогут вам выделиться из толпы, написав всего несколько строк кода. Итак, используйте их!