React.js'de Kullanıcının Konumu Nasıl Bulunur?: Pratik Bir Kılavuz

Web uygulamaları giderek daha kişisel hale geliyor. Ayrıca konum tabanlı hizmetleri birçok nedenden dolayı kullanan web uygulamalarında da artış yaşanıyor. Gizlilik, güvenlik veya belirli konum tabanlı özellikler için olabilir.

Kullanıcının konumunu bilerek, kişiselleştirilmiş içerik, iyi güvenlik , hava durumu tahminleri, daha fazla yerelleştirme ve daha iyi bir kullanıcı deneyimi gibi farklı özellikleri kolayca sunabilirsiniz. Bir geliştirici olarak, web uygulamalarınız için kullanıcının konumunu nasıl alacağınızı bilmek çok önemlidir. Bu yazıda, React.js gibi modern web teknolojilerini kullanarak kullanıcının konumunu nasıl alabileceğiniz konusunda size adım adım talimatlar sunacağız. Kullanıcının IP adresini almak için farklı yöntemleri ve kullanıcıdan nasıl daha fazla coğrafi konum verisi alabileceğimizi ele alacağız. Öyleyse başlayalım!

IP veya Coğrafi Konum nedir?

Öncelikle IP veya IP adresinin ne olduğunu anlayalım.

Her evin kendine özgü bir numarası veya adresi olduğu gibi, internet kullanan her cihazın da kendine özgü bir adresi vardır. Cihazın bu benzersiz adresine IP adresi denir. Cihazların internet üzerinden birbirleriyle iletişim kurmasına yardımcı olur.

Burada IP , cihazların İnternet üzerinden birbirleriyle iletişim kurmak için kullandıkları bir dizi kural olan “İnternet Protokolü” anlamına gelir. Şimdi Coğrafi Konum'u anlayalım.

Coğrafi Konum iki kelimenin birleşimidir. Birincisi dünya anlamına gelen “Geo” , ikincisi ise bir şeyin yeryüzünde bulunduğu yer anlamına gelen “ konum” dur.

Dolayısıyla, “IP-Geolocation”, IP adresine göre cihazın fiziksel olarak nerede bulunduğunu bulmanın bir yoludur. IP-Geolocation verilerinin doğruluğu, veriyi almak için hangi yöntemin kullanıldığı, verinin kalitesi, cihazın türü vb. gibi farklı faktörlere bağlıdır. Mobil cihazlar sıklıkla ağ değiştirdiğinden, veriler bu cihazlar için daha az doğru olabilir. Şimdi React’te kullanıcının IP adresini nasıl alabileceğimizi görelim.

Kullanıcının Konumunu Alma

Kullanıcının konumunu alabileceğimiz birkaç yöntem vardır. Bu yazıda tüm tarayıcılar tarafından desteklenen Geolocation API'sini kullanacağız ve bunu kullanmak için başka bir 3. parti kütüphane kurmamıza gerek yok. Daha fazla veri elde etmek için Geocoding API gibi 3. taraf hizmetlerden API'leri kullanabiliriz.

Öncelikle vite kullanarak bir React uygulaması oluşturalım. CMD'yi veya terminali açın, ardından proje klasörünüzü bulun ve aşağıdaki komutları kullanın.

• npm create vite@latest your-app-name

Yukarıdaki komutu çalıştırdığınızda size çerçevelerin bir listesi gösterilecektir, şimdi ok tuşlarını kullanarak listeden React'ı seçin ve enter tuşuna basın.

• Şimdi size değişkenlerin bir listesini gösterecek, bu değişkenlerden Javascript'i seçin. Daha sonra uygulama adınızı içeren bir klasör oluşturacak ve gerekli tüm dosyaları ekleyecektir. Şimdi gerekli tüm kitaplıkları yüklemek ve geliştirme sunucusunu çalıştırmak için aşağıdaki komutları kullanın.

  
  

  • cd your-app-name Bu komut geçerli dizini uygulama dizinine değiştirecektir
  • npm install Bu komutu kullanarak gerekli tüm kütüphaneleri kuracağız
  • npm run dev Bu komut, geliştirme sunucusunu muhtemelen localhost:5173'te başlatacaktır.

  
  

Artık geliştirme sunucusu hazır ve çalışıyor, hadi kullanıcının IP adresini alalım.

Geolocation API'sini kullanarak kullanıcının enlem ve boylam bilgilerini alma

Geolocation API, kullanıcının isterse konumunu sağlamasına olanak tanır. Bu yöntem yalnızca kullanıcı kendi konumuna erişim izni verdiğinde çalışır, aksi takdirde bu tarayıcı tabanlı API IP adresini alamayacaktır. Web uygulamanızdaki özellik gerçekten kullanıcının konumunu gerektiriyorsa, kullanıcıya iyi bir kısa mesaj göndererek konumunu neden istediğinizi bilmesini sağlayabilirsiniz.

Bu Geolocation API'sine, bir Geolocation nesnesi döndürebilen bir özellik olan navigator.geolocation çağrısı yoluyla erişilir. Navigatörün ne olduğunu görelim.

• gezgin: Kullanıcı aracısının (tarayıcının) durumunu ve kimliğini temsil eden bir arayüzdür. Bu gezginin kaydını tutalım ve başka hangi özellikleri sağladığını görelim.

  
  

  App.jsx dosyasını açın ve return ifadesinin içindeki tüm kodu temizleyin ve ana div App sınıfıyla birlikte tutun, ardından aşağıdaki kodda verildiği gibi bir useEffect içindeki console.log(navigator) kullanın.

  
  

 import { useEffect } from "react"; import "./App.css"; function App() { useEffect(() => { console.log(navigator); }, []); return <div className="App"></div>; } export default App;

Geliştirme sunucusu sekmenizde, F12 tuşuna basarak veya farenin sağ tıklamasıyla konsolu açın. AppCodeName , Bluetooth , pano , coğrafi konum vb. gibi farklı özelliklerin listesini göreceksiniz. Coğrafi konumu günlüğe kaydedelim. Coğrafi konumu günlüğe bu console.log(navigator.geolocation) gibi eklemeniz yeterlidir. Konsolda boş bir nesne göreceksiniz çünkü şimdilik coğrafi konuma erişim iznimiz yok o yüzden bu izni nasıl alacağımıza bakalım. Aşağıdaki kodu ve açıklamayı inceleyin.

 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); }); } else { console.log("Geolocation is not supported by this browser."); } }, []);

Yukarıdaki useEffect dosyasında öncelikle navigatörün olup olmadığını kontrol edeceğiz. coğrafi konum veya değil ve eğer doğruysa izinleri kontrol edeceğiz.

Burada,

• navigator.permissions: İzin durumunu sorgulamak ve güncellemek için kullanılabilecek bir Permissions nesnesini döndürür.

• sorgu: Kullanıcı izninin durumunu döndüren bir İzin yöntemidir. Ad-değer çiftlerinin virgülle ayrılmış listesine sahip bir nesneyi alır. Burada coğrafi konum izninin durumunu bilmek istediğimiz için coğrafi konumu geçtik.

  
  

  Burada bir Promise alıyoruz, bu yüzden then anahtar sözcüğünü kullanacağız ve sonuçları günlüğe kaydedeceğiz. Tarayıcının konsolunu kontrol ederseniz aşağıdaki nesneyi göreceksiniz.

   { name: "geolocation", onchange: null, state: "prompt" }

Devletin 3 farklı değeri olabilir,

• verildi: Bu, coğrafi konumu doğrudan arayabilmemiz için konuma erişme iznimiz olduğu anlamına gelir.
• istem: Kullanıcı, izin isteyen bir açılır pencereyle karşılaşacaktır.
• reddedildi: Bu, kullanıcının konumunu paylaşmayı reddettiği anlamına gelir.

"Verildi" ve "istem" durumları için, kullanıcının mevcut konumunu almak için bir fonksiyon oluşturabiliriz, ancak " reddedildi " durumu için, tarayıcılarında konum iznini nasıl etkinleştirebilecekleri talimatlarını gösterebiliriz.

NOT: Kullanıcı konum iznini zaten reddetmişse, kullanıcı tarayıcısında manuel olarak etkinleştirmediği sürece konum iznini tekrar istemeniz mümkün değildir.

Aşağıdaki gibi 3 izin durumunun tamamı için 3 koşulu kullanalım

 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []);

prompt durumunda getCurrentPosition adlı işlevi kullanalım. Bu fonksiyon aşağıdaki argümanları alır.

• başarı : Konum başarılı bir şekilde alınırsa çağrılacak bir geri arama işlevi.
• error : Konumun alınmasında bir hata olması durumunda çağrılacak bir geri arama işlevi. Bu isteğe bağlıdır.
• seçenekler : Seçenekler, maksimumAge, timeout, activeHighAccuracy vb. gibi farklı parametreler alır. Bu seçenekler hakkında daha fazla bilgiyi MDN belgelerinden okuyabilirsiniz. Bu da isteğe bağlıdır.

Her 3 argümanı da uygulayalım. Öncelikle bir başarı fonksiyonu oluşturalım. useEffect önce aşağıdaki başarı fonksiyonunu ekleyin.

 function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); }

Bu geri çağırma işlevi, koordinatlar anlamına gelen koordinatları içeren bir konum nesnesini döndürecektir. Koordinatlardan enlem , boylam , doğruluk vb. değerleri alabilirsiniz. Şimdi başarı fonksiyonundan sonra aşağıdaki hata fonksiyonunu ekleyin.

 function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); }

Ayrıca bir seçenek nesnesi de tanımlayalım,

 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, };

Şimdi aşağıdaki satırı “istem” ve “kayıtlı” koşullarına yapıştırın ve tarayıcınızdaki çıktıyı kontrol edin.

 navigator.geolocation.getCurrentPosition(success, errors, options)

Tarayıcıda sizden konum izni isteyen bir istem görebilirsiniz. İzin verdikten sonra konsol sekmesinde koordinat değerlerini görebilirsiniz. İşte kodun tamamı.

 import { useEffect } from "react"; import "./App.css"; function App() { var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return <div className="App"></div>; } export default App;

Bu kadar. Bu sayede herhangi bir cihazın enlem ve boylam değerini kolaylıkla alabilirsiniz. Artık bu bilgi yeterli değil, o halde kullanıcının konumu hakkında daha fazla bilgi edinmek için opencage'in ters coğrafi kodlama API'lerini kullanalım.

Ters Geocoding ile Konum Tabanlı Hizmetlerin Geliştirilmesi

Kullanıcının cihazının enlem ve boylam bilgisini zaten aldık, şimdi konumu hakkında daha fazla bilgi almak için bunu nasıl kullanabileceğimize bakalım. Konum hakkında daha fazla bilgi almak için opencage'deki API'leri kullanacağız. Bu nedenle kaydolduğunuzdan ve bir API anahtarı aldığınızdan emin olun. Opencage ücretsiz denemede günde 2.500 istek sağladığından herhangi bir ücret ödemenize gerek yoktur. Fiyatlandırma hakkında daha fazla bilgiyi web sitelerinden kontrol edebilirsiniz. Opencage'in API'sini ücretsiz deneme süresi olduğundan ve CORS kısıtlaması olmadığından kullandım. Şimdi bu API’yi kullanacak bir fonksiyon oluşturalım.

 const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); }

Bu getLocationInfo işlevi enlem ve boylamı alır ve ardından açık kafesin belgelerindeki enlem, boylam ve API anahtarını alan URL'yi kullanır. Bu fonksiyonda, verileri URL'den almak için fetch'i kullandık ve durum kodu 200 ise verileri konum durumunda saklayacağız. Hangi tür verileri aldığınızı görmek için tarayıcınızda konsolunuzu kontrol edebilirsiniz. Şimdilik formatlanmış özellikteki değeri kullanıyoruz. Yanıt nesnesi hakkında daha fazla bilgi edinmek için belgelere göz atabilirsiniz. Şimdi bu fonksiyonu daha önce tanımladığımız başarı fonksiyonundan çağıralım.

 function success(pos) { var crd = pos.coords; ... ... getLocationInfo(crd.latitude, crd.longitude); }

Artık kullanıcı konumunu vermeyi kabul ettiğinde başarı fonksiyonu çalışacak ve ayrıca enlem ve boylam bilgisini getLocationInfo fonksiyonuna iletecek ve çalıştıracaktır. Konumu web uygulamanızda görüntülemek için bu konum durumunu kullanabilirsiniz.

İşte kodun tamamı:

 import { useEffect, useState } from "react"; import "./App.css"; const APIkey = "Enter-your-api-key"; function App() { const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); } var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); getLocationInfo(crd.latitude, crd.longitude); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return ( <div className="App"> {location ? <>Your location: {location}</> : null} </div> ); } export default App;

API veya işlev verileri düzgün şekilde getiremediğinde hata mesajını görüntüleyen bir hata durumu da uygulayabilirsiniz. Ayrıca gerekli hata işleme yöntemini işlevlere de uygulayın. Bu sayede cihazın konumu hakkında birçok bilgiye ulaşabilirsiniz. Şimdi cihazın IP adresini nasıl alabileceğinizi görelim.

Kullanıcının IP adresini alma

Kullanıcının IP adresini istemci tarafına almak için basit bir genel IP adresi API'si olan ipify'ı kullanacağız. Aşağıdaki kod bloğunda gösterildiği gibi başka bir useEffect oluşturup IP adresini getirecek bir fonksiyon oluşturacağız.

 const [ipAddress, setIpAddress] = useState(''); useEffect(() => { const fetchIp = async () => { try { const response = await fetch('https://api.ipify.org?format=json'); const data = await response.json(); setIpAddress(data.ip); } catch (error) { console.error(error); } }; fetchIp(); }, []);

Yukarıdaki kodda IP adresini saklamak için ipAddress adında bir durum oluşturduk. ipfy genel bir API olduğundan herhangi bir API anahtarına ihtiyacımız yok ve doğrudan URL'yi kullanabiliriz. useEffect , IP adresini alıp ipAddress durumunda saklayacak, fetchIp adında bir eşzamansız işlev oluşturduk. useEffect fetchIp işlevini çağırmayı unutmayın.

Bu sayede cihazın IP adresini kolaylıkla alabilirsiniz. Bu tür hizmetleri sağlayan birden fazla API vardır. Sunucu tarafı için, IP adresini genellikle kullanıcının web sayfasını veya herhangi bir veriyi almak için size gönderdiği istekten alabilirsiniz. Ancak bazı İSS'ler paylaşılan IP adresleri kullandığından yalnızca IP adresine güvenmemelisiniz; bu, birden fazla kullanıcının aynı IP adresine sahip olabileceği anlamına gelir. Ayrıca bazı kullanıcılar VPN ve proxy'leri de kullanır.

Kullanıcı Konum Verilerinin Toplanması ve İşlenmesine İlişkin En İyi Uygulamalar

Kullanıcının verileri söz konusu olduğunda, herhangi bir uygulamanın her zaman çok önemli bir parçasıdır. Bir geliştirici olarak kullanıcı odaklı ve kullanıcıların verilerini koruyan bir uygulama oluşturmak bizim görevimizdir. Cihazın konumu gibi veriler için geliştirici aşağıdaki gibi birçok sorunla karşılaşabilir:

• IP veya Coğrafi Konum verileri ne kadar doğrudur?
• Kullanıcı konumunun kullanılmasına izin vermediğinde ne yapmalı?
• Veriler nasıl güvenli bir şekilde işlenir ve korunur?

Konum tabanlı özelliklerin uygulanması zor olabilir ancak en iyi uygulamaları takip ederek kullanıcılara daha kişiselleştirilmiş ve güvenli bir deneyim sağlayabilirsiniz. Konum bazlı verileri işlerken aşağıdaki noktaları aklınızda bulundurun.

• Doğruluk: IP adresini kullanırken birden fazla API kullanarak iki kez kontrol etmeli ve konumunu çapraz kontrol etmelisiniz. Konum bazlı hizmet ve özelliklere bir geri dönüş mekanizması eklemelisiniz. Konum verileri cihaz ayarları, ağ bağlantıları vb. faktörlerden etkilenebileceğinden verileri doğrulamak daha iyidir.

  
  

• Gizlilik: Birden fazla ülkenin farklı yasalarını kontrol altında tutmanız gerektiğinden, herhangi bir kullanıcının verilerini toplarken bu en büyük endişe kaynağıdır. Geliştiriciler her zaman kullanıcının gizliliğine saygı duymalıdır. Kullanıcıdan herhangi bir verinin toplanması söz konusu olduğunda açık ve öz bir gizlilik politikasına sahip olmak gerekir. Herhangi bir hassas bilgi topladığınızda bunu kullanıcıya bildirmelisiniz. Eğer konuma dayalı özellikler varsa, verileri neden ve nasıl kullanacağınızı açıkça göstermelisiniz. Ayrıca kullanıcıya, verilerini paylaşmak istemezlerse kolayca çıkabilmeleri için bir vazgeçme seçeneği sunmalısınız.

  
  

• Güvenlik: Verilerin güvenliği için OAuth veya JWT gibi kimlik doğrulama mekanizmalarını uygulayabilir ve API uç noktalarını her türlü yetkisiz erişime karşı koruyabilirsiniz. Kullanıcıya her zaman güçlü şifreler kullanmasını, tarayıcılarını güncellemesini vb. önermelisiniz. İstemci ve sunucu arasında güvenli iletişim sağlamak için verileri HTTPS ve SSL sertifikaları kullanarak şifrelemelisiniz. Arka uçta, yalnızca yöneticiler gibi seçilen kullanıcıların verilere erişebilmesi için rol tabanlı erişim denetimi uygulayabilirsiniz. Herhangi bir bağımlılığı güncellemeden önce her zaman resmi kaynaktan olup olmadığını kontrol etmelisiniz.

  
  

  Çözüm

  Kullanıcıların kişiselleştirilmiş deneyimi söz konusu olduğunda konum verileri önemli bir rol oynuyor ancak bu verilerin işlenmesi de çok önemli bir görev. Konum verilerini almak için kullanabileceğiniz birçok farklı yöntem vardır ancak bu, ne kadar veriye ihtiyacınız olacağına bağlıdır, eğer yalnızca bir IP adresine ihtiyacınız varsa o zaman ipify API'lerini kullanabilirsiniz ve daha fazla coğrafi konum verisine ihtiyacınız varsa o zaman ikisini de kullanabilirsiniz. opencage veya google'ın ters coğrafi kodlama API'sini de kullanabilirsiniz. Hava durumu uygulamaları gibi küçük uygulamalar oluşturuyorsanız, tarayıcının Coğrafi Konum API'lerini kullanabileceğiniz için herhangi bir API kullanmanıza gerek yoktur. Bu verilerin güvenliği ve gizliliği söz konusu olduğunda, iyi yazılmış bir gizlilik politikası sağlayarak kullanıcının gizliliğiyle ilişkili olası risklerden kaçınmalısınız. Bu yazının sonu bu kadar umarım beğenirsiniz.

  
  

  • DevDreamning adlı web siteme göz atın.
  • Youtube kanalım👇😉