React Native'de Yelp Fusion API ile Yakındaki Yerleri Bulmak

Capturing the human heart'tan bir fotoğraf

Herkese yeniden merhabalar. İlk yazımda bahsettiğim gibi, bu makalenin konusu “React Native'de Yelp Fusion API'sini kullanarak yakındaki yerleri bulmak olacak. Bu makalede, Yelp Fusion API'sini kullanarak React Native'daki geçerli konumunuza yakın yerlerin nasıl getirileceğini adım adım açıklayacağım.

Şimdi şu soruyu kısaca açıklayalım: “Yelp nedir?”. Yelp, merkezi San Francisco, California'da bulunan halka açık bir şirkettir. Şirket, Yelp.com web sitesini ve işletmeler hakkında kitle kaynaklı incelemeler yayınlayan Yelp mobil uygulamasını geliştirir, barındırır ve pazarlar. React Native, bir cross platform framework'ü olduğundan, bu yöntemi hem Android hem de iOS cihazlar için kullanabilecek ve deneyimleyebileceksiniz. Bu yazının, bu yöntemi mevcut bir proje içerisinde uygulamak isteyenler için olacağını vurgulamak isterim. Artık, bu küçük açıklamalardan sonra işe koyulabiliriz.

API Anahtarı

Öncelikle, unique bir API anahtarı almak için Yelp Developers sayfasını açacağız. Yelp Developers'te herhangi bir hesabınız yoksa "Sign Up" butonuna tıklayabilirsiniz. Kayıt olduktan sonra veya önceden kaydınız varsa "Log In" butonu ile devam edebilirsiniz. Önceden oluşturduğum bir hesabım olduğu için doğrudan giriş yapıyorum. Bu işlemden sonra aşağıdaki ekranla karşılaşacağız:

Giriş yaptıktan sonra Yelp Developers sayfası.

API anahtarını almak için "Yelp Fusion" başlığına ve aktarılan ekrandaki "Get Started" düğmesini tıklayın. API anahtarını aldıktan sonra, ilgili alanları doldurun ve aşağıdaki ekranda "Create New App" düğmesine basın:

API anahtarını almak için görüntülediğimiz "Create New App" bölümü

Harika! Artık bir API anahtarımız var (İlgili kısımları güvenlik sebebiyle gizleyerek paylaşmak durumundayım).

API Kullanımı

Bu prosedürlerden sonra kodlamaya başlayabiliriz. React Native projelerimi geliştirmek için Visual Studio Code'u kullanacağım. YelpFusionAPI.js dosyamda API anahtarımı ekleyeceğim.

export const yelpFusionAPIKey = 'YOUR_API_KEY';

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

import { yelpFusionAPIKey } from "./helpers/YelpFusionAPI";

Sonra, "fetchNearbyPlaces" adlı bir async fonksiyon yaratacağız. Bu yazıda, konumumuzu, GetLocation 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 MapView 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 ve gösterim limitini ayarlayalım. Bu örnek için maksimum 4 km, limiti ise 20 olarak belirleyelim.

// Set radius from current location as 4 km.
 const radius = 4000;
 // Set limit for number of places as 20.
 const limit = 20;

Şimdi URL'imizi ayarlayalım ve peşinden de verilerimizi çekelim. Verilerimizi axios yardımıyla çekeceğiz.

import axios from "react-native-axios";

const config = {
 headers: {
 Authorization: "Bearer " + yelpFusionAPIKey,
  },
};

const fetchNearbyPlacesWithYelp = async () => {
 return axios
    .get(
 "https://api.yelp.com/v3/businesses/search?term=delis&latitude=" +
 location.latitude +
 "&longitude=" +
 location.longitude +
 "&radius=" +
 radius +
 "&limit=" +
 limit,
 config
    )
    .then((place) => {
 // Get places' names and images.
 this.setState({
 places: place.data.businesses.map((x) => ({
 name: x.name,
 image_url: x.image_url,
        })),
      });
    })
    .catch((error) => {
 console.log(error);
    });
};

Adımlarımızı başarıyla tamamladık. Fonksiyonu çağıralım ve ekranda belirecek içeriği görelim.

Verileri tam olarak istediğimiz gibi ekrana yansıtmayı başardık. İşlemimiz bu kadar. Herhangi bir sorunuz varsa, lütfen benimle iletişime geçmekten çekinmeyin. İkinci yazımı okuduğunuz için çokça teşekkür ederim. Bir sonraki yazım, "React Native'de Google ile Giriş Yapmak" hakkında olacak. İyi günler dilerim!

GitHub: NearbyPlaces

Ian Baldwin'den bir fotoğraf

#reactnative #yelpapi #yelpfusion #yelpfusionapi