פלטפורמת מפות Google מאפשרת ללקוחות לפתח חוויות ייחודיות על ידי התאמה אישית של העיצוב החזותי של הסמנים במפה באמצעות סמנים מתקדמים. במסמך הזה נסביר איך הלקוחות יכולים להתקדם צעד אחד נוסף וליצור סמנים שמשתנים באופן דינמי על סמך נתונים בזמן אמת.
סמנים במפה הם כלי שימושי שמאפשר לספק למשתמשים חוויית מיפוי עשירה. מאפייני הסמן, כמו גודל, צבע וצורה, יכולים להעביר מידע נוסף על כל מיקום שמסומן. במקרים מסוימים, המידע הנוסף הזה עשוי להשתנות באופן דינמי, והמפתח עשוי לרצות שהתצוגה החזותית של המפה תתעדכן כדי לשמור על תחושה של עדכניות אצל המשתמש.
במסמך הזה נעזרים בדוגמה להמחשה: רשת קמעונאות רוצה להשתמש במפה כדי לספק למשתמשים מידע על זמני ההמתנה בחנות. עם זאת, אפשר להשתמש באותה ארכיטקטורה בתרחישי שימוש רבים אחרים. ריכזנו כאן כמה רעיונות נוספים:
- זמינות החדרים במלון: במפה שמציגה את תוצאות החיפוש של המלונות, עדכניות הזמינות של החדרים היא אות חשוב שיכול לעודד משתמשים לבצע הזמנה במלון ככל שמלאי החדרים פוחת.
- זמינות מקומות חניה: במפה של מקומות חניה, אפשר לתת למשתמשים ביטחון בבחירת יעד שבו יהיה מקום פנוי כשהם יגיעו.
- מסעדות פתוחות, סגורות בקרוב וסגורות: במפה שמציגה תוצאות חיפוש של מסעדות, חשוב שהמשתמשים ידעו אם המסעדה עשויה להיות סגורה כשהם יגיעו אליה.
הפתרון של סמנים מתקדמים דינמיים
אפשר ליצור מפה באמצעות סמנים מתקדמים כדי להציג נתונים דינמיים באופן חזותי. כפי שצוין קודם, התרחיש לדוגמה הוא רשת של חנויות קמעונאיות שמשתמשת במערכת לניהול התורים בקופה כדי להעריך את זמני ההמתנה של המשתמשים ולהציג אותם באופן חזותי. זוהי ארכיטקטורת האפליקציה:
שלב 1 – קובעים את המאפיינים להגדרת חוויית הצפייה
בשלב הראשון צריך לקבוע נכס מיקום אחד או יותר שיוצגו למשתמשים. במקרה הזה, אנחנו רוצים להציג רק נכס אחד: זמן ההמתנה הנוכחי בכל מיקום של החנות, שנמדד בדקות.
בשלב הבא בוחרים מאפיין אחד או יותר של הסמן התואם כדי להוסיף הערה חזותית לגבי זמן ההמתנה לסמן במפה. רשימת המאפיינים של הסמנים זמינה כברירת מחדל במפרט PinElement. אפשר גם להשתמש ב-HTML בהתאמה אישית כדי לקבל אפשרויות עשירות יותר להתאמה אישית.
בדוגמה הזו נשתמש בשני מאפייני סמנים כדי להציג נתונים של זמני המתנה באופן חזותי:
- צבע הסמן: כחול לזמן המתנה של פחות מ-5 דקות, צהוב לזמן המתנה של יותר מ-5 דקות
- תוכן הסמן (נדרשים סמנים מותאמים אישית של HTML): נכלול את זמן ההמתנה הנוכחי בדקות בסמן עצמו.
שלב 2 – הגדרת חיבור למקורות נתונים בזמן אמת
יש כמה דרכים להתחבר למקורות נתונים, והפתרון הנכון תלוי בתרחיש השימוש ובתשתית הטכנית. בדוגמה הזו אנחנו משתמשים בגישה של משיכה (pull), שבה אנחנו מבקשים את נתוני זמן ההמתנה המעודכנים באמצעות בקשות HTTP (REST) באופן קבוע. בסעיפים הבאים נסביר על ארכיטקטורות חלופיות שמשתמשות בגישות של דחיפה.
כדי לאפשר לאפליקציה לגשת לנתוני זמן ההמתנה מהשרת שלנו, הארכיטקטורה שלנו משתמשת ב-Cloud Functions for Firebase. בעזרת Cloud Functions אפשר להגדיר פונקציית קצה עורפי כדי לגשת לנתונים האלה ולחשב אותם. אנחנו גם כוללים את ספריית Firebase באפליקציית האינטרנט שלנו, וכך אנחנו יכולים לגשת ל-Cloud Function באמצעות בקשת HTTP.
השלב הבא הוא לוודא שהנתונים יהיו עדכניים עבור המשתמש. לשם כך, מגדירים טיימר באמצעות פונקציית JavaScript setInterval עם זמן קצוב לתפוגה של 30 שניות. בכל פעם שהטיימר מופעל, אנחנו מבקשים נתונים מעודכנים של זמני ההמתנה, כפי שמתואר למעלה. אחרי שנקבל את הנתונים החדשים, נצטרך לרענן את המראה של הסמנים במפה. בשלב הבא מוסבר איך לבצע את השינויים האלה.
שלב 3 – עיבוד (רנדר) של סמנים במפה
עכשיו אנחנו יכולים להשתמש בסמנים מתקדמים כדי להציג את הסמנים המעוצבים במפה. אפשר להציג סמנים מתקדמים במפות שנוצרו באמצעות ממשק ה-API של JavaScript במפות של הפלטפורמה של מפות Google. כשמשתמשים בסמנים מתקדמים, חשוב לכלול את פרמטר מזהה המפה בבקשה למפה ב-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 הקיים שלנו של זמני ההמתנה כדי להציג למשתמשים את זמני ההמתנה העדכניים באופן חזותי:
דרכים חלופיות להתחברות למקורות נתונים בזמן אמת
יש כמה דרכים להתחבר למקורות נתונים בזמן אמת. בהמשך נסקור שתי אפשרויות חלופיות: Firebase Cloud Messaging ו-Websockets. לא משנה באיזו גישה תבחרו, חשוב להביא בחשבון את הגורמים הבאים כדי שהכלי למפות ימשיך לפעול בצורה חלקה:
- תדירות העדכונים
- נפח הנתונים
- מספר הסימנים בתצוגת המפה
- יכולות החומרה והדפדפן
העברת הודעות בענן ב-Firebase
Firebase Cloud Messaging היא גישה של דחיפה. הגישה הזו מאפשרת לשלוח עדכונים לאפליקציית המפה בכל פעם שנתוני זמני ההמתנה מתעדכנים בקצה העורפי. הודעות עדכון יפעילו פונקציית קריאה חוזרת (callback) שמטרתה לעדכן את המראה והתוכן של הסמן.
לפני שבוחרים בארכיטקטורה הזו, חשוב לזכור שצריך לשמור על חיבור שוטף לשרת לכל דפדפן שבו פועלת אפליקציית המפה. לכן, יכול להיות שהפעלת השירות תהיה יקרה יותר, והוא עשוי להיות פחות עמיד בהקשר של בעיות קישוריות.
WebSockets
WebSockets היא גישה נוספת מבוססת-דחיפה לשמירה על עדכניות הנתונים. בדומה לתרחיש הקודם, אפשר להשתמש ב-WebSockets כדי ליצור חיבור מתמיד בין הקצה העורפי לאפליקציית המפה. היתרונות הפונקציונליים של הגישה הזו דומים לאלה של העברת הודעות בענן ב-Firebase, אבל יכול להיות שתצטרכו לבצע עבודה נוספת כדי להגדיר את התשתית הנדרשת.
סיכום
מפתחים יכולים לשלב מקורות נתונים בזמן אמת עם סמנים מתקדמים כדי ליצור תצוגות חזותיות אינטואיטיביות במפות Google. יש כמה דרכים לחבר את מקורות הנתונים האלה, בהתאם לדרישות המפה, לחומרה ולדפדפן של המשתמש ולנפח הנתונים. לאחר מכן אפשר להשתמש בנתונים המשולבים כדי לשלוט במראה ובתחושה של הסמנים המתקדמים בזמן אמת, וכך לספק למשתמשים חוויה דינמית.
הפעולות הבאות
מקורות מידע נוספים:
- סמנים מתקדמים – Google Developer Center
- יצירת סמנים באמצעות HTML מותאם אישית
- Cloud Functions for Firebase
- Firebase Cloud Messaging
תורמים
המחברים הראשיים:
Jim Leflar | מהנדס פתרונות בפלטפורמה של מפות Google
John Branigan | מהנדס לקוחות בכיר ב-Google Cloud Platform
Steve Barrett | מהנדס פתרונות בפלטפורמה של מפות Google