استخدم GeoIP لتحويل البيانات المملة إلى تجربة مستخدم أفضل

الناس مخلوقات بصرية. يحبون رؤية أشياء جميلة (تتجاوز مقاطع فيديو القطط). أنا لا أقول هذا على الأرجح أو لأنني أستمتع به! إنها حقيقة قاسية وباردة. قم بإقرانها بفترة اهتمام متناقصة باستمرار وتأكد من أن تطبيقك يتم الحكم عليه من خلال المظهر (في الثواني الثلاث الأولى) وليس من خلال الميزات أو الجودة. إذا كنت مطورًا لا تستطيع تحمل تكلفة تصميم واجهة المستخدم الرسومية المخصص لتطبيق ما ، فهذا أمر مدمر بشكل خاص. بغض النظر عن مدى جودة تطبيقك أو سرعته أو ابتكاره إذا كان يبدو أنه "مصمم من قبل مطور" ، فلن يمنحه الناس فرصة حتى. لحسن الحظ ، هناك طرق للتغلب على هذه المشكلة.

إن استخدام نموذج مشرف مفتوح المصدر مجرب ومختبر يعد بلا شك بداية جيدة. بنفس جودة استخدام خدمات التعليقات التوضيحية للبيانات الموثوقة. هناك حيلة أخرى أقل شهرة تتمثل في تحويل البيانات الباهتة مثل عناوين IP ومعرف وكيل مستخدم المتصفح إلى بيانات أكثر إثارة للاهتمام والتي لا توفر المزيد من المعلومات للمستخدم فحسب ، بل تجعلها ممتعة ورائعة أيضًا. أفضل شيء هو - إنها ميزة مجانية ومباشرة لإضافتها إلى أي تطبيق.

الطريقة المعيارية والمملة والقبيحة

بدلاً من إضاعة الوقت في النظرية واختلاق المواقف ، سنغوص في سيناريو مألوف لجميع تطبيقات الويب تقريبًا - عرض بيانات سجل إجراءات المستخدم في جدول. بينما تختلف البيانات الفعلية من نظام إلى آخر ، فإن بعض الحقول شائعة ، وتشمل تلك الحقول عنوان IP والطابع الزمني وسلسلة وكيل المستخدم. إن مجرد عرض تلك البيانات الخام في جدول يؤدي إلى كارثة قبيحة لا يريد أحد النظر إليها ، ناهيك عن استخدامها كل يوم. يبدو مثل الجدول أدناه. تصميم نفسه جانبا. البيانات غير قابلة للاستخدام لأنها غير معدلة ومنسقة للبشر. على سبيل المثال ، عناوين IP ليست شيئًا يتذكره الناس كثيرًا. هذا أحد الأسباب الرئيسية لاستخدامنا أسماء النطاقات. إظهار عنوان IP في جدول مستخدم نهائي مثل هذا لا فائدة منه.

لأولئك الذين لا يستطيعون الانتظار - راجع الجدول الجديد والمحسّن.

بعض التعديلات تقطع شوطًا طويلاً

أولاً ، تفقد عمود المعرف. لماذا قد يحتاج أي شخص معرف سجل قاعدة البيانات الداخلية الخاص بك؟ إنها جزء من البيانات عديمة الفائدة تمامًا لمستخدميك. فهي تشغل مساحة ثمينة على الشاشة وتجذب الانتباه بعيدًا عن المعلومات المهمة.

الطابع الزمني ، بتنسيق طابعه الزمني MySQL ، يمكن قراءته من قبل الإنسان ، لكنه بعيد عن أن يكون سهل الاستخدام. تزداد الأمور سوءًا إذا احتفظت بها وعرضتها كطابع زمني لـ UNIX. ثم يكون 100٪ غير قابل للقراءة. يفضل المستخدمون المختلفون (بناءً على موقعهم عادةً) تنسيقات مختلفة للوقت والتاريخ والعملات والبيانات الرقمية. هذه الاختلافات طفيفة ولكن يجب احترامها. يقدر المستخدمون ذلك. عمر الحدث مهم أيضا. بالنسبة للأحداث الجديدة ، من الملائم عرض أوصاف مثل "منذ 10 دقائق" ، للإشارة إلى أنه حدث مؤخرًا - ولا داعي لإظهار الطابع الزمني الكامل. بينما نعرض لكبار السن الوقت والتاريخ المنسقين محليًا بالكامل.

لحسن الحظ ، يحتوي WordPress على وظائف مدمجة للتعامل مع كل شيء. باستخدام تنسيق التاريخ والوقت المحدد في WP admin - الإعدادات - عام ، سنقوم بتعديل الطابع الزمني ليناسب تنسيق بقية الموقع وباستخدام وظيفة 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 ثابت DAY_IN_SECOND مع عدد الأيام المطلوب.

استخدام بيانات IP مملة لتحقيق تأثير "رائع" مع GeoIP

تعمل العديد من الخدمات على تحويل عناوين IP إلى بيانات جغرافية يمكن للبشر قراءتها (إليك 20 خدمة GeoIP مقارنة إذا كنت ترغب في الاستكشاف) والتي تتضمن الدولة والولاية والمدينة والمنطقة الزمنية ومعلومات العملة وتفاصيل مزود خدمة الإنترنت. تنقسم جميعها إلى فئتين - واجهات برمجة التطبيقات البعيدة وقواعد البيانات القابلة للتنزيل. بسبب التغييرات اليومية على بيانات geoIP ، بالنسبة لمعظم المشاريع ، تعد API خيارًا أفضل بكثير. تختلف الخدمات من حيث السعر وسهولة الاستخدام ودقة البيانات التي يتم إرجاعها. بعد سنوات من استخدام الخدمات المختلفة ، في آخر خدمتين ، كنت أستخدم IP Geolocation. بالنسبة للمشاريع الأصغر مع ما يصل إلى 50000 طلب واجهة برمجة تطبيقات شهريًا ، تكون الخدمة مجانية تمامًا. عرض رائع وخالي من المخاطر لأي مشروع وخاصة للاختبار.

استخدام API سهل. سجل للحصول على حساب (لا حاجة لبطاقة ائتمان أو ما شابه ذلك) ، احصل على مفتاح API الخاص بك من صفحة الحساب واطلب فقط عنوان URL الخاص بواجهة برمجة التطبيقات باستخدام مفتاح IP و API للحصول على النتائج. في الكود (خاص بـ WordPress) ، يبدو مثل الكود أدناه. إذا كنت لا تستخدم PHP ، فهناك ستة حزم SDK متاحة لتحديد الموقع الجغرافي IP ، لذلك ستجد شيئًا يناسب مشروعك. كما أنها توفر قاعدة بيانات قابلة للتنزيل للمشاريع الأكبر ؛ اتصل بهم للحصول على التفاصيل.

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

تقوم واجهة برمجة التطبيقات بإرجاع 26 قطعة ضخمة من المعلومات بناءً على IP - اختبرها باستخدام IP الخاص بك. سيكون عرض كل ذلك أكثر من اللازم ، لذلك عادةً ما أختار اسم الدولة وعلم الدولة والمدينة. إنها بيانات كافية والعلم يضيف لمسة بصرية لطيفة. يقوم الطلب بإرجاع هذه المتغيرات الثلاثة فقط ، لتوفير بعض النطاق الترددي. إذا كنت بحاجة إلى جميع الحقول ، فاترك مفتاح مصفوفة fields في $params فارغًا. يمكن ربط صورة أعلام الدولة مباشرة من IP Geolocation وهو أمر مريح للغاية. بالنسبة لعناوين IP المحلية ، لا يمكنك إظهار الكثير لذا تأكد من حساب هذا السيناريو. ستحصل على خطأ WP_Error برمز الاستجابة 423 في حالة وجود عنوان IP محلي.

تخفي سلسلة وكيل المستخدم ثروة من البيانات

سلسلة وكلاء المستخدم ضخمة ولا تهدف إلى الاستهلاك البشري المباشر. لا يحتاج أي إنسان عاقل ولا يريد جميع البيانات الموضحة في تلك الفوضى. نحتاج إلى نوع الجهاز المستخدم - كمبيوتر سطح المكتب أو الهاتف أو أي شيء بينهما. ثم نظام التشغيل - Windows أو Mac أو أي شيء آخر ؛ وربما المتصفح المستخدم: Chrome و Safari و Internet Explorer و Firefox. يمنح ذلك البيانات هيكلًا أكبر ، ويفصلها إلى ثلاث أجزاء إضافية من المعلومات المفيدة للتصفية والتجزئة.

أنا من أشد المدافعين عن استخدام الأشياء التي صنعها الآخرون (أذكى مني). لذلك سنستخدم مكتبة جاهزة للاستخدام ، تم اختبارها في المعركة ، وتتم صيانتها جيدًا لتحليل سلسلة وكيل المستخدم. توجه إلى ويتش براوزر على جيثب للحصول على نسخة PHP. اعتمادًا على إعداد بيئة PHP الخاص بك ، يمكنك إما تثبيته كحزمة Composer - الإرشادات موجودة على الرابط أعلاه ، أو كقطعة مستقلة من PHP. إذا كنت في المجموعة الثانية ، فقم بتضمين ملف bootstrap.php وستكون جاهزًا للانطلاق.

نظرًا لأننا نحسن الطابع الزمني و IP ، فإن مقدار الكود الذي نحتاجه ضئيل للغاية ، ويتولى ويتش براوزر المهام الثقيلة.

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 دقيقة	ألمانيا	برلين	ثعلب النار	أوبونتو	سطح المكتب	تسجيل الدخول
منذ 14 ساعات	الولايات المتحدة الأمريكية	فيلادلفيا	متصفح الانترنت	شبابيك	سطح المكتب	تسجيل الدخول
7 سبتمبر 2018 @ 10:03 مساءً	لاتفيا	ريغا	سفاري	iOS	التليفون المحمول	إعادة تعيين كلمة المرور
سبتمبر 2، 2018 @ 02:12 م	الولايات المتحدة الأمريكية	شمال بيرغن	ثعلب النار	OS X	سطح المكتب	تسجيل خروج
2 سبتمبر 2018 @ 12:33 مساءً	غير متوفر	غير متوفر	كروم	شبابيك	سطح المكتب	الدخول الفاشلة

ألقِ نظرة على الطاولة القديمة مرة أخرى لترى مدى فظاعتها. ضع في اعتبارك - التصميم بقي على حاله! لم نضبط الخط أو الألوان أو أي شيء مرئي - فقط البيانات! علاوة على ذلك ، بالكاد مع بضعة أسطر من التعليمات البرمجية.

ماذا تعلمنا؟

لقد تعلمنا أن واجهات المستخدم الرسومية "المصممة بواسطة المطور" الخاصة بنا غالبًا ما تكون غير ممتعة في النظر إليها أو استخدامها. جميع الأعمال العظيمة والشاقة الأخرى التي نقوم بها لا طائل من ورائها إذا كان تطبيقنا يبدو للوهلة الأولى وكأنه هراء. على الرغم من أنني بعيد كل البعد عن المصمم ولا يمكنني إعطائك أي مؤشرات حول تصميم واجهة المستخدم الرسومية ، فقد تعلمت على مر السنين كيفية جعل البيانات المملة تبدو مثيرة للاهتمام وأكثر سهولة في الاستخدام. يمكن أن يساعدك تحديد الموقع الجغرافي عبر بروتوكول الإنترنت ، ومتصفح ويتش ، والأدوات المماثلة في التميز عن الآخرين ببضعة سطور من التعليمات البرمجية. لذا استخدمهم!