Geo Firestore ile Cografi Sorgular

Bir çok uygulamada (mobil, web v.s.) fiziksel konuma göre kullanıcılara bir çok bilgi ve konum listelenmektedir. Örneğin geliştirdiğimiz uygulama mevcut konuma göre kullanıcıya en yakın mağazayı, eczaneyi, hastaneyi, petrol ofisini v.s. harita üzerinde gösterebilir.

Basit bir senaryo düşünecek olursak en yakın nöbetçi eczaneleri listeleyen bir mobil uygulama yazdığımızı varsayalım. Bu hizmeti verebilmek için öncelikle tüm nöbetçi eczanelerin listesi ve konum bilgilerine ihtiyaç duyarız. Bu bilgileri bir şekilde elde ettiğimizi varsayalım. Tabiki bu liste tek başına yeterli olmayacak. Bununla beraber aşağıdaki konuları da çözüme kavuşturmamız gerekecek.

• İstediğimiz zaman tüm konum listesine nasıl ulaşabiliriz?
• En yakın nöbetçi eczanenin konum bilgisine doğru şekilde nasıl ulaşırız?
• Bu konumlara en kısa sürede cevap verecek şekilde nasıl sorgu atarız?
• Performans için veri yapımız nasıl olmalı?

Evet, tam da bu noktada imdadımıza google firebase yetişiyor. Google firebase üzerinde geo firestore kullanarak tüm bu ihtiyaçlarımıza çözüm üretebiliriz. Firestore bizlere cografi konumları firebase üzerinde tutmamızı ve istediğimiz zaman en hızlı biçimde bu bilgilere ulaşmamızı sağlayan bir servis hizmeti sunmaktadır.

Ayrıca bu servis firestore üzerinde tuttuğumuz konumlara sorgu atarak, en yakın nokta veya noktaları çok hızlı bir şekilde listelememizi sağlıyor.

Nasıl ?

Firestore google cloud üzerinden hizmet vermektedir. Data’lar firebase üzerinde host edildir. Tüm uygulamalarda kolayca kullanılabilmesi için web ve mobil tarafta SDK’lara sahiptir. Yüksek erişilebilirlik ve performans odaklı bir çözüm üretir.

Çözüm olarak geohash kullanır. Geohash sisteminde dünya dikdörtgen bir ızgaraya bölünmüştür. Latitude ve Longitude dizi halinde base32 olarak tutmaktadır. Böylece daha performanslı bir yapı sunar. Firestore üzerinde örnek veri seti aşağıdaki gibidir.

Google tarafından sunulan bu servisi örnek bir proje ile inceleyelim. Bu örneğimizde IBB’ ye ait Isbike (Akıllı Bisiklet Kiralama Sistemi) ‘e ait verileri kullanarak örnek bir mobil uygulama yapalım.

Senaryo

IBB tarafından ücretsiz olarak sunulan IBB Açık Veri Portalı ‘ından Isbike duraklarına ait konum ve dolu/boş bisiklet verilerini sunan api kullanarak bir uygulama yapalım. Tüm konumları firestore üzerine yazdıktan sonra bulunduğumuz konuma en yakın bisiklet istasyonlarını ve müsaitliklerini listeleyelim.

Öncelikle boş bir react-native uygulaması oluşturalım.

react-native init RnFirestoreApp

Ardından https://console.firebase.google.com/ adresinden yeni bir firebase uygulaması oluşturalım.

Ardından oluşturduğumuz uygulama içine girerek get started adımından ios uygulamasını seçelim. Aşağıdaki adımda daha önce oluşturduğumuz react-native ios (RnFirestoreApp) uygulamasına ait bundle id ve uygulama isimlerini yazalım ardından 2. adımda config dosyasını bilgisayarımıza indirelim.

İndirdiğimiz GoogleService-Info.plist dosyasını react-native projemizin ios klasörüne ekleyelim.

Ardından @react-native-firebase/app & @react-native-firebase/firestore paketlerini npm üzerinden kuralım.

npm i @react-native-firebase/firestore && react-native-firebase/app

Ardından aşağıdaki komutlar ile pod dosyalarını yükledikten sonra linkleme işlemlerini yapalım.

cd ios
pod install
cd ..
react-native link

Mobil uygulamamızda kullanacağımız harita için için google maps paketini kuruyoruz.

npm i react-native-maps

Isbike api’sinden aldığımız data’ları json formatında data.js olarak uygulamamıza ekleyelim.

Şimdi kodumuzu yazmaya geçebiliriz.

App.js içinde importlarımızı ve const tanımlarımızı yapalım.

import firestore from '@react-native-firebase/firestore';
import * as geofirestore from 'geofirestore';
import MapView, { Marker } from 'react-native-maps';
const firestoreApp = firestore();
const GeoFirestore = geofirestore.initializeApp(firestoreApp);
const geocollection = GeoFirestore.collection('isbike');

Öncelikle data’larımızı geo firebase üzerine ekleyelim.

Firebase üzerinden kontrol ettiğimizde data’ların eklendiğini görebiliriz.

Şimdi bir mevcut konumumuzu kullanarak en yakın Isbike istasyonlarını harita üzerinde listeleyelim.

getLocation fonksiyonu içinde query’mizi atıyoruz ve sonucu state yazıyoruz.

const query = geocollection.near({ center: new firestore.GeoPoint(searchItem.lat, searchItem.lon), radius: 2 });

getLocation fonksiyonumuz bize verdiğimiz (Kurtköy) konuma en yakın isbike istasyonlarını state’e yazıyor.

State’de bulunan CoordList dizisini map ile harita üzerine marker’ları yerleştiriyoruz.

Böylece hem konum listemizi geo firestore üzerinde host ettik. Hem de mevcut konumumuza en yakın isbike istasyonlarını listelemiş olduk.

Bir sonraki yazımızda görüşmek üzere :) Hoşça kalın ..

Repo:

GitHub - akaramanapp/rn-geofirestore-app: React Native Geo Firestore App