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

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

تعرض الصورة الرئيسية خريطة Google Maps JS في وسط مدينة سان فرانسيسكو. تعرض عدة مواقع علامات ملوّنة تشير إلى أنّ مدة المشي هي دقيقتان أو 4 دقائق. يتم تعديل الألوان والمحتوى بمرور الوقت.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الخطوة 3: عرض علامات تحديد المواقع على الخريطة

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

في مقتطف الرمز البرمجي الموضّح أدناه، ننشئ العلامات ونحدّد محتوى العلامة من خلال إنشاء عنصر 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";

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

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

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

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

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

مراسلة Firebase السحابية

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

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

WebSockets

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

الخاتمة

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

الخطوات التالية

مزيد من القراءة:

المساهمون

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

Jim Leflar | منصة خرائط Google مهندس حلول

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

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