React Native ile Konum Takibi

Yusuf Zeren
Oct 9, 2020 · 4 min read
Photo by delfi de la Rua on Unsplash

Hızlı market projemizde kuryelerin anlık olarak konumlarının takip edilebilmesi siparişe en yakın kuryeyi seçme açısından bizim için oldukça önemli.

React Native ile yazılan bir proje için anlık konum takibi ilk bakışta zor gibi görünebilir; çünkü genelde JavaScript ile kodlama yapıyoruz ve uygulama kapalıyken veya arka plandayken JavaScript kodu çalışmayacaktır. Bunun için native bir çözüm uygulamak gerekir.

Bu işi native olarak çözümleyen kütüphane arayışımızda ilk olarak, ücretsiz ve açık kaynak olan mauron85/react-native-background-geolocation isimli kütüphaneyi kullanmayı denedik; fakat iOS tarafını desteklemiyordu. Biz de React Native dünyasında daha çok kabul görmüş transistorsoft/react-native-background-geolocation kütüphanesine yöneldik ve hem iOS hem de Android tarafında oldukça başarılı sonuçlar aldık. Bu kütüphane Android tarafında ücretli ve aldığınız bir lisansı hem test hem de production uygulamanızda kullanabiliyorsunuz. (applicationId’niz “.staging” suffix’ine sahip olması koşulu ile)

Kütüphanenin arka planda konum takibi için kullandığı çözüme gelince, Android tarafında zaten hali hazırda React Native içinde olan Headless Task ile gayet verimli çalışıyor; fakat iOS tarafında background task oluşturup uygulama arka planda iken konum değişikliği belli bir mesafeyi aştığında, uygulamanızı arka planda ayağa kaldırıp, ön planda çalışıyormuş gibi hareket ediyor. Daha detaylı bir açıklama için şu videoya göz atabilirsiniz.

Karşılaştığımız sorunlara gelince:

iOS 13+ Arka Planda Konum Takibi İzni

iOS 13 ve üstü versiyonlarda arka plan konum iznini direkt kullanıcıdan pop-up yardımı ile almayı yasakladı. Biz de uygulama ilk yüklendiğinde izin alabilmek için kullanıcıları ayarlar kısmına yönlendirmek zorunda kaldık.

Konum / Zaman Bazlı Takip (Location / Time Based Tracking)

Kütüphaneyi projeye entegre ettiğimizde önerildiği gibi konum değişikliğini baz alarak anlık takip yapıyorduk; ama bu bizim ihtiyaçlarımızı karşılamıyordu. Kurye hareket halinde olmasa bile son konum bilgisinin yakın tarihli olmasını istiyorduk. Biz de zaman bazlı takip yöntemine gittik. Eğer kurye hareket etmiyorsa konum bilgisini dakikada bir, hareket halindeyse daha kısa saniye aralıklarıyla Back-End’e gönderiyoruz. Doğal olarak bu yöntem telefonların pilini hızlı tükettiğinden sizin ihtiyaçlarınızı karşılıyorsa konum bazlı takip yapmanızı öneriyoruz.

Telefonlardaki Güç Modu

Sürekli kuryelerin konumunu takip ettiğimizden dolayı, işletim sistemleri özellikle Android tarafında otomatik olarak güç modunu açıp uygulama arka planda iken konum takibini engelliyor. Burada hem pil durumunu hem de güç modunun açık olup olmadığını sürekli takip edip kuryeyi bilgilendiriyoruz. Eğer güç modu açık ise o kuryeye sipariş yönlendirmiyoruz.

Kütüphane Kullanımı

transistorsoft/react-native-background-geolocation kütüphanesini kullanmanın üç aşaması var diyebiliriz:

  • Kurulum, konfigürasyon
  • Start/Stop İşlemleri
  • Dinleyici (Listener) fonksiyonlar

Kurulum, konfigürasyon

Bu işlemi BackgroundGeolocation.ready fonksiyonunu belli parametrelerle çalıştırarak yapıyorsunuz. Burada altı çizilen en önemli nokta; uygulamanız ilk açıldığında bu fonksiyonun sadece ama sadece bir kere çalışması gerekli. Birden fazla kez çağırırsanız doğru sonuçlar alamayabilirsiniz.

Dökümandaki örnekte gösterildiği gibi veya başlangıç parametreleriyle entegre ederseniz muhtemelen konum ile ilgili çoğu ihtiyacınızı karşılayacaktır ve konum bazlı takip yapabilirsiniz.

Android - Zaman Bazlı Takip (Time Based Tracking)

BackgroundGeolocation.ready(
{
...defaultConfig,
distanceFilter: 0,
locationUpdateInterval: 6000, // 1 dk'da bir konum al
},

Eğer zamana bağlı izleme yapmak istiyorsanız ilk yapmanız gereken şey distanceFilter parametresini 0’a çekmek. Normalde son alınan konum ile belli bir mesafe farkı oluştuğunda konum bilgisi gönderecekken, biz burada kurye hareket etmese bile dakikada bir kere konumunu alıyoruz. Bu kısımdaki püf nokta ise kurye hareket ederse bu konfigürasyonun bir anlamı yok. Hareket halinde uygulama bize konum bilgisini her konum değiştiğinde gönderecektir.

Start/Stop İşlemleri

Üst kısımda bahsedilen konfigürasyonu yaptıktan sonra BackgroundGeoLocation.start() fonksiyonunu çağırmanız gerekiyor; ama konfigürasyon fonksiyonu olan ready bize bir promise dönüyor ve o bittikten sonra BackgroundGeolocation.start() fonksiyonunun çağırılması gerekiyor. Aksi takdirde metodlar çalışmayacaktır. Konum bilgisine ihtiyacınız olmadığı zaman BackgroundGeolocation.stop() fonksiyonunu çağırıp konum dinlemeyi bırakabilirsiniz. Böylece telefonun pilini gereksiz tüketmezsiniz.

Dinleyici (Listener) Fonksiyonlar

Bu kütüphane bir kaç dinleyici fonksiyona sahip. Bizim kullandıklarımız şunlar:

  • onHeartbeat: heartbeatInterval’e verilen değere göre periyodik tetiklenen fonksiyon, genelde log atmak için kullanıyoruz.
  • onLocation: Her konum alındığında tetiklenen fonksiyon.

Arka Planda Konum Takibi

Android Headless Mode

Android tarafta Headless JS kullanılıyor. Uygulamanızın index.js dosyasına aşağıdaki gibi ekleyebilirsiniz.

BackgroundGeolocation.registerHeadlessTask(<JS Function>);

Konfigürasyonda da aşağıdaki parametreleri eklemeyi unutmayın.

BackgroundGeolocation.ready({
...defaultConfig,
enableHeadless: true,
stopOnTerminate: false,
})

Uygulama arka plana alındığında veya kapatıldığında bu kısım devreye giriyor ve ready fonksiyonuna verdiğimiz parametrelere göre çalışmaya başlıyor.

iOS Background Konum Takibi

iOS için XCode ile Background Modes ayarlarında, location updates ve background fetch parametrelerini aktif etmeniz lazım. Detaylı kurulum için buraya bakabilirsiniz.

iOS’da uygulama arka plana alındığında sorunsuz çalışmaya devam ediyor; ama uygulama kapatılırsa konum dinleme kesiliyor. Eğer kurye 100–200 metre arası hareket ederse uygulama arka planda boot olup konum dinleme servisleri tekrar çalışmaya başlıyor.

Lokasyon İzinleri

react-native-permissions kütüphanesi ile beraber konum takibi için kullandığımız izinler de aşağıdaki gibi:

const backgroundLocationPermission = Platform.select({
ios: [PERMISSIONS.IOS.LOCATION_ALWAYS],
android: [
PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION,
PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
],
});

Kapanış

Edindiğimiz deneyimleri her hafta Cuma günü paylaşmaya devam edeceğiz. Umarız deneyimlerimizin size bir faydası dokunur, bir sonraki yazıda görüşmek üzere hoşçakalın :)

Trendyol Tech

Trendyol Tech Team

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store