Firebase की मदद से रीयल-टाइम मार्कर

Google Maps Platform, ग्राहकों को यूनीक अनुभव देने की सुविधा देता है. इसके लिए, बेहतर मार्कर का इस्तेमाल करके, मैप मार्कर के विज़ुअल डिज़ाइन को पसंद के मुताबिक बनाया जा सकता है. इस दस्तावेज़ में हम जानेंगे कि ग्राहक एक कदम आगे बढ़कर, रीयल-टाइम डेटा के आधार पर डाइनैमिक तौर पर बदलने वाले मार्कर कैसे बना सकते हैं.

हीरो इमेज में, सैन फ़्रांसिस्को पर फ़ोकस किया गया Google Maps JS मैप दिखाया गया है. कई जगहों पर रंग-बिरंगे मार्कर दिख रहे हैं. इन पर '2 मिनट' या '4 मिनट' लिखा है". समय के साथ, रंग और कॉन्टेंट अपडेट होते रहते हैं.

मैप मार्कर, उपयोगकर्ताओं को मैप का बेहतर अनुभव देने के लिए एक काम का टूल है. मार्कर के एट्रिब्यूट, जैसे कि साइज़, रंग, और आकार, मार्क की गई हर जगह के बारे में ज़्यादा जानकारी दे सकते हैं. कुछ मामलों में, यह अतिरिक्त जानकारी डाइनैमिक तौर पर बदल सकती है. साथ ही, डेवलपर मैप विज़ुअलाइज़ेशन को अपडेट करना चाह सकता है, ताकि उपयोगकर्ता को नई जानकारी मिलती रहे.

इस दस्तावेज़ में, हमने उदाहरण के तौर पर एक रीटेल चेन का इस्तेमाल किया है. यह रीटेल चेन, उपयोगकर्ताओं को स्टोर में लगने वाले समय की जानकारी देने के लिए, मैप का इस्तेमाल करना चाहती है. हालांकि, इस आर्किटेक्चर का इस्तेमाल कई अन्य कामों के लिए भी किया जा सकता है. यहां कुछ और आइडिया दिए गए हैं:

  • होटल में कमरे की उपलब्धता: होटल की खोज के नतीजे दिखाने वाले मैप पर, कमरे की उपलब्धता की ताज़ा जानकारी एक अहम सिग्नल है. इससे उपयोगकर्ताओं को होटल में बुकिंग करने के लिए बढ़ावा मिल सकता है, क्योंकि इन्वेंट्री कम हो जाती है.
  • पार्किंग की जगह की उपलब्धता: पार्किंग लॉट के मैप पर, उपयोगकर्ताओं को ऐसी मंज़िल चुनने का भरोसा दें जहां पहुंचने पर उन्हें पार्किंग की जगह मिल सके.
  • खुले, जल्द बंद होने वाले, और बंद रेस्टोरेंट: रेस्टोरेंट के खोज के नतीजे दिखाने वाले मैप पर, उपयोगकर्ताओं को यह जानकारी देना ज़रूरी है कि जब वे रेस्टोरेंट पहुंचेंगे, तब वह बंद हो सकता है.

डाइनैमिक ऐडवांस मार्कर सलूशन

डाइनैमिक डेटा को विज़ुअलाइज़ करने के लिए, ऐडवांस मार्कर का इस्तेमाल करके मैप बनाया जा सकता है. जैसा कि पहले बताया गया है, इस उदाहरण में खुदरा स्टोर की एक चेन है. यह चेन, चेक-आउट की सूची को मैनेज करने वाले सिस्टम का इस्तेमाल करके, उपयोगकर्ताओं के लिए इंतज़ार के समय का अनुमान लगाती है और उसे विज़ुअलाइज़ करती है. यह ऐप्लिकेशन का आर्किटेक्चर है::

इस आर्किटेक्चर डायग्राम में, वेब ऐप्लिकेशन को ऐक्सेस करने वाले उपयोगकर्ता को दिखाया गया है. वेब ऐप्लिकेशन Google इन्फ़्रास्ट्रक्चर (जीएमपी और Firebase Cloud Functions). Firebase Cloud Functions, ग्राहक के बैकएंड से लाइव डेटा ऐक्सेस करता है.

पहला चरण - विज़ुअल एक्सपीरियंस तय करने के लिए एट्रिब्यूट तय करना

सबसे पहले, उपयोगकर्ताओं को दिखाने के लिए, जगह की एक या उससे ज़्यादा प्रॉपर्टी तय करें. इस मामले में, हमें सिर्फ़ एक प्रॉपर्टी दिखानी है: हर स्टोर की जगह पर, कॉल करने का मौजूदा सबसे सही समय. इसे मिनट में मेज़र किया जाता है.

अगला चरण, एक या उससे ज़्यादा मार्कर एट्रिब्यूट चुनना है, ताकि मैप मार्कर पर इंतज़ार के समय को विज़ुअल तौर पर दिखाया जा सके. मार्कर एट्रिब्यूट की सूची, PinElement स्पेसिफ़िकेशन में पहले से मौजूद होती है. कस्टमाइज़ेशन के ज़्यादा बेहतर विकल्पों के लिए, कस्टम एचटीएमएल का भी इस्तेमाल किया जा सकता है.

इस उदाहरण के लिए, हम इंतज़ार के समय के डेटा को विज़ुअलाइज़ करने के लिए, दो मार्कर एट्रिब्यूट का इस्तेमाल करेंगे:

  • मार्कर का रंग: पांच मिनट से कम इंतज़ार के लिए नीला, पांच मिनट से ज़्यादा इंतज़ार के लिए पीला
  • मार्कर का कॉन्टेंट (इसके लिए, कस्टम एचटीएमएल मार्कर ज़रूरी हैं): हम मार्कर में ही, मिनटों में मौजूदा वेट टाइम शामिल करेंगे

दूसरा चरण - रीयल-टाइम डेटा सोर्स से कनेक्शन कॉन्फ़िगर करना

डेटा सोर्स से कनेक्ट करने के कई तरीके हैं. सही तरीका आपके इस्तेमाल के उदाहरण और तकनीकी इन्फ़्रास्ट्रक्चर पर निर्भर करता है. इस उदाहरण में, हम पुल अप्रोच का इस्तेमाल कर रहे हैं. इसमें हम एचटीटीपी अनुरोधों (REST) का इस्तेमाल करके, नियमित तौर पर वेट टाइम के अपडेट किए गए डेटा का अनुरोध करते हैं. यहां दिए गए सेक्शन में, आपको पुश करने के तरीकों का इस्तेमाल करने वाले वैकल्पिक आर्किटेक्चर दिखेंगे.

हमारे ऐप्लिकेशन को हमारे सर्वर से, कॉल करने के सबसे सही समय का डेटा ऐक्सेस करने की अनुमति देने के लिए, हमारा आर्किटेक्चर Firebase के लिए Cloud Functions का इस्तेमाल करता है. Cloud Functions की मदद से, हम इस डेटा को ऐक्सेस और कंप्यूट करने के लिए, बैकएंड फ़ंक्शन तय कर सकते हैं. हम अपने वेब ऐप्लिकेशन में Firebase लाइब्रेरी भी शामिल करते हैं. इससे हमें एचटीटीपी अनुरोध का इस्तेमाल करके, अपने Cloud फ़ंक्शन को ऐक्सेस करने में मदद मिलती है.

अगला कदम यह पक्का करना है कि हम उपयोगकर्ता के लिए डेटा को अप-टू-डेट रखें. इसके लिए, हम JavaScript setInterval फ़ंक्शन का इस्तेमाल करके, 30 सेकंड का टाइमर सेट करते हैं. टाइमर के ट्रिगर होने पर, हम कॉल करने के सबसे सही समय के अपडेट किए गए डेटा का अनुरोध करते हैं. इसके बारे में ऊपर बताया गया है. नया डेटा मिलने के बाद, हमें मैप मार्कर के दिखने के तरीके को रीफ़्रेश करना होगा. अगले चरण में, इन बदलावों को करने का तरीका बताया गया है.

तीसरा चरण - मैप मार्कर रेंडर करना

अब हम ऐडवांस मार्कर का इस्तेमाल करके, मैप पर स्टाइल किए गए मार्कर रेंडर कर सकते हैं. ऐडवांस मार्कर, Google Maps Platform के Maps Javascript API से बनाए गए मैप पर रेंडर किए जा सकते हैं. ऐडवांस मार्कर का इस्तेमाल करते समय, JS मैप के अनुरोध में मैप आईडी पैरामीटर को शामिल करना न भूलें.

नीचे दिए गए कोड स्निपेट में, हम मार्कर बनाते हैं और एचटीएमएल 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]
    }));

आखिरी चरण में, हर स्टोर के लिए मार्कर टेक्स्ट और सीएसएस स्टाइलिंग को अपडेट करें. नीचे दिया गया कोड, कॉल करने के सबसे सही समय के अपडेट किए गए डेटा को पढ़ता है. साथ ही, कॉल करने के सबसे सही समय के आधार पर, हर स्टोर पिन को स्टाइल असाइन करता है:

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

मैप अब हमारे मौजूदा वेट टाइम्स एपीआई का इस्तेमाल करता है, ताकि उपयोगकर्ताओं को कॉल करने के सबसे सही समय की अप-टू-डेट जानकारी दिखाई जा सके:

हीरो इमेज में, सैन फ़्रांसिस्को पर फ़ोकस किया गया Google Maps JS मैप दिखाया गया है. कई जगहों पर रंग-बिरंगे मार्कर दिखते हैं. इन पर '2 मिनट' या '4 मिनट' लिखा होता है. समय के साथ, रंग और कॉन्टेंट अपडेट होते रहते हैं.

रीयल-टाइम डेटा सोर्स से कनेक्ट करने के अन्य तरीके

रीयल-टाइम डेटा सोर्स से कनेक्ट करने के कई तरीके हैं. यहां हम दो अन्य विकल्पों, Firebase क्लाउड से मैसेज और वेबसॉकेट के बारे में बात करेंगे. आप जो भी तरीका चुनें, इन बातों का ध्यान रखें, ताकि आपका मैप टूल बेहतर तरीके से काम करता रहे:

  • अपडेट की फ़्रीक्वेंसी
  • डेटा की मात्रा
  • मैप व्यू में मौजूद मार्कर की संख्या
  • हार्डवेयर और ब्राउज़र की क्षमताएं

Firebase क्लाउड से मैसेज

Firebase क्लाउड से मैसेज, पुश करने का तरीका है. इस तरीके का इस्तेमाल करके, बैकएंड पर इंतज़ार के समय का डेटा अपडेट होने पर, मैप ऐप्लिकेशन को अपडेट भेजे जाएंगे. अपडेट मैसेज, कॉलबैक फ़ंक्शन को ट्रिगर करेंगे. इसका मकसद, मार्कर के दिखने के तरीके और कॉन्टेंट को अपडेट करना है.

इस आर्किटेक्चर को चुनने से पहले, यह ध्यान रखना ज़रूरी है कि मैप ऐप्लिकेशन चलाने वाले हर ब्राउज़र के लिए, सर्वर कनेक्शन को लगातार बनाए रखना ज़रूरी है. इस वजह से, इसे चलाना ज़्यादा महंगा हो सकता है. साथ ही, कनेक्टिविटी की समस्याओं के मामले में यह कम असरदार हो सकता है.

WebSockets

WebSockets, डेटा को अप-टू-डेट रखने का एक और पुश-आधारित तरीका है. पिछले उदाहरण की तरह ही, अपने बैकएंड और मैप ऐप्लिकेशन के बीच लगातार कनेक्शन बनाए रखने के लिए, WebSockets का इस्तेमाल किया जा सकता है. इस तरीके के फ़ायदे, Firebase क्लाउड से मैसेज की तरह ही हैं. हालांकि, ज़रूरी इन्फ़्रास्ट्रक्चर को कॉन्फ़िगर करने के लिए, आपको कुछ और काम करने पड़ सकते हैं.

नतीजा

डेवलपर, रीयल-टाइम डेटा सोर्स को ऐडवांस मार्कर के साथ जोड़कर, Google Maps पर आसानी से समझ आने वाले विज़ुअलाइज़ेशन बना सकते हैं. इन डेटा सोर्स को कनेक्ट करने के कई तरीके हैं. यह मैप की ज़रूरी शर्तों, उपयोगकर्ता के हार्डवेयर और ब्राउज़र, और डेटा वॉल्यूम पर निर्भर करता है. इसके बाद, इंटिग्रेट किए गए डेटा का इस्तेमाल करके, रीयल-टाइम में ऐडवांस मार्कर के लुक और स्टाइल को कंट्रोल किया जा सकता है. इससे उपयोगकर्ताओं को डाइनैमिक अनुभव मिलता है.

अगली कार्रवाइयां

इस बारे में और पढ़ें:

योगदानकर्ता

मुख्य लेखक:

जिम लेफ़्लर | Google Maps Platform सॉल्यूशंस इंजीनियर

जॉन ब्रैनिगन | Google Cloud Platform के सीनियर कस्टमर इंजीनियर

स्टीव बैरेट | Google Maps Platform के सलूशन इंजीनियर