এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি চালান অনুসরণ করুন

এখন যেহেতু আপনি নির্ধারিত কাজগুলোর জন্য জাভাস্ক্রিপ্ট কনজিউমার এসডিকে সেট আপ করে ফেলেছেন, আপনি আপনার কনজিউমার অ্যাপের মাধ্যমে একটি শিপমেন্ট অনুসরণ করার জন্য প্রস্তুত। এই ডকুমেন্টটিতে এই প্রক্রিয়ার নিম্নলিখিত মূল ধাপগুলো আলোচনা করা হয়েছে:

একটি মানচিত্র শুরু করুন এবং শেয়ার করা যাত্রাটি প্রদর্শন করুন।
যাত্রার অগ্রগতি সম্পর্কে আপডেট দিন এবং অনুসরণ করুন।
একটি চালান অনুসরণ করা বন্ধ করুন
চালান ট্র্যাকিং ত্রুটিগুলি পরিচালনা করুন

একটি মানচিত্র তৈরি করুন

আপনার ওয়েব অ্যাপে কোনো চালানের পিকআপ বা ডেলিভারি অনুসরণ করতে, আপনাকে একটি ম্যাপ লোড করতে হবে এবং আপনার চালান ট্র্যাক করা শুরু করার জন্য কনজিউমার এসডিকে (Consumer SDK) ইনস্ট্যানশিয়েট করতে হবে। আপনি একটি নতুন ম্যাপ লোড করতে পারেন অথবা বিদ্যমান কোনো ম্যাপ ব্যবহার করতে পারেন। এরপর আপনি ইনিশিয়ালাইজেশন ফাংশনটি ব্যবহার করে কনজিউমার এসডিকে ইনস্ট্যানশিয়েট করবেন, যাতে ম্যাপ ভিউটি ট্র্যাক করা আইটেমটির অবস্থানের সাথে সামঞ্জস্যপূর্ণ হয়।

গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে একটি নতুন মানচিত্র লোড করুন

একটি নতুন ম্যাপ তৈরি করতে, আপনার ওয়েব অ্যাপে গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করুন। নিম্নলিখিত উদাহরণে দেখানো হয়েছে কীভাবে গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করতে হয়, এসডিকে সক্রিয় করতে হয় এবং ইনিশিয়ালাইজেশন চেকটি চালু করতে হয়।

callback প্যারামিটারটি এপিআই লোড হওয়ার পরে initMap ফাংশনটি চালায়।
` defer অ্যাট্রিবিউটটি এপিআই লোড হওয়ার সময়েও ব্রাউজারকে আপনার পেজের বাকি অংশ রেন্ডার করা চালিয়ে যেতে দেয়।

কনজিউমার এসডিকে ইনস্ট্যানশিয়েট করতে initMap ফাংশনটি ব্যবহার করুন। উদাহরণস্বরূপ:

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

বিদ্যমান মানচিত্র লোড করুন

আপনি গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই দ্বারা তৈরি একটি বিদ্যমান মানচিত্রও লোড করতে পারেন, যেমনটি আপনি ইতিমধ্যেই ব্যবহার করছেন।

উদাহরণস্বরূপ, ধরুন আপনার একটি ওয়েব পেজ আছে যেখানে একটি স্ট্যান্ডার্ড google.maps.Map এনটিটি রয়েছে এবং তাতে নিম্নলিখিত HTML কোডে সংজ্ঞায়িত একটি মার্কার দেখানো হয়েছে। এটি শেষের কলব্যাকে একই 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>

একটি চালান অবস্থান প্রদানকারী ইনস্ট্যানশিয়েট করুন

ফ্লিট ইঞ্জিন থেকে ডেটা গ্রহণ শুরু করতে, আপনার পূর্বে সংজ্ঞায়িত করা অথরাইজেশন টোকেন ফেচারের সাথে শিপমেন্ট লোকেশন প্রোভাইডারটি ব্যবহার করুন।

এই উদাহরণগুলো দেখায় কীভাবে লোকেশন প্রোভাইডারকে ইনস্ট্যানশিয়েট করতে হয়।

জাভাস্ক্রিপ্ট

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

টাইপস্ক্রিপ্ট

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

শেয়ার করা যাত্রা প্রদর্শন করুন

একটি নির্ধারিত টাস্কের অগ্রগতি প্রদর্শন করতে, এর ভিউটি ইনিশিয়ালাইজ করুন, যা ট্র্যাক করা যাত্রাপথের অবস্থানের সাথে সামঞ্জস্য রেখে ম্যাপের ফ্রেম সেট করে। এরপর ফ্লিট ইঞ্জিন থেকে তথ্য পাওয়ার পর কনজিউমার এসডিকে (Consumer SDK) দ্বারা অগ্রগতিটি সরবরাহ করা হয়।

পরামর্শ :

নিশ্চিত করুন যে আপনার পেজে একটি <div> এলিমেন্ট আছে, যার মধ্যে ম্যাপ ভিউটি থাকবে। নিচের উদাহরণে, <div> এলিমেন্টটির নাম map_canvas ।
ট্র্যাক করা জার্নিগুলোর ক্ষেত্রে ফ্লিট ইঞ্জিন যে ডিফল্ট ভিজিবিলিটি নিয়মগুলো প্রয়োগ করে, সে সম্পর্কে সচেতন থাকুন। আপনি সক্রিয় যানবাহন চালান এবং নির্ধারিত স্টপ টাস্কগুলোর জন্যও ভিজিবিলিটি নিয়ম কনফিগার করতে পারেন। টাস্ক কনফিগার করার গাইডের মধ্যে টাস্ক ভিজিবিলিটি কাস্টমাইজ করুন অংশটি দেখুন।

এই উদাহরণগুলো দেখায় কীভাবে একটি ম্যাপ ভিউ শুরু করতে হয়।

জাভাস্ক্রিপ্ট

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);
}

টাইপস্ক্রিপ্ট

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 অবজেক্টটি নিম্নলিখিত বিষয়গুলো প্রদান করে:

আনুমানিক সময়
অবশিষ্ট স্টপের সংখ্যা
পিকআপ বা ডেলিভারির আগে অবশিষ্ট দূরত্ব

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এই পরিবর্তন ইভেন্টগুলি শোনা যায়।

জাভাস্ক্রিপ্ট

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

টাইপস্ক্রিপ্ট

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);
});

একাধিক কাজের জন্য মানদণ্ড প্রদর্শন করুন

নির্ধারিত কাজগুলির জন্য কনজিউমার এসডিকে ম্যাপে প্রতিটি ট্র্যাকিং আইডির জন্য শুধুমাত্র একটি কাজ দেখায়। তবে, আপনি সাধারণত একটি নির্দিষ্ট চালান পণ্যের জন্য একটি ট্র্যাকিং আইডি নির্ধারণ করেন, যা আপনার সিস্টেমে পণ্যটির পুরো যাত্রাপথে তার সাথে যুক্ত থাকে। এর মানে হলো, একটি একক ট্র্যাকিং আইডি একাধিক কাজের সাথে যুক্ত থাকতে পারে, যেমন একই প্যাকেজের জন্য একটি পিকআপ টাস্কের পরে একটি ডেলিভারি টাস্ক, অথবা একটি প্যাকেজের জন্য একাধিক ব্যর্থ চালান টাস্ক।

এই পরিস্থিতি সামাল দিতে, ফ্লিট ইঞ্জিন টাস্ক প্রদর্শনের জন্য নিম্নলিখিত সারণিতে দেখানো মানদণ্ড প্রয়োগ করে।

কাজের মানদণ্ড	ফলাফল
খোলা পিকআপ কাজ
ঠিক একটিই বিদ্যমান	কাজটি দেখান
একাধিক বিদ্যমান	ত্রুটি তৈরি করুন
বন্ধ পিকআপ কাজগুলি
ঠিক একটিই বিদ্যমান	কাজটি দেখান
একাধিক বিদ্যমান (কিছু ফলাফলের সময় সহ)	সর্বশেষ ফলাফলের সময় সহ কাজটি দেখান
একাধিক বিদ্যমান (কোনোটিরই ফলাফলের সময় নেই)	ত্রুটি তৈরি করুন
খোলা ডেলিভারি কাজ
ঠিক একটিই বিদ্যমান	কাজটি দেখান
একাধিক বিদ্যমান	ত্রুটি তৈরি করুন
বন্ধ ডেলিভারি কাজ
ঠিক একটিই বিদ্যমান	কাজটি দেখান
একাধিক বিদ্যমান (কিছু ফলাফলের সময় সহ)	সর্বশেষ ফলাফলের সময় সহ কাজটি দেখান
একাধিক বিদ্যমান (কোনোটিরই ফলাফলের সময় নেই)	ত্রুটি তৈরি করুন

একটি চালান অনুসরণ করা বন্ধ করুন

যখন কোনো চালানের যাত্রা সম্পন্ন হয় বা বাতিল করা হয়, তখন আপনার গ্রাহক অ্যাপটি ম্যাপ ভিউ থেকে ট্র্যাকিং আইডি এবং লোকেশন প্রোভাইডার সরিয়ে দিয়ে চালানটিকে অনুসরণ করা বন্ধ করে দেবে। বিস্তারিত জানতে, নিম্নলিখিত বিভাগগুলি দেখুন।

ট্র্যাকিং আইডিটি মুছে ফেলুন

লোকেশন প্রোভাইডারকে চালানটি ট্র্যাক করা থেকে বিরত রাখতে, লোকেশন প্রোভাইডার থেকে ট্র্যাকিং আইডিটি সরিয়ে ফেলুন। নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে কীভাবে এটি করতে হয়।

জাভাস্ক্রিপ্ট

locationProvider.trackingId = '';

টাইপস্ক্রিপ্ট

locationProvider.trackingId = '';

মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারীকে সরান

নিম্নলিখিত উদাহরণে দেখানো হয়েছে কীভাবে ম্যাপ ভিউ থেকে একটি লোকেশন প্রোভাইডার সরানো যায়।

জাভাস্ক্রিপ্ট

mapView.removeLocationProvider(locationProvider);

টাইপস্ক্রিপ্ট

mapView.removeLocationProvider(locationProvider);

চালান ট্র্যাকিং ত্রুটিগুলি পরিচালনা করুন

চালানের তথ্য অনুরোধ করার ফলে অ্যাসিঙ্ক্রোনাসভাবে যে ত্রুটিগুলো ঘটে, সেগুলো এরর ইভেন্ট ট্রিগার করে। নিম্নলিখিত উদাহরণটি দেখায় কীভাবে ত্রুটিগুলি পরিচালনা করার জন্য এই ইভেন্টগুলি লিসেন করতে হয়।

জাভাস্ক্রিপ্ট

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

টাইপস্ক্রিপ্ট

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

দ্রষ্টব্য: অপ্রত্যাশিত ত্রুটি সামাল দেওয়ার জন্য লাইব্রেরি কলগুলোকে অবশ্যই try...catch ব্লকের মধ্যে রাখবেন।

এরপর কী?

একটি মানচিত্র শৈলী