ใช้ GeoIP เพื่อแปลงข้อมูลที่น่าเบื่อเป็นประสบการณ์ผู้ใช้ที่ดีขึ้น

คนเป็นสิ่งมีชีวิตที่มองเห็นได้ พวกเขาชอบเห็นของสวยงาม (ที่นอกเหนือไปจากวิดีโอเกี่ยวกับแมว) ฉันไม่ได้พูดแบบนี้หรือเพราะฉันสนุกกับมัน! เป็นความจริงที่ยากเย็น จับคู่กับช่วงความสนใจที่ลดลงเรื่อยๆ และมั่นใจได้ว่าแอปพลิเคชันของคุณจะถูกตัดสินโดยรูปลักษณ์ (ใน 3 วินาทีแรก) มากกว่าคุณสมบัติหรือคุณภาพ หากคุณเป็นนักพัฒนาซอฟต์แวร์ที่ไม่สามารถจ่ายเงินสำหรับการออกแบบ GUI แบบกำหนดเองสำหรับแอปได้ สิ่งนี้จะส่งผลเสียอย่างยิ่ง ไม่ว่าแอปของคุณจะดี รวดเร็ว หรือสร้างสรรค์เพียงใดก็ตาม หากดูเหมือนว่า "ออกแบบโดยนักพัฒนาซอฟต์แวร์" ผู้คนจะไม่แม้แต่จะให้โอกาส โชคดีที่มีวิธีแก้ไขปัญหานี้

การใช้เทมเพลตผู้ดูแลระบบโอเพ่นซอร์สที่ได้รับการทดสอบและทดสอบแล้วถือเป็นการเริ่มต้นที่ดีอย่างไม่ต้องสงสัย ดีเท่ากับการใช้บริการบันทึกย่อข้อมูลที่เชื่อถือได้ เคล็ดลับอีกประการหนึ่งที่ไม่ค่อยมีใครรู้จักคือการเปลี่ยนข้อมูลที่น่าเบื่อ เช่น ที่อยู่ IP และตัวระบุตัวแทนผู้ใช้ของเบราว์เซอร์ ให้เป็นข้อมูลที่น่าสนใจมากขึ้น ซึ่งไม่เพียงแต่สามารถให้ข้อมูลแก่ผู้ใช้ได้มากขึ้นเท่านั้น แต่ยังทำให้สนุกและดูดีอีกด้วย สิ่งที่ดีที่สุดคือ – เป็นคุณสมบัติฟรีและตรงไปตรงมาในการเพิ่มไปยังแอพใดๆ

วิธีมาตรฐาน น่าเบื่อ และน่าเกลียด

แทนที่จะเสียเวลาไปกับทฤษฎีและประกอบสถานการณ์ เราจะลงลึกในสถานการณ์ที่คุ้นเคยกับเว็บแอปเกือบทั้งหมด ซึ่งจะแสดงข้อมูลบันทึกการดำเนินการของผู้ใช้ในตาราง แม้ว่าข้อมูลจริงจะแตกต่างกันไปในแต่ละระบบ แต่บางฟิลด์ก็เป็นเรื่องปกติ ซึ่งรวมถึงที่อยู่ IP การประทับเวลา และสตริง user-agent การแสดงข้อมูลดิบในตารางเพียงอย่างเดียวส่งผลให้เกิดภัยพิบัติร้ายแรงที่ไม่มีใครอยากดู นับประสาใช้ทุกวัน ดูเหมือนตารางด้านล่าง ออกแบบตัวเองกัน ข้อมูลใช้ไม่ได้เพราะไม่ได้ปรับและจัดรูปแบบสำหรับมนุษย์ ตัวอย่างเช่น ที่อยู่ IP ไม่ใช่สิ่งที่ผู้คนมักจำได้ นั่นเป็นหนึ่งในเหตุผลหลักที่เราใช้ชื่อโดเมน การแสดง IP ในตารางผู้ใช้ปลายทางเช่นนี้ไม่มีประโยชน์อะไร

สำหรับผู้ที่ไม่สามารถรอ – ดูตารางใหม่และปรับปรุง

การปรับเปลี่ยนบางอย่างไปได้ไกล

ขั้นแรกให้เสียคอลัมน์ ID ทำไมทุกคนถึงต้องการ ID บันทึกฐานข้อมูลภายในของคุณ? เป็นข้อมูลที่ไม่มีประโยชน์สำหรับผู้ใช้ของคุณ ใช้พื้นที่หน้าจออันมีค่าและดึงความสนใจออกจากข้อมูลสำคัญ

การประทับเวลาในรูปแบบการประทับเวลาของ MySQL นั้นมนุษย์สามารถอ่านได้ แต่ยังห่างไกลจากความเป็นมิตรต่อผู้ใช้ สิ่งต่างๆ จะยิ่งแย่ลงไปอีกหากคุณเก็บและแสดงเป็น UNIX Timestamp แล้วมันอ่านไม่ได้ 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 สำหรับโปรเจ็กต์ขนาดเล็กที่มีคำขอ API มากถึง 50,000 รายการต่อเดือน บริการนี้ฟรีโดยสมบูรณ์ ข้อเสนอที่ยอดเยี่ยมและไร้ความเสี่ยงสำหรับโครงการใดๆ และโดยเฉพาะอย่างยิ่งสำหรับการทดสอบ

การใช้ API เป็นเรื่องง่าย ลงทะเบียนสำหรับบัญชี (ไม่ต้องใช้บัตรเครดิตหรือเรื่องไร้สาระที่คล้ายกัน) คว้าคีย์ API ของคุณจากหน้าบัญชีและเพียงเรียก URL ของ API ด้วยรหัส IP และ API เพื่อรับผลลัพธ์ ในโค้ด (เฉพาะ WordPress) จะดูเหมือนโค้ดด้านล่าง หากคุณไม่ได้ใช้ PHP มี SDK จำนวน 6 ชุดสำหรับ IP Geolocation ดังนั้นคุณจะพบสิ่งที่เหมาะกับโครงการของคุณ พวกเขายังเสนอฐานข้อมูลที่สามารถดาวน์โหลดได้สำหรับโครงการขนาดใหญ่ ติดต่อพวกเขาสำหรับรายละเอียด

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 Geolocation ซึ่งค่อนข้างสะดวก สำหรับ IP ในพื้นที่ คุณไม่สามารถแสดงได้มากนัก ดังนั้นตรวจสอบให้แน่ใจว่าคุณคำนึงถึงสถานการณ์นั้น คุณจะได้รับ WP_Error พร้อมรหัสตอบกลับ 423 ในกรณีของ IP ในเครื่อง

สตริง User-agent ซ่อนข้อมูลมากมาย

สตริง user-agent มีขนาดใหญ่และไม่ได้มีไว้สำหรับการบริโภคของมนุษย์โดยตรง ไม่มีความต้องการของมนุษย์ที่มีเหตุผลหรือต้องการข้อมูลทั้งหมดที่แสดงในระเบียบนั้น เราต้องการประเภทของอุปกรณ์ที่ใช้ – คอมพิวเตอร์เดสก์ท็อป โทรศัพท์ หรืออย่างอื่นในระหว่างนั้น จากนั้นระบบปฏิบัติการ – Windows, Mac หรืออย่างอื่น; และอาจเป็นเบราว์เซอร์ที่ใช้: Chrome, Safari, Internet Explorer และ Firefox ซึ่งทำให้ข้อมูลมีโครงสร้างมากขึ้น และแยกข้อมูลออกเป็นสามส่วนเพิ่มเติมที่เป็นประโยชน์สำหรับการกรองและการแบ่งกลุ่ม

ฉันเป็นผู้สนับสนุนอย่างมากในการใช้สิ่งที่คนอื่น (ฉลาดกว่าฉัน) ทำ ดังนั้น เราจะใช้ไลบรารี่ที่พร้อมใช้งาน ผ่านการทดสอบการต่อสู้ และได้รับการดูแลอย่างดีสำหรับการแยกวิเคราะห์สตริง user-agent ตรงไปที่ WhoBrowser บน GitHub เพื่อคว้าเวอร์ชัน PHP ขึ้นอยู่กับการตั้งค่าสภาพแวดล้อม PHP ของคุณ คุณสามารถติดตั้งเป็นแพ็คเกจ Composer - คำแนะนำอยู่ในลิงก์ด้านบน หรือเป็น PHP แบบสแตนด์อโลน ในกรณีที่คุณอยู่ในกลุ่มที่สอง ให้ใส่ไฟล์ bootstrap.php และคุณพร้อมจะไป

ในขณะที่เราประทับเวลาและการปรับปรุง IP จำนวนโค้ดที่เราต้องการนั้นน้อยมาก ThatBrowser จะจัดการกับงานหนัก

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

ส่งสตริง user-agent ที่บันทึกไว้ไปยัง wpr_get_browser_info() แล้วคุณจะได้ชื่อระบบปฏิบัติการ ชื่อเบราว์เซอร์ และประเภทอุปกรณ์กลับมา วางไว้ในตารางแทนที่สตริง user-agent ดิบ

ตารางใหม่และปรับปรุง

ดูตารางใหม่ของเรา เราทำงานกับข้อมูลเดียวกัน แต่จัดรูปแบบและประมวลผลอย่างถูกต้อง – สำหรับมนุษย์!

การประทับเวลา	ประเทศ	เมือง	เบราว์เซอร์	OS	อุปกรณ์	หนังบู๊
20 นาทีที่แล้ว	เยอรมนี	เบอร์ลิน	Firefox	อูบุนตู	เดสก์ทอป	เข้าสู่ระบบ
14 ชั่วโมงที่แล้ว	สหรัฐอเมริกา	นครฟิลาเดลเฟีย	Internet Explorer	Windows	เดสก์ทอป	เข้าสู่ระบบ
7 กันยายน 2018 @ 22:03pm	ลัตเวีย	ริกา	ซาฟารี	iOS	มือถือ	รีเซ็ตรหัสผ่าน
2 กันยายน 2018 @ 02:12pm	สหรัฐอเมริกา	เบอร์เกนเหนือ	Firefox	OS X	เดสก์ทอป	ออกจากระบบ
2 กันยายน 2018 @ 12:33pm	n/a	n/a	โครเมียม	Windows	เดสก์ทอป	เข้าสู่ระบบล้มเหลว

เหลือบมองที่โต๊ะเก่าอีกครั้งเพื่อดูว่ามันแย่แค่ไหน โปรดจำไว้ว่า – การออกแบบยังคงเหมือนเดิม! เราไม่ได้ปรับแบบอักษร สี หรือภาพใดๆ – แค่ข้อมูลเท่านั้น! ยิ่งกว่านั้นด้วยโค้ดเพียงไม่กี่บรรทัด

เราได้เรียนรู้อะไรบ้าง?

เราได้เรียนรู้ว่า GUI ที่ "ออกแบบโดยนักพัฒนา" มักจะไม่สนุกในการดูหรือใช้งาน การทำงานที่ยอดเยี่ยมและหนักหน่วงอื่น ๆ ทั้งหมดที่เราทุ่มเทลงไปนั้นไร้ประโยชน์หากในแวบแรกแอปของเราดูเหมือนไร้สาระ แม้ว่าฉันจะห่างไกลจากนักออกแบบและไม่สามารถให้คำแนะนำใดๆ เกี่ยวกับการออกแบบ GUI ได้ตลอดหลายปีที่ผ่านมา ฉันได้เรียนรู้วิธีการทำให้ข้อมูลที่น่าเบื่อดูน่าสนใจและใช้งานง่ายขึ้น IP Geolocation, ThatBrowser และเครื่องมือที่คล้ายกันสามารถช่วยให้คุณโดดเด่นกว่าใครด้วยโค้ดเพียงไม่กี่บรรทัด ดังนั้นใช้มัน!