React Native'de Places API ile Yakındaki Yerleri Bulmak




Herkese merhabalar. Mobiler.dev'deki ilk yazımda konumuz, React Native'de Places API kullanarak yakındaki yerleri bulmak olacak. Places API'sını kullanarak React Native'daki geçerli konumunuza yakın yerlerin nasıl getirileceğini adım adım açıklayacağım. React Native, bir cross platform framework'ü olduğundan, bu yöntemi hem Android hem de iOS cihazlar için kullanabilecek ve görüntüleyebileceksiniz. Bu yazının, bu yöntemi mevcut bir proje içerisinde uygulamak isteyenler için olacağını vurgulamak isterim. Bu küçük açıklamalardan sonra işe koyulabiliriz.


API Anahtarı


Öncelikle, unique bir API anahtarı almak için Google Cloud Platform'u açalım. Google Cloud Platform'da soldaki hamburger menüsüne tıklayıp, “APIs & Services” bölümünü göreceksiniz. Bu bölümde, “Credentials” ile ilerleyeceğiz. Credentials'ı açtığınızda şu ekranı göreceksiniz:


API anahtarını almak için ekranın üst kısmındaki "+ CREATE CREDENTIALS" seçeneğine tıklayın. API anahtarını aldıktan sonra, API anahtarınız ekranda gösterilecektir.



Konumumuzun belirlenebilmesi için buradan Geocoding API'yi etkinleştirmemiz gerekiyor.


API Kullanımı


Bu prosedürlerden sonra artık kodlamaya başlayabiliriz. React Native projelerimi geliştirmek için Visual Studio Code'u kullanacağız. GooglePlacesAPI.js dosyasında API anahtarını ekliyoruz. Ayrıca, geçerli konumun çevresinde göstermek istediğiniz yer türünü (kafe, restaurant vb.) belirten anahtar kelimeyi ekleyebilirsiniz. Şimdilik bu kısmı, yorum satırı olarak bırakıyoruz.

export const googleAPIKey = "YOUR_API_KEY";
export const placeType = "cafe";

Bu iki sabiti kullanmak istediğimiz yere aktaracağız (import).

import { googleAPIKey, placeType } from "./helpers/GooglePlacesAPI";

Sonra, "fetchNearbyPlaces" adlı bir async fonksiyon yaratacağız. Bu yazıda, konumumuzu, bu kütüphane ile alıp otomatik olarak belirleyeceğiz.

import GetLocation from "react-native-get-location";

GetLocation.getCurrentPosition({
  enableHighAccuracy: true,
  timeout: 15000,
})
 .then((location) => {
   console.log(location);
 })
 .catch((error) => {
   const { code, message } = error;
   console.warn(code, message);
 });

Haritada konumumuzu göstermek için bu kütüphane ile devam edeceğiz.

import MapView from "react-native-maps";

<MapView
 style={styles.map}
 customMapStyle={MapStyle}
 showsUserLocation={true}
 initialRegion={initialRegion}
/>

Konum değerlerini atadıktan sonra, çevremizdeki yerleri listeleyebilmemiz için geçerli konumdan maksimum mesafeyi ayarlayalım. Bu örnek için maksimum 4 km olarak belirleyelim.

// Search within maximum 4 km radius.
let radius = 4 * 1000;

Şimdi, kritik bir noktaya geldik, çünkü URL'i veri alacak şekilde ayarlayacağız.

const url =
"https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=" +
latitude +
"," +
longitude +
"&radius=" +
radius +
"&key=" +
googleAPIKey;

// const url =
// "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=" +
// latitude +
// "," +
// longitude +
// "&radius=" +
// radius +
// "&type=" +
// placeType +
// "&key=" +
// googleAPIKey;

Kod kısmının son adımı olarak, artık verileri çekebiliriz.


fetch(url)
  .then((res) => {
    return res.json();
  })
  .then((res) => {
    this.setState({
      places: res.results.map((x) => ({
        name: x.name,
      })),
    });
  })
  .catch((error) => {
    console.log(error);
  });

Ve son adımdayız. Fonksiyonu çağırıp çıktının ne olacağını görelim.






Tam olarak istediğimizi aldık. Herhangi bir sorunuz varsa, lütfen benimle iletişime geçmekten çekinmeyin. İlk yazımı okuduğunuz için çokça teşekkür ederim. Bir sonraki yazım, Yelp Fusion API hakkında olacak. İyi günler dilerim!


GitHub: NearbyPlaces


#reactnative #placesapi #geocodingapi



0 yorum

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın