מושכים לקוחות בזמן אמת בעזרת סמנים מתקדמים & Firebase

הפלטפורמה של מפות Google מאפשרת ללקוחות לפתח חוויות ייחודיות על ידי התאמה אישית של העיצוב החזותי של סמני המפה באמצעות סמנים מתקדמים. במאמר הזה נסביר איך לקוחות יכולים להתקדם עוד שלב וליצור סמנים שמשתנים באופן דינמי על סמך נתונים בזמן אמת.

תמונת הגיבור מציגה מפה של Google Maps JS עם מרכז בסן פרנסיסקו. בכמה מקומות מוצגים סמנים צבעוניים עם התוכן '2 דקות' או '4 דקות'. הצבעים והתוכן מתעדכנים ככל שהזמן עובר.

סמני מיקום במפה הם כלי שימושי שמאפשר לספק למשתמשים חוויות מיפוי עשירות. מאפייני סמנים כמו גודל, צבע וצורה יכולים להעביר מידע נוסף על כל מיקום מסומן. במקרים מסוימים, המידע הנוסף הזה עשוי להשתנות באופן דינמי, והמפתח עשוי לרצות שהוויזואליזציה של המפה תתעדכן כדי שהמשתמש יקבל תחושה של מידע עדכני.

במסמך הזה אנחנו משתמשים בדוגמה הבאה כדי להמחיש את התהליך: רשת קמעונאית רוצה להשתמש במפה כדי להציג למשתמשים את זמני ההמתנה בחנויות. עם זאת, אפשר להשתמש באותה ארכיטקטורה לתרחישי שימוש רבים אחרים. הנה עוד כמה רעיונות:

  • זמינות חדרים במלון: במפה שמוצגות בה תוצאות חיפוש של מלונות, עדכניות הזמינות של החדרים היא אות חשוב שיכול לעודד משתמשים לבצע הזמנה במלון כשהמלאי מצטמצם.
  • זמינות מקומות חנייה: במפה של חניונים, המשתמשים יכולים לבחור יעד שיהיה בו מקום חנייה כשהם יגיעו.
  • מסעדות פתוחות, מסעדות שעומדות להיסגר ומסעדות סגורות: במפה שבה מוצגות תוצאות חיפוש של מסעדות, חשוב שהמשתמשים ידעו אם המסעדה עשויה להיות סגורה כשהם יגיעו אליה.

הפתרון 'סמנים מתקדמים דינמיים'

אפשר ליצור מפה באמצעות סמנים מתקדמים כדי להציג נתונים דינמיים. כמו שצוין קודם, התרחיש לדוגמה הוא רשת של חנויות קמעונאיות שמשתמשת במערכת לניהול תורים בקופה כדי להעריך ולהציג את זמני ההמתנה למשתמשים. זו הארכיטקטורה של האפליקציה::

תרשים ארכיטקטורה שמראה את המשתמש ניגש לאפליקציית האינטרנט. תשתית Google של אפליקציות אינטרנט (GMP ו-Firebase Cloud Functions). ‫Firebase Cloud Functions ניגש לנתונים בזמן אמת מהקצה העורפי של הלקוח.

שלב 1 – קביעת מאפיינים להגדרת חוויית הצפייה

השלב הראשון הוא לקבוע מאפיין מיקום אחד או יותר שיוצגו למשתמשים. במקרה הזה, אנחנו רוצים להציג רק מאפיין אחד: זמן ההמתנה הנוכחי בכל מיקום של החנות, שנמדד בדקות.

השלב הבא הוא לבחור מאפיין אחד או יותר של סמנים תואמים כדי להוסיף הערה ויזואלית של זמן ההמתנה לסמן במפה. רשימת מאפייני הסמן זמינה מחוץ לקופסה במפרט של PinElement. אפשר גם להשתמש ב-HTML בהתאמה אישית כדי לקבל אפשרויות התאמה אישית עשירות יותר.

בדוגמה הזו נשתמש בשני מאפייני סמן כדי להציג נתונים של זמן המתנה:

  • צבע הסמן: כחול לזמן המתנה של פחות מ-5 דקות, צהוב לזמן המתנה של יותר מ-5 דקות
  • תוכן הסמן (נדרשים סמני HTML מותאמים אישית): נכלול את זמן ההמתנה הנוכחי בדקות בסמן עצמו

שלב 2 – הגדרת חיבור למקורות נתונים בזמן אמת

יש כמה דרכים להתחבר למקורות נתונים, והפתרון הנכון תלוי בתרחיש השימוש ובמבנה הטכני שלכם. בדוגמה הזו אנחנו משתמשים בגישת משיכה (pull), שבה אנחנו שולחים בקשות HTTP (REST) באופן קבוע כדי לקבל את נתוני זמן ההמתנה המעודכנים. בסעיפים הבאים מוצגות ארכיטקטורות חלופיות שמבוססות על גישות של שליחת נתונים.

כדי לאפשר לאפליקציה שלנו לגשת לנתוני זמן ההמתנה מהשרת שלנו, הארכיטקטורה שלנו מסתמכת על Cloud Functions for Firebase. הפונקציות ב-Cloud Functions מאפשרות לנו להגדיר פונקציית backend כדי לגשת לנתונים האלה ולחשב אותם. אנחנו גם כוללים את ספריית Firebase באפליקציית האינטרנט שלנו, וכך אנחנו יכולים לגשת ל-Cloud Function באמצעות בקשת HTTP.

השלב הבא הוא לוודא שהנתונים יהיו עדכניים עבור המשתמש. לשם כך, אנחנו מגדירים טיימר באמצעות הפונקציה setInterval של JavaScript עם פסק זמן של 30 שניות. בכל פעם שהטיימר מופעל, אנחנו שולחים בקשה לקבלת נתוני זמן המתנה מעודכנים, כמו שמתואר למעלה. אחרי שנקבל את הנתונים החדשים, נצטרך לרענן את המראה של סמני המפה. בשלב הבא מוסבר איך לבצע את השינויים האלה.

שלב 3 – הצגת סמני מפה

עכשיו אפשר להשתמש בסמנים מתקדמים כדי לעבד את הסמנים המעוצבים במפה. אפשר לעבד סמנים מתקדמים במפות שנוצרו באמצעות ממשק ה-API של 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";

במפה מוצגים עכשיו זמני המתנה עדכניים למשתמשים באמצעות ה-API הקיים שלנו לזמני המתנה:

תמונת הגיבור מציגה מפה של Google Maps JS עם מרכז בסן פרנסיסקו. בכמה מקומות מוצגים סמנים צבעוניים עם הכיתוב '2 דקות' או '4 דקות'. הצבעים והתוכן מתעדכנים ככל שהזמן עובר.

דרכים חלופיות להתחבר למקורות נתונים בזמן אמת

יש כמה דרכים להתחבר למקורות נתונים בזמן אמת. בהמשך נסקור שתי אפשרויות חלופיות: Firebase Cloud Messaging ו-Websockets. לא משנה באיזו גישה תבחרו, חשוב להביא בחשבון את הגורמים הבאים כדי שכלי המפה ימשיך לפעול בצורה יעילה:

  • תדירות העדכונים
  • נפח הנתונים
  • מספר הסמנים בתצוגת המפה
  • יכולות החומרה והדפדפן

העברת הודעות בענן ב-Firebase

העברת הודעות בענן ב-Firebase היא גישה של שליחת הודעות פוש. בגישה הזו, תשלחו עדכונים לאפליקציית המפה בכל פעם שנתוני זמן ההמתנה מתעדכנים בשרת העורפי. הודעות עדכון יפעילו פונקציית קריאה חוזרת שמטרתה לעדכן את המראה והתוכן של הסמן.

חשוב לזכור: כדי להשתמש בארכיטקטורה הזו, צריך לשמור על חיבור שרת קבוע לכל דפדפן שמריץ את אפליקציית המפה. לכן, יכול להיות שההרצה תהיה יקרה יותר, ושהיא תהיה פחות יציבה בהקשר של בעיות בקישוריות.

WebSockets

WebSockets היא גישה נוספת שמבוססת על שליחת נתונים כדי לשמור על עדכניות הנתונים. בדומה לתרחיש הקודם, אפשר להשתמש ב-WebSockets כדי ליצור חיבור קבוע בין הקצה העורפי לבין אפליקציית המפה. היתרונות הפונקציונליים של הגישה הזו דומים לאלה של העברת הודעות בענן ב-Firebase, אבל יכול להיות שיידרשו פעולות נוספות כדי להגדיר את התשתית הנדרשת.

סיכום

מפתחים יכולים לשלב מקורות נתונים בזמן אמת עם סמנים מתקדמים כדי ליצור הדמיות אינטואיטיביות במפות Google. יש כמה דרכים לקשר בין מקורות הנתונים האלה, בהתאם לדרישות המפה, לחומרה ולדפדפן של המשתמש ולנפח הנתונים. אחרי השילוב, אפשר להשתמש בנתונים כדי לשלוט במראה ובתחושה של הסמנים המתקדמים בזמן אמת, וכך לספק למשתמשים חוויה דינמית.

הפעולות הבאות

קריאה נוספת:

תורמים

מחברים ראשיים:

Jim Leflar | Google Maps Platform Solutions Engineer

John Branigan | Google Cloud Platform Sr. Customer Engineer

Steve Barrett | מהנדס פתרונות בפלטפורמה של מפות Google