كيف تصنع تطبيق تحديد الموقع الجغرافي؟

في عالم اليوم، أصبحت التطبيقات المستندة إلى الموقع الجغرافي أكثر شيوعًا. فكل التطبيقات الشائعة تقريباً تتضمن ميزات تحديد الموقع الجغرافي إلى حد ما. يقوم البعض بذلك لتعزيز تجربة المستخدم وتوفير تجربة أكثر تخصيصاً، بينما يقوم البعض الآخر بتضمين ميزات تعتمد على الموقع الجغرافي.

في هذه المقالة، سنعلمك كل ما تحتاج إلى معرفته عن تطبيقات تحديد الموقع الجغرافي. سنتحدث عن ميزاتها الرئيسية، وأنواع تطبيقات تحديد الموقع الجغرافي، وسنشرح عملية إنشاء تطبيق جغرافي من منظور الشركة. بالإضافة إلى ذلك، سنرشدك خلال عملية تطوير تطبيق تحديد الموقع الجغرافي باستخدام Back4app و React Native.

ما هو تطبيق تحديد الموقع الجغرافي؟

تطبيق تحديد الموقع الجغرافي أو التطبيق المستند إلى الموقع الجغرافي هو أي تطبيق للهاتف المحمول أو الويب يتتبع موقع جهاز المستخدم. تقوم التطبيقات بذلك لتخصيص تجربة المستخدم وتحسينها، وتوفير خدمات تعتمد على الموقع الجغرافي، ولأغراض تسويقية، وأغراض إعلامية، وما إلى ذلك.

تستخدم تطبيقات تحديد الموقع الجغرافي تقنيات مختلفة للحصول على موقع المستخدم، بما في ذلك ما يلي:

• النظام العالمي لتحديد المواقع (GPS)
• النظام العالمي لتحديد المواقع المساعد لتحديد المواقع (A-GPS)
• تقنيات تحديد الموقع الجغرافي الداخلي
• الأبراج الخلوية أو الواي فاي

كل من التقنيات المذكورة لها مزاياها وعيوبها. بعضها أسرع، والبعض الآخر أكثر دقة وموثوقية. ولكن لا تقلق بشأنها كثيراً. عادةً ما يتم الحصول على الموقع بواسطة الجهاز نفسه.

الميزات الرئيسية للتطبيقات المستندة إلى الموقع الجغرافي

تختلف تطبيقات تحديد الموقع الجغرافي كثيراً في الميزات، ولكن معظمها يتضمن ميزات تحديد الموقع الجغرافي هذه:

• عرض الخريطة: عرض الخريطة هو ميزة أساسية لتطبيقات تحديد الموقع الجغرافي. فهو يوفر للمستخدمين تمثيلًا مرئيًا لموقعهم الحالي ونقاط اهتمامهم. وتتيح للمستخدمين استكشاف المناطق والعثور على الاتجاهات وإجراء الاستعلامات الجغرافية المكانية.
• تتبع الموقع الجغرافي: غالبًا ما توفر تطبيقات تحديد الموقع الجغرافي تتبع الموقع الجغرافي في الوقت الفعلي، مما يتيح للمستخدمين مشاركة مواقعهم مع الآخرين أو تتبع تحركاتهم.
• التخصيص: قد توفر تطبيقات تحديد الموقع الجغرافي ميزات التخصيص، مثل حفظ المواقع المفضلة، وتعيين تفضيلات أنواع المسارات (على سبيل المثال، المشي والقيادة)، والإعدادات المرئية، وما إلى ذلك.
• الإشعارات: تستخدم بعض تطبيقات تحديد الموقع الجغرافي سياجًا جغرافيًا لإرسال إشعارات عند دخول المستخدمين إلى منطقة ما أو الخروج منها. بالإضافة إلى ذلك، يمكنهم إرسال إشعار عندما يكون المستخدم بالقرب من حدث ما، وما إلى ذلك.
• التكامل مع الخدمات الأخرى: تتكامل العديد من تطبيقات تحديد الموقع الجغرافي مع خدمات أو منصات تابعة لجهات خارجية لتحسين الوظائف. على سبيل المثال، تتكامل Google مع Booking.com لتوفير خيارات الفنادق ومنصات النقل لجلب معلومات النقل العام.

أنواع التطبيقات المستندة إلى الموقع الجغرافي

هناك العديد من أنواع التطبيقات المستندة إلى الموقع الجغرافي، ولكن دعنا نلقي نظرة على بعض التطبيقات الرئيسية.

تطبيقات الملاحة

تطبيقات الملاحة هي المثال الأكثر وضوحاً لتطبيقات تحديد الموقع الجغرافي. فهي عادةً ما تتمحور حول عرض الخريطة وتوفر ميزات مثل تتبع الموقع الجغرافي، والعثور على الأنشطة التجارية القريبة، وإجراء الاستعلامات الجغرافية، وتوفير اتجاهات القيادة.

التطبيقات عند الطلب

التطبيقات عند الطلب هي مثال آخر شائع لتطبيقات تحديد الموقع الجغرافي. تسمح لك هذه التطبيقات بالحصول على مشوار، وطلب الطعام، ومحلات البقالة، وغير ذلك الكثير. تستخدم الخدمات عند الطلب موقع المستخدم لعرض المشاوير والمتاجر والمطاعم القريبة. وعلاوة على ذلك، فهي توفر تتبع الطلبات في الوقت الفعلي.

شبكات التواصل الاجتماعي وتطبيقات المواعدة

عادةً ما تكون تطبيقات وسائل التواصل الاجتماعي أقل شفافية بشأن استخدام الموقع الجغرافي. تستخدم معظم تطبيقات وسائل التواصل الاجتماعي موقع المستخدم لتوفير تجربة مخصصة، وربط الأشخاص، ووضع علامات على الصور والصور، وعرض المحتوى الشائع إقليمياً.

تطبيقات السياحة

تستخدم تطبيقات السياحة الموقع الجغرافي للمستخدم للتوصية بالفنادق والفعاليات والتجارب القريبة وغيرها.

تطبيقات اللياقة البدنية

تحتوي معظم تطبيقات اللياقة البدنية، وخاصةً تطبيقات الجري، على خاصية تتبع الموقع الجغرافي المدمجة. يسمح تتبع الموقع بتتبع مسارات المستخدم، وحساب مسافة الطريق، ومتوسط سرعة الجري، وفرق الارتفاع، وغير ذلك.

عملية إنشاء تطبيق تحديد الموقع الجغرافي

قد يكون إنشاء تطبيق جوال يعتمد على الموقع مهمة شاقة. لكن لا تقلق! من خلال الخطوات التالية، ستكون في طريقك لإنشاء تطبيق ممتاز لتحديد الموقع الجغرافي.

الخطوة 1: تحديد الغرض من تطبيق تحديد الموقع الجغرافي

الخطوة الأولى لإنشاء تطبيق لتحديد الموقع الجغرافي هي تحديد الغرض منه وميزاته الرئيسية. اسأل نفسك ما هي المشكلة التي سيحلها تطبيقك ومن هو الجمهور المستهدف.

بمجرد أن تعرف ذلك، حان الوقت للبحث في السوق. ابحث عن منافسيك وفكر فيما يجعل تطبيقك أفضل من جميع المنافسين الحاليين.

الخطوة 2: اختر التقنيات

إن الجزء الحاسم في تطوير تطبيق جيد لتحديد الموقع الجغرافي هو اختيار الحزمة التقنية المناسبة. من المرجح أن ينقسم تطبيقك إلى الواجهة الخلفية والواجهة الأمامية.

عند اختيار أدوات الواجهة الخلفية، فكّر في نوع البيانات التي ستخزنها، ومكان تخزين البيانات، وما إلى ذلك. وعلى العكس، عند اختيار تقنيات الواجهة الأمامية، اختر التقنيات التي ستتيح لك إنشاء تطبيق سريع الاستجابة بتصميم أنيق.

بالإضافة إلى ذلك، ستحتاج إلى واجهة برمجة تطبيقات لتحديد الموقع الجغرافي. عند اختيار واجهة برمجة تطبيقات تحديد الموقع الجغرافي، ضع في اعتبارك خيارات مختلفة مثل خرائط جوجل، وخريطة الشارع المفتوحة، و MapBox. تأكد من اختيار واجهة برمجة تطبيقات تحديد الموقع الجغرافي الأنسب لنوع تطبيقك.

الخطوة 3: تصميم التطبيق

هذه الخطوة هي الأهم من وجهة نظر المستخدم. عند تصميم تطبيقك، تأكد من أنه جذاب وسهل الاستخدام ويحتوي على قدر مناسب من الميزات. اتبع الممارسات الجيدة لواجهة المستخدم/تجربة المستخدم، وفكر في كيفية استخدام المستخدم النهائي لتطبيقك القائم على الموقع.

الخطوة 4: إنشاء برنامج MVP

قبل إنشاء تطبيق متكامل، من المستحسن إنشاء منتج قابل للتطبيق كحد أدنى (MVP). يجب أن يحتوي منتج MVP على ميزات كافية ليكون قابلاً للاستخدام من قبل المستخدمين الأوائل، الذين سيقدمون بعد ذلك تعليقاتهم. ستسمح لك التعليقات بالتحقق من صحة فكرتك وتحسين منتجك.

الخطوة 5: الإصدار الكامل والإصدار

الخطوة الأخيرة التي عليك اتخاذها هي إنشاء تطبيق كامل الإصدار. تحقق من الأعمال المتراكمة في مشروعك ونفذ جميع الميزات الحيوية الأخرى. أصلح جميع الأخطاء وأطلق تطبيقك الجغرافي.

بعد الإصدار، سيكون عليك، بالطبع، الحفاظ على تطبيقك. قد تتغير واجهة برمجة تطبيقات تحديد الموقع الجغرافي بمرور الوقت. سيتعين عليك إضافة دعم لأنظمة التشغيل الأحدث، وإصلاح الأخطاء، وإضافة ميزات جديدة، وما إلى ذلك.

كيفية تطوير تطبيق تحديد الموقع الجغرافي؟

في هذا القسم من المقالة، سنلقي نظرة على كيفية إنشاء تطبيق تحديد الموقع الجغرافي باستخدام Back4app و React Native مع Expo.

المتطلبات الأساسية

• خبرة في JavaScript، وخاصة ES6.
• فهم أساسيات React Native ( وإكسبو).
• JavaScript IDE مثبت على جهازك المحلي.
• محاكي Android أو جهاز Android فعلي.

ما هو تطبيق Back4app؟

Back4app هو أداة ممتازة لبناء تطبيقات حديثة بسرعة دون الحاجة إلى مهارات ترميز متقدمة. تأتي المنصة مع العديد من الميزات المفيدة، مثل إدارة المستخدم، والمصادقة، وقواعد البيانات في الوقت الحقيقي، ووظائف الرمز السحابي، والتكاملات الاجتماعية، وواجهات برمجة التطبيقات، وغيرها.

باستخدام Back4app، يمكنك التركيز على الأجزاء المهمة من تطبيقك، مثل الوظائف الرئيسية والتصميم، دون القلق بشأن الواجهة الخلفية أو البنية التحتية المعقدة.

والأفضل من ذلك كله، يقدم Back4app خطة مجانية للاختبار وتجربة الأشياء. ومع نمو تطبيقك، يمكنك بعد ذلك الترقية بسلاسة إلى باقات متميزة بأسعار شفافة ويمكن التنبؤ بها.

نظرة عامة على المشروع

لتوضيح قوة تطبيق Back4app، سنقوم ببناء تطبيق بسيط لتحديد الموقع الجغرافي. سيتيح التطبيق للمستخدمين عرض الخريطة، وعرض الأماكن المخزنة في قاعدة البيانات، وإجراء الاستعلامات الجغرافية المكانية. وستتضمن الاستعلامات الجغرافية فرز الأماكن حسب المسافة، والعثور على الأماكن ضمن المسافة، وما إلى ذلك. سيتم التعامل مع الواجهة الخلفية لتطبيقنا بواسطة Back4app، وسنستخدم React Native وخرائط Google في الواجهة الأمامية.

إنشاء تطبيق Back4app

ستتطلب الخطوات التالية أن يكون لديك حساب Back4app. إذا لم يكن لديك حساب حتى الآن، فقم بالتسجيل مجانًا!

عند تسجيل الدخول، ستتم إعادة توجيهك إلى قائمة تطبيقاتك. لإنشاء تطبيق جديد، انقر على “إنشاء تطبيق جديد”.

يتيح لنا تطبيق Back4app نشر نوعين من التطبيقات إما:

1. الواجهة الخلفية كخدمة (BaaS) – حل خلفي متكامل، أو
2. الحاويات كخدمة (CaaS) – منصة لنشر البرمجيات الموضوعة في حاويات.

بما أننا نبني تطبيقًا لتحديد الموقع الجغرافي، سنستخدم “الواجهة الخلفية كخدمة”.

بعد ذلك، امنح تطبيقك اسمًا لطيفًا، واختر “NoSQL” كقاعدة بيانات، وانقر على “إنشاء”.

سيستغرق Back4app بعض الوقت لإعداد كل ما يلزم لتطبيقك. بمجرد أن يصبح تطبيقك جاهزاً، ستتم إعادة توجيهك إلى عرض قاعدة بيانات تطبيقك.

إنشاء فئات قاعدة البيانات

للمضي قدماً، نحتاج إلى الاهتمام بقاعدة البيانات.

كما ذكرنا في مقدمة المشروع، نريد تخزين الأماكن في قاعدة البيانات وعرضها على الخريطة. سيتعين علينا إنشاء فئة قاعدة بيانات جديدة لتخزين هذه الأماكن.

انطلق وأنشئ فصلًا جديدًا بالنقر على زر “إنشاء فصل”. قم بتسميته "مكان“، وقم بتمكين “قراءة وكتابة عامة”، وانقر على “إنشاء صف وإضافة أعمدة”.

بعد ذلك، أضف الأعمدة الثلاثة التالية:

+-------------+-------------+--------------------+----------+
| Data type   | Name        | Default value      | Required |
+-------------+-------------+--------------------+----------+
| String      | name        | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+
| String      | description | <leave blank>      | no       |
+-------------+-------------+--------------------+----------+
| GeoPoint    | location    | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+

بمجرد إنشاء الفصل، أضف بعض الأماكن النموذجية إلى قاعدة البيانات. مثال:

بدلاً من ذلك، يمكنك استيراد تصدير قاعدة بيانات الولايات الأمريكية هذه. لاستيرادها، استخدم زر النقاط الثلاث في أعلى يمين الشاشة، وحدد “استيراد > بيانات الفئة”، ثم حدد الملف.

عظيم، لقد نجحنا في إنشاء فئة قاعدة بيانات وتعبئتها. اكتمل الآن الجزء الخلفي من مشروعنا. كان ذلك سهلاً!

كود الواجهة الأمامية

في هذا القسم، سنهتم في هذا القسم بالجزء الأمامي من تطبيق تحديد الموقع الجغرافي.

المشروع الأولي

ستتطلب منك الخطوات التالية تثبيت Node. إذا لم يكن لديك قم بتنزيله.

ابدأ بإنشاء مشروع إكسبو:

$ npx create-expo-app@latest back4app-geolocation-app --template blank@sdk-49

لقد استخدمنا القالب blank@sdk-49 الفارغ لأننا نريد استخدام أحدث إصدار من مجموعة أدوات تطوير البرمجيات الخاصة بإكسبو.

سيستغرق Expo دقيقة تقريبًا لإعداد كل ما هو مطلوب لمشروعك. بمجرد أن يصبح مشروعك جاهزاً، قم بتغيير دليلك الحالي إليه. ثم ابدأ تشغيل خادم تطوير إكسبو:

$ cd back4app-geolocation-app
$ expo start

اضغط على A على لوحة المفاتيح لفتح التطبيق في المحاكي أو جهاز Android المتصل.

خرائط React Native Maps

لعرض الخريطة، سنستخدم خرائط React-native-maps. خرائط React Native Maps هي حزمة رائعة توفر مكونات خرائط لنظامي iOS و Android. وهي تدعم خرائط جوجل وخرائط MapKit.

ابدأ بتثبيته عبر npm:

$ npx expo install react-native-maps

بعد ذلك، استبدل محتويات App.js الخاصة بك لتضمين هكذا

// App.js

import React from "react";
import {StyleSheet, View} from "react-native";
import MapView from "react-native-maps";

const initialRegion = {
  latitude: 30.0000,
  longitude: -100.0000,
  latitudeDelta: 64,
  longitudeDelta: 64,
};

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    zIndex: 10,
    width: "100%",
    height: "100%",
  },
});

إذا فتحت التطبيق الآن، ستتمكن من رؤية الخريطة.

إحضار موقع المستخدم

لجلب مواقع المستخدمين، سنستخدم حزمة Expo-location.

ابدأ بتثبيته عبر npm:

$ npx expo install expo-location

قبل الوصول إلى موقع المستخدم، يجب أن نطلب إذنه. لفعل ذلك، يمكننا استخدام دالة إكسبو المدمجة المسماة requestForegroundPermissionsAsync() في دالة useEffect() هكذا:

// App.js

import React, {useEffect, useState} from "react";
import {StyleSheet, View} from "react-native";
import MapView, {Marker} from "react-native-maps";
import * as Location from "expo-location";

// ...

export default function App() {

  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let {status} = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        console.error("Permission to access location was denied.");
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        {location && (
          <Marker
            title="You are here"
            description={`
              ${location.coords.latitude.toFixed(4)},
              ${location.coords.longitude.toFixed(4)}
            `}
            coordinate={{
              latitude: location.coords.latitude,
              longitude: location.coords.longitude,
            }}
            pinColor="blue"
          />
        )}
      </MapView>
    </View>
  );
}

// ...

1. عند بدء تشغيل التطبيق، نطلب إذن المستخدم للوصول إلى موقعه الجغرافي الخشن. إذا تم منحه حق الوصول، نقوم بعد ذلك بتخزين الموقع في حالة الموقع باستخدام useState().
2. قمنا بتحديث بيان الإرجاع لعرض موقع المستخدم (إذا لم يكن الموقع فارغًا).

أعد تشغيل التطبيق، وستتمكن من رؤية علامة زرقاء تشير إلى موقعك الحالي.

تثبيت Parse

كما تعلم، يعتمد Back4app على منصة Parse. إذا أردنا التفاعل مع قاعدة بيانات Back4app أو Back4app بشكل عام، علينا تثبيت Parse SDK.

أولاً، قم بتثبيت Parse SDK:

$ npx expo install [email protected] @react-native-async-storage/async-storage

لقد استخدمت الإصدار 3.5.1 من Parse، لأن الإصدار الأحدث لا يعمل بشكل جيد مع Expo SDK 49.

بعد ذلك، قم بإنشاء مثيل Parse في App.js مباشرةً تحت الواردات:

// App.js

// ...

import Parse from "parse/react-native.js";
import AsyncStorage from "@react-native-async-storage/async-storage";

Parse.setAsyncStorage(AsyncStorage);
Parse.initialize(
  process.env.EXPO_PUBLIC_PARSE_APPLICATION_ID,
  process.env.EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY,
);
Parse.serverURL = "https://parseapi.back4app.com/";

// ...

سنستخدم المتغيرات البيئية بدلًا من الترميز الثابت لمعرف تطبيق Parse ومفتاح JavaScript. منذ SDK 49، يُحمّل إكسبو المتغيرات البيئية تلقائيًا من الملف .env.local.

انطلق وأنشئ ملف .env.local في جذر المشروع بالمحتويات التالية:

EXPO_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

تأكد من استبدال و بمعرفك الفعلي ومفتاحك. للحصول على بيانات الاعتماد الخاصة بك، انتقل إلى تطبيق Back4app الخاص بك واختر “إعدادات التطبيق > الأمان والمفاتيح” في الشريط الجانبي.

جلب الأماكن من قاعدة البيانات

لجلب الأماكن من قاعدة البيانات، سنستخدم مثيل Parse الذي أنشأناه في الخطوة السابقة.

نحتاج أولًا إلى إنشاء Parse.Query.Query جديد في فئة Place ثم تشغيل Find() لتنفيذ الاستعلام. بعد ذلك نحول النتائج إلى تنسيق العلامة الخاص بنا.

قم بتعديل App.js الخاص بك هكذا :

// App.js

// ...

export default function App() {

  // ...

  const [places, setPlaces] = useState([]);

  useEffect(() => {
    // ...

    // fetch `Place` objects from the database
    const placesQuery = new Parse.Query("Place");
    placesQuery.find().then((places) => {
      places = places.map((place) => {
        return {
          title: place.get("name"),
          description: place.get("description"),
          coordinate: {
            latitude: place.get("location").latitude,
            longitude: place.get("location").longitude,
          },
        };
      });
      setPlaces(places);
    });
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        // ...
        {places.map((place, index) => (
          <Marker
            key={index}
            title={place.title}
            description={place.description}
            coordinate={place.coordinate}
          />
        ))}
      </MapView>
    </View>
  );
}

// ...

1. لقد استخدمنا useState() لإنشاء حالة أخرى تحمل علامات للأماكن.
2. قمنا بترقية خطاف useEffect() للحصول على الأماكن من قاعدة البيانات عند بدء تشغيل التطبيق.
3. قمنا بتغيير وظيفة العرض لعرض علامات المكان على الخريطة.

افتح تطبيقك مرة أخرى، وستتمكن من رؤية جميع الأماكن.

الاستعلامات الجغرافية

في هذا القسم الأخير، سنلقي نظرة على كيفية إجراء الاستعلامات الجغرافية المكانية باستخدام Back4app.

يأتي Parse مع فئة تسمى GeoPoint. تمثّل فئة GeoPoint نقطة جغرافية نقطة عرض/خط طول وتسمح لنا بحساب المسافات بين نقطتين جغرافيتينوإجراء استعلامات قائمة على القرب.

سنستفيد من هذه الفئة لتنفيذ الوظيفتين التاليتين:

1. فرز الأماكن من موقع المستخدم حسب المسافة.
2. ابحث عن أماكن تقع على بُعد X كيلومتراً من موقع المستخدم.

تابع وأضف ما يلي إلى App.js الخاص بك :

// App.js

// ...

const maxDistance = 3000;

export default function App() {

  // ...

  const sortPlacesByProximity = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.near("location", locationGeoPoint);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  };

  const findPlacesWithinDistance = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.withinKilometers("location", locationGeoPoint, maxDistance);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  }

  const moveUserToRandomLocation = () => {
    setLocation({
      coords: {
        latitude: Math.random() * (-78.848974 - -103.520833) + 31.3845,
        longitude: Math.random() * (-78.848974 - -123.885444) + -123.885444,
      }
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button
          title="Sort places by proximity"
          color="#239658"
          onPress={sortPlacesByProximity}
        />
        <Button
          title={`Find places within ${maxDistance} km`}
          color="#239658"
          onPress={findPlacesWithinDistance}
        />
        <Button
          title="Move user to random location"
          color="#061124"
          onPress={moveUserToRandomLocation}
        />
      </View>
      // ...
    </View>
  );
}

const styles = StyleSheet.create({
  // ...
  buttonContainer: {
    zIndex: 25,
    width: "100%",
    position: "absolute",
    bottom: 0,
    marginVertical: 4,
    display: "flex",
    gap: 4,
  },
});

1. يقوم كلٌّ من sortPlacesByProximity() و findPlacesWithinDistance() أولًا بتحويل موقع المستخدم إلى نقطة جغرافية، وإنشاء Parse.Query، ثم تنفيذ دالة جغرافية محددة.
2. يُستخدم نقل المستخدم إلى موقع عش وائي() لنقل المستخدم إلى موقع عشوائي داخل الولايات المتحدة. تُستخدم هذه الطريقة بشكل أساسي لاختبار الطريقتين المذكورتين سابقًا.
3. أضفنا أيضًا ثلاثة أزرار لتشغيل الوظائف المقابلة.

لا تنسى الاستيراد في أعلى الملف:

import {Button, StyleSheet, View} from "react-native";

أعد تشغيل الخادم، ويجب أن ترى ما يلي:

اختبر الاستعلامات الجغرافية بالنقر على زر “فرز الأماكن حسب القرب”:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma
LOG  Florida
LOG  New York

افعل الشيء نفسه بالنسبة للوظيفة داخل المسافة:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma

وأخيراً، انقل المستخدم إلى موقع عشوائي واختبر الاستعلامات الجغرافية مرة أخرى.

الخاتمة

في هذه المقالة، نجحنا في بناء تطبيق لتحديد الموقع الجغرافي. يتيح التطبيق للمستخدمين عرض الخريطة، ورؤية مواقعهم، وجلب الأماكن من قاعدة البيانات، وإجراء الاستعلامات الجغرافية. الآن، يجب أن يكون لديك فهم جيد لكيفية عمل تطبيقات تحديد الموقع الجغرافي وكيفية إنشائها.

إليك بعض الأفكار التي يمكنك تنفيذها لاختبار فهمك:

• تتبع موقع المستخدم في الوقت الحقيقي (يجب أن تتحرك علامة المستخدم عندما يتحرك الجهاز)
• سجل مواقع المستخدمين (يجب أن يكون المستخدمون قادرين على عرض سجل مواقعهم)
• التنقل (مسار العرض من موقع المستخدم إلى موقع مخصص)

الكود المصدري متاح على مستودع GitHub Back4app-geolocation-app على تطبيق GitHub.