جذب العملاء في الوقت الفعلي باستخدام "العلامات المتقدّمة" وFirebase

تتيح "منصة خرائط Google" للعملاء تطوير تجارب فريدة من خلال تخصيص التصميم المرئي محدّدات الخرائط باستخدام العلامات المتقدمة. سوف نستكشف في هذا المستند كيف يمكن للعملاء التقدم خطوة أخرى إلى الأمام وإنشاء علامات تتغير ديناميكيًا بناءً على البيانات في الوقت الفعلي.

تعرض صورة الجزء الرئيسي خريطة JS لخرائط Google متمركزة في سان فرانسيسكو. تعرض عدة مواقع جغرافية علامات ملوّنة مكتوب فيها "دقيقتان" و"4 دقائق"

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

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

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

حلول العلامات الديناميكية المتقدّمة

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

يوضح الرسم التخطيطي الهندسي المستخدم الذي يقوم بالوصول إلى تطبيق الويب. بنية Google الأساسية لتطبيق الويب ("منصة Google للتسويق" و"وظائف السحابة الإلكترونية في Firebase"). تصل وظائف السحابة الإلكترونية في Firebase إلى البيانات المباشرة من خلفية العميل.

الخطوة 1 - تحديد سمات تعريف التجربة المرئية

الخطوة الأولى هي تحديد خاصية موقع واحدة أو أكثر لعرضها للمستخدمين. في هذه الحالة، نريد عرض سمة واحدة فقط: وقت الانتظار الحالي في كل موقع جغرافي للمتجر، ويتم قياسه بالدقائق.

تتمثل الخطوة التالية في تحديد سمة علامة مقابلة واحدة أو أكثر لإضافة تعليقات توضيحية مرئية لوقت الانتظار على علامة الخريطة. وتتوفر قائمة بسمات العلامات غير المألوفة في مواصفات PinElement. يمكنك أيضًا استخدام رمز HTML المخصّص للحصول على خيارات تخصيص أكثر ثراءً.

في هذا المثال، سنستخدم سمتين محددتين لتصور بيانات وقت الانتظار:

  • لون العلامة: أزرق لوقت الانتظار أقل من 5 دقائق، والأصفر لأكثر من 5 دقائق
  • محتوى العلامة (يتطلب علامات HTML مخصصة): سنُضمّن وقت الانتظار الحالي بالدقائق في العلامة نفسها

الخطوة 2: ضبط الاتصال بمصادر البيانات في الوقت الفعلي

هناك طرق متعدّدة للربط بمصادر البيانات، ويعتمد الحلّ المناسب على حالة الاستخدام والبنية الأساسية التقنية. في هذا المثال، نستخدم طريقة سحب، حيث نطلب بشكل منتظم بيانات معدّلة لوقت الانتظار من خلال طلبات HTTP (REST). في الأقسام التالية، ستظهر لك بُنى بديلة تستفيد من مناهج الدفع.

لإتاحة وصول تطبيقنا إلى بيانات وقت الانتظار من خادمنا، تستفيد بنيتنا من الوظائف السحابية لبرنامج Firebase. تتيح لنا دوال السحابة تحديد دالة خلفية للوصول إلى هذه البيانات وحسابها. نُدرج أيضًا مكتبة Firebase في تطبيق الويب، ما يتيح لنا الوصول إلى دالّة السحابة الإلكترونية عبر طلب HTTP.

الخطوة التالية هي التأكّد من أنّنا نحافظ على بيانات المستخدم محدَّثة. لإجراء ذلك، نُعدّ موقّتًا باستخدام دالة setInterval في JavaScript مع مهلة 30 ثانية. وفي كل مرة يتم فيها تشغيل الموقّت، نطلب بيانات محدَّثة عن وقت الانتظار كما هو موضَّح أعلاه. فور حصولنا على البيانات الجديدة، يجب علينا تحديث مظهر علامات الخريطة. توضح الخطوة التالية كيفية إجراء هذه التغييرات.

الخطوة 3 - عرض محددات الخريطة

يمكننا الآن استخدام "العلامات المتقدمة" لعرض العلامات بنمط معيّن على الخريطة. يمكن عرض محدّدات المواقع المتقدّمة على الخرائط التي تمّ إنشاؤها باستخدام واجهة برمجة تطبيقات JavaScript للخرائط في "منصة خرائط Google". عند استخدام العلامات المتقدمة، تأكد من تضمين معلمة معرّف الخريطة في طلب خريطة JS.

في مقتطف الرمز الموضح أدناه، ننشئ العلامات ونحدد محتوى العلامة من خلال إنشاء عنصر HTML div:

// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");

// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
      map,
      position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
      content: storeWaitLabels[store_index]
    }));

الخطوة الأخيرة هي تحديث نص العلامة ونمط CSS لكل متجر. يقرأ الرمز التالي البيانات المعدّلة لأوقات الانتظار ويحدّد نمطًا لكل رقم تعريف شخصي للمتجر استنادًا إلى وقت الانتظار:

// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
     if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
     else storeWaitLabels[store_index].className = "wait-under-5";

تستخدم الخريطة الآن واجهة برمجة تطبيقات أوقات الانتظار الحالية لعرض أوقات الانتظار الحديثة للمستخدمين:

تعرض صورة الجزء الرئيسي خريطة JS لخرائط Google متمركزة في سان فرانسيسكو. تعرض عدة مواقع جغرافية علامات ملوّنة مكتوب فيها "دقيقتان" و"4 دقائق"

طرق بديلة للربط بمصادر البيانات في الوقت الفعلي

هناك طرق مختلفة للاتصال بمصادر البيانات في الوقت الفعلي. نراجع أدناه خيارَين بديلَين: "المراسلة عبر السحابة الإلكترونية من Firebase" وWebSockets. مهما كان النهج الذي تحدده، تأكد من مراعاة العوامل التالية حتى تظل أداة الخريطة ذات أداء جيد:

  • تكرار التحديثات
  • حجم البيانات
  • عدد العلامات في عرض الخريطة
  • إمكانيات الأجهزة والمتصفحات

المراسلة عبر السحابة الإلكترونية من Firebase

توفّر المراسلة عبر السحابة الإلكترونية من Firebase طريقة لإرسال البيانات بشكل فوري. باستخدام هذا النهج، سترسل تحديثات إلى تطبيق الخرائط في كل مرة يتم فيها تحديث بيانات وقت الانتظار في الخلفية. ستؤدي رسائل التحديث إلى تشغيل وظيفة استدعاء تهدف إلى تعديل مظهر العلامة ومحتواها.

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

WebSockets

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

الخاتمة

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

الإجراءات التالية

قراءات إضافية:

المساهمون

المؤلفون الرئيسيون:

جيم لوفلار | مهندس حلول "منصة خرائط Google"

جون برانيغان | مهندس عملاء أول في Google Cloud Platform

ستيف باريت | مهندس حلول "منصة خرائط Google"