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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שלב 3 – עיבוד של סמנים במפה

עכשיו אנחנו יכולים להשתמש בסמנים מתקדמים כדי להציג את הסמנים המעוצבים במפה. ניתן לעבד סמנים מתקדמים במפות שנוצרו באמצעות API JavaScript של פלטפורמת מפות Google. כשמשתמשים בסמנים מתקדמים, חשוב לכלול את הפרמטר Map ID בבקשה להצגת המפה ב-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 ב-JS שממוקדת בסן פרנסיסקו. במספר מיקומים מוצגים סמנים צבעוניים עם הכיתוב '2 דקות', '4 דקות'

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

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

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

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

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

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

WebSockets

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

סיכום

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

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

קריאה נוספת:

תורמים

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

ג'ים לפלאר | מהנדס פתרונות של הפלטפורמה של מפות Google

John Branigan | מהנדס לקוחות בכיר ב-Google Cloud Platform

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