Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. NativeScript
Code

एक वास्तविक समय नेटिवस्क्रिप्ट एप कोड: जियोलोकेशन और गूगल मानचित्र नेटिवस्क्रिप्ट के लिए एक परिचय अपना पहला नेटिवस्क्रिप्ट ऐप बनाएं टाइपस्क्रिप्ट और नेटिवस्क्रिप्ट के साथ एक मौसम एप्लिकेशन बनाएं

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: SQLite

Hindi (हिंदी) translation by Shubham Sharma (you can also view the original English article)

नेटिवस्क्रिप्ट, एक्सएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करते हुए क्रॉस-प्लेटफॉर्म नेटिव मोबाइल ऐप के निर्माण के लिए एक रूपरेखा है।इस श्रृंखला में, हम कुछ मूल चीजों को आप नेटिवस्क्रिप्ट एप के साथ कर सकते हैं: जियोलोकेशन और गूगल मानचित्र एकीकरण, एसक्यूलाइट(SQLite) डेटाबेस, फायरबेज एकीकरण, और सूचनाओं को पुश करने के लिए। वैसे भी, हम वास्तविक समय क्षमताओं के साथ एक फिटनेस ऐप बनाएंगे जो इन सुविधाओं में से प्रत्येक का उपयोग करेंगे।

इस ट्यूटोरियल में, आप सीखेंगे कि नेटिवस्क्रिप्ट ऐप्स में भौगोलिक स्थान और गूगल मानचित्र के साथ कैसे काम किया जाए।

मैं मान रहा हूँ कि आप पहले से ही जानते हैं कि नेटिवस्क्रिप्ट में एप्लिकेशन कैसे बनाते है।यदि आप नेटिवस्क्रिप्ट में नए हैं, तो मैं सुझाव देता हूं कि आप इस ट्यूटोरियल का अनुसरण करने से पहले पहले मूल पाठ में पहले ट्यूटोरियल देखें।

आप क्या बनाऐंगे

आप भौगोलिक स्थान और गूगल मानचित्र का उपयोग कर एक पैदल ट्रैकर का निर्माण करेंगे। यह उपयोगकर्ता को दिखाएगा कि वे कितने दूरी पर हैं और उस दूरी को कवर करने के लिए उन्होंने कितने कदम उठाए हैं।वहाँ भी एक नक्शा होगा जो उपयोगकर्ता का वर्तमान स्थान दिखाएगा।

आपको एक विचार देने के लिए, अंतिम परिणाम क्या होगा जैसे:

app final

परियोजना की स्थापना

एक नया नेटिवस्क्रिप्ट ऐप बनाकर प्रारंभ करें:

ऐप के यूआई को सेट अप करने के लिए आसान बनाने के लिए, मैंने एक गीथहब रेपो बनाया है जिसमें परियोजना के स्टार्टर और अंतिम संस्करण दोनों शामिल हैं। आप आगे जाकर ऐप फ़ोल्डर की तत्व को अपने प्रोजेक्ट के ऐप फ़ोल्डर में कॉपी कर सकते हैं। हम केवल दो फाइलों के साथ काम करेंगे: main-page.xml और main-page.js फ़ाइल शेष नेटिवस्क्रिप्ट डेमो प्रोजेक्ट से बॉयलरप्लेट है।

ऐप चलाना

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

यदि आप निष्पादित करते हैं tns run android को, यह स्वचालित रूप से एंड्रॉइड एमुलेटर को कॉल करेगा, अगर यह पहले से इंस्टॉल हो चुका है। यदि यह अभी तक इंस्टॉल नहीं हुआ है, तो आप एंड्रॉइड स्टूडियो लॉन्च करके, कॉन्फ़िगर क्लिक करके और एसडीके मैनेजर को चुनकर इसे स्थापित कर सकते हैं। यह डिफ़ॉल्ट रूप से एसडीके प्लेटफॉर्म खोल देगा। एसडीके टूल टैब पर क्लिक करें और एंड्रॉइड इम्यूलेटर का चयन सुनिश्चित करें और इसे इंस्टॉल करने के लिए लागू करें पर क्लिक करें।

जीपीएस एम्यूलेटर का उपयोग करने के लिए, इसे गीटहब(GitHub) से डाउनलोड करें और निष्पादन योग्य वार फ़ाइल चलाएं:

ऐसा करने के बाद, आपको एक्सेस करने में सक्षम होना चाहिए http://localhost:8080/gpsemulator/ अपने ब्राउज़र से और localhost से कनेक्ट करें। सुनिश्चित करें कि एंड्रॉइड एमुलेटर पहले से ही चल रहा है जब आप ऐसा करते हैं। आपके द्वारा कनेक्ट होने के बाद, बस मानचित्र में ज़ूम करें और उस स्थान पर क्लिक करें जहां आप स्थान के रूप में उपयोग करना चाहते हैं। ऐप इसका पता लगाएगा और इसका वर्तमान स्थान के रूप में उपयोग करेगा ।

GPS Emulator

जियोलोकेशन के साथ काम करना

नेटिवस्क्रिप्ट में भौगोलिक स्थान जावास्क्रिप्ट में जियोलोकेशन एपीआई के समान है।कार्यक्षमता में एकमात्र अंतर एक के अलावा है distance()  फ़ंक्शन जिसका उपयोग दो स्थानों के बीच की दूरी की गणना के लिए किया जाता है।

जियोलोकेशन प्लगइन को स्थापित करना

जियोलोकेशन के साथ काम करने के लिए, आपको सबसे पहले जियोलोकेशन प्लगइन इंस्टॉल करना होगा:

ऐसा करने के बाद, अब आप इसे अपनी स्क्रिप्ट फ़ाइलों से जोड़ सकते हैं:

उपयोगकर्ता का वर्तमान स्थान प्राप्त करना

नेटिवस्क्रिप्ट जियोलोकेशन प्लगइन में तीन फ़ंक्शन शामिल हैं, जो कि आप उपयोगकर्ता के वर्तमान स्थान के साथ काम करने के लिए उपयोग कर सकते हैं। हम इस एप्लिकेशन में इनमें से प्रत्येक का उपयोग करेंगे:

  • getCurrentLocation
  • watchLocation
  • distance

main-view-model.js फ़ाइल खोलें और createViewModel() फ़ंक्शन के अंदर निम्न कोड जोड़ें। यहाँ हम वेरिएबल इनिशियलाइज़ कर रहे हैं जो हम उपयोगकर्ता के स्थान का ट्रैक रखने के लिए आवश्यक विभिन्न मूल्यों को संचय करने के लिए बाद में उपयोग करेंगे।

मैंने कोड में कुछ टिप्पणियां जोड़ दी हैं ताकि आपको पता चल जाये कि क्या हो रहा है। कोड की कुछ पंक्तियां भी हैं जो टिप्पणी की जाती हैं; ये गूगल मानचित्र एकीकरण के लिए हैं। मैंने उन्हें अब तक टिप्पणी की है ताकि चीजों को सरल बनाए रख सकें। एक बार जब हम गूगल मानचित्र एकीकरण पर पहुंच जाते हैं, तो आपको उन टिप्पणियों को निकालना होगा।

इसके बाद, उपयोगकर्ता के वर्तमान स्थान को प्राप्त करने के लिए कोड जोड़ें। यह कोड तब निष्पादित होता है जब उपयोगकर्ता को स्थान ट्रैकिंग शुरू करने और रोकने के लिए बटन पर नल होता है। geolocation.getCurrentLocation() वर्तमान स्थान प्राप्त करने के लिए उपयोग किया जाता है।

यहां हमने तीन विकल्प निर्दिष्ट किए हैं: desiredAccuracyupdateDistance, और timeout। desiredAccuracy आपको मीटर में सटीकता को निर्दिष्ट करने की अनुमति देता है। इसके दो संभावित मूल्य हैं: Accuracy.high, जो लगभग 3 मीटर और Accuracy.any, जो लगभग 300 मीटर है। updateDistance निर्दिष्ट करता है कि इससे कितने अंतर (मीटर में) पिछले स्थान और मौजूदा स्थान के बीच होना चाहिए, इससे पहले कि यह अपडेट हो जाएगा। अंत में, timeout निर्दिष्ट करता है कि किसी स्थान के लिए कितने मिलीसेकंड का इंतजार है।

एक स्थान प्राप्त होने के बाद, हम इसे start_location के रूप में सेट करते हैं और इसे locations की सरणी पर धक्का देते हैं। बाद में, इस स्थान का उपयोग पहले स्थान के साथ किया जाएगा, जो कि यात्रा की दूरी निर्धारित करने के लिए उपयोगकर्ता के वर्तमान स्थान को देखने से प्राप्त किया जाएगा।

उपयोगकर्ता के वर्तमान स्थान के लिए देखना

वर्तमान स्थान प्राप्त करने के लिए, हम उपयोग करते हैं geolocation.watchLocation() फंगक्शन। यह फ़ंक्शन जावास्क्रिप्ट में setInterval() फ़ंक्शन के समान है, क्योंकि यह कॉलबैक फ़ंक्शन को बार-बार कार्यान्वित करता है जब तक कि आप इसे geolocation.clearWatch() के साथ बंद नहीं करते। कॉलबैक फ़ंक्शन को अपडेट के आधार पर स्वचालित रूप से बुलाया जाता है updateDistance और minimumUpdateTime ।

नीचे दिए गए कोड में, स्थान को अपडेट किया जाएगा, यदि वह पिछले स्थान से प्राप्त किया गया था जो कम से कम 5 मीटर की दूरी पर था। लेकिन यह अपडेट केवल हर 5 सेकंड में होगा। इसका मतलब यह है कि यदि उपयोगकर्ता 5 सेकंड के भीतर 5 मीटर या अधिक नहीं चला है, तो स्थान अपडेट नहीं होगा।

एक बार जब उपयोगकर्ता इंगित करता है कि वे ट्रैकिंग रोकना चाहते हैं, तो आपको कॉल करना होगा geolocation.clearWatch() फंगक्शन। आपको शेष मूल्यों को भी रीसेट करना होगा जो स्थान बदलते समय हर बार अद्यतित किए जा रहे हैं।

दो स्थान के बीच दूरी प्राप्त करना

अब हम दूरी पाने के लिए तैयार हैं।यह कॉल करके किया जा सकता है geolocation.distance() फंगक्शन। यह फ़ंक्शन दो location ऑब्जेक्ट्स को इसके तर्कों के रूप में स्वीकार करता है, इसलिए हम पिछले दो स्थानों का उपयोग करेंगे जो कि मौजूदा एक से पहले रिकॉर्ड किए गए स्थान से उपयोगकर्ता द्वारा की गई दूरी (मीटर में) निर्धारित करने के लिए locations सारणी(अरै) में धकेल रहे थे। वहां से, हम लगभग अनुमानित रूपांतरण का उपयोग चरणबद्ध चरणों की संख्या तक कर सकते हैं-मैं अनुमान लगाता हूं क्योंकि सभी लोग एक ही दूरी में समान दूरी की यात्रा नहीं करेंगे।

इसके बाद, हम परिणामस्वरूप जोड़ सकते हैं distance और steps से total_distance और total_steps तक, इसलिए हम कुल दूरी का ट्रैक रख सकते हैं और उन्होंने जो कदम उठाए हैं उसके बाद से उन्होंने अपना स्थान ट्रैक करना शुरू कर दिया है।

इस बिंदु पर, अब आप जीपीएस एम्यूलेटर का उपयोग कर ऐप का परीक्षण शुरू कर सकते हैं जो मैंने पहले उल्लेख किया था। ध्यान दें कि आपको एप पुनः लोड को चालू करने के लिए main-view-model.js फ़ाइल को बचाने के लिए हिट करना होगा।

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

वैकल्पिक रूप से, आप एक वास्तविक डिवाइस पर इंटरनेट और जीपीएस सक्षम सक्षम हो सकते हैं। इस बिंदु पर केवल जीपीएस की आवश्यकता है, लेकिन एक बार जब हम गूगल मैप्स जोड़ते हैं, तो ऐप को एक इंटरनेट कनेक्शन की आवश्यकता होगी।

गूगल मानचित्र के साथ काम करना

अब हम मैप उस मानचित्र को जोड़ने के लिए गूगल मानचित्र का उपयोग करेंगे जो उपयोगकर्ता के वर्तमान स्थान को दर्शाता है।

गूगल मानचित्र प्लग इन इंस्टॉल करना

एक बार इंस्टॉल होने पर, आपको एंड्रॉइड के लिए टेम्पलेट स्ट्रिंग संसाधन फ़ाइलों की प्रतिलिपि बनाने की आवश्यकता है:

अगला, खोलें app/App_Resources/Android/values/nativescript_google_maps_api.xml फ़ाइल और अपना स्वयं का गूगल मानचित्र एपीआई कुंजी (सर्वर कुंजी) जोड़ें:

सुनिश्चित करें कि आपने गूगल कंसोल से गूगल मानचित्र एंड्रॉइड एपीआई को प्रयोग करने से पहले सक्षम किया है।

मानचित्र को जोड़ना

नक्शे के लिए, main-page.xml फ़ाइल खोलें और आपको निम्न को देखना चाहिए:

यहां हमने नक्शा तैयार होने के बाद एक बार निष्पादित करने के लिए तीन विकल्प (longitudelatitude और zoom) निर्दिष्ट किए हैं। longitude और latitude उस स्थान को निर्दिष्ट करते हैं, जिसे आप मानचित्र में प्रस्तुत करना चाहते हैं। Zoom नक्शा के ज़ूम स्तर को निर्दिष्ट करता है। MapReady है, जहां हम मानचित्र पर मार्कर को जोड़ने के लिए फ़ंक्शन निर्दिष्ट करते हैं। यह मार्कर उपयोगकर्ता के वर्तमान स्थान का प्रतिनिधित्व करता है, इसलिए इसे मानचित्र के केंद्र में प्रस्तुत किया जाएगा।

डिफ़ॉल्ट रूप से, यह काम नहीं करेगा क्योंकि आपने नक्शे के लिए स्कीमा परिभाषा को अभी तक नहीं जोड़ा है। तो अपने Page तत्व में, maps तत्व के लिए परिभाषा जोड़ें:

एक बार ऐसा करने के बाद, ट्रैकिंग स्थान के लिए बटन के ठीक नीचे एक गूगल मैप उदाहरण प्रदान किया जाना चाहिए। latitude और longitude के अभी तक निर्दिष्ट नहीं किए जाने के बाद से इसमें कोई भी मानचित्र नहीं होगा। ऐसा करने के लिए, main-view-model.js फ़ाइल पर वापस जाएं और गूगल मानचित्र के साथ काम करने के लिए कोड की लाइनों के लिए टिप्पणियां निकालें:

मार्कर जोड़ना

चूंकि हमने मार्कर के लिए पहले से ही डिफॉल्ट निर्देशांक घोषित कर दिए हैं, इसलिए नक्शा तैयार होने पर हम वास्तव में मार्कर की साजिश कर सकते हैं:

इसके बाद, उपयोगकर्ता अपने स्थान को ट्रैक करना शुरू करने के बाद हमें मार्कर की स्थिति को अपडेट करना होगा। आप getCurrentLocation() फ़ंक्शन के लिए सफलता कॉलबैक फ़ंक्शन के अंदर ऐसा कर सकते हैं:

जब उपयोगकर्ता का स्थान अपडेट होता है तो हमें इसे अपडेट भी करना पड़ता है(watchLocation के लिए सफलता कॉलबैक फ़ंक्शन के अंदर):

एक बार ऐसा करने के बाद, एक नक्शा जो डिफ़ॉल्ट स्थान को प्रस्तुत करता है वह एप में दिखाना चाहिए।

निष्कर्ष

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

यह तो सिर्फ शुरुआत है! इस श्रृंखला के अगले पदों में, हम एक स्थानीय डेटाबेस, पुश नोटिफिकेशन और अन्य अद्भुत सुविधाओं को हमारे ऐप में जोड़ देंगे।

इस बीच, नेटिवस्क्रिप्ट और क्रॉस-प्लेटफॉर्म मोबाइल कोडिंग पर हमारे कुछ अन्य पोस्ट देखें।

नेटिवस्क्रिप्ट के लिए एक व्यापक परिचय के लिए, हमारे वीडियो पाठ्यक्रम को नेटिवस्क्रिप्ट के साथ एक मोबाइल ऐप कोड की कोशिश करें। इस कोर्स में, केविन कासाई आपको एक सरल अनुप्रयोग बनाने के लिए कदम से कदम दिखाएंगे। रास्ते के साथ, आप नेटवर्क अनुरोधों, एक एमवीवीएम वास्तुकला और कुछ सबसे महत्वपूर्ण नेटिवस्क्रिप्ट यूआई घटकों के साथ एक साधारण ऐप वर्कफ़्लो को कार्यान्वित करने के तरीके सीखेंगे। अंत में, आप समझेंगे कि आपको अगले मोबाइल ऐप प्रोजेक्ट के लिए नेटिवस्क्रिप्ट के लिए क्यों विचार करना चाहिए।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.