Gönderimi takip etme

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

• Haritayı başlatma ve paylaşılan yolculuğu görüntüleme
• Güncelleme ve yolculuk ilerlemesini takip etme
• Kargoyu takip etmeyi bırakma
• Kargo takibi hatalarını giderme

Harita oluşturma

Web uygulamanızda bir kargo alımını veya teslimatını takip etmek için bir harita yüklemeniz ve kargonuzu izlemeye başlamak üzere Consumer SDK'yı başlatmanız gerekir. Yeni bir harita yükleyebilir veya mevcut bir haritayı kullanabilirsiniz. Ardından, harita görünümünün izlenen öğenin konumuyla eşleşmesi için Consumer SDK'yı başlatma işlevini kullanarak oluşturursunuz.

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

Yeni bir harita oluşturmak için web uygulamanıza Maps JavaScript API'yi yükleyin. Aşağıdaki örnekte, 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.

Consumer SDK'yı başlatmak 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 Haritalar JavaScript API'si ile 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 öğesi içeren bir web sayfanız olduğunu varsayalım. Bu, geri çağırma işlevinde aynı initMap işlevini kullanarak haritanızı gösterir:

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

Kargo konumu sağlayıcıyı başlatma

Fleet Engine'den veri almaya başlamak için daha önce tanımladığınız yetkilendirme jetonu getiriciyle birlikte kargo konumu sağlayıcıyı kullanın.

Bu örneklerde, konum sağlayıcının nasıl başlatılacağı 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 izlenen yolculuğun konumuna karşılık gelecek şekilde ayarlar. İlerleme durumu, Fleet Engine'den bilgileri aldıktan sonra Consumer SDK 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> öğesinin adı map_canvas'dir.

2. Fleet Engine'in izlenen yolculuklara uyguladığı varsayılan görünürlük kurallarını göz önünde bulundurun. Ayrıca etkin araç sevkiyatı ve planlanmış durak görevleri için görünürlük kurallarını da yapılandırabilirsiniz. Görevleri yapılandırma rehberindeki Görevin 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);
}

Kargo ilerleme durumunu güncelleme

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

• TVS
• Kalan durak sayısı
• Teslim alma veya teslimata kadar 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 Consumer SDK, haritada izleme kimliği başına yalnızca bir görev gösterir. Ancak genellikle belirli bir kargo ürününe, sisteminizdeki yolculuğu boyunca ürünle ilişkili kalacak bir izleme kimliği de atarsınız. Bu durumda tek bir izleme kimliği, aynı paketin teslimat görevinden önce gelen teslim alma görevi gibi birden fazla görevle veya bir paketle ilgili birden fazla başarısız gönderim göreviyle ilişkilendirilebilir.

Fleet Engine, bu durumu ele almak için aşağıdaki tabloda gösterilen görevleri görüntüleme ölçütlerini uygular.

Kargoyu takip etmeyi bırakma

Bir kargo 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 kargoyu 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 kargoyu izlemesini durdurmak için konum sağlayıcıdan izleme kimliğini kaldırın. Aşağıdaki örneklerde bu işlemin 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, 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);

Kargo takibi hatalarını giderme

Kargo bilgileri istenirken eşzamansız olarak ortaya çıkan 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: Beklenmedik hataları işlemek için kitaplık çağrılarını try...catch bloklarına sardığınızdan emin olun.

Sırada ne var?

• Harita stilini değiştirme