יישום מעקב אחר מיקום המשתמש עם React Native Maps ו Geolocation

מעבר ליסוד: למה חשוב מיקום בזמן אמת

מיקום המשתמש הוא אחד מזרמי הנתונים החזקים ביותר יישום נייד יכול ללכוד.כאשר נעשה נכון, זה הופך אפליקציה סטטית לתוך כלי קוטקסט-מודע צופה מה משתמשים צריכים.תגובה Native Maps בשילוב עם ה- Geolocation API הוא הגישה סטנדרטית בתעשייה עבור זה, והם משלבים באופן טבעי עם CMS חסר ראש כמו Directus. על ידי אחסון ושרת נתונים מיקום באמצעות Directus, אתה יכול לבנות תכונות החל ממשלוח והתאמה יעילה של מיקום, מעקב אחר סביבת הפעלה מלאה.

אדריכלות: Where Directus Fits In

לפני כתיבת כל קוד, זה עוזר להבין איך החלקים להתחבר. React Native מטפל החזית הניידת, כולל מיפוי נתוני מיקום גולמי. Directus פועל כמו backend ו- cMS ללא ראש, זה מאחסן את ההיסטוריה של מיקום המשתמש, הגדרות גיאוגרפיות, וכל מטא-נתונים שאתה צריך.התגובה Native App מביא ושולח נתונים למיקום באמצעות ה-Gateus שלה או GraphL API זה, שמירה על הנתונים שלך, מעקב מרכזי, ו-מחדש, מעקב.

לקבלת מבט מעמיק יותר על יכולות איסוף הנתונים של Directus, ראה את ה-FLT:0Directus Data Modeling GuideFLT:1.

Prerequisites ו-Action

תזדקקו לפרויקט תגובה Native (CLI או Expoww) ודוגמה ישירה לפיתוח מקומי, תוכלו לסובב את Directus באמצעות Docker. הנה חבילות הליבה שאתה צריך בפרויקט Native React:

• (ב) ויקרא י"א: ויקרא י"ד: "וַיְהִיא עַמֶרְטְהִיתִיתִיתִיתִיתִיתִיתִיתִיתִיתִיתִי" (בראשית כ"ד).
• (FLT:0)@react-native-community/geolocationFLT:1 – Access למכשיר GPS ומיקום רשת.
• (FLT:0)@react-native-community/geolocationFLT:1 – Access למכשיר GPS ומיקום רשת.

התקנתם משורש הפרויקט:

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

עבור iOS, לרוץ 1 כדי לקשר את המודולים הילידים.אם אתה משתמש ב-Expo, תצטרך להזריק לזרימת העבודה החשופה או להשתמש ב-FLT:2 כי הספרות האלה דורשות התאמה של מודול Native.

ארכיון תגיות: The Gatekeeper

אנדרואיד ו- iOS דורשים הסכמה מפורשת של משתמשים למיקום גישה.כישלון לטפל באישורים בחסד הוא הגורם מספר אחת לתאונות בריצה וסקירות שליליות.התחל עם תצורת הפלטפורמה הנדרשת.

אנדרואיד Configuration

(ב) ,ב[[1924]], [[1924]], [[1924]]]]]], [[1924]]]]

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

(FLT 7) נותן דיוק GPS, בעוד FLT:8 מספק ירידה באמצעות Wi-Fi מגדלי תאים.כולל שניהם מאפשר את היישום שלך מתפתל ב סביבות שבו GPS הוא חלש, כגון מקורה.

iOS Configuration

פתח את ה-FLT:9 ולהוסיף אחד או את שני המפתחות:

<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>

אפל דורשת הסבר משכנע לכל מפתח. להימנע מיתרים גנריים כמו “ האפליקציה שלך צריכה גישה למיקום שלך, ” כפי שמבקרים עשויים לדחות אותו: FLT:0 “ כדי להראות חנויות קפה בקרבת מקום ולספק ניווט הפוך, ”FLT:1 לדוגמה.

Runtime Permission Handling in React Native

קביעת ערכים היא רק מחצית העבודה.עליכם לבקש רשות בזמן ריצה, במיוחד באנדרואיד 6.0+ ו- iOS 8.0+. השתמש במודול 12:12 עבור אנדרואיד ולהסתמך על ספריית המיקום הגיאוגרפי עבור iOS, אשר גורם למערכת באופן אוטומטי כאשר אתם קוראים FLT:13 או FLT:14.

הנה הרשאה ניתנת לחזרה:

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;
};

התקשר לתפקוד זה לפני כל שיחת מיקום גיאוגרפית.אם המשתמש מכחיש, להציג הודעה ידידותית המסבירה את ההשפעה ומציעה כפתור להגדרות מערכת פתוחות.לעולם לא פשוט להתרסק או להראות מפה ריקה.

יישום: הצגת המשתמש על המפה

עם הרשאות מחווטות, אתה יכול לבנות את המרכיב הראשי למעקב.הקוד הבא מבקש את המיקום הנוכחי של המשתמש, קובע את אזור המפה, ו טיפות סימן.זה גם מעדכן את הסמן בזמן אמת באמצעות FLT:16.

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;

פרטים מרכזיים ביישום זה:

• (FLT:0) ,FiterFiter: 10FLT:1 – רק גורם עדכון מיקום כאשר המכשיר נע לפחות 10 מטרים.זה חוסך סוללות ומפחית את שיחות הרשת.
• (FLT:0interval: 5000reaFLT:1 – Caps the Updateתדירות ל- Once Every 5 שניות ב- Android.iOS מתעלם מכך, אך משתמש בתרמית שלו.
• (FLT:0)showsuserLovecationFLT:1 – A מובנה תגובה Native Maps תכונה המציגה מערכת Native dot עבור המיקום של המשתמש, גם ללא סימון מפורש.הוא מטפל גם בעיגול הדיוק הבלוז הכחול.

אספקת נתוני מיקום לDirectus

הצגת המיקום במפה היא שימושית, אך הערך האמיתי מגיע מאחסון ושאילתת מידע זה.ב Directus, יצירת אוסף בשם FLT:0.

• (ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
• (ב) [15] (ב[[1924]]]]]]
• (ב) ויקרא י"ד:
• (ב) ויקרא י"ד:
• (ב) ⁇ (במדבר כ"ד)
• (ב) ,0 פעמים, ⁇ (בשעה מאוחרת)

לאחר מכן, בתוך ה- 18 שלך, שלח כל עדכון ל-Directus:

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);
 }
};

עדכוני Batch אם אתה מצפה גבוה קידוד כותב. Directus תומך ביצירת פריטים מרובים בבת אחת על ידי העברת מערך לאותו נקודת קצה.זה מקטין את הרשת מעל פני מעלה ומונע מגבלות ריבית.

עקבו אחרי React Native and Directus

Geofencing הוא היכולת לזהות כאשר משתמש נכנס או יוצא גבול גיאוגרפי מוגדר מראש. Directus יכול לאחסן הגדרות גבול אלה, ואת היישום Native React שלך יכול לבדוק אותם נגד המיקום הנוכחי. דפוס זה מאלץ הודעות כגון “ ברוכים הבאים לחנות! ” “ עזבת את אזור המשרד שלך.

ג'ואנסים ב Directus

יצירת אוסף בשם "FLT:0" (בשיתוף)

• (ב) ⁇ (ב"ה)
• (ב) ⁇ (ב"ב)
• (ב) ויקרא י"ד:
• (ב) ויקרא י"ד:
• (ב) ⁇ (במדבר כ"ד)
• (ב) ויקרא י"א: "בְּבְהִי" (במדבר כ"ד)
• (ב) ויקרא י"ד: "בְּבְהִיא" (במדבר כ"ד)
• (ב) ויקרא י"א)

ביקורת לקוח-Side Geofence Check

בכל עדכון מיקום, להביא את הגיאו-פנטנס הפעילים מ Directus ולבחון את המרחק בין המיקום הנוכחי לבין כל מרכז גדר.You יכול להשתמש בנוסחה של הישרין או בנספח פשוט יותר:

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;
};

Cache את רשימת הגיאו-פנטנס מקומית ורענן אותה מעת לעת במקום להביא לכל עדכון עמדה.זה שומר על האפליקציה מגיבה ומפחית את עומס השרת.

ביצועים ואופטימיזציה של סוללות

מעקב אחר מיקום הוא אחד התכונות העוצמתיות ביותר של סוללות על משתמשי מובייל.משתמשים יתקין אפליקציה שרוקנת את הטלפון שלהם, אז אופטימיזציה אינה אופציונלית.

• (FLT:0) מרחקFiirdderFLT 1 – הגדר אותו גבוה מספיק כדי למנוע עדכונים ג'ייטריים. עבור יישומים הליכה, 10 מטרים הוא קו בסיס טוב. עבור יישומים נהיגה, 20-50 מטר עובד טוב יותר.
• (FLT:0) שיפור הדיוק של המיקום כאשר אפשריFLT:1 – עבור תכונות כמו “ העיר הנוכחית, ” מיקום קוארזה (מבוסס על רשת) הוא מספיק. השתמש בסדר (GPS) רק כאשר דיוק מתחת 50 מטר נושאים.
• (ב) ויקרא:0) ויקרא רשת תהילים 1 וונדאש; מיקום Buffer מצביע בזיכרון ושטף אותם ל Directus כל 30 שניות או כל 100 נקודות, אשר כל אחד מהם מגיע ראשון.
• (FLT:0) להפסיק לצפות כאשר האפליקציה הולכת לרקע 1Vndash; אלא אם כן האפליקציה שלך יש מקרה שימוש רקע לגיטימי (הטבעה, מעקב כושר), לנקות את השעון במאזיני שינוי האפליקציות.
• (ב) ויקרא יא"ד: "ה', ויקרא י', ו'ונדל'; קבלו מקום חקוק אם זה מספיק לאחרונה.

אפל וגוגל מספקים כלים מפורטים של אנרגיה פרופילים. השתמש ב- Xcode אנרגיה Log ו- Android של ה-Hetorian כדי לבדוק את התנהגות האפליקציה לפני המשלוח.

טעויות וצוק איתן

שירותי מיקום הם בלתי אמינים לשמצה המשתמשים עשויים להכחיש הרשאות, מצב המטוס עשוי להיות על, GPS עשוי להיות חסום בתוך הבית, והמכשירים הישנים יכולים להחזיר נתונים מסולקים או לא מדויקים.

• הרש"פ הכחישה את ההרחבה 1 וונדאש; הצג דגל שאינו חוסם עם וולדקו; הגדרות פתוחות ורדקו; כפתור לעולם לא יחייב את האפליקציה.
• (FLT:0)לא זמין ל- 1 – הצגת הודעה כמו “ קיצור זמני לא זמין. בדוק את הגדרות המכשיר שלך. ” המשך צפייה כך היישום מחלים באופן אוטומטי כאשר האות חוזר.
• (ב) ויקרא: ויקרא י"ד): "וַיְּהִיל וּדְטַבְטַבְהִיתִיתִיתִיתִיתִיתִיאוּ" (בראשית כ"ד, כ"ד).
• (ב) ויקרא יא"ד: ויקרא י"ד: "וַיְּהָעָשָׂה וּדְהִיתִיתִיא וּכְתָּעָה וּכְתָּעָה וּכְתָּעָתָם" (במדבר כ"ד, כ"ד).

אינטגרציה של שירות קל משקל (או פשוט לשלוח שגיאות לאוסף Directus שנקרא "FLT:0location מחבלים" 1) כך שתוכל לפקח על שיעורי כשל בעולם האמיתי ולשפר את ההגיון שלך באופן רציונאלי.

בדיקות על פני מכשירים ו- Scenarios

סימולטורים שימושיים עבור מהירות של UI, אבל הם לא יכולים לדמות התנהגות GPS אמיתית.תמיד לבדוק על מכשירים פיזיים בתנאים שונים: הליכה, נהיגה, בתוך בניין, בתוך בניין, מנהרה, ועם המכשיר במצב חיסכון כוח. אנדרואיד מחקים יכולים להזריק מיקומים לעג באמצעות הבקרות המורחבת, אבל סימולטורים של iOS אינם יכולים לחקות GPS בכלל עבור ספריית הגיאוגרפיה.

יצירת תכנית מבחן המכסה את המקרים האלה:

• התקנה חדשה ורשומה ראשונה
• הכחשת רשות ולאחר מכן להעניק אותה מאוחר יותר באמצעות הגדרות
• תנועה מהירה (במהירויות מהירות)
• מכשיר חוצות עם דיוק גבוה (צריך לייצר אשכול חזק של נקודות)
• מעבר רקע-על-קרקע (המפה התאוששה מהעמדה הידועה האחרונה?)

פרטיות, נאמנות למשתמש ואמון

נתוני מיקום רגישים.מקלקלים זה יכול להוביל קנסות רגולטוריים ואובדן אמון של משתמשים. לטפל בו באותה טיפול כמו סיסמאות או מידע פיננסי.

• (ב) [13] ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
• (FLT:0) Data minimizationFLT:1 – לאסוף רק את רמת הדיוק שאתה צריך.למחק נקודות ישנות לאחר תקופת שימור (לדוגמה, 30 ימים) באמצעות זרימה של אוטומציה ישירה.
• (ב) ויקרא: ויקרא י': ויקרא ויקרא י' (ב) ויקרא כ"ד): "וַיָּעָשִׂיתִיא אִם אִם אִם עַלְתָּעָשׂוּ" (בראשית כ"ד).
• (FLT:0User ControlsigtureFLT:1) – לספק לוח נתונים בתוך האפליקציה שבו משתמשים יכולים לראות את ההיסטוריה המיקום שלהם ולמחוק נקודות בודדות או למחוק את ההיסטוריה כולה.זה בונה אמון והתאמה עם תקנות פרטיות כמו GDPR ו-מק"ס.

לקבלת מידע אישי נוסף ב Directus, בקר ב-Directus:0Directus Security Configuration OptionsFLT:1.

המונחים: Advanced Use Cases

ברגע שהבסיסים יציבים, אתה יכול לשכב על תכונות מתוחכמות יותר באמצעות אותה הקרן.

שיתוף בזמן אמת

השתמש ב- WebSocket של Directus או תמיכה ב-SSE כדי לשדר עדכונים למיקום למשתמשים אחרים.לדוגמה, אפליקציית משלוח יכולה להציג את חותמת העברת השליח על מפת הלקוח.הגיבוי מקבל את המיקום באמצעות REST ודוחף אותו להירשם ללקוחות ללא סקר.

המונחים: Location- Based Analytics

נתוני מיקום אגגור ב Directus כדי ליצור מפות חום, דוחות זמן שוכנים, או דפוסי נתיב פופולריים.

המונחים:

כאשר הרשת אינה זמינה, מיקום תור מצביע על המכשיר באמצעות AsyncStorage או מסד נתונים מקומי כמו WatermelonDB. ברגע שקישוריות קורות חיים, לשפשף את התור לDirectus. זה מבטיח שלמות נתונים גם באזורים עם כיסוי חד פעמי.

מסקנה

יישום מיקום המשתמש מעקב עם React Native Maps ו- Geolocation API הוא דפוס מאוזן היטב, אבל השטן נמצא בפרטים. על ידי הצמדת יישום חזית חזק עם CMS חסר ראש כמו Directus, אתה מקבל חזרה גמישה לאחסון, שאילתה, ופועל על נתונים מיקום ללא בניית שכבת API מותאמת אישית.