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

Ionic के साथ शुरू करना: Cordova

by
Difficulty:BeginnerLength:MediumLanguages:

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

Final product image
What You'll Be Creating

Getting Start with Ionic सीरीज की इस अंतिम किस्त में, आप देखेंगे कि अपने आप में डिवाइस हार्डवेयर कैपेबिलिटीज को जोड़ने के लिए Cordova कल आप कैसे उठाया जाए। हम जिओलोकेशन जैसे फीचर्स का उपयोग करने के बारे में देखेंगे और हम आपको बताएंगे कि हमारे ऐप को समाप्त करने के लिए ngCordova लाइब्रेरी के साथ कैसे इंटीग्रेट किया जाए। आप यह सुनिश्चित करना चाहोगे कि आपने अपनी मशीन को Ionic के लिए सेट किया है इससे पहले कि हम शुरू करें, और सुनिश्चित करें कि आपके पास अपना प्लेटफॉर्म-स्पेसिफिक टूलिंग सेट है।

प्रोजेक्ट फाइलें

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

यदि आप प्रोजेक्ट को प्लान करते हैं, तो आप Git का उपयोग करके और get checkout -b start को चलाकर भी कोड कर सकते हैं। इस लेसन के लिए यह कोडिंग शुरू होती है जहां अंतिम पोस्ट, Getting Started With Ionic: Navigation को छोड़ा गया है। आप प्रारंभिक बिंदु का लाइव प्रीव्यू भी कर सकते हैं।

Cordova को सेटअप करना

कोई भी कोड लिखने से पहले हमें अपना प्रोजेक्ट सेट करना होगा। Ionic पहले से ही एक बेसिक Cordova प्रोजेक्ट सेटअप करेगा, लेकिन हमें खुद कुछ अतिरिक्त चीजों को शुरू करने की आवश्यकता है।

सबसे पहले, हम ngCordova लाइब्रेरी सेट अप करने की आवश्यकता है। यह एक Angular मॉड्यूल है जो सबसे लोकप्रिय Cordova प्लगिंस में से कुछ का उपयोग करना बहुत आसान बनाता है। (हालांकि सभी प्लगइन ngCordova द्वारा सपोर्टेड नहीं है)। एस डिपेंडेंसी को सेट अप करने के लिए Bower का उपयोग किया जाता है।

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

तीसरा, हम Cordova के लिए जियोलोकेशन प्लगइन इंस्टॉल करेंगे। यह आपके ऐप को यूजर की करंट लोकेशन (जिसकी अनुमति की आवश्यकता होती है) प्राप्त करने की क्षमता के साथ बढ़ाता है। आप सभी प्लगिंस की एक लिस्ट https://cordova.apache.org/plugins/ पर देख सकते हैं कि प्रत्येक को कैसे सेट किया जाए।

इन तीन स्टेप स्टेप्स को करने के लिए प्रोजेक्ट के रूप से निम्न कमांड को चलाया जाना चाहिए।

एक बार जब यह पूरा जाए, तो हमें एप्लीकेशन में ngCordova को जोड़ने की आवश्यकता है ताकि इसे Ionic द्वारा मान्यता प्राप्त हो। www/index.html फाइल खोलें और ionic.bundle.js फाइल के बाद निम्न लाइन को जोड़ें।

फिर हमें ngCordova मॉड्यूल को शामिल करने के लिए www/js/app.js फाइल को अपडेट करना होगा। पहली लाइन को निम्नानुसार अपडेट किया जाना चाहिए।

अब जब हमने अपनी डिपेंडेंसी को अपडेट कर लिया है, तो हमारे प्रोजेक्ट जिओलोकेशन प्लगइन का उपयोग करने के लिए तैयार है। अगला स्टेप इसका उपयोग शुरू करने के लिए एक नया व्यू सेट करना है!

लोकेशन व्यू को जोड़ना

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

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

सबसे पहले, हम अपने लोकेशन व्यू के लिए टेंप्लेट बनाएंगे। www/views/location/location.html पर एक नई फाइल बनाएं और निम्नलिखित को शामिल करें। (यह सभी पिछले ट्यूटोरियल से आपके लिए परिचित होना चाहिए, लेकिन यह अनिवार्य रूप से एक बटन के साथ एक नया व्यू बनाता है जो हमारे कंट्रोल में एक मेथड को कॉल करेगा, जिसे हम आगे डिफाइन करेंगे।)

अब हम कंट्रोलर शेल बनाएंगे, और फिर हुजूर के लोकेशन को संभालने के लिए एक मेथड जोड़ेंगे। www/views/location/location.js पर एक और नई फाइल बनाएं और निम्नलिखित कोर्ट को शामिल करें। इस फाइल को www/index.html फाइल से लिंक करना भी सुनिश्चित करें।

इस बिंदु पर हमारे पास एक नई लोकेशन है, लेकिन बटन अभी तक काम नहीं करेगा। आप ionic serve के साथ अपने ब्राउज़र में ऐप का प्रीव्यू कर सकते हैं। यदि आप http://localhost:8000/#/location पर जाते हैं तो आपको वह व्यू देखने में सक्षम होना चाहिए।

आपको कंट्रोलर कंस्ट्रक्टर में $cordovaGeolocation नामक एक सर्विस दिखाई देगी, जो हमें यूजर लोकेशन डाटा तक पहुंच प्रदान करने जा रही है। लोकेशन डाटा के साथ क्या करना है, इसके बिजनेस लॉ जी को संभालने के लिए बाकी सभी सर्विसेज की आवश्यकता होती है।

इस ऐप में यूजर के लोकेशन को प्राप्त करने के लिए वास्तव में दो स्टेप शामिल हैं, पहले Cordova प्लगइन से जियोलोकेशन डाटा प्राप्त कर रहा है ( जो कि केवल एक अक्षांश और देशांतर वैल्यू को रिटर्न करता है), और फिर फाइंड करने के लिए Google Geocode API में रिवर्स लुकअप करना। करंट लोकेशन प्लेस (जो हमारे एक अन्य API कॉल को के साथ अच्छी तरह से काम करता है)।

कंट्रोलर के लिए निम्न मेथड जोड़ें, और हम नीचे विस्तार से इसके माध्यम से जाएंगे।

पहली बात यह है कि एक लोडर को प्रदर्शित करने के लिए $ionicLoading सर्विस का उपयोग किया जाता है जब करंट लोकेशन का पता लगाया जाता है।

तब हम $cordovaGeoposition सर्विस का उपयोग करते हैं जिसमें करंट पोजिशन प्राप्त करने के लिए getPosition नामक एक मेथड है। हम ऑप्शन स्पेसिफाई करते हैं, जो उचित डिफॉल्ट वैल्यू है। आप डॉक्यूमेंटेशन में अन्य getPosition ऑप्शंस के बारे में पढ़ सकते हैं।

getPosition मेथड एक प्रॉमिस रिटर्न करता है, इसलिए हम रिस्पांस को संभालने के लिए then का प्रयोग करते हैं। यह मानकर की यूजर अपनी लोकेशन शेयर करने के लिए सहमत है, यह हमें एक ऑब्जेक्ट देता है जिसमें अक्षांश और देशांतर के लिए कोऑर्डिनेट होते हैं। फिर हम उन वैल्यूज का उपयोग API को कॉल करने के लिए करेंगे जो निकटतम स्थान देखने के लिए रिवर्स जिओकोड करेंगे। यदि यह विफल रहता है, तो कैच हैंडलर एक मैसेज दिखाने के लिए $ionicPopup का उपयोग अलर्ट दिखाने के लिए करेगा कि यह विफल हो गया।

$http सर्विस का उपयोग रिवर्स जिओ कोड को देखने के लिए किया जाता है, और यदि यह सफल होता है तो हमें यह जांचने की आवश्यकता है कि क्या कोई परिणाम रिटर्न किया गया था। यदि कोई रिटर्न किया गया था, तो Geolocation सर्विस वैल्यू अपडेट किया जाता है और यूजर $state.go का उपयोग करके प्लेसेस की लिस्ट पर रीडायरेक्ट कर दिए जाते हैं। अन्यथा, यह एक अलर्ट दिखाने के लिए $ionicPopup का उपयोग करता है कि कोई स्थान नहीं मिला।

हमारे ऐप में डिवाइस के जियो लोकेशन फीचर को इनेबल करने के लिए बस इतना करना है। हालांकि, हमें अभी भी स्थानों को देखने के लिए app.js फाइल में कुछ मामूली बदलाव करने हैं।

सबसे पहले www/js/app.js फाइल खोलें और निम्नलिखित के लिए Geolocation सर्विस अपडेट करें। यह जिओलोकेशन सर्विस के डिफॉल्ट वैल्यू को क्लियर करने के लिए आवश्यक है जिसे हमने पहले Chicago करने के लिए कोड किया था, और डाइजेस्ट साइकिल को परिवर्तनों को ठीक करने से सिंक करने में सक्षम बनाता है।

फिर अंतिम एप्लीकेशन को निम्नलिखित के लिए अपडेट करके ऐप ऐप के लिए डिफॉल्ट व्यू को मॉडिफाई करें। यह इसके बजाय ऐप को लोकेशन व्यू पर स्टार्ट करेगा।

अंत में, हम प्लेसेस को अब कैश नहीं करना चाहते हैं ( इसलिए अपडेट किया गया स्थान हमेशा रिफ्लेक्ट होता है), और यदि कोई स्थान नहीं मिला तो लोकेशन व्यू पर रीडायरेक्ट करें। www/views/places/places.html को खोलें और निम्नलिखित अनुसार पहली लाइन को अपडेट करें।

फिर www/views/places/places.js खोलें और निम्नलिखित से मिलान करने के लिए कंट्रोलर की शुरुआत को अपडेट करें।

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

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

एक एमुलेटर में प्रीव्यू करना

Ionic CLI मैं एक कमांड है जो आपको डिवाइस के सॉफ्टवेयर वर्जन में ऐप को आसानी से एम्युलेट करने देती है। सभी हार्डवेयर फीचर्स उपलब्ध नहीं होते, लेकिन कई को एम्युलेट किया जाता है, जिसमें जियोलोकेशन भी शामिल है।

ionic emulate ios का उपयोग करके, Ionic एम्युलेटर शुरू करेगा और ऐप को लोड करेगा ( इसी तरह एंड्रॉयड के लिए भी)। यदि आपके पास एरर्स हैं, तो यह संभावना है कि आप की मशीन उस प्लेटफार्म के लिए पूरी तरह से सेटअप नहीं हुई है जिसे आप एम्युलेट करने की कोशिश कर रहे हैं।

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

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

निष्कर्ष

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

यह Getting Started with Ionic series का भी समापन करता है। अब आपके पास बेसिक समझ होनी चाहिए और Ionic के साथ आगे बढ़ने में आपको सक्षम होना चाहिए। यदि आप अधिक रुचि रखते हैं, तो Ionic फ्रेमवर्क पर हमारे कुछ अन्य कोर्सेज और ट्यूटोरियल देखें।


  • Get Started With Ionic 2

  • Ionic के साथ कैमरा का प्रयोग करना

  • Ionic के साथ माइक्रोफ़ोन का प्रयोग करना

  • कोरडोवा के साथ एक ऐप को पब्लिश करना

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.