শিপমেন্ট ফলো করা

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

• ম্যাপ শুরু করুন এবং শেয়ার করা যাত্রা দেখুন
• আপডেট করুন এবং জার্নির প্রোগ্রেস ফলো করুন
• শিপমেন্ট ফলো করা বন্ধ করুন
• শিপমেন্ট ট্র্যাকিং সংক্রান্ত সমস্যার সমাধান করা

ম্যাপ সেট-আপ করুন

আপনার ওয়েব অ্যাপে শিপমেন্ট পিক-আপ বা ডেলিভারি ফলো করতে, আপনাকে ম্যাপ লোড করতে হবে এবং আপনার শিপমেন্ট ট্র্যাক করা শুরু করতে Consumer SDK ইনস্ট্যান্টিয়েট করতে হবে। আপনি নতুন ম্যাপ লোড করতে অথবা আগে থেকে থাকা ম্যাপ ব্যবহার করতে পারবেন। তারপর আপনি Consumer SDK ইনস্ট্যান্টিয়েট করতে ইনিশিয়ালাইজেশন ফাংশন ব্যবহার করেন যাতে ম্যাপ ভিউ ট্র্যাক করা আইটেমের লোকেশন অনুযায়ী হয়।

Google Maps JavaScript API ব্যবহার করে নতুন ম্যাপ লোড করা

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

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

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 এন্টিটি আছে এবং সেখানে নিম্নলিখিত 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>

শিপমেন্ট লোকেশন প্রোভাইডার ইনস্ট্যান্টিয়েট করুন

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

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

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

শেয়ার করা সফর দেখান

শিডিউল করা টাস্কের প্রগ্রেস দেখাতে, এটির ভিউ শুরু করুন, যা ট্র্যাক করা যাত্রার লোকেশনের সাথে সামঞ্জস্যপূর্ণ ম্যাপের ফ্রেম সেট করে। ফ্লিট ইঞ্জিন থেকে তথ্য পাওয়ার পরে, কনজিউমার SDK-এর মাধ্যমে প্রগ্রেস সংক্রান্ত তথ্য প্রদান করা হয়।

পরামর্শ:

1. আপনার পৃষ্ঠায় ম্যাপ ভিউ ধারণকারী <div> এলিমেন্ট আছে কিনা তা নিশ্চিত করুন। নিচের উদাহরণে, <div> এলিমেন্টের নাম হল map_canvas।

2. ট্র্যাক করা যাত্রার ক্ষেত্রে Fleet Engine-এর প্রয়োগ করা ডিফল্ট দৃশ্যমানতার নিয়ম সম্পর্কে সচেতন থাকুন। এছাড়াও, আপনি অ্যাক্টিভ গাড়ির শিপমেন্ট ও শিডিউল করা স্টপ টাস্কের জন্য দৃশ্যমানতার নিয়ম কনফিগার করতে পারবেন। টাস্ক কনফিগার করুন গাইডে টাস্কের দৃশ্যমানতা কাস্টমাইজ করুন বিকল্প দেখুন।

এইসব উদাহরণ থেকে বোঝা যায় যে কীভাবে ম্যাপ ভিউ শুরু করতে হয়।

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

একাধিক টাস্কের জন্য ডিসপ্লে সংক্রান্ত মাপকাঠি

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

এই পরিস্থিতি সামাল দিতে, Fleet Engine টাস্ক দেখানোর জন্য মাপকাঠি প্রয়োগ করে, যা নিম্নলিখিত সারণীতে দেখানো হয়েছে।

শিপমেন্ট ফলো করা বন্ধ করুন

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

ট্র্যাকিং আইডি সরিয়ে দিন

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

locationProvider.trackingId = '';

locationProvider.trackingId = '';

ম্যাপ ভিউ থেকে লোকেশন প্রদানকারীকে সরান

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

শিপমেন্ট ট্র্যাকিং সংক্রান্ত সমস্যার সমাধান করা

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

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 ব্লকে লাইব্রেরি কল র‍্যাপ করতে ভুলবেন না।

এর পরে কী করতে হবে

• ম্যাপ স্টাইল করা