जियोलोकेशन ऐप कैसे बनाएं? स्टेप-बाय-स्टेप गाइड।

आज की दुनिया में, स्थान-आधारित एप्लिकेशन अधिक से अधिक लोकप्रिय हो रहे हैं। लगभग हर अन्य लोकप्रिय ऐप कुछ हद तक भू-स्थानिक सुविधाओं को शामिल करता है। कुछ इसका उपयोग उपयोगकर्ता अनुभव को बढ़ाने और अधिक व्यक्तिगत अनुभव प्रदान करने के लिए करते हैं, जबकि अन्य स्थान-आधारित सुविधाओं के इर्द-गिर्द बनाए गए हैं।

इस लेख में, हम आपको भू-स्थानिक ऐप्स के बारे में सब कुछ सिखाएंगे जो आपको जानने की जरूरत है। हम उनकी मुख्य विशेषताओं, भू-स्थानिक ऐप्स के प्रकारों के बारे में बात करेंगे और व्यापार के दृष्टिकोण से एक जियोएप बनाने की प्रक्रिया को समझाएंगे। इसके अलावा, हम आपको Back4app और React Native का उपयोग करके एक भू-स्थानिक ऐप विकसित करने की प्रक्रिया के माध्यम से मार्गदर्शन करेंगे।

भू-स्थानिक ऐप क्या है?

भू-स्थानिक या स्थान-आधारित ऐप कोई भी मोबाइल या वेब एप्लिकेशन होता है जो उपयोगकर्ता के डिवाइस के स्थान को ट्रैक करता है। ऐप्स ऐसा उपयोगकर्ता अनुभव को व्यक्तिगत बनाने और बढ़ाने, स्थान-निर्भर सेवाएं प्रदान करने, विपणन उद्देश्यों, सूचना उद्देश्यों आदि के लिए करते हैं।

भू-स्थानिक ऐप उपयोगकर्ता के स्थान को प्राप्त करने के लिए विभिन्न तकनीकों का उपयोग करते हैं, जिनमें निम्नलिखित शामिल हैं:

• वैश्विक पोजिशनिंग सिस्टम (GPS)
• सहायता प्राप्त वैश्विक पोजिशनिंग सिस्टम (A-GPS)
• आंतरिक भू-स्थानिक तकनीकें
• सेल टावर या वाई-फाई

उल्लिखित प्रत्येक तकनीक के अपने फायदे और नुकसान हैं। कुछ तेज हैं, जबकि अन्य अधिक सटीक और विश्वसनीय हैं। लेकिन इनकी ज्यादा चिंता न करें। स्थान आमतौर पर डिवाइस द्वारा ही प्राप्त किया जाता है।

स्थान-आधारित ऐप्स की मुख्य विशेषताएं

भू-स्थानिक ऐप्स में विशेषताओं में बहुत भिन्नता होती है, लेकिन उनमें से अधिकांश में ये भू-स्थानिक सुविधाएं शामिल होती हैं:

• मानचित्र दृश्य: मानचित्र दृश्य भू-स्थानिक ऐप्स की एक मुख्य विशेषता है। यह उपयोगकर्ताओं को उनके वर्तमान स्थान और रुचि के बिंदुओं का दृश्यात्मक प्रतिनिधित्व प्रदान करता है। यह उपयोगकर्ताओं को क्षेत्रों का अन्वेषण करने, दिशा-निर्देश खोजने, और भू-स्थानिक प्रश्न करने की अनुमति देता है।
• स्थान ट्रैकिंग: भू-स्थानिक ऐप्स अक्सर रीयल-टाइम स्थान ट्रैकिंग प्रदान करते हैं, जिससे उपयोगकर्ता अपने स्थान को दूसरों के साथ साझा कर सकते हैं या अपनी गतियों को ट्रैक कर सकते हैं।
• व्यक्तिकरण: भू-स्थानिक ऐप्स व्यक्तिकरण सुविधाएं प्रदान कर सकते हैं, जैसे पसंदीदा स्थानों को सहेजना, मार्ग प्रकार (जैसे, चलना, ड्राइविंग) के लिए प्राथमिकताएँ सेट करना, दृश्य सेटिंग्स, आदि।
• सूचनाएं: कुछ भू-स्थानिक ऐप्स जियोफेंसिंग का उपयोग करते हैं ताकि जब उपयोगकर्ता किसी क्षेत्र में प्रवेश करें या बाहर निकलें तो सूचनाएं भेजी जा सकें। इसके अलावा, वे उपयोगकर्ता के किसी कार्यक्रम के पास होने पर भी सूचनाएं भेज सकते हैं, आदि।
• अन्य सेवाओं के साथ एकीकरण: कई भू-स्थानिक ऐप्स कार्यक्षमता बढ़ाने के लिए तृतीय-पक्ष सेवाओं या प्लेटफार्मों के साथ एकीकृत होते हैं। उदाहरण के लिए, Google Booking.com के साथ एकीकृत होता है ताकि होटल विकल्प प्रदान किए जा सकें और पब्लिक ट्रांसपोर्ट जानकारी प्राप्त करने के लिए ट्रांज़िट प्लेटफार्मों का उपयोग किया जा सके।

स्थान-आधारित ऐप्स के प्रकार

स्थान-आधारित एप्लिकेशनों के कई प्रकार हैं, लेकिन चलिए कुछ मुख्य प्रकारों पर नजर डालते हैं।

नेविगेशन ऐप्स

नेविगेशन ऐप्स भू-स्थानिक ऐप्स का सबसे स्पष्ट उदाहरण हैं। ये आमतौर पर एक मानचित्र दृश्य के इर्द-गिर्द केंद्रित होते हैं और स्थान ट्रैकिंग, निकटतम व्यवसायों को खोजने, भू-स्थानिक प्रश्न करने, और ड्राइविंग दिशा-निर्देश प्रदान करने जैसी सुविधाएं प्रदान करते हैं।

उदाहरण: Google Maps, Waze, Sygic GPS.

ऑन-डिमांड ऐप्स

ऑन-डिमांड ऐप्स भू-स्थानिक ऐप्स का एक और लोकप्रिय उदाहरण हैं। ये ऐप्स आपको राइड लेने, खाना ऑर्डर करने, किराने की दुकानें खरीदने, और भी बहुत कुछ करने की अनुमति देते हैं। ऑन-डिमांड सेवाएं उपयोगकर्ता के स्थान का उपयोग कर निकटतम राइड्स, स्टोर्स, और रेस्तरां प्रदर्शित करती हैं। इसके अलावा, वे ऑर्डर की रीयल-टाइम ट्रैकिंग भी प्रदान करती हैं।

उदाहरण: Uber, Uber Eats, Lyft.

सोशल नेटवर्क्स और डेटिंग ऐप्स

सोशल मीडिया ऐप्स आमतौर पर अपने भू-स्थानिक उपयोग के बारे में कम पारदर्शी होते हैं। अधिकांश सोशल मीडिया ऐप्स उपयोगकर्ता के स्थान का उपयोग व्यक्तिगत अनुभव प्रदान करने, लोगों को जोड़ने, छवियों और फोटो को टैग करने, और क्षेत्रीय रूप से लोकप्रिय सामग्री प्रदर्शित करने के लिए करते हैं।

उदाहरण: Facebook, Instagram, Tinder.

पर्यटन ऐप्स

पर्यटन ऐप्स उपयोगकर्ता के स्थान का उपयोग निकटतम होटलों, कार्यक्रमों, अनुभवों, और अधिक की सिफारिश करने के लिए करते हैं।

उदाहरण: Airbnb, Booking, Eventbrite.

फिटनेस ऐप्स

अधिकांश फिटनेस ऐप्स, विशेष रूप से दौड़ने वाले ऐप्स, में अंतर्निर्मित स्थान ट्रैकिंग होती है। स्थान ट्रैकिंग उन्हें उपयोगकर्ता के मार्गों को ट्रैक करने, मार्ग की दूरी, औसत दौड़ने की गति, ऊंचाई में अंतर, और अधिक की गणना करने की अनुमति देती है।

उदाहरण: Strava, GoogleFit, RunKeeper.

भू-स्थानिक ऐप बनाने की प्रक्रिया

एक स्थान-आधारित मोबाइल ऐप बनाना एक चुनौतीपूर्ण कार्य हो सकता है। लेकिन चिंता न करें! निम्नलिखित चरणों के साथ, आप एक उत्कृष्ट भू-स्थानिक ऐप बनाने के रास्ते पर अच्छी तरह से अग्रसर होंगे।

चरण 1: भू-स्थानिक ऐप का उद्देश्य परिभाषित करें

भू-स्थानिक ऐप बनाने का पहला चरण इसका उद्देश्य और मुख्य विशेषताएं परिभाषित करना है। खुद से पूछें कि आपका ऐप कौन सी समस्या हल करेगा और इसका लक्ष्य दर्शक कौन है।

एक बार जब आप यह जान लेते हैं, तो बाजार का अनुसंधान करने का समय है। अपने प्रतिस्पर्धियों को खोजें और सोचें कि आपका ऐप सभी मौजूदा ऐप्स से बेहतर क्या बनाता है।

चरण 2: तकनीकों का चयन करें

एक अच्छा भू-स्थानिक ऐप विकसित करने का महत्वपूर्ण हिस्सा सही तकनीकी स्टैक चुनना है। आपका ऐप संभवतः बैकएंड और फ्रंटएंड में विभाजित होगा।

बैकएंड उपकरण चुनते समय, सोचें कि आप किस प्रकार के डेटा को संग्रहीत करेंगे, डेटा कहाँ संग्रहीत किया जाएगा, आदि। इसके विपरीत, फ्रंटएंड तकनीकों का चयन करते समय, उन तकनीकों का चयन करें जो आपको एक प्रतिक्रियाशील ऐप को एक सुरुचिपूर्ण डिज़ाइन के साथ बनाने की अनुमति दें।

इसके अलावा, आपको एक भू-स्थानिक API की आवश्यकता होगी। भू-स्थानिक API चुनते समय, विभिन्न विकल्पों पर विचार करें जैसे Google Maps, OpenStreetMap, और MapBox। सुनिश्चित करें कि आप अपने ऐप के प्रकार के लिए सबसे उपयुक्त भू-स्थानिक API चुनें।

चरण 3: ऐप डिज़ाइन करें

यह चरण उपयोगकर्ता के दृष्टिकोण से सबसे महत्वपूर्ण है। जब आप अपना ऐप डिज़ाइन कर रहे हों, तो सुनिश्चित करें कि यह आकर्षक, उपयोग में आसान, और पर्याप्त मात्रा में सुविधाएं रखता है। अच्छे UI/UX अभ्यासों का पालन करें और विचार करें कि अंतिम उपयोगकर्ता आपका स्थान-आधारित एप्लिकेशन कैसे उपयोग करेगा।

चरण 4: एक MVP बनाएं

पूरी तरह विकसित एप्लिकेशन बनाने से पहले, एक न्यूनतम व्यवहार्य उत्पाद (MVP) बनाना एक अच्छा विचार है। MVP में पर्याप्त सुविधाएं होनी चाहिए ताकि प्रारंभिक उपयोगकर्ता इसे उपयोग कर सकें, जो फिर प्रतिक्रिया प्रदान करेंगे। प्रतिक्रिया आपको अपने विचार को सत्यापित करने और अपने उत्पाद में सुधार करने की अनुमति देगी।

चरण 5: पूर्ण संस्करण और रिलीज

आपको जो अंतिम चरण उठाना है वह एक पूर्ण-संस्करण ऐप बनाना है। अपने प्रोजेक्ट के बैकलॉग की जांच करें और सभी अन्य महत्वपूर्ण सुविधाओं को लागू करें। सभी बग्स को ठीक करें और अपना भू-आधारित ऐप रिलीज करें।

रिलीज के बाद, आपको, निश्चित रूप से, अपने एप्लिकेशन का रखरखाव करना होगा। भू-स्थानिक API समय के साथ बदल सकता है। आपको नए ऑपरेटिंग सिस्टम के लिए समर्थन जोड़ना होगा, बग्स ठीक करने होंगे, नई सुविधाएं जोड़नी होंगी, आदि।

भू-स्थानिक ऐप कैसे विकसित करें?

इस लेख अनुभाग में, हम यह देखेंगे कि कैसे Back4app और React Native के साथ Expo का उपयोग करके एक भू-स्थानिक ऐप बनाया जाता है।

पूर्वापेक्षाएँ

• JavaScript के साथ अनुभव, विशेष रूप से ES6।
• React Native (और Expo) की बुनियादी समझ।
• अपने स्थानीय मशीन पर JavaScript IDE इंस्टॉल किया हुआ।
• Android एमुलेटर या एक भौतिक Android डिवाइस।

Back4app क्या है?

Back4app एक उत्कृष्ट उपकरण है जो उन्नत कोडिंग कौशल की आवश्यकता के बिना आधुनिक एप्लिकेशनों को तेजी से बनाने के लिए है। इस प्लेटफ़ॉर्म में कई उपयोगी सुविधाएं हैं, जैसे उपयोगकर्ता प्रबंधन, प्रमाणीकरण, रीयल-टाइम डेटाबेस, क्लाउड कोड फंक्शंस, सोशल एकीकरण, APIs, और भी बहुत कुछ।

Back4app के साथ, आप अपने ऐप के महत्वपूर्ण हिस्सों, जैसे मुख्य कार्यक्षमता और डिज़ाइन पर ध्यान केंद्रित कर सकते हैं, बिना बैकएंड या जटिल संरचना की चिंता किए।

सबसे अच्छी बात यह है कि Back4app परीक्षण और चीजें आजमाने के लिए एक मुफ्त योजना प्रदान करता है। जैसे-जैसे आपका ऐप बढ़ता है, आप फिर बिना किसी परेशानी के पारदर्शी और पूर्वानुमेय मूल्य निर्धारण के साथ प्रीमियम योजनाओं में अपग्रेड कर सकते हैं।

परियोजना अवलोकन

Back4app की शक्ति को प्रदर्शित करने के लिए, हम एक सरल भू-स्थानिक ऐप बनाएंगे। यह ऐप उपयोगकर्ताओं को मानचित्र देखने, डेटाबेस में संग्रहीत स्थानों को देखने, और भू-स्थानिक प्रश्न करने की अनुमति देगा। भू-स्थानिक प्रश्नों में स्थानों को दूरी के आधार पर क्रमबद्ध करना, दूरी के भीतर स्थानों को ढूंढना, आदि शामिल होंगे। हमारे ऐप का बैकएंड Back4app द्वारा संभाला जाएगा, और हम फ्रंटएंड पर React Native और Google Maps का उपयोग करेंगे।

Back4app ऐप बनाएं

निम्नलिखित चरणों के लिए आपके पास Back4app खाता होना आवश्यक होगा। यदि आपके पास अभी तक नहीं है, तो आगे बढ़ें और मुफ्त में साइन अप करें!

जैसे ही आप लॉग इन करेंगे, आपको आपके ऐप सूची पर पुनःनिर्देशित किया जाएगा। एक नया ऐप बनाने के लिए, “Build new app” पर क्लिक करें।

Back4app हमें दो प्रकार के ऐप्स को डिप्लॉय करने की अनुमति देता है:

1. Backend as a Service (BaaS) — एक पूर्ण विकसित बैकएंड समाधान, या
2. Containers as a Service (CaaS) — कंटेनरीकृत सॉफ़्टवेयर को डिप्लॉय करने के लिए एक प्लेटफ़ॉर्म।

चूंकि हम एक भू-स्थानिक ऐप बना रहे हैं, इसलिए हम “Backend as a Service” के साथ जाएंगे।

अगला, अपने ऐप को एक अच्छा नाम दें, “NoSQL” को डेटाबेस के रूप में चुनें, और “Create” पर क्लिक करें।

Back4app को आपके एप्लिकेशन के लिए आवश्यक सभी चीजों को तैयार करने में थोड़ा समय लगेगा। एक बार आपका एप्लिकेशन तैयार हो जाने पर, आपको आपके ऐप के डेटाबेस दृश्य पर पुनःनिर्देशित किया जाएगा।

डेटाबेस क्लासेस बनाएं

आगे बढ़ते हुए, हमें डेटाबेस का ध्यान रखना होगा।

परियोजना परिचय में उल्लेख किया गया है, हम डेटाबेस में स्थानों को संग्रहीत करना चाहते हैं और उन्हें मानचित्र पर प्रदर्शित करना चाहते हैं। हमें इन स्थानों को रखने के लिए एक नया डेटाबेस क्लास बनाना होगा।

आगे बढ़ें और “Create a class” बटन पर क्लिक करके एक नया क्लास बनाएं। इसका नाम Place रखें, “Public Read and Write” सक्षम करें, और “Create class & add columns” पर क्लिक करें।

अगला, निम्नलिखित तीन कॉलम जोड़ें:

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

एक बार क्लास बना लेने के बाद, डेटाबेस में कुछ नमूना स्थान जोड़ें। उदाहरण:

वैकल्पिक रूप से, आप इस US states database export को आयात कर सकते हैं। इसे आयात करने के लिए, स्क्रीन के शीर्ष दाहिने कोने में तीन डॉट्स बटन का उपयोग करें, “Import > Class Data” चुनें, और फिर फाइल चुनें।

बहुत बढ़िया, हमने सफलतापूर्वक एक डेटाबेस क्लास बनाया है और इसे populated किया है। हमारे प्रोजेक्ट का बैकएंड हिस्सा अब पूरा हो गया है। यह आसान था!

फ्रंटएंड कोड करें

इस अनुभाग में, हम अपने भू-स्थानिक ऐप के फ्रंटएंड हिस्से का ध्यान रखेंगे।

प्रोजेक्ट प्रारंभ करें

निम्नलिखित चरणों के लिए आपके पास Node इंस्टॉल होना आवश्यक होगा। यदि आपके पास यह नहीं है तो इसे डाउनलोड करें।

एक Expo प्रोजेक्ट बनाकर शुरू करें:

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

हमने blank@sdk-49 टेम्पलेट का उपयोग किया क्योंकि हम Expo SDK के नवीनतम संस्करण का उपयोग करना चाहते हैं।

Expo आपके प्रोजेक्ट के लिए आवश्यक सभी चीजों को तैयार करने में लगभग एक मिनट लगेगा। एक बार आपका प्रोजेक्ट तैयार हो जाने पर, अपनी वर्तमान डायरेक्टरी को इसमें बदलें। फिर Expo डेवलपमेंट सर्वर शुरू करें:

$ cd back4app-geolocation-app
$ expo start

एमुलेटर या जुड़े हुए Android डिवाइस में ऐप खोलने के लिए अपने कीबोर्ड पर A दबाएं।

React Native मैप्स

मानचित्र प्रदर्शित करने के लिए, हम react-native-maps का उपयोग करेंगे। React Native Maps एक उत्कृष्ट पैकेज है जो iOS और Android के लिए मानचित्र घटक प्रदान करता है। यह Google Maps और MapKit का समर्थन करता है।

npm के माध्यम से इसे इंस्टॉल करके शुरू करें:

$ npx expo install react-native-maps

अगला, अपने App.js की सामग्री को इस प्रकार <MapView> शामिल करने के लिए बदलें:

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

उपयोगकर्ता के स्थान तक पहुंचने से पहले, हमें उनकी अनुमति मांगनी होगी। ऐसा करने के लिए, हम एक अंतर्निर्मित Expo फ़ंक्शन का उपयोग कर सकते हैं जिसे 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() का उपयोग करके लोकेशन को location स्टेट में संग्रहीत करते हैं।
2. हमने रिटर्न स्टेटमेंट को अपडेट किया है ताकि उपयोगकर्ता का स्थान प्रदर्शित किया जा सके (यदि location null नहीं है)।

ऐप को पुनः चलाएं, और आपको अपने वर्तमान स्थान को दर्शाने वाला एक नीला मार्कर दिखना चाहिए।

Parse इंस्टॉल करें

जैसा कि आप जानते होंगे, Back4app Parse platform पर आधारित है। यदि हम Back4app डेटाबेस या सामान्यतः Back4app के साथ इंटरैक्ट करना चाहते हैं, तो हमें Parse SDK इंस्टॉल करना होगा।

पहले, Parse SDK इंस्टॉल करें:

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

मैंने Parse संस्करण 3.5.1 का उपयोग किया, क्योंकि नया संस्करण Expo SDK 49 के साथ अच्छी तरह काम नहीं करता।

अगला, App.js में आयातों के ठीक नीचे एक Parse इंस्टेंस बनाएं:

// 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 एप्लिकेशन ID और JavaScript key को हार्ड कोड करने के बजाय पर्यावरणीय वेरिएबल्स का उपयोग करेंगे। SDK 49 से, Expo स्वचालित रूप से .env.local फाइल से पर्यावरणीय वेरिएबल्स लोड करता है।

आगे बढ़ें और प्रोजेक्ट रूट में .env.local फाइल निम्नलिखित सामग्री के साथ बनाएं:

EXPO_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

सुनिश्चित करें कि आप <parse_app_id> और <parse_javascript_key> को अपने वास्तविक ID और key के साथ बदलें। अपने क्रेडेंशियल्स प्राप्त करने के लिए, अपने Back4app ऐप पर जाएं और साइडबार में “App Settings > Security & Keys” चुनें।

डेटाबेस से स्थान प्राप्त करें

डेटाबेस से स्थान प्राप्त करने के लिए, हम उस Parse इंस्टेंस का उपयोग करेंगे जिसे हमने पहले चरण में बनाया था।

हमें पहले Place क्लास पर एक नया Parse.Query बनाना होगा और फिर क्वेरी को निष्पादित करने के लिए 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. हमने रेंडर फंक्शन को बदलकर मानचित्र पर Place मार्करों को प्रदर्शित किया।

फाइल के शीर्ष पर आयात को न भूलें:

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

सर्वर को पुनः चलाएं, और आपको निम्नलिखित दिखाई देना चाहिए:

“Sort places by proximity” बटन पर क्लिक करके geo queries का परीक्षण करें:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma
LOG  Florida
LOG  New York

within-distance कार्यक्षमता के लिए भी ऐसा ही करें:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma

अंत में, उपयोगकर्ता को एक यादृच्छिक स्थान पर ले जाएं और geo queries का पुनः परीक्षण करें।

निष्कर्ष

इस लेख में, हमने सफलतापूर्वक एक भू-स्थानिक ऐप बनाया है। यह ऐप उपयोगकर्ताओं को मानचित्र देखने, अपने स्थान को देखने, डेटाबेस से स्थान प्राप्त करने, और geo queries करने की अनुमति देता है। अब तक, आपको यह समझने में अच्छी समझ होनी चाहिए कि भू-स्थानिक ऐप्स कैसे काम करते हैं और उन्हें कैसे बनाया जाता है।

यहाँ कुछ विचार दिए गए हैं जिन्हें आप अपनी समझ का परीक्षण करने के लिए लागू कर सकते हैं:

• रीयल-टाइम उपयोगकर्ता स्थान ट्रैकिंग (जब डिवाइस हिलती है तो उपयोगकर्ता मार्कर को हिलना चाहिए)
• उपयोगकर्ता स्थान इतिहास (उपयोगकर्ता अपनी स्थान इतिहास देख सकें)
• नेविगेशन (उपयोगकर्ता स्थान से एक कस्टम स्थान तक का पथ प्रदर्शित करें)

स्रोत कोड back4app-geolocation-app GitHub रिपोजिटरी पर उपलब्ध है।