किसी शिपमेंट को फ़ॉलो करना

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

  • मैप शुरू करना और शेयर की गई यात्रा की जानकारी दिखाना
  • यात्रा की प्रोग्रेस को अपडेट करना और उसे फ़ॉलो करना
  • किसी शिपमेंट को फ़ॉलो करना बंद करना
  • शिपमेंट ट्रैकिंग से जुड़ी गड़बड़ियों को ठीक करना

मैप सेट अप करना

अपने वेब ऐप्लिकेशन में शिपमेंट पिकअप या डिलीवरी को ट्रैक करने के लिए, आपको एक मैप लोड करना होगा. साथ ही, शिपमेंट को ट्रैक करने के लिए Consumer SDK टूल को इंस्टैंशिएट करना होगा. आपके पास नया मैप लोड करने या किसी मौजूदा मैप का इस्तेमाल करने का विकल्प होता है. इसके बाद, Consumer SDK को इंस्टैंशिएट करने के लिए, इनिशियलाइज़ेशन फ़ंक्शन का इस्तेमाल करें. इससे मैप व्यू, ट्रैक किए जा रहे आइटम की जगह की जानकारी के हिसाब से दिखेगा.

Google Maps JavaScript API का इस्तेमाल करके, नया मैप लोड करना

नया मैप बनाने के लिए, अपने वेब ऐप्लिकेशन में Google Maps JavaScript API लोड करें. यहां दिए गए उदाहरण में, Google Maps JavaScript API को लोड करने, SDK टूल को चालू करने, और शुरू होने की स्थिति की जांच को ट्रिगर करने का तरीका बताया गया है.

  • एपीआई लोड होने के बाद, callback पैरामीटर initMap फ़ंक्शन को चलाता है.
  • defer एट्रिब्यूट की मदद से, ब्राउज़र को एपीआई लोड होने के दौरान आपके पेज के बाकी हिस्से को रेंडर करने की अनुमति मिलती है.

Consumer SDK को इंस्टैंशिएट करने के लिए, initMap फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

मौजूदा मैप लोड करना

Google Maps JavaScript API से बनाए गए किसी मौजूदा मैप को भी लोड किया जा सकता है. जैसे, वह मैप जिसका इस्तेमाल पहले से किया जा रहा है.

उदाहरण के लिए, मान लें कि आपके पास एक ऐसा वेब पेज है जिस पर स्टैंडर्ड google.maps.Map इकाई मौजूद है. इस पर मार्कर को इस तरह दिखाया गया है जैसा कि यहां दिए गए एचटीएमएल कोड में बताया गया है. इसमें, कॉलबैक के आखिर में एक ही initMap फ़ंक्शन का इस्तेमाल करके, आपका मैप दिखाया गया है:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
        // Initialize and add the map
        function initMap() {
          // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // The map, initially centered at Mountain View, CA.
          var map = new google.maps.Map(document.getElementById('map'));
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

          // The marker, now positioned at Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

शिपमेंट की जगह की जानकारी देने वाले को इंस्टैंटिएट करना

Fleet Engine से डेटा पाना शुरू करने के लिए, शिपमेंट की जगह की जानकारी देने वाली सेवा का इस्तेमाल करें. साथ ही, पहले से तय किए गए ऑथराइज़ेशन टोकन फ़ेचर का इस्तेमाल करें.

इन उदाहरणों में, जगह की जानकारी देने वाली सेवा को इंस्टैंटिएट करने का तरीका बताया गया है.

JavaScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

शेयर की गई यात्रा की जानकारी दिखाना

शेड्यूल किए गए टास्क की प्रोग्रेस दिखाने के लिए, उसके व्यू को शुरू करें. इससे मैप के लिए फ़्रेम सेट हो जाता है, ताकि ट्रैक की गई यात्रा की जगह दिख सके. इसके बाद, Consumer SDK टूल, Fleet Engine से जानकारी मिलने के बाद प्रोग्रेस की जानकारी देता है.

सलाह:

  1. पक्का करें कि आपके पेज में एक <div> एलिमेंट मौजूद हो, जिसमें मैप व्यू दिखता हो. यहां दिए गए उदाहरण में, <div> एलिमेंट का नाम map_canvas है.

  2. Fleet Engine, ट्रैक की गई यात्राओं पर डिफ़ॉल्ट रूप से लागू होने वाले नियमों के बारे में जानें. चालू वाहन की शिपमेंट और शेड्यूल किए गए स्टॉप टास्क के लिए, दिखने से जुड़े नियम भी कॉन्फ़िगर किए जा सकते हैं. टास्क कॉन्फ़िगर करना गाइड में, टास्क के दिखने की सेटिंग को पसंद के मुताबिक बनाना लेख पढ़ें.

इन उदाहरणों में, मैप व्यू को चालू करने का तरीका बताया गया है.

JavaScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-id';

  // Give the map an initial viewport to allow it to
  // initialize; otherwise the 'ready' event above may
  // not fire. The user also has access to the mapView
  // object to customize as they wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

TypeScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // Any undefined styling options will use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-id';

  // Give the map an initial viewport to allow it to
  // initialize; otherwise the 'ready' event above may
  // not fire. The user also has access to the mapView
  // object to customize as they wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

शिपमेंट की स्थिति अपडेट करना

इवेंट के बारे में सुना जा सकता है. साथ ही, शिपमेंट की स्थिति को अपडेट किया जा सकता है. taskTrackingInfo ऑब्जेक्ट से मेटा जानकारी वापस पाने के लिए, लोकेशन प्रोवाइडर का इस्तेमाल करें. मेटा जानकारी में बदलाव होने पर, अपडेट इवेंट ट्रिगर होता है. taskTrackingInfo ऑब्जेक्ट से ये सुविधाएं मिलती हैं:

  • ईटीए
  • बचे हुए स्टॉप की संख्या
  • पिकअप या डिलीवरी से पहले बची हुई दूरी

नीचे दिए गए उदाहरण में, बदलाव से जुड़े इन इवेंट को सुनने का तरीका बताया गया है.

JavaScript

locationProvider.addListener('update', e => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

एक से ज़्यादा टास्क के लिए डिसप्ले क्राइटेरिया

शेड्यूल किए गए टास्क के लिए Consumer SDK, मैप पर हर ट्रैकिंग आईडी के लिए सिर्फ़ एक टास्क दिखाता है. हालांकि, आम तौर पर किसी खास शिपमेंट के लिए एक ट्रैकिंग आईडी असाइन किया जाता है. यह आईडी, शिपमेंट के साथ तब तक जुड़ा रहता है, जब तक वह आपके सिस्टम में अपनी यात्रा पूरी नहीं कर लेता. इसका मतलब है कि एक ट्रैकिंग आईडी, कई टास्क से जुड़ा हो सकता है. जैसे, एक ही पैकेज के लिए पिकअप टास्क के बाद डिलीवरी टास्क या किसी पैकेज के लिए शिपमेंट के कई टास्क पूरे नहीं किए जा सके.

इस स्थिति को मैनेज करने के लिए, Fleet Engine, टास्क दिखाने के लिए कुछ शर्तें लागू करता है. ये शर्तें इस टेबल में दी गई हैं.

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

किसी शिपमेंट को फ़ॉलो करना बंद करना

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

ट्रैकिंग आईडी हटाना

अगर आपको जगह की जानकारी देने वाली कंपनी को शिपमेंट ट्रैक करने से रोकना है, तो उससे ट्रैकिंग आईडी हटाएं. यहां दिए गए उदाहरणों में, ऐसा करने का तरीका बताया गया है.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

मैप व्यू से जगह की जानकारी देने वाली सेवा को हटाना

यहां दिए गए उदाहरण में, मैप व्यू से किसी लोकेशन प्रोवाइडर को हटाने का तरीका बताया गया है.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

शिपमेंट ट्रैकिंग से जुड़ी गड़बड़ियों को ठीक करना

शिपमेंट की जानकारी का अनुरोध करने पर, एसिंक्रोनस तरीके से होने वाली गड़बड़ियों से error इवेंट ट्रिगर होते हैं. यहां दिए गए उदाहरण में, गड़बड़ियों को ठीक करने के लिए इन इवेंट को सुनने का तरीका बताया गया है.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

ध्यान दें: अनचाही गड़बड़ियों को ठीक करने के लिए, लाइब्रेरी कॉल को try...catch ब्लॉक में रैप करना न भूलें.

आगे क्या करना है