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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يمكننا الآن استخدام "العلامات المتقدّمة" لعرض العلامات المنسّقة على الخريطة. يمكن عرض العلامات المتقدّمة على الخرائط التي تم إنشاؤها باستخدام Maps JavaScript API من "منصة خرائط 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";

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

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

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

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

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

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

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

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

WebSockets

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

الخاتمة

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

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

مزيد من المعلومات:

المساهمون

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

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

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

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