Verwenden Sie GeoIP, um langweilige Daten in eine bessere Benutzererfahrung umzuwandeln

Menschen sind visuelle Wesen. Sie sehen gerne schöne Dinge (die über Katzenvideos hinausgehen). Ich sage das nicht wahrscheinlich oder weil ich es genieße! Es ist eine harte, kalte Tatsache. Kombinieren Sie es mit einer immer kürzer werdenden Aufmerksamkeitsspanne und seien Sie versichert, dass Ihre Bewerbung eher nach Aussehen (in den ersten 3 Sekunden) als nach Merkmalen oder Qualität beurteilt wird. Wenn Sie ein Entwickler sind, der es sich nicht leisten kann, für ein benutzerdefiniertes GUI-Design für eine App zu bezahlen, ist dies besonders verheerend. Egal wie gut, schnell oder innovativ Ihre App ist, wenn sie aussieht, als wäre sie „von einem Entwickler entworfen“ worden, werden die Leute ihr nicht einmal eine Chance geben. Zum Glück gibt es Möglichkeiten, dieses Problem zu umgehen.

Die Verwendung einer bewährten Open-Source-Admin-Vorlage ist zweifellos ein guter Anfang. Genauso gut wie die Verwendung zuverlässiger Datenannotationsdienste. Ein weiterer weniger bekannter Trick besteht darin, langweilige Daten wie IP-Adressen und Browser-User-Agent-Identifikatoren in viel interessantere Daten umzuwandeln, die dem Benutzer nicht nur mehr Informationen liefern, sondern auch Spaß machen und gut aussehen. Das Beste ist – es ist eine kostenlose und unkomplizierte Funktion, die zu jeder App hinzugefügt werden kann.

Der übliche, langweilige und hässliche Weg

Anstatt Zeit mit Theorie und erfundenen Situationen zu verschwenden, tauchen wir in ein Szenario ein, das aus fast allen Web-Apps bekannt ist – die Anzeige von Benutzeraktionsprotokolldaten in einer Tabelle. Während sich die tatsächlichen Daten von System zu System unterscheiden, sind einige Felder gleich, darunter die IP-Adresse, der Zeitstempel und die Zeichenfolge des Benutzeragenten. Das bloße Anzeigen dieser Rohdaten in einer Tabelle führt zu einer hässlichen Katastrophe, die niemand sehen möchte, geschweige denn jeden Tag verwenden möchte. Es sieht ungefähr so ​​aus wie in der folgenden Tabelle. Gestalten Sie sich beiseite; die Daten sind unbrauchbar, weil sie nicht für Menschen angepasst und formatiert sind. Beispielsweise erinnern sich die Leute nicht oft an IP-Adressen. Das ist einer der Hauptgründe, warum wir Domainnamen verwenden. Das Anzeigen einer IP in einer solchen Endbenutzertabelle ist grenzwertig nutzlos.

Für diejenigen, die es kaum erwarten können – sehen Sie sich den neuen und verbesserten Tisch an.

Ein paar Anpassungen gehen einen langen Weg

Verlieren Sie zuerst die ID-Spalte. Warum sollte jemand Ihre interne Datenbank-Datensatz-ID benötigen? Es ist ein völlig nutzloses Stück Daten für Ihre Benutzer. Es nimmt wertvollen Platz auf dem Bildschirm ein und lenkt die Aufmerksamkeit von wichtigen Informationen ab.

Der Zeitstempel in seinem MySQL-Zeitstempelformat ist für Menschen lesbar, aber alles andere als benutzerfreundlich. Die Dinge sind noch schlimmer, wenn Sie es als UNIX-Zeitstempel behalten und anzeigen. Dann ist es 100% unlesbar. Verschiedene Benutzer (normalerweise basierend auf ihrem Standort) bevorzugen unterschiedliche Formatierungen von Zeit, Datum, Währungen und numerischen Daten. Diese Unterschiede sind subtil, sollten aber respektiert werden. Benutzer wissen es zu schätzen. Auch das Alter der Veranstaltung spielt eine Rolle. Für neue ist es bequem, Beschreibungen wie „vor 10 Minuten“ anzuzeigen, was bedeutet, dass es sich um ein kürzliches Ereignis handelt – es ist nicht erforderlich, den vollständigen Zeitstempel anzuzeigen. Während wir für ältere die vollständige lokal formatierte Uhrzeit und das Datum anzeigen.

Zum Glück hat WordPress eingebaute Funktionen, um mit allem fertig zu werden. Durch die Verwendung des Datums- und Zeitformats, das in WP Admin – Einstellungen – Allgemein eingestellt ist, passen wir den Zeitstempel an die Formatierung des Rests der Website an und durch die Verwendung der Funktion human_time_diff() machen wir es benutzerfreundlich. Der folgende Code geht davon aus, dass Sie den Zeitstempel in einem MySQL-Format haben, aber wenn Sie ihn in einem UNIX-Zeitstempel haben, entfernen Sie die erste Zeile.

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

Wenn Sie das Format „menschliche Differenz“ für Daten anzeigen möchten, die älter als einen Tag sind, multiplizieren Sie die Konstante DAY_IN_SECOND mit der gewünschten Anzahl von Tagen.

Mit langweiligen IP-Daten einen „Wow“-Effekt mit GeoIP erzielen

Zahlreiche Dienste wandeln IPs in für Menschen lesbare geografische Daten um (hier sind 20 GeoIP-Dienste verglichen, wenn Sie sie erkunden möchten), die Land, Staat, Stadt, Zeitzone, Währungsinformationen und ISP-Details enthalten. Sie alle fallen in zwei Kategorien – Remote-APIs und herunterladbare Datenbanken. Aufgrund der täglichen Änderungen an GeoIP-Daten ist API für die meisten Projekte die viel bessere Wahl. Die Dienste unterscheiden sich in Preis, Benutzerfreundlichkeit und Genauigkeit der zurückgegebenen Daten. Nachdem ich jahrelang verschiedene Dienste genutzt habe, habe ich in den letzten beiden Jahren IP-Geolokalisierung verwendet. Für kleinere Projekte mit bis zu 50.000 API-Anfragen pro Monat ist der Service komplett kostenlos. Ein tolles, risikofreies Angebot für jedes Projekt und vor allem zum Testen.

Die Verwendung der API ist einfach. Registrieren Sie sich für ein Konto (keine Kreditkarte oder ähnlichen Unsinn erforderlich), holen Sie sich Ihren API-Schlüssel von der Kontoseite und rufen Sie einfach die API-URL mit der IP und dem API-Schlüssel auf, um Ergebnisse zu erhalten. Im Code (WordPress-spezifisch) sieht es in etwa so aus wie im folgenden Code. Wenn Sie PHP nicht verwenden, stehen sechs SDKs für die IP-Geolokalisierung zur Verfügung, sodass Sie etwas finden werden, das zu Ihrem Projekt passt. Sie bieten auch eine herunterladbare Datenbank für größere Projekte an; Kontaktieren Sie sie für weitere Informationen.

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

Die API gibt satte 26 Informationen basierend auf der IP zurück – testen Sie es mit Ihrer IP. All das anzuzeigen wäre zu viel, daher entscheide ich mich normalerweise für den Ländernamen, die Landesflagge und die Stadt. Es sind genug Daten und die Flagge fügt eine nette visuelle Note hinzu. Die Anfrage gibt nur diese drei Variablen zurück, um etwas Bandbreite zu sparen. Wenn Sie alle Felder benötigen, lassen Sie einfach den fields -Array-Schlüssel in $params leer. Das Bild der Länderflaggen kann direkt von der IP-Geolokalisierung verlinkt werden, was sehr praktisch ist. Für lokale IPs können Sie nicht viel anzeigen, stellen Sie also sicher, dass Sie dieses Szenario berücksichtigen. Im Falle einer lokalen IP erhalten Sie einen WP_Error mit dem Antwortcode 423.

User-Agent-String verbirgt eine Fülle von Daten

Der User-Agent-String ist riesig und nicht für den direkten menschlichen Konsum gedacht. Kein vernünftiger Mensch braucht oder will alle Daten, die in diesem Durcheinander angezeigt werden. Wir brauchen die Art des verwendeten Geräts – Desktop-Computer, Telefon oder etwas dazwischen. Dann das Betriebssystem – Windows, Mac oder alles andere; und eventuell der verwendete Browser: Chrome, Safari, Internet Explorer und Firefox. Das gibt den Daten mehr Struktur und trennt sie in drei zusätzliche Informationen, die zum Filtern und Segmentieren nützlich sind.

Ich bin ein großer Befürworter der Verwendung von Dingen, die andere (schlauer als ich) gemacht haben. Daher verwenden wir eine gebrauchsfertige, kampferprobte, gut gepflegte Bibliothek zum Parsen des User-Agent-Strings. Gehen Sie zu WhichBrowser auf GitHub, um die PHP-Version zu erhalten. Abhängig von der Einrichtung Ihrer PHP-Umgebung können Sie es entweder als Composer-Paket installieren – Anweisungen finden Sie unter dem obigen Link oder als eigenständiges Stück PHP. Falls Sie zur zweiten Gruppe gehören, fügen Sie die Datei bootstrap.php hinzu und Sie können loslegen.

Da wir den Zeitstempel und die IP-Adresse verbessern, ist die Menge an Code, die wir benötigen, minimal, whichBrowser übernimmt die schwere Arbeit.

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

Übergeben Sie die gespeicherte User-Agent-Zeichenfolge an die Funktion wpr_get_browser_info() und Sie erhalten den Betriebssystemnamen, den Browsernamen und den Gerätetyp zurück. Fügen Sie es anstelle der rohen User-Agent-Zeichenfolge in die Tabelle ein.

Der neue & verbesserte Tisch

Siehe unseren neuen Tisch. Wir haben mit denselben Daten gearbeitet, aber richtig formatiert und verarbeitet – für Menschen!

Zeitstempel	Land	Stadt	Browser	Betriebssystem	Gerät	Handlung
vor 20 Minuten	Deutschland	Berlin	Feuerfuchs	Ubuntu	Schreibtisch	Anmeldung
vor 14 Stunden	Vereinigte Staaten von Amerika	Philadelphia	Internet Explorer	Fenster	Schreibtisch	Anmeldung
7. September 2018 um 22:03 Uhr	Lettland	Riga	Safari	iOS	Handy, Mobiltelefon	Passwort zurücksetzen
2. September 2018 um 14:12 Uhr	Vereinigte Staaten von Amerika	Nord-Bergen	Feuerfuchs	OSX	Schreibtisch	Ausloggen
2. September 2018 um 12:33 Uhr	n / A	n / A	Chrom	Fenster	Schreibtisch	fehlgeschlagene Anmeldung

Werfen Sie noch einmal einen Blick auf den alten Tisch, um zu sehen, wie schrecklich er war. Denken Sie daran – das Design ist gleich geblieben! Wir haben weder die Schriftart noch die Farben oder irgendetwas Visuelles angepasst – nur die Daten! Außerdem mit kaum ein paar Zeilen Code.

Was haben wir gelernt?

Wir haben gelernt, dass es oft keinen Spaß macht, unsere „von Entwicklern entworfenen“ GUIs anzusehen oder zu verwenden. Alle andere große und harte Arbeit, die wir reingesteckt haben, nützt nichts, wenn unsere App auf den ersten Blick wie Mist aussieht. Obwohl ich weit davon entfernt bin, ein Designer zu sein, und Ihnen keine Hinweise zum Entwerfen einer GUI geben kann, habe ich im Laufe der Jahre gelernt, wie man langweilige Daten interessant und benutzerfreundlicher aussehen lässt. IP-Geolokalisierung, WhichBrowser und ähnliche Tools können Ihnen dabei helfen, sich mit nur wenigen Codezeilen von der Masse abzuheben. Also, nutze sie!