مشتریان را در زمان واقعی با نشانگرهای پیشرفته و amp; Firebase

پلتفرم نقشه‌های Google به مشتریان امکان می‌دهد تا با سفارشی کردن طراحی بصری نشانگرهای نقشه خود با استفاده از نشانگرهای پیشرفته ، تجربه‌های منحصربه‌فردی را ایجاد کنند. در این سند ما بررسی خواهیم کرد که چگونه مشتریان می توانند یک قدم جلوتر رفته و نشانگرهایی ایجاد کنند که به صورت پویا بر اساس داده های زمان واقعی تغییر می کنند.

تصویر قهرمان نقشه جی اس گوگل مپ را در مرکز سانفرانسیسکو نشان می دهد. چندین مکان نشانگرهای رنگارنگی را نشان می‌دهند که محتوای آنها عبارت «2 دقیقه»، «4 دقیقه» است.

نشانگرهای نقشه ابزار مفیدی برای ارائه تجربیات نقشه برداری غنی به کاربران هستند. ویژگی های نشانگر مانند اندازه، رنگ و شکل می توانند اطلاعات بیشتری را در مورد هر مکان علامت گذاری شده منتقل کنند. در برخی موارد، این اطلاعات اضافی ممکن است به صورت پویا تغییر کند و توسعه دهنده بخواهد تجسم نقشه به روز شود و حس تازگی را برای کاربر حفظ کند.

در این مقاله، ما از مثالی برای اهداف توضیحی استفاده می‌کنیم: یک زنجیره خرده‌فروشی می‌خواهد از نقشه استفاده کند تا زمان انتظار کاربران را ذخیره کند. با این حال، همین معماری می تواند برای بسیاری از موارد استفاده دیگر استفاده شود. در اینجا چند ایده اضافی وجود دارد:

  • در دسترس بودن اتاق هتل : در نقشه ای که نتایج جستجوی هتل را نشان می دهد، تازگی در دسترس بودن اتاق سیگنال مهمی است که می تواند کاربران را تشویق کند تا با کاهش موجودی، هتل را رزرو کنند.
  • در دسترس بودن فضای پارکینگ : در نقشه پارکینگ ها، به کاربران اطمینان دهید مقصدی را انتخاب کنند که در هنگام رسیدن فضایی برای آنها داشته باشد.
  • رستوران‌ها باز، به زودی بسته می‌شوند و بسته می‌شوند : در نقشه‌ای که نتایج جستجوی رستوران را نشان می‌دهد، مهم است که کاربران از بسته شدن رستوران هنگام ورود آگاه باشند.

راه حل نشانگرهای پیشرفته پویا

اکنون بیایید در ساختن یک نقشه با استفاده از نشانگرهای پیشرفته برای تجسم داده های پویا قدم برداریم. همانطور که قبلا ذکر شد، مورد استفاده زنجیره‌ای از فروشگاه‌های خرده‌فروشی است که از سیستم مدیریت صف خروج خود برای تخمین و تجسم زمان انتظار برای کاربران استفاده می‌کنند. این معماری برنامه است::

یک نمودار معماری دسترسی کاربر به برنامه وب را نشان می دهد. زیرساخت برنامه وب Google (GMP و Firebase Cloud Functions). Firebase Cloud Functions به داده های زنده از باطن مشتری دسترسی دارد.

مرحله 1 - تعیین ویژگی ها برای تعریف تجربه بصری

اولین قدم تعیین یک یا چند ویژگی مکان برای نمایش به کاربران است. در این مورد، ما به دنبال نمایش تنها یک ویژگی هستیم: زمان انتظار فعلی در هر مکان فروشگاه، که بر حسب دقیقه اندازه‌گیری می‌شود.

مرحله بعدی انتخاب یک یا چند ویژگی نشانگر مربوطه برای حاشیه نویسی بصری زمان انتظار بر روی نشانگر نقشه است. لیست ویژگی های نشانگر در مشخصات PinElement خارج از جعبه موجود است. همچنین می توانید از HTML سفارشی برای گزینه های سفارشی سازی غنی تر استفاده کنید.

برای این مثال، ما از دو ویژگی نشانگر برای تجسم داده های زمان انتظار استفاده خواهیم کرد:

  • رنگ نشانگر : آبی برای زمان انتظار کمتر از 5 دقیقه، زرد برای بیش از 5 دقیقه
  • محتویات نشانگر (به نشانگرهای HTML سفارشی نیاز دارد) : ما زمان انتظار فعلی را در چند دقیقه در خود نشانگر قرار می دهیم

مرحله 2 - اتصال به منابع داده بلادرنگ را پیکربندی کنید

راه های متعددی برای اتصال به منابع داده وجود دارد و راه حل مناسب به موارد استفاده و زیرساخت فنی شما بستگی دارد. در این مثال، ما از یک رویکرد کششی استفاده می‌کنیم، که در آن داده‌های زمان انتظار به‌روزرسانی‌شده را از طریق درخواست‌های HTTP (REST) ​​به طور منظم درخواست می‌کنیم. در بخش‌های بعدی، معماری‌های جایگزین را خواهید دید که از رویکردهای فشار استفاده می‌کنند.

برای فعال کردن برنامه ما برای دسترسی به داده های زمان انتظار از سرور ما، معماری ما از Cloud Functions برای Firebase استفاده می کند. توابع ابری ما را قادر می سازد تا یک تابع پشتیبان برای دسترسی و محاسبه این داده ها تعریف کنیم. ما همچنین کتابخانه Firebase را در برنامه وب خود گنجانده ایم که به ما امکان می دهد از طریق یک درخواست HTTP به عملکرد ابری خود دسترسی پیدا کنیم .

قدم بعدی این است که اطمینان حاصل کنیم که داده ها را برای کاربر تازه نگه می داریم. برای انجام این کار، یک تایمر با استفاده از تابع setInterval جاوا اسکریپت با بازه زمانی 30 ثانیه تنظیم کردیم. هر بار که تایمر فعال می شود، ما اطلاعات زمان انتظار به روز شده را همانطور که در بالا توضیح داده شد درخواست می کنیم. پس از دریافت داده های جدید، باید ظاهر نشانگرهای نقشه را تازه کنیم. مرحله بعدی نحوه ایجاد این تغییرات را توضیح می دهد.

مرحله 3 - نشانگرهای نقشه را رندر کنید

اکنون می توانیم از نشانگرهای پیشرفته برای رندر کردن نشانگرهای سبک روی نقشه استفاده کنیم. نشانگرهای پیشرفته را می‌توان بر روی نقشه‌های ایجاد شده توسط Maps Javascript پلتفرم Google Maps ارائه کرد. هنگام استفاده از نشانگرهای پیشرفته، حتماً پارامتر Map ID را در درخواست نقشه JS لحاظ کنید.

در قطعه کد نشان داده شده در زیر، ما نشانگرها را ایجاد می کنیم و محتوای نشانگر را با ایجاد یک عنصر div HTML تعریف می کنیم:

// 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";

نقشه اکنون از API زمان انتظار موجود ما برای تجسم زمان‌های انتظار به‌روز برای کاربران استفاده می‌کند:

تصویر قهرمان نقشه جی اس گوگل مپ را در مرکز سانفرانسیسکو نشان می دهد. چندین مکان نشانگرهای رنگارنگی را نشان می‌دهند که محتوای آنها عبارت «2 دقیقه»، «4 دقیقه» است.

راه های جایگزین برای اتصال به منابع داده بلادرنگ

راه های مختلفی برای اتصال به منابع داده بلادرنگ وجود دارد. در زیر، دو گزینه جایگزین، Firebase Cloud Messaging و Websockets را بررسی می کنیم. هر رویکردی که انتخاب می‌کنید، حتماً عوامل زیر را در نظر بگیرید تا ابزار نقشه شما کارآمد بماند:

  • فراوانی به روز رسانی
  • حجم داده ها
  • تعداد نشانگرها در نمای نقشه
  • قابلیت های سخت افزار و مرورگر

Firebase Cloud Messaging

Firebase Cloud Messaging یک رویکرد فشاری است. با استفاده از این رویکرد، هر بار که داده‌های زمان انتظار در باطن به‌روزرسانی می‌شوند، به‌روزرسانی‌هایی را به برنامه نقشه ارسال می‌کنید. پیام‌های به‌روزرسانی یک عملکرد پاسخ به تماس را راه‌اندازی می‌کند که هدف آن به‌روزرسانی ظاهر و محتویات نشانگر است.

نکته ای که قبل از انتخاب این معماری باید در نظر گرفت این است که برای هر مرورگری که برنامه نقشه را اجرا می کند، نیاز به حفظ یک اتصال سرور دائمی دارد. به همین دلیل ممکن است اجرای آن پرهزینه تر باشد، و ممکن است در زمینه مسائل اتصال قوی تر باشد.

وب سوکت ها

WebSockets یکی دیگر از رویکردهای مبتنی بر فشار برای تازه نگه داشتن داده ها است. مشابه سناریوی قبلی، می‌توانید از WebSockets برای ایجاد یک ارتباط دائمی بین باطن و برنامه نقشه خود استفاده کنید. مزایای عملکردی این رویکرد در ماهیت مشابه با Firebase Cloud Messaging است، با این حال ممکن است برای پیکربندی زیرساخت های لازم کارهای بیشتری لازم باشد.

نتیجه

توسعه دهندگان می توانند منابع داده بلادرنگ را با نشانگرهای پیشرفته ترکیب کنند تا تصاویر بصری را در Google Maps ایجاد کنند. بسته به نیاز نقشه، سخت افزار و مرورگر کاربر و حجم داده، راه های مختلفی برای اتصال این منابع داده وجود دارد. سپس داده های یکپارچه می توانند برای کنترل ظاهر و احساس نشانگرهای پیشرفته در زمان واقعی مورد استفاده قرار گیرند و تجربه ای پویا را برای کاربران فراهم کنند.

اقدامات بعدی

بیشتر خواندن:

مشارکت کنندگان

نویسندگان اصلی:

جیم لفلار | مهندس راه حل های پلتفرم نقشه های گوگل

جان برانیگان | Google Cloud Platform Sr. مهندس مشتری

استیو بارت | مهندس راه حل های پلتفرم نقشه های گوگل