Gönderimi takip etme

Planlanmış görevler için JavaScript Tüketici SDK'sını ayarladığınıza göre artık tüketici uygulamanızla bir gönderiyi takip etmeye hazırsınız. Bu dokümanda, bu süreçteki aşağıdaki önemli adımlar ele alınmaktadır:

• Haritayı başlatma ve paylaşılan yolculuğu gösterme
• Yolculuk ilerleme durumunu güncelleme ve takip etme
• Bir gönderiyi takip etmeyi bırakma
• Gönderi takibi hatalarını giderme

Harita oluşturma

Web uygulamanızda bir gönderinin teslim alınmasını veya teslim edilmesini takip etmek için bir harita yüklemeniz ve gönderinizi takip etmeye başlamak için Consumer SDK'yı örneklendirmeniz gerekir. Yeni bir harita yükleyebilir veya mevcut bir haritayı kullanabilirsiniz. Ardından, harita görünümünün takip edilen öğenin konumuna karşılık gelmesi için Consumer SDK'yı örneklendirmek üzere başlatma işlevini kullanırsınız.

Google Maps JavaScript API'yi kullanarak yeni bir harita yükleme

Yeni bir harita oluşturmak için Google Maps JavaScript API'yi web uygulamanıza yükleyin. Aşağıdaki örnekte, Google Maps JavaScript API'nin nasıl yükleneceği, SDK'nın nasıl etkinleştirileceği ve başlatma kontrolünün nasıl tetikleneceği gösterilmektedir.

• callback parametresi, API yüklendikten sonra initMap işlevini çalıştırır.
• defer özelliği, API yüklenirken tarayıcının sayfanızın geri kalanını oluşturmaya devam etmesini sağlar.

Tüketici SDK'sını örneklendirmek için initMap işlevini kullanın. Örneğin:

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

Mevcut bir haritayı yükleme

Google Maps JavaScript API tarafından oluşturulmuş mevcut bir haritayı da (ör. halihazırda kullandığınız bir harita) yükleyebilirsiniz.

Örneğin, aşağıdaki HTML kodunda tanımlandığı şekilde bir işaretçinin gösterildiği standart bir google.maps.Map varlığına sahip bir web sayfanız olduğunu varsayalım. Bu örnekte, haritanızın sonunda geri çağırmada aynı initMap işlevi kullanılarak gösterilmektedir:

    <!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>

Gönderi konumu sağlayıcısını örneklendirme

Fleet Engine'dan veri almaya başlamak için daha önce tanımladığınız yetkilendirme jetonu getirme aracıyla birlikte gönderi konumu sağlayıcıyı kullanın.

Bu örneklerde, konum sağlayıcının nasıl örneklendirileceği gösterilmektedir.

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

Paylaşılan yolculuğu görüntüleme

Planlanmış bir görevin ilerleme durumunu göstermek için görünümünü başlatın. Bu işlem, haritanın çerçevesini, takip edilen yolculuğun konumuna karşılık gelecek şekilde ayarlar. İlerleme durumu, Fleet Engine'den bilgi alındıktan sonra Tüketici SDK'sı tarafından sağlanır.

İpuçları:

1. Sayfanızda harita görünümünü içeren bir <div> öğesi bulunduğundan emin olun. Aşağıdaki örnekte, <div> öğesi map_canvas olarak adlandırılmıştır.

2. Fleet Engine'in takip edilen yolculuklara uyguladığı varsayılan görünürlük kurallarına dikkat edin. Etkin araç sevkiyatı ve planlanmış durak görevleri için görünürlük kuralları da yapılandırabilirsiniz. Görevleri yapılandırma kılavuzundaki Görev görünürlüğünü özelleştirme bölümüne bakın.

Bu örneklerde, harita görünümünün nasıl başlatılacağı gösterilmektedir.

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

Gönderim ilerleme durumunu güncelleme

Etkinlikleri dinleyebilir ve yolculuk ilerledikçe gönderi ilerleme durumunu güncelleyebilirsiniz. taskTrackingInfo nesnesinden meta bilgileri almak için konum sağlayıcıyı kullanın. Meta bilgilerinde yapılan değişiklikler bir güncelleme etkinliğini tetikler. taskTrackingInfo nesnesi şunları sağlar:

• TVS
• Kalan durak sayısı
• Teslim alma veya teslimat öncesinde kalan mesafe

Aşağıdaki örnekte, bu değişiklik etkinliklerinin nasıl dinleneceği gösterilmektedir.

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

Birden fazla görev için ölçütleri görüntüleme

Planlanmış görevler için Tüketici SDK'sı, haritada izleme kimliği başına yalnızca bir görev gösterir. Ancak genellikle belirli bir gönderi ürününe bir izleme kimliği de atarsınız. Bu kimlik, sisteminizdeki yolculuğu boyunca ürünle ilişkili kalır. Bu, tek bir izleme kimliğinin birden fazla görevle ilişkilendirilebileceği anlamına gelir. Örneğin, aynı paket için bir teslim alma görevi ve ardından bir teslimat görevi veya bir paket için birden fazla başarısız gönderim görevi olabilir.

Fleet Engine, bu durumu yönetmek için görevleri görüntüleme ölçütlerini uygular. Bu ölçütler aşağıdaki tabloda gösterilmiştir.

Bir gönderiyi takip etmeyi bırakma

Bir sevkiyat yolculuğu tamamlandığında veya iptal edildiğinde tüketici uygulamanız, izleme kimliğini ve konum sağlayıcıyı harita görünümünden kaldırarak sevkiyatı takip etmeyi durdurmalıdır. Ayrıntılar için aşağıdaki bölümlere bakın.

İzleme kimliğini kaldırma

Konum sağlayıcının gönderiyi takip etmesini durdurmak için konum sağlayıcıdan izleme kimliğini kaldırın. Aşağıdaki örneklerde bunun nasıl yapılacağı gösterilmektedir.

locationProvider.trackingId = '';

locationProvider.trackingId = '';

Konum sağlayıcıyı harita görünümünden kaldırma

Aşağıdaki örnekte, bir konum sağlayıcının harita görünümünden nasıl kaldırılacağı gösterilmektedir.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Gönderi takibi hatalarını giderme

Gönderim bilgileri isteğinden eşzamansız olarak kaynaklanan hatalar, error etkinliklerini tetikler. Aşağıdaki örnekte, hataları işlemek için bu etkinliklerin nasıl dinleneceği gösterilmektedir.

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

Not: Beklenmeyen hataları ele almak için kitaplık çağrılarını try...catch bloklarına sarmaladığınızdan emin olun.

Sırada ne var?

• Haritaya stil uygulama