Kullanıcı Konum Takipini Reaks Yerli Haritalar ve Geolokasyon

Temellerin Ötesinde Hareket: Gerçek Zamanlı Yer Nedenleri

Kullanıcı konumu, mobil bir uygulama için en güçlü veri akışlarından biridir ve Directus gibi bir kafasız CMS ile doğal olarak entegre edilir ve kullanıcıların ihtiyaç duydukları şeyleri öngören bir ortam yazılımına dönüştürebilirsiniz. Geolocation API ile bir araya gelen yerel haritalar, tam bir uygulama için endüstriye dayalı bir yaklaşımdır ve doğrudan uygulamalarla doğal olarak entegre edilirler, böylece doğrudan bir şekilde güvenilir bir şekilde bir şekilde bir konuma sahip olabilirsiniz.

Mimarlık Genel Bakış: Directus Fits In

Herhangi bir kod yazmadan önce, parçaların nasıl bağlantı kurduğunu anlamaya yardımcı olur. Reaks Yerli, harita oluşturma ve ham konum verileri dahil olmak üzere mobil cepheyi ele alır. Directus arka uç ve kafasız CMS olarak çalışır.Bu dağıtım, kullanıcı konumlarını ve kontrol edilebilir herhangi bir metadatayı belirtir.

Directus'un veri modelleme yeteneklerine daha derin bir bakış için, ESMS:0)Directus Data Modeling Guide).

Önlemler ve Paket Kurulum

Çalışma Reaks Yerli projesine (CLI veya Expo çıplak bir iş akışı) ve Directus örneğine ihtiyacınız olacak. Yerel gelişim için, Directus via Docker. İşte Reaks Yerli projesinize ihtiyacınız olan temel paketler:

• [FONT:0]react-native-maps) – harita bileşeni ve işaretleyicisini sağlar.
• [[Düzücü-komünizm/geolokasyon[[Dönetici:0) – Cihazı GPS ve ağ konumuna erişim.
• [[Düzücü-komünizm/geolokasyon[[Dönetici:0) – Cihazı GPS ve ağ konumuna erişim.

Onları proje kökünden yükleyin:

npm install react-native-maps @react-native-community/geolocation

iOS için, yerel modüllere bağlantı kurmak için 444T:1'i çalıştırın.Eğer Expo kullanıyorsanız, açık iş akışına veya kullanım için gerekli olacaktır. ”Çünkü bu kütüphaneler yerel modül bağlantı gerektirir. kurulumdan sonra, uygulamayı hareket etmeden önce bir simülatörü veya cihazı çalıştırarak her şeyi doğrulayın.

Platform İzinleri: Kapıcı

Her iki Android ve iOS, giriş yeri için açık kullanıcı onayı gerektirir. İzinleri ele almak için başarısız olmak, bir süre çöküpleri ve olumsuz incelemeler nedenidir. Gerekli platform yapılandırmasıyla başlayın.

Android Build

OpenFLT:3) ve bu izinleri [[Dörtüncü|DüzD: 4) blok içinde ekleyin, [[Çalışan:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=

iOS Yapılandırma iOS

OpenFLT:9) ve bu anahtarlardan birini veya ikisini ekleyin:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs your location to show nearby services and track your route.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs background location access to provide continuous route tracking.</string>

Apple, her anahtar için zorlayıcı bir açıklama gerektirir.Ana Sayfalar gibi “ Uygulamanız sizin konumunuza erişime ihtiyaç duyar,” incelemeciler bunu reddedebilirler. Belirli olun: 03:0)“To show near coffee stores and provide turn-by-turn navigation,”).

Runtime Permission Supply Native

Açık açık değerler sadece işin yarısıdır. Ayrıca, özellikle Android 6.0+ ve iOS 8.0+'da izin talep etmeniz gerekir. Android için sürüm ve iOS için yerel geolok kütüphaneye güveniyorsunuz, bu da sistemi otomatik olarak adlandırdığınızda otomatik olarak yapmanız gerekir.

İşte yeniden kullanılabilir bir izin kancası:

import { PermissionsAndroid, Platform } from 'react-native';

const requestLocationPermission = async () => {
 if (Platform.OS === 'android') {
 const apiLevel = Platform.Version;
 if (apiLevel < 23) {
 // permissions granted automatically at install time
 return true;
 }
 const granted = await PermissionsAndroid.request(
 PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
 {
 title: 'Location Permission',
 message: 'This app needs access to your location.',
 buttonPositive: 'Grant',
 buttonNegative: 'Deny',
 }
 );
 return granted === PermissionsAndroid.RESULTS.GRANTED;
 }
 // iOS handles runtime permission via the Geolocation call itself
 return true;
};

Herhangi bir geolok çağrısı öncesinde bu işlevi arayın. Kullanıcı inkar ederse, etkiyi açıklayan ve açık sistem ayarları sunmak için bir düğme sun.

Core Implementation: Kullanıcıyı bir Haritada Gösterin

İzinler tellendikten sonra ana izleme bileşeni inşa edebilirsiniz. Aşağıdaki kod kullanıcının mevcut konumunu talep eder, harita bölgesini ayarlar ve bir işaretçiyi döndürür.Ayrıca gerçek zamanlı olarakFLT:16 kullanarak işaretleyiciyi de günceller.

import React, { useState, useEffect, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';
import { requestLocationPermission } from './permission';

const LocationTracker = () => {
 const [region, setRegion] = useState(null);
 const [currentLocation, setCurrentLocation] = useState(null);
 const watchId = useRef(null);
 const mapRef = useRef(null);

 useEffect(() => {
 const initTracking = async () => {
 const hasPermission = await requestLocationPermission();
 if (!hasPermission) return;

 // Get the initial position immediately
 Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 const initialRegion = {
 latitude,
 longitude,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 };
 setRegion(initialRegion);
 setCurrentLocation({ latitude, longitude });
 },
 (error) => {
 console.warn('Initial position error:', error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
 );

 // Subscribe to continuous updates
 watchId.current = Geolocation.watchPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 setCurrentLocation({ latitude, longitude });
 // Optionally animate the map to follow the user
 mapRef.current?.animateToRegion({
 latitude,
 longitude,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 500);
 },
 (error) => {
 console.warn('Watch position error:', error.message);
 },
 { enableHighAccuracy: true, distanceFilter: 10, interval: 5000 }
 );
 };

 initTracking();

 return () => {
 if (watchId.current !== null) {
 Geolocation.clearWatch(watchId.current);
 }
 };
 }, []);

 if (!region) {
 return ;
 }

 return (
 
 
 {currentLocation && (
 
 )}
 
 
 );
};

const styles = StyleSheet.create({
 container: { flex: 1 },
 map: { flex: 1 },
});

export default LocationTracker;

Bu uygulamadaki temel ayrıntılar:

• [[Dönetici: 10[Dönetici: 1 ) – Cihazın en az 10 metre hareket ettiğinde bir yer güncellemesini tetikler. Bu kurtarma bataryası ve ağ aramalarını azaltır.
• [[0)Sonval: 5000 – Android. iOS'ta her 5 saniyede bir kez güncelleme frekansı bunu görmezden gelir, ancak kendi throttling kullanır.
• [FONT=0]KullanıcıLocation) – Bir yerel sistemin kullanıcı konumu için yaptığı bir yerel sistem, açık bir işaret olmadan bile. mavi pulsing doğruluk çemberi de ele alır.

Kalıcı Yer Data to Directus

Bir haritadaki yeri görüntülemek faydalı, ancak gerçek değer bu verileri depolamak ve sorgulamaktan gelir.In Directus, bu alanlardan ) olarak adlandırılan bir koleksiyon oluşturun).

import axios from 'axios';

const DIRECTUS_URL = 'https://your-directus-instance.com';
const DIRECTUS_TOKEN = 'your-static-token-or-dynamic-jwt';

const saveLocationToDirectus = async (coords) => {
 try {
 await axios.post(
 `${DIRECTUS_URL}/items/locations`,
 {
 latitude: coords.latitude,
 longitude: coords.longitude,
 accuracy: coords.accuracy,
 // user_id is typically pulled from auth context
 },
 {
 headers: {
 Authorization: `Bearer ${DIRECTUS_TOKEN}`,
 },
 }
 );
 } catch (error) {
 console.error('Failed to save location:', error.response?.data || error.message);
 }
};

const getDistanceFromLatLonInMeters = (lat1, lon1, lat2, lon2) => {
 const R = 6371000; // Earth's radius in meters
 const dLat = (lat2 - lat1) * Math.PI / 180;
 const dLon = (lon2 - lon1) * Math.PI / 180;
 const a =
 Math.sin(dLat / 2) * Math.sin(dLat / 2) +
 Math.cos(lat1 * Math.PI / 180) *
 Math.cos(lat2 * Math.PI / 180) *
 Math.sin(dLon / 2) *
 Math.sin(dLon / 2);
 const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 return R * c;
};

const checkGeofences = async (currentCoords, geofences) => {
 for (const fence of geofences) {
 const distance = getDistanceFromLatLonInMeters(
 currentCoords.latitude,
 currentCoords.longitude,
 fence.latitude,
 fence.longitude
 );
 if (distance <= fence.radius) {
 return fence; // user is inside this geofence
 }
 }
 return null;
};

• [FONT:0) Uzaklığı kullanın ([Dönetici:0) – jittery güncelleştirmelerinden kaçınmak için yeterince yüksek ayarlayın.For walk apps, 10 metre iyi bir temeldir.For driving apps, 20-50 metre daha iyi çalışır.
• [FONT=0)Reduce lokasyonu doğruluk mümkün olduğunda ) – For features like “current city,” coarse location (network-based) sadece 50 metrenin altında doğrulukta iyi kullanın.
• [FONT=0]Throttle ağ aramaları[Dönetici: 1 ) – Buffer lokasyonu hafızada işaret eder ve bunları her 100 puana doğrudan bağlar, ki bu ilk olarak gelir.
• [FONT:0) Uygulamanın arka plana gittiği zaman izlemeyi bırakın – Uygulamanızın meşru bir arka planı kullanımı durumunda (avigasyon, fitness izleme), AppState değişikliği dinleyicisinde yapılan saatinizi sonlandırın. iOS, çok fazla altyapı enerjisini kullandığı takdirde uygulamanızı sona erdirecektir.
• [FONT:0]UseENFLT:21] – Son yeterince açık bir yer alırsak, GPS donanımını uyandırmaktan kaçınır.

Apple ve Google her ikisi de ayrıntılı enerji profilleme araçları sağlar. Xcode'un Enerji Log ve Android'in Battery Tarihçisini nakliyeden önce uygulama davranışını incelemeye hazırlar.

Hata işleme ve Edge Cases

Konum hizmetleri çok kötü niyetlidir. Kullanıcılar izinleri inkar edebilir, uçak modu devam edebilir, GPS kapalı tutabilir ve eski cihazlar bu senaryolardan her birini tahmin etmelidir.

• [FONT:0) İzin[[Dönetici:0) vedash; Bir &ldquo ile engelleyici bir pankart göster; Open Settings” düğmesine asla güç ver.
• [FONT:0]Location mevcut değil [Döntilmişler [Dönder:0] – Ekranın geri döndüğünüzde otomatik olarak geri döndüğünü kontrol edin.
• [FONT:0]Timeout[Dönetici:0] – Üst üste üç kez tekrar tekrar tekrar tekrar tekrar tekrar tekrar tekrar tekrar basarsa, en son bilinen pozisyona geri dönün.
• [FONT=0]Stale veya önbellekli veriler[Dönetici:0]Stale veya önbellekli veriler[Dönetici:0][Dönetici:0)Dönetici:0))Eğer 60 saniyeden daha eskiyse, bir sonraki güncelleme için bekleyin.

Hafif bir giriş servisi (veya sadece Directus koleksiyonuna hataları gönderin:0) konum errors) böylece gerçek dünya başarısızlık oranlarınızı izleyebilir ve mantığınızı geliştirebilirsiniz.

Across Devices and Scenarios

Simülatörler hızlı bir UI iterasyon için yararlıdır, ancak gerçek GPS davranışını taklit edemezler. Her zaman farklı koşullar altında fiziksel cihazlar üzerinde test edin: yürüyüş, araba, bir bina içinde, bir tünelde ve cihazda, güç tasarrufu modundaki GPS monitörleri ile yeniden oynatılabilir.

Bu vakaları kapsayan bir test planı oluşturun:

• Taze yükleme ve ilk kez izin
• İzin vermek ve sonra onu daha sonra ayarlar aracılığıyla vermek
• Hızlı hareket (yol hızlarında sürüyor)
• Yüksek doğrulukla sabit cihaz (kesinlikle sıkı bir puan kümesi üretmelidir)
• Arka plan-to-foreground geçişi (görüntü bilinen pozisyonu geri aldı mı?)

Gizlilik, uygunluk ve Kullanıcı Güveni

Konum data hassastır. Yanlışlıkla, kullanıcı güveninin iyi ve kaybına yol açabilir. Aynı bakıma şifre veya finansal bilgiler olarak davranın.

• [FONT:0)Transparency[[Dönetici:0) vendash; tam olarak hangi konum verilerini topladığınız ve neden gizlilik politikanızda topladığınızı açıklayın. Link to it from the permission quick.
• [FONT=0)Data minimization[Dönetici:0] – Sadece ihtiyacınız olan doğruluk seviyesini toplayın.Delete old points after a keep period (örneğin, 30 gün) via a Directus otomasyon akışı.
• [FONT=0)[[FONT=0))[[FONT=0)[FONT=0))[FONT=FONT=FONT=FONT=FONT=0)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))Demek için, sizin için bir araya gelmek için aşağıdaki gibi bir kolaylık sağlar.
• [FONT:0) Kullanıcı kontrolleri – Kullanıcıların konum tarihini görebilir ve bireysel puanları silebilir veya tüm tarihi silebilirsiniz. Bu, GDPR ve CCPA gibi gizlilik düzenlemeleri ile güven ve hizalar oluşturur.

Directus'ta kişisel verileri işlemek için daha fazla rehberlik için, [[Dönerge Güvenlik Yapılandırma Seçenekleri).

Daha Fazlası: Gelişmiş Kullanım Vakaları

Temeller sağlam olduğunda, aynı temeli kullanarak daha sofistike özellikler üzerinde tabaka kurabilirsiniz.

Gerçek Zaman Konum Paylaşımı

Directus'un WebSocket veya SSE desteği diğer kullanıcılara yer güncellemelerini yayınlamak için. Örneğin, teslimat uygulaması, müşterinin haritasında kuryenin hareket işaretleyicisini gösterebilir.

Konum-Based Analytics

Doğrudanus'ta ısımaps üretmek için yer verisi, zaman raporları veya popüler rota modelleri.The DirectusurFLT:0)Analytics Guide[Dön 1: 1), verinizin üst kısmında panolar nasıl inşa edeceğinizi gösterir.

Offline Queueing

Ağ mevcut olduğunda, AsyncStorage veya WatermelonDB gibi yerel bir veritabanı kullanarak cihazdaki kuyruk noktaları.Bir kez bağlantı özgeçmişleri, kuyrukları Directus'e bırakın. Bu, veri bütünlüğüne bile yer alan alanlarda sağlar.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Kullanıcı yerini Reaksiyon Yerli Harita ve Geolok API'si ile takip etmek iyi düşünülmüş bir API katmanı inşa etmeden, ancak şeytan ayrıntılardadır. Kullanıcılar doğrudan gibi sağlam bir ön uygulamayla birlikte, bu kılavuzda esnek bir gerileme kazanır, özel bir API katmanı inşa etmeden ve pozisyona hareket eder.