कॉर्डोवा - त्वरित गाइड

Cordova एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करते हुए हाइब्रिड मोबाइल अनुप्रयोगों के निर्माण के लिए एक मंच है।

आधिकारिक दस्तावेज हमें कोर्डोवा की परिभाषा देता है -

"अपाचे कॉर्डोवा एक ओपन-सोर्स मोबाइल डेवलपमेंट फ्रेमवर्क है। यह आपको प्रत्येक मोबाइल प्लेटफ़ॉर्म देशी डेवलपमेंट लैंग्वेज से बचने के लिए क्रॉसप्लेटफ़ॉर्म डेवलपमेंट के लिए एचटीएमएल 5, सीएसएस 3 और जावास्क्रिप्ट जैसी मानक वेब तकनीकों का उपयोग करने की अनुमति देता है। एप्लिकेशन प्रत्येक प्लेटफ़ॉर्म पर लक्षित रैपर के भीतर निष्पादित होते हैं, और प्रत्येक डिवाइस के सेंसर, डेटा और नेटवर्क स्थिति तक पहुंचने के लिए मानकों के अनुरूप एपीआई बाइंडिंग पर भरोसा करें। "

कॉर्डोवा विशेषताएं

आइए अब हम कॉर्डोवा की विशेषताओं को संक्षेप में समझते हैं।

कमांड लाइन इंटरफ़ेस (कॉर्डोवा CLI)

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

कॉर्डोवा कोर अवयव

कॉर्डोवा कोर घटकों का एक सेट प्रदान करता है जो हर मोबाइल एप्लिकेशन को चाहिए। इन घटकों का उपयोग ऐप का आधार बनाने के लिए किया जाएगा ताकि हम अपने स्वयं के तर्क को लागू करने के लिए अधिक समय बिता सकें।

कॉर्डोवा प्लगइन्स

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

लाइसेंस

कॉर्डोवा को अपाचे लाइसेंस, संस्करण 2.0 के तहत लाइसेंस प्राप्त है। अपाचे और अपाचे पंख लोगो अपाचे सॉफ्टवेयर फाउंडेशन के ट्रेडमार्क हैं।

कॉर्डोवा फायदे

अब हम कॉर्डोवा के फायदों के बारे में चर्चा करेंगे।

  • कॉर्डोवा हाइब्रिड मोबाइल ऐप बनाने के लिए एक मंच प्रदान करता है, इसलिए हम एक ऐसा ऐप विकसित कर सकते हैं जो विभिन्न मोबाइल प्लेटफार्मों - आईओएस, एंड्रॉइड, विंडोज फोन, अमेज़ॅन-फायरस, ब्लैकबेरी, फ़ायरफ़ॉक्स ओएस, उबंटू और टिज़ेन पर उपयोग किया जाएगा।

  • यह हाइब्रिड ऐप विकसित करने के लिए तेज़ है तो देशी ऐप ताकि कॉर्डोवा विकास के समय को बचा सके।

  • चूंकि हम कॉर्डोवा के साथ काम करते समय जावास्क्रिप्ट का उपयोग कर रहे हैं, इसलिए हमें मंच विशिष्ट प्रोग्रामिंग भाषाओं को सीखने की आवश्यकता नहीं है।

  • कई सामुदायिक ऐड-ऑन हैं जिनका उपयोग कॉर्डोवा के साथ किया जा सकता है, इनमें कई लाइब्रेरी और फ्रेमवर्क हैं, जो इसके साथ काम करने के लिए अनुकूलित हैं।

कॉर्डोवा सीमाएँ

कॉर्डोवा की सीमाएँ निम्नलिखित हैं।

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

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

  • कुछ प्लगइन्स में विभिन्न उपकरणों और प्लेटफार्मों के साथ संगतता समस्याएं हैं। कुछ देशी एपीआई भी हैं जो कॉर्डोवा द्वारा अभी तक समर्थित नहीं हैं।

इस अध्याय में, हम कॉर्डोवा के पर्यावरण सेटअप को समझेंगे। सेटअप के साथ शुरू करने के लिए, हमें पहले कुछ घटकों को स्थापित करना होगा। घटक निम्न तालिका में सूचीबद्ध हैं।

S.No सॉफ्टवेयर और विवरण
1

NodeJS and NPM

NodeJS कॉर्डोवा विकास के लिए आवश्यक मंच है। अधिक जानकारी के लिए हमारे NodeJS पर्यावरण सेटअप की जाँच करें ।
2

Android SDK

Android प्लेटफ़ॉर्म के लिए, आपको अपनी मशीन पर Android SDK इंस्टॉल करना होगा। की जाँच करें एंड्रॉयड पर्यावरण सेटअप अधिक जानकारी के लिए।
3

XCode

IOS प्लेटफॉर्म के लिए, आपको अपनी मशीन पर xCode इंस्टॉल करना होगा। की जाँच करें आईओएस पर्यावरण सेटअप अधिक जानकारी के लिए

कोर्डोवा स्थापित करना

शुरू करने से पहले, आपको यह जानना होगा कि हम विंडोज का उपयोग करेंगे command prompt हमारे ट्यूटोरियल में।

चरण 1 - संस्थापन जीआईटी

यहां तक ​​कि अगर आप गिट का उपयोग नहीं करते हैं, तो इसे स्थापित किया जाना चाहिए क्योंकि कॉर्डोवा कुछ पृष्ठभूमि प्रक्रियाओं के लिए इसका उपयोग कर रहा है। आप यहाँ git डाउनलोड कर सकते हैं । आपके द्वारा गिट स्थापित करने के बाद, अपना पर्यावरण चर खोलें।

  • कंप्यूटर पर राइट-क्लिक करें
  • Properties
  • उन्नत सिस्टम सेटिंग्स
  • पर्यावरण चर
  • सिस्टम चर
  • Edit

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

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

अब आप टाइप कर सकते हैं git यदि इंस्टॉलेशन सफल है तो परीक्षण के लिए अपने कमांड प्रॉम्प्ट में।

चरण 2 - कॉर्डोवा को स्थापित करना

यह चरण विश्व स्तर पर कॉर्डोवा मॉड्यूल को डाउनलोड और स्थापित करेगा। कमांड प्रॉम्प्ट खोलें और निम्न चलाएँ -

C:\Users\username>npm install -g cordova

आप इंस्टॉल करके संस्करण की जाँच कर सकते हैं -

C:\Users\username>cordova -v

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

हमने समझा है कि कॉर्डोवा कैसे स्थापित करें और इसके लिए पर्यावरण स्थापित करें। सब कुछ तैयार हो जाने के बाद, हम अपना पहला हाइब्रिड कॉर्डोवा एप्लिकेशन बना सकते हैं।

चरण 1 - ऐप बनाना

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

C:\Users\username\Desktop>cordova 
   create CordovaProject io.cordova.hellocordova CordovaApp

  • CordovaProject निर्देशिका नाम है जहां एप्लिकेशन बनाया गया है।

  • io.cordova.hellocordovaडिफ़ॉल्ट रिवर्स डोमेन मूल्य है। यदि संभव हो तो आपको अपने स्वयं के डोमेन मूल्य का उपयोग करना चाहिए।

  • CordovaApp आपके ऐप का शीर्षक है।

चरण 2 - प्लेटफ़ॉर्म जोड़ना

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

C:\Users\username\Desktop\CordovaProject>cordova platform add android

ऐसे अन्य प्लेटफ़ॉर्म हैं जो विंडोज ओएस पर उपयोग किए जा सकते हैं।

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8

C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos

C:\Users\username\Desktop\CordovaProject>cordova platform add windows

C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10

C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos

यदि आप मैक पर विकसित कर रहे हैं, तो आप उपयोग कर सकते हैं -

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

आप का उपयोग करके भी अपनी परियोजना से मंच हटा सकते हैं -

C:\Users\username\Desktop\CordovaProject>cordova platform rm android

चरण 3 - बिल्डिंग और रनिंग

इस चरण में हम एक निर्दिष्ट प्लेटफ़ॉर्म के लिए ऐप का निर्माण करेंगे ताकि हम इसे मोबाइल डिवाइस या एमुलेटर पर चला सकें।

C:\Users\username\Desktop\CordovaProject>cordova build android

अब हम अपना ऐप चला सकते हैं। यदि आप डिफ़ॉल्ट एमुलेटर का उपयोग कर रहे हैं तो आपको उपयोग करना चाहिए -

C:\Users\username\Desktop\CordovaProject>cordova emulate android

यदि आप बाहरी एमुलेटर या वास्तविक उपकरण का उपयोग करना चाहते हैं, तो आपको उपयोग करना चाहिए -

C:\Users\username\Desktop\CordovaProject>cordova run android

NOTE - हम उपयोग करेंगे Genymotion android emulatorचूँकि यह डिफ़ॉल्ट से अधिक तेज़ और उत्तरदायी है। आप एमुलेटर यहां पा सकते हैं । आप सक्षम करके परीक्षण के लिए वास्तविक डिवाइस का उपयोग भी कर सकते हैंUSB debuggingविकल्पों से और USB केबल के माध्यम से इसे अपने कंप्यूटर से कनेक्ट करना। कुछ उपकरणों के लिए, आपको USB ड्राइवर को भी इंस्टॉल करना होगा।

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

हमारे अगले ट्यूटोरियल में, हम आपको दिखाएंगे कि कॉर्डोवा एप्लिकेशन को कैसे कॉन्फ़िगर किया जाए।

config.xmlफ़ाइल वह जगह है जहां हम ऐप के कॉन्फ़िगरेशन को बदल सकते हैं। जब हमने अंतिम ट्यूटोरियल में अपना ऐप बनाया था, तो हम रिवर्स डोमेन और नाम सेट करते हैं। मूल्यों में बदला जा सकता हैconfig.xmlफ़ाइल। जब हम एप बनाएंगे तो डिफॉल्ट कॉन्फिग फाइल भी बन जाएगी।

निम्न तालिका कॉन्फ़िगरेशन तत्वों की व्याख्या करती है config.xml।

config.xml कॉन्फ़िगरेशन तालिका

S.No तत्व और विवरण
1

widget

एप्लिकेशन को बनाते समय हमने निर्दिष्ट डोमेन मूल्य को उल्टा कर दिया।
2

name

ऐप बनाते समय हमने जो ऐप निर्दिष्ट किया उसका नाम।
3

description

एप्लिकेशन के लिए विवरण।
4

author

एप्लिकेशन के लेखक।
5

content

ऐप का शुरुआती पेज। इसे अंदर रखा गया हैwww निर्देशिका।
6

plugin

वर्तमान में इंस्टॉल किए गए प्लगइन्स।
7

access

बाहरी डोमेन तक पहुंच को नियंत्रित करने के लिए उपयोग किया जाता है। डिफ़ॉल्टoriginमान * पर सेट है जिसका अर्थ है कि किसी भी डोमेन तक पहुंच की अनुमति है। यह मान कुछ विशिष्ट URL को जानकारी की सुरक्षा के लिए खोलने की अनुमति नहीं देगा।
8

allow-intent

विशिष्ट URL को एप्लिकेशन को खोलने के लिए कहने की अनुमति देता है। उदाहरण के लिए,<allow-intent href = "tel:*" /> टेल को अनुमति देगा: डायलर खोलने के लिए लिंक।
9

platform

एप्लिकेशन के निर्माण के लिए प्लेटफॉर्म।

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

चरण 1 - बटन जोड़ना

हम चार बटन बनाएंगे index.htmlफ़ाइल। बटन अंदर स्थित होंगेdiv class = "app" तत्व।

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

यह निम्नलिखित स्क्रीन का उत्पादन करेगा -

चरण 2 - घटना श्रोताओं को जोड़ना

कॉर्डोवा सुरक्षा नीति इनलाइन घटनाओं की अनुमति नहीं देती है इसलिए हम index.js फ़ाइलों के अंदर ईवेंट श्रोताओं को जोड़ देंगे। हम भी सौंपेंगेwindow.localStorage को localStorage चर जिसे हम बाद में उपयोग करेंगे।

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); 
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); 
document.getElementById("removeProjectFromLocalStorage").addEventListener 
   ("click", removeProjectFromLocalStorage); 
document.getElementById("getLocalStorageByKey").addEventListener 
   ("click", getLocalStorageByKey);  
var localStorage = window.localStorage;

चरण 3 - कार्य बनाना

अब हमें ऐसे फ़ंक्शन बनाने होंगे जो बटन टैप करने पर कॉल किए जाएंगे। पहले फ़ंक्शन का उपयोग स्थानीय संग्रहण में डेटा जोड़ने के लिए किया जाता है।

function setLocalStorage() { 
   localStorage.setItem("Name", "John"); 
   localStorage.setItem("Job", "Developer"); 
   localStorage.setItem("Project", "Cordova Project"); 
}

अगले हम कंसोल में जोड़े गए डेटा को लॉग करेंगे।

function showLocalStorage() { 
   console.log(localStorage.getItem("Name")); 
   console.log(localStorage.getItem("Job")); 
   console.log(localStorage.getItem("Project")); 
}

अगर हम टैप करते हैं SET LOCAL STORAGEबटन, हम तीन वस्तुओं को स्थानीय भंडारण में स्थापित करेंगे। अगर हम टैप करते हैंSHOW LOCAL STORAGE बाद में, कंसोल उन वस्तुओं को लॉग करेगा जो हम चाहते हैं।

आइए अब फ़ंक्शन बनाते हैं जो प्रोजेक्ट को स्थानीय संग्रहण से हटा देगा।

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

अगर हम क्लिक करें SHOW LOCAL STORAGE बटन के बाद हम परियोजना को नष्ट कर दिया, उत्पादन दिखाएगा null परियोजना क्षेत्र के लिए मूल्य।

हम भी स्थानीय भंडारण तत्वों का उपयोग करके प्राप्त कर सकते हैं key() विधि जो सूचकांक को एक तर्क के रूप में लेगी और तत्व को संबंधित सूचकांक मूल्य के साथ वापस करेगी।

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

अब जब हम टैप करते हैं GET BY KEY बटन, निम्न आउटपुट प्रदर्शित किया जाएगा।

ध्यान दें

जब हम उपयोग करते हैं key() विधि, कंसोल लॉग करेगा job के स्थान पर name हालांकि हमने तर्क पारित किया 0पहली वस्तु प्राप्त करना। ऐसा इसलिए है क्योंकि स्थानीय संग्रहण डेटा को वर्णमाला क्रम में संग्रहीत कर रहा है।

निम्न तालिका सभी उपलब्ध स्थानीय संग्रहण विधियों को दिखाती है।

S.No तरीके और विवरण
1

setItem(key, value)

आइटम को स्थानीय संग्रहण में सेट करने के लिए उपयोग किया जाता है।
2

getItem(key)

स्थानीय भंडारण से आइटम प्राप्त करने के लिए उपयोग किया जाता है।
3

removeItem(key)

स्थानीय भंडारण से आइटम को हटाने के लिए उपयोग किया जाता है।
4

key(index)

का उपयोग करके आइटम प्राप्त करने के लिए उपयोग किया जाता है indexस्थानीय भंडारण में आइटम की। यह वस्तुओं को वर्णानुक्रम में क्रमबद्ध करने में मदद करता है।
5

length()

स्थानीय भंडारण में मौजूद वस्तुओं की संख्या प्राप्त करने के लिए उपयोग किया जाता है।
6

clear()

स्थानीय भंडारण से सभी कुंजी / मूल्य जोड़े निकालने के लिए उपयोग किया जाता है।

विभिन्न घटनाएँ हैं जिनका उपयोग कॉर्डोवा परियोजनाओं में किया जा सकता है। निम्न तालिका उपलब्ध घटनाओं को दिखाती है।

S.No घटनाक्रम और विवरण
1

deviceReady

कॉर्डोवा के पूरी तरह से लोड होने के बाद यह घटना शुरू हो जाती है। इससे यह सुनिश्चित करने में मदद मिलती है कि सब कुछ लोड होने से पहले कोई कॉर्डोवा फ़ंक्शन नहीं कहा जाता है।
2

pause

जब ऐप को पृष्ठभूमि में रखा जाता है तो यह घटना शुरू हो जाती है।
3

resume

जब यह ऐप पृष्ठभूमि से वापस आ जाता है तो यह घटना शुरू हो जाती है।
4

backbutton

जब बैक बटन दबाया जाता है तो यह घटना शुरू हो जाती है।
5

menubutton

जब मेनू बटन दबाया जाता है तो यह घटना शुरू हो जाती है।
6

searchbutton

Android खोज बटन दबाए जाने पर यह घटना शुरू हो जाती है।
7

startcallbutton

प्रारंभ कॉल बटन दबाए जाने पर यह घटना चालू हो जाती है।
8

endcallbutton

अंतिम कॉल बटन दबाए जाने पर यह घटना शुरू हो जाती है।
9

volumedownbutton

वॉल्यूम डाउन बटन को दबाने पर यह घटना शुरू हो जाती है।
10

volumeupbutton

वॉल्यूम अप बटन दबाए जाने पर यह ईवेंट ट्रिगर हो जाता है।

घटनाओं का उपयोग करना

सभी घटनाओं का उपयोग लगभग उसी तरह किया जाता है। हमें हमेशा अपने सुनने वालों को घटना में शामिल करना चाहिएjs के स्थान पर inline event calling के बाद से Cordova Content Security Policyइनस्क्रिप्ट जावास्क्रिप्ट की अनुमति नहीं देता है। यदि हम ईवेंट इनलाइन को कॉल करने का प्रयास करते हैं, तो निम्न त्रुटि प्रदर्शित होगी।

घटनाओं के साथ काम करने का सही तरीका है addEventListener। हम समझेंगे कि कैसे उपयोग करना हैvolumeupbutton एक उदाहरण के माध्यम से घटना।

document.addEventListener("volumeupbutton", callbackFunction, false);  
function callbackFunction() { 
   alert('Volume Up Button is pressed!');
}

एक बार हम दबाते हैं volume up बटन, स्क्रीन निम्नलिखित चेतावनी प्रदर्शित करेगा।

बैक बटन को हैंडल करना

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

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

अब जब हम देशी एंड्रॉइड बैक बटन दबाते हैं, तो अलर्ट ऐप से बाहर निकलने के बजाय स्क्रीन पर दिखाई देगा। यह का उपयोग करके किया जाता हैe.preventDefault() आदेश।

बैक बटन को हैंडल करना

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

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

अब जब हम देशी एंड्रॉइड बैक बटन दबाते हैं, तो अलर्ट ऐप से बाहर निकलने के बजाय स्क्रीन पर दिखाई देगा। यह प्रयोग करके किया जाता हैe.preventDefault()।

कॉर्डोवा प्लगमैन प्लगइन्स को स्थापित करने और प्रबंधित करने के लिए एक उपयोगी कमांड लाइन टूल है। आपको उपयोग करना चाहिएplugmanयदि आपके ऐप को एक विशिष्ट प्लेटफॉर्म पर चलना है। अगर आप a बनाना चाहते हैcross-platform ऐप जिसका आपको उपयोग करना चाहिए cordova-cli जो विभिन्न प्लेटफार्मों के लिए प्लगइन्स को संशोधित करेगा।

चरण 1 - प्लगमैन स्थापित करना

को खोलो command prompt विंडो और प्लग इन इंस्टॉल करने के लिए निम्न कोड स्निपेट चलाएं।

C:\Users\username\Desktop\CordovaProject>npm install -g plugman

चरण 2 - प्लगइन्स स्थापित करना

प्लगमैन का उपयोग करके कॉर्डोवा प्लगइन कैसे स्थापित करें, यह समझने के लिए, हम एक उदाहरण के रूप में कैमरा प्लगइन का उपयोग करेंगे।

C:\Users\username\Desktop\CordovaProject>plugman  
   install --platform android --project platforms\android  
   --plugin cordova-plugin-camera 
   plugman uninstall --platform android --project platforms\android  
   --plugin cordova-plugin-camera

हमें तीन मापदंडों पर विचार करने की आवश्यकता है जैसा कि ऊपर दिखाया गया है।

  • --platform - प्लेटफ़ॉर्म जिसे हम उपयोग कर रहे हैं (Android, ios, amazon-fireos, wp8, ब्लैकबेरी 10)।

  • --project- पथ जहां प्रोजेक्ट बनाया गया है। हमारे मामले में, यह हैplatforms\android निर्देशिका।

  • --plugin - प्लगइन जिसे हम इंस्टॉल करना चाहते हैं।

यदि आप मान्य पैरामीटर सेट करते हैं, तो कमांड प्रॉम्प्ट विंडो को निम्न आउटपुट प्रदर्शित करना चाहिए।

अतिरिक्त तरीके

आप उपयोग कर सकते हैं uninstall इसी तरह से विधि।

C:\Users\username\Desktop\CordovaProject>plugman uninstall  
   --platform android --project platforms\android --plugin cordova-plugin-camera

command prompt कंसोल निम्न आउटपुट प्रदर्शित करेगा।

प्लगमैन कुछ अतिरिक्त तरीके प्रदान करता है जिनका उपयोग किया जा सकता है। विधियों को निम्न तालिका में सूचीबद्ध किया गया है।

S.No विधि और विवरण
1

install

कॉर्डोवा प्लगइन्स स्थापित करने के लिए उपयोग किया जाता है।
2

uninstall

कॉर्डोवा प्लगइन्स की स्थापना रद्द करने के लिए उपयोग किया जाता है।
3

fetch

कॉर्डोवा प्लगइन को विशिष्ट स्थान पर कॉपी करने के लिए उपयोग किया जाता है।
4

prepare

जेएस मॉड्यूल समर्थन में मदद करने के लिए कॉन्फ़िगरेशन फ़ाइल को अपडेट करने के लिए उपयोग किया जाता है।
5

adduser

उपयोगकर्ता खाते को रजिस्ट्री में जोड़ने के लिए उपयोग किया जाता है।
6

publish

रजिस्ट्री में प्लगइन प्रकाशित करने के लिए उपयोग किया जाता है।
7

unpublish

रजिस्ट्री से अप्रकाशित प्लगइन के लिए उपयोग किया जाता है।
8

search

रजिस्ट्री में प्लगइन्स को खोजने के लिए उपयोग किया जाता है।
9

config

रजिस्ट्री सेटिंग्स कॉन्फ़िगरेशन के लिए उपयोग किया जाता है।
10

create

कस्टम प्लगइन बनाने के लिए उपयोग किया जाता है।
1 1

platform

कस्टम निर्मित प्लगइन से प्लेटफॉर्म को जोड़ने या हटाने के लिए उपयोग किया जाता है।

अतिरिक्त कमांड

यदि आप फंस गए हैं, तो आप हमेशा उपयोग कर सकते हैं plugman -helpआदेश। संस्करण का उपयोग करके जाँच की जा सकती हैplugman -v। प्लगइन की खोज करने के लिए, आप उपयोग कर सकते हैंplugman search और अंत में आप प्लगइन रजिस्ट्री का उपयोग करके बदल सकते हैं plugman config set registry आदेश।

ध्यान दें

चूंकि कॉर्डोवा का उपयोग क्रॉस प्लेटफॉर्म विकास के लिए किया जाता है, इसलिए हमारे बाद के अध्यायों में हम उपयोग करेंगे Cordova CLI के बजाय Plugman प्लगइन्स स्थापित करने के लिए।

यह कॉर्डोवा प्लगइन डिवाइस की बैटरी स्थिति की निगरानी के लिए उपयोग किया जाता है। प्लगइन डिवाइस की बैटरी के लिए होने वाले हर बदलाव की निगरानी करेगा।

चरण 1 - बैटरी प्लगइन स्थापित करना

इस प्लगइन को स्थापित करने के लिए, हमें खोलने की आवश्यकता है command prompt विंडो और निम्न कोड चलाएँ।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-pluginbattery-status

चरण 2 - ईवेंट श्रोता जोड़ें

जब तुम खोलोगे index.js फ़ाइल, आपको मिल जाएगा onDeviceReadyसमारोह। यह वह जगह है जहाँ घटना श्रोता को जोड़ा जाना चाहिए।

window.addEventListener("batterystatus", onBatteryStatus, false);

चरण 3 - कॉलबैक फ़ंक्शन बनाएं

हम पैदा करेंगे onBatteryStatus के नीचे कॉलबैक फ़ंक्शन index.js फ़ाइल।

function onBatteryStatus(info) { 
   alert("BATTERY STATUS:  Level: " + info.level + " isPlugged: " + info.isPlugged); 
}

जब हम ऐप चलाते हैं, तो अलर्ट चालू हो जाएगा। फिलहाल, बैटरी 100% चार्ज है।

जब स्थिति बदल जाती है, तो एक नया अलर्ट प्रदर्शित किया जाएगा। बैटरी की स्थिति से पता चलता है कि बैटरी अब 99% चार्ज हो गई है।

यदि हम डिवाइस को चार्जर में प्लग करते हैं, तो नया अलर्ट दिखाएगा कि isPlugged मान को बदल दिया गया है true।

अतिरिक्त कार्यक्रम

इस प्लगइन के अलावा दो अतिरिक्त घटनाओं प्रदान करता है batterystatusप्रतिस्पर्धा। इन घटनाओं का उपयोग उसी तरह से किया जा सकता है जैसेbatterystatus प्रतिस्पर्धा।

S.No घटना की जानकारी
1

batterylow

जब बैटरी चार्ज प्रतिशत कम मूल्य तक पहुंच जाता है, तो घटना शुरू हो जाती है। यह मान विभिन्न उपकरणों के साथ बदलता रहता है।
2

batterycritical

जब बैटरी चार्ज प्रतिशत महत्वपूर्ण मूल्य तक पहुँच जाता है, तो घटना शुरू हो जाती है। यह मान विभिन्न उपकरणों के साथ बदलता रहता है।

इस प्लगइन का उपयोग फोटो लेने या छवि गैलरी से फ़ाइलों का उपयोग करने के लिए किया जाता है।

चरण 1 - कैमरा प्लगइन स्थापित करें

में निम्न कोड चलाएँ command prompt विंडो इस प्लगइन को स्थापित करने के लिए।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

चरण 2 - बटन और छवि जोड़ना

अब, हम कैमरा कॉल करने के लिए बटन बनाएंगे और imgजहां छवि को एक बार लिया गया प्रदर्शित किया जाएगा। इसमें जोड़ा जाएगाindex.html के अंदर div class = "app" तत्व।

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

चरण 3 - ईवेंट श्रोता जोड़ना

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

document.getElementById("cameraTakePicture").addEventListener 
   ("click", cameraTakePicture);

चरण 4 - फ़ंक्शंस जोड़ना (फ़ोटो लेना)

हम पैदा करेंगे cameraTakePictureफ़ंक्शन जो हमारे ईवेंट श्रोता को कॉलबैक के रूप में दिया जाता है। बटन टैप करने पर इसे निकाल दिया जाएगा। इस फ़ंक्शन के अंदर, हम कॉल करेंगेnavigator.cameraप्लगइन एपीआई द्वारा प्रदान की गई वैश्विक वस्तु। यदि चित्र लेना सफल है, तो डेटा को भेज दिया जाएगाonSuccessकॉलबैक फ़ंक्शन, यदि नहीं, तो त्रुटि संदेश के साथ चेतावनी दिखाई जाएगी। हम इस कोड को सबसे नीचे रखेंगेindex.js।

function cameraTakePicture() { 
   navigator.camera.getPicture(onSuccess, onFail, {  
      quality: 50, 
      destinationType: Camera.DestinationType.DATA_URL 
   });  
   
   function onSuccess(imageData) { 
      var image = document.getElementById('myImage'); 
      image.src = "data:image/jpeg;base64," + imageData; 
   }  
   
   function onFail(message) { 
      alert('Failed because: ' + message); 
   } 
}

जब हम ऐप चलाते हैं और बटन दबाते हैं, तो देशी कैमरा चालू हो जाएगा।

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

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

चरण 1 बी

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

चरण 2 बी

<button id = "cameraGetPicture">GET PICTURE</button>

चरण 3 बी

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

चरण 4 बी

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

जब हम दूसरा बटन दबाते हैं, तो कैमरा के बजाय फ़ाइल सिस्टम खुल जाएगा ताकि हम उस छवि को चुन सकें जिसे प्रदर्शित किया जाना है।

यह प्लगइन अनुकूलन के लिए बहुत सारे वैकल्पिक पैरामीटर प्रदान करता है।

S.No पैरामीटर और विवरण
1

quality

0-100 की रेंज में छवि की गुणवत्ता। डिफ़ॉल्ट 50 है।
2

destinationType

DATA_URL या 0 बेस 64 एनकोडेड स्ट्रिंग लौटाता है।

FILE_URI या 1 छवि फ़ाइल URI लौटाता है।

NATIVE_URI या 2 छवि मूल URI लौटाता है।
3

sourceType

PHOTOLIBRARY या 0 फोटो लाइब्रेरी खोलता है।

CAMERA या 1 देशी कैमरा खोलता है।

SAVEDPHOTOALBUM या 2 सहेजा गया फोटो एल्बम।
4

allowEdit

छवि संपादन की अनुमति देता है।
5

encodingType

JPEG या 0 JPEG एन्कोडेड छवि लौटाता है।

PNG या 1 PNG एनकोडेड छवि देता है।
6

targetWidth

पिक्सेल में छवि स्केलिंग चौड़ाई।
7

targetHeight

पिक्सेल में छवि स्केलिंग ऊंचाई।
8

mediaType

PICTURE या 0 केवल चित्र चयन की अनुमति देता है।

VIDEO या 1 केवल वीडियो चयन की अनुमति देता है।

ALLMEDIA या 2 सभी मीडिया प्रकार के चयन की अनुमति देता है।
9

correctOrientation

छवि के उन्मुखीकरण को सही करने के लिए उपयोग किया जाता है।
10

saveToPhotoAlbum

चित्र को एल्बम में सहेजने के लिए उपयोग किया जाता है।
1 1

popoverOptions

IOS पर पॉपओवर स्थान सेट करने के लिए उपयोग किया जाता है।
12

cameraDirection

FRONT या 0 सामने का कैमरा।

BACK या 1 पृष्ठ कैमरा।

ALLMEDIA

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

चरण 1 - संपर्क प्लगइन स्थापित करें

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts

चरण 2 - बटन जोड़ना

बटन का उपयोग कॉल करने के लिए किया जाएगा createContactसमारोह। हम इसमें जगह देंगेdiv class = "app" में index.html फ़ाइल।

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

चरण 2 - इवेंट श्रोताओं को जोड़ें

खुला हुआ index.js और निम्नलिखित कोड स्निपेट को कॉपी करें onDeviceReady समारोह।

document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

चरण 3 ए - कॉलबैक फ़ंक्शन (नाविक। कॉन्टैक्ट्सक्रिएट)

अब, हमारे पास डिवाइस पर संग्रहीत कोई संपर्क नहीं है।

हमारा पहला कॉलबैक फ़ंक्शन कॉल करेगा navigator.contacts.createविधि जहां हम नए संपर्क डेटा निर्दिष्ट कर सकते हैं। यह एक संपर्क बनाएगा और उसे असाइन करेगाmyContactचर लेकिन यह डिवाइस पर संग्रहीत नहीं किया जाएगा। इसे स्टोर करने के लिए, हमें कॉल करने की आवश्यकता हैsave विधि और सफलता और त्रुटि कॉलबैक फ़ंक्शन बनाते हैं।

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);
    
   function contactSuccess() {
      alert("Contact is saved!");
   }
	
   function contactError(message) {
      alert('Failed because: ' + message);
   }
	
}

जब हम क्लिक करते हैं ADD CONTACT बटन, नया संपर्क डिवाइस संपर्क सूची में संग्रहीत किया जाएगा।

चरण 3 बी - कॉलबैक फ़ंक्शन (नेविगेटर। कॉन्टैक्टेसेफ़)

हमारा दूसरा कॉलबैक फ़ंक्शन सभी संपर्कों को क्वेरी करेगा। हम उपयोग करेंगेnavigator.contacts.findतरीका। विकल्प ऑब्जेक्ट में फ़िल्टर पैरामीटर होता है जिसका उपयोग खोज फ़िल्टर को निर्दिष्ट करने के लिए किया जाता है।multiple = trueउपयोग किया जाता है क्योंकि हम डिवाइस से सभी संपर्कों को वापस करना चाहते हैं। field द्वारा संपर्कों को खोजने के लिए महत्वपूर्ण है displayName चूंकि हमने संपर्क सहेजते समय इसका उपयोग किया था।

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

function findContacts() {
   var options = new ContactFindOptions();
   options.filter = "";
   options.multiple = true;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
    
   function contactfindSuccess(contacts) {
      for (var i = 0; i < contacts.length; i++) {
         alert("Display Name = " + contacts[i].displayName);
      }
   }
	
   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

जब हम दबाते हैं FIND CONTACT बटन, एक अलर्ट पॉपअप शुरू हो जाएगा क्योंकि हमने केवल एक संपर्क बचाया है।

चरण 3C - कॉलबैक फ़ंक्शन (हटाएं)

इस चरण में, हम फिर से खोज विधि का उपयोग करेंगे लेकिन इस बार हम अलग-अलग विकल्प निर्धारित करेंगे। options.filter वह खोज करने के लिए तैयार है Test Userजिसे हटाना होगा। के बादcontactfindSuccess कॉलबैक फ़ंक्शन ने वह संपर्क लौटा दिया है जिसे हम चाहते हैं, हम इसका उपयोग करके हटा देंगे remove विधि जो अपनी सफलता और त्रुटि कॉलबैक की आवश्यकता है।

function deleteContact() {
   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

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

अब हम क्लिक करेंगे DELETE CONTACT हटाने के लिए बटन Test User। यदि हम फिर से संपर्क सूची की जाँच करते हैं, तो हम देखेंगे किTest User अब मौजूद नहीं है।

इस प्लगइन का उपयोग उपयोगकर्ता के डिवाइस के बारे में जानकारी प्राप्त करने के लिए किया जाता है।

चरण 1 - डिवाइस प्लगइन स्थापित करना

इस प्लगइन को स्थापित करने के लिए, हमें निम्नलिखित स्निपेट को चलाने की आवश्यकता है command prompt।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device

चरण 2 - बटन जोड़ना

हम इस प्लगइन का उपयोग उसी तरह करेंगे जैसे हमने अन्य कॉर्डोवा प्लगइन्स का उपयोग किया था। आइये हम एक बटन जोड़ते हैंindex.htmlफ़ाइल। इस बटन का उपयोग डिवाइस के बारे में जानकारी प्राप्त करने के लिए किया जाएगा।

<button id = "cordovaDevice">CORDOVA DEVICE</button>

चरण 3 - ईवेंट श्रोता जोड़ना

कॉर्डोवा प्लग इन के बाद उपलब्ध हैं deviceready घटना इसलिए हम घटना श्रोता को अंदर रखेंगे onDeviceReady में कार्य करते हैं index.js।

document.getElementById("cordovaDevice").addEventListener("click", cordovaDevice);

चरण 4 - फ़ंक्शन बनाना

निम्न फ़ंक्शन दिखाएगा कि प्लगइन प्रदान करने वाली सभी संभावनाओं का उपयोग कैसे करें। हम इसमें जगह देंगेindex.js।

function cordovaDevice() {
   alert("Cordova version: " + device.cordova + "\n" +
      "Device model: " + device.model + "\n" +
      "Device platform: " + device.platform + "\n" +
      "Device UUID: " + device.uuid + "\n" +
      "Device version: " + device.version);
}

जब हम क्लिक करते हैं CORDOVA DEVICE बटन, अलर्ट कॉर्डोवा संस्करण, डिवाइस मॉडल, प्लेटफॉर्म, यूयूआईडी और डिवाइस संस्करण प्रदर्शित करेगा।

एक्सेलेरोमीटर प्लगइन को भी कहा जाता है device-motion। इसका उपयोग डिवाइस गति को तीन आयामों में ट्रैक करने के लिए किया जाता है।

चरण 1 - एक्सेलेरोमीटर प्लगइन स्थापित करें

हम इस प्लगइन का उपयोग करके स्थापित करेंगे cordova-CLI। निम्न कोड टाइप करेंcommand prompt खिड़की।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion

चरण 2 - बटन जोड़ें

इस चरण में, हम दो बटन जोड़ेंगे index.htmlफ़ाइल। एक का उपयोग वर्तमान त्वरण प्राप्त करने के लिए किया जाएगा और दूसरा त्वरण परिवर्तन के लिए देखेगा।

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

आइए अब हम अपने बटनों के लिए ईवेंट श्रोताओं को जोड़ते हैं onDeviceReady अंदर कार्य करें index.js।

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
   "click", watchAcceleration);

चरण 4 - कार्य बनाना

अब, हम दो फ़ंक्शन बनाएंगे। पहले फ़ंक्शन का उपयोग वर्तमान त्वरण प्राप्त करने के लिए किया जाएगा और दूसरा फ़ंक्शन त्वरण को देखेगा और हर तीन सेकंड में त्वरण के बारे में जानकारी ट्रिगर हो जाएगी। हम भी जोड़ देंगेclearWatch फ़ंक्शन द्वारा लिपटे setTimeoutनिर्दिष्ट समय सीमा के बाद त्वरण देखना बंद करने का कार्य करता है। frequency हर तीन सेकंड में कॉलबैक फ़ंक्शन को ट्रिगर करने के लिए पैरामीटर का उपयोग किया जाता है।

function getAcceleration() {
   navigator.accelerometer.getCurrentAcceleration(
      accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
}

function watchAcceleration() {
   var accelerometerOptions = {
      frequency: 3000
   }
   var watchID = navigator.accelerometer.watchAcceleration(
      accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

      setTimeout(function() {
         navigator.accelerometer.clearWatch(watchID);
      }, 10000);
   };

   function accelerometerError() {
      alert('onError!');
   };
	
}

अब अगर हम दबाते हैं GET ACCELERATIONबटन, हमें वर्तमान त्वरण मूल्य मिलेगा। अगर हम दबाते हैंWATCH ACCELERATIONबटन, हर तीन सेकंड में अलर्ट चालू हो जाएगा। तीसरे अलर्ट के बाद दिखाया गया हैclearWatch फ़ंक्शन को कॉल किया जाएगा और 10000 मिलीसेकंड पर टाइमआउट सेट करने के बाद हमें कोई अलर्ट नहीं मिलेगा।

कम्पास का उपयोग भौगोलिक उत्तरी कार्डिनल बिंदु के सापेक्ष दिशा दिखाने के लिए किया जाता है।

चरण 1 - डिवाइस ओरिएंटेशन प्लगइन स्थापित करें

को खोलो command prompt विंडो और निम्नलिखित चलाएँ।

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugindevice-orientation

चरण 2 - बटन जोड़ें

यह प्लगइन के समान है accelerationलगाना। अब दो बटन बनाते हैंindex.html।

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

अब, हम जोड़ देंगे event listeners के अंदर onDeviceReady में कार्य करते हैं index.js।

document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

चरण 4 - कार्य बनाना

हम दो कार्य बनाएंगे; पहला कार्य वर्तमान त्वरण उत्पन्न करेगा और दूसरा अभिविन्यास परिवर्तनों पर जाँच करेगा। आप देख सकते हैं कि हम इसका उपयोग कर रहे हैंfrequency हर तीन सेकंड में होने वाले परिवर्तनों पर नजर रखने के लिए फिर से विकल्प।

function getOrientation() {
   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

function watchOrientation(){
   var compassOptions = {
      frequency: 3000
   }
   var watchID = navigator.compass.watchHeading(compassSuccess, 
      compassError, compassOptions);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {
         navigator.compass.clearWatch(watchID);
      }, 10000);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

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

कॉर्डोवा डायलॉग्स प्लगइन प्लेटफॉर्म को मूल डायलॉग UI तत्व कहेगा।

चरण 1 - संवाद स्थापित करना

में निम्न कमांड टाइप करें command prompt विंडो इस प्लगइन को स्थापित करने के लिए।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

चरण 2 - बटन जोड़ें

अब खुलते हैं index.html और हर प्रकार के संवाद के लिए चार बटन जोड़ें।

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

अब हम ईवेंट श्रोताओं को अंदर जोड़ेंगे onDeviceReady में कार्य करते हैं index.js। एक बार संबंधित बटन पर क्लिक करने पर श्रोता कॉलबैक फ़ंक्शन को कॉल करेंगे।

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);

चरण 4 ए - अलर्ट फ़ंक्शन बनाएं

चूंकि हमने चार ईवेंट श्रोताओं को जोड़ा है, इसलिए अब हम उन सभी के लिए कॉलबैक फ़ंक्शन बनाएंगे index.js। पहले वाला हैdialogAlert।

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);
   
   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
}

अगर हम क्लिक करें ALERT बटन, हमें अलर्ट डायलॉग बॉक्स मिलेगा।

जब हम संवाद बटन पर क्लिक करते हैं, तो निम्न आउटपुट कंसोल पर प्रदर्शित होगा।

स्टेप 4 बी - कन्फर्म फंक्शन बनाएं

दूसरा फ़ंक्शन जिसे हमें बनाने की आवश्यकता है वह है dialogConfirm समारोह।

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }
	
}

जब CONFIRM बटन दबाया जाता है, नया संवाद पॉप अप होगा।

हम क्लिक करेंगे YESसवाल का जवाब देने के लिए बटन। कंसोल पर निम्न आउटपुट प्रदर्शित किया जाएगा।

स्टेप 4C - प्रॉम्प्ट फंक्शन बनाएं

तीसरा कार्य है dialogPromptसमारोह। यह उपयोगकर्ताओं को संवाद इनपुट तत्व में पाठ टाइप करने की अनुमति देता है।

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback, 
      title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);
   }
	
}

PROMPT बटन निम्नलिखित स्क्रीनशॉट के रूप में एक संवाद बॉक्स को ट्रिगर करेगा।

इस डायलॉग बॉक्स में, हमारे पास टेक्स्ट टाइप करने का एक विकल्प है। हम इस पाठ को सांत्वना में लॉग करेंगे, साथ में एक बटन जो क्लिक किया गया है।

चरण 4D - बीप फ़ंक्शन बनाएं

अंतिम एक है dialogBeepसमारोह। इसका उपयोग ऑडियो बीप अधिसूचना को कॉल करने के लिए किया जाता है। times पैरामीटर बीप सिग्नल के लिए दोहराए जाने की संख्या निर्धारित करेगा।

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

जब हम क्लिक करते हैं BEEP बटन, हम अधिसूचना ध्वनि को दो बार सुनेंगे, चूंकि times मान निर्धारित किया गया है 2।

इस प्लगइन का उपयोग उपयोगकर्ता के डिवाइस पर मूल फ़ाइल सिस्टम में हेरफेर करने के लिए किया जाता है।

चरण 1 - फ़ाइल प्लगइन स्थापित करना

हमें निम्नलिखित कोड चलाने की आवश्यकता है command prompt इस प्लगइन को स्थापित करने के लिए।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

चरण 2 - बटन जोड़ें

इस उदाहरण में, हम आपको दिखाएंगे कि फ़ाइल कैसे बनाएं, फ़ाइल में लिखें, इसे पढ़ें और इसे हटा दें। इस कारण से, हम चार बटन बनाएंगेindex.html। हम भी जोड़ेंगेtextarea जिसमें, हमारी फ़ाइल की सामग्री दिखाई जाएगी।

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>

चरण 3 - इवेंट श्रोताओं को जोड़ें

हम जोड़ देंगे event listeners में index.js के अंदर onDeviceReady यह सुनिश्चित करने के लिए फ़ंक्शन कि सब कुछ प्लगइन शुरू होने से पहले शुरू हो गया है।

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

चरण 4A - फ़ाइल फ़ंक्शन बनाएँ

डिवाइस पर ऐप्स रूट फ़ोल्डर में फ़ाइल बनाई जाएगी। आपके द्वारा प्रदान किए जाने वाले रूट फ़ोल्डर तक पहुंचने में सक्षम होने के लिएsuperuserआपके फ़ोल्डर्स तक पहुँच। हमारे मामले में, रूट फ़ोल्डर का मार्ग है\data\data\com.example.hello\cache। फिलहाल यह फोल्डर खाली है।

अब एक फंक्शन जोड़ते हैं जो log.txt फाइल बनाएगा। हम इस कोड को लिखेंगेindex.jsऔर फ़ाइल सिस्टम के लिए एक अनुरोध भेजें। यह विधि WINDOW.TEMPORARY या WINDOW.PERSISTENT का उपयोग करती है। भंडारण के लिए आवश्यक आकार बाइट्स में मूल्यवान है (हमारे मामले में 5 एमबी)।

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

अब हम इसे दबा सकते हैं CREATE FILE बटन और चेतावनी पुष्टि करेगी कि हमने फ़ाइल को सफलतापूर्वक बनाया है।

अब, हम अपने ऐप्स रूट फ़ोल्डर को फिर से जांच सकते हैं और हम अपनी नई फ़ाइल वहां पा सकते हैं।

चरण 4 बी - फ़ाइल फ़ंक्शन लिखें

इस चरण में, हम अपनी फ़ाइल में कुछ पाठ लिखेंगे। हम फिर से फाइल सिस्टम में एक अनुरोध भेजेंगे, और फिर लिखने के लिए सक्षम होने के लिए फाइल लेखक बनाएंगेLorem Ipsum पाठ जिसे हमने सौंपा है blob चर।

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

दबाने के बाद WRITE FILE बटन, अलर्ट हमें सूचित करेगा कि निम्नलिखित स्क्रीनशॉट में लेखन सफल है।

अब हम खोल सकते हैं log.txt और देखें कि Lorem Ipsum अंदर लिखा है।

चरण 4C - फ़ाइल फ़ंक्शन पढ़ें

इस चरण में, हम log.txt फ़ाइल को पढ़ेंगे और इसे प्रदर्शित करेंगे textareaतत्व। हम फ़ाइल सिस्टम को एक अनुरोध भेजेंगे और फ़ाइल ऑब्जेक्ट प्राप्त करेंगे, फिर हम बना रहे हैंreader। जब पाठक लोड हो जाता है, तो हम लौटाए गए मान को असाइन करेंगेtextarea।

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };
            reader.readAsText(file);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

जब हम क्लिक करते हैं READ FILE बटन, फ़ाइल से पाठ अंदर लिखा जाएगा textarea।

चरण 4D - फ़ाइल फ़ंक्शन हटाएं

और अंत में हम डिलीट करने के लिए फंक्शन बनाएंगे log.txt फ़ाइल।

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

हम अब दबा सकते हैं DELETE FILEएप्लिकेशन रूट फ़ोल्डर से फ़ाइल को हटाने के लिए बटन। अलर्ट हमें सूचित करेगा कि डिलीट ऑपरेशन सफल है।

यदि हम ऐप्स रूट फ़ोल्डर की जांच करते हैं, तो हम देखेंगे कि यह खाली है।

इस प्लगइन का उपयोग फ़ाइलों को अपलोड करने और डाउनलोड करने के लिए किया जाता है।

चरण 1 - फ़ाइल स्थानांतरण प्लगइन स्थापित करना

हमें खोलने की जरूरत है command prompt और प्लगइन को स्थापित करने के लिए निम्न कमांड चलाएं।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

चरण 2 - बटन बनाएँ

इस अध्याय में, हम आपको दिखाएंगे कि फ़ाइलों को कैसे अपलोड और डाउनलोड किया जाए। में दो बटन बनाते हैंindex.html

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

घटना श्रोताओं में बनाई जाएगी index.js के अंदर onDeviceReadyसमारोह। हम जोड़ रहे हैंclick घटनाओं और callback कार्य करता है।

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

चरण 4 ए - डाउनलोड फ़ंक्शन

इस फ़ंक्शन का उपयोग सर्वर से डिवाइस तक फ़ाइलों को डाउनलोड करने के लिए किया जाएगा। हमने फ़ाइल अपलोड कर दी हैpostimage.orgचीजों को और अधिक सरल बनाने के लिए। आप शायद अपने खुद के सर्वर का उपयोग करना चाहेंगे। समारोह में रखा गया हैindex.js और जब संबंधित बटन दबाया जाएगा ट्रिगर हो जाएगा। uri सर्वर डाउनलोड लिंक है और fileURI हमारे डिवाइस पर DCIM फ़ोल्डर का पथ है।

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },
		
      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },
		
      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

एक बार हम दबाते हैं DOWNLOAD बटन, फ़ाइल से डाउनलोड किया जाएगा postimg.orgहमारे मोबाइल डिवाइस के लिए सर्वर। हम निर्दिष्ट फ़ोल्डर की जांच कर सकते हैं और देख सकते हैंmyFile है।

कंसोल आउटपुट इस तरह दिखेगा -

चरण 4 बी - अपलोड फ़ंक्शन

अब एक फ़ंक्शन बनाते हैं जो फ़ाइल ले जाएगा और इसे सर्वर पर अपलोड करेगा। फिर से, हम इसे अधिक से अधिक सरल बनाना चाहते हैं, इसलिए हम इसका उपयोग करेंगेposttestserver.comपरीक्षण के लिए ऑनलाइन सर्वर। यूरी वैल्यू को पोस्ट करने के लिए लिंक किया जाएगाposttestserver।

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";
   
   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }
	
}

अब हम इसे दबा सकते हैं UPLOADइस फंक्शन को ट्रिगर करने के लिए बटन। हम एक कंसोल आउटपुट प्राप्त करेंगे जो पुष्टि करता है कि अपलोडिंग सफल थी।

हम यह सुनिश्चित करने के लिए सर्वर की भी जांच कर सकते हैं कि फाइल अपलोड की गई थी या नहीं।

डिवाइस के अक्षांश और देशांतर के बारे में जानकारी प्राप्त करने के लिए जियोलोकेशन का उपयोग किया जाता है।

चरण 1 - प्लगइन स्थापित करना

हम निम्न कोड टाइप करके इस प्लगइन को स्थापित कर सकते हैं command prompt खिड़की।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

चरण 2 - बटन जोड़ें

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

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

अब हम डिवाइस के तैयार होने पर ईवेंट श्रोताओं को जोड़ना चाहते हैं। हम नीचे दिए गए कोड नमूने को जोड़ देंगेonDeviceReady में कार्य करते हैं index.js।

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);

चरण 3 - कार्य बनाएँ

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

function getPosition() {
   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {
   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }
   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }
}

ऊपर के उदाहरण में हम दो तरीकों का उपयोग कर रहे हैं - getCurrentPosition तथा watchPosition। दोनों कार्य तीन मापदंडों का उपयोग कर रहे हैं। एक बार हम क्लिक करेंCURRENT POSITION बटन, अलर्ट जियोलोकेशन मान दिखाएगा।

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

ध्यान दें

यह प्लगइन GPS का उपयोग कर रहा है। कभी-कभी यह समय पर मान नहीं लौटा सकता है और अनुरोध टाइमआउट त्रुटि लौटाएगा। यही कारण है कि हमने निर्दिष्ट कियाenableHighAccuracy: true तथा maximumAge: 3600000.इसका अर्थ है कि यदि कोई अनुरोध समय पर पूरा नहीं होता है, तो हम इसके बजाय अंतिम ज्ञात मूल्य का उपयोग करेंगे। हमारे उदाहरण में, हम अधिकतम 3600000 मिलीसेकेंड पर सेट कर रहे हैं।

इस प्लगइन का उपयोग उपयोगकर्ताओं की स्थानीय भाषा, दिनांक और समय क्षेत्र, मुद्रा आदि के बारे में जानकारी प्राप्त करने के लिए किया जाता है।

चरण 1 - वैश्वीकरण प्लगइन स्थापित करना

खुला हुआ command prompt और निम्न कोड टाइप करके प्लगइन स्थापित करें

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

चरण 2 - बटन जोड़ें

हम कई बटन जोड़ेंगे index.html विभिन्न तरीकों को कॉल करने में सक्षम होने के लिए जिन्हें हम बाद में बनाएंगे।

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

इवेंट श्रोताओं को अंदर जोड़ा जाएगा getDeviceReady में कार्य करते हैं index.js यह सुनिश्चित करने के लिए कि हमारा उपयोग शुरू होने से पहले हमारा ऐप और कॉर्डोवा लोड हो गया है।

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

चरण 4 ए - भाषा समारोह

पहला फ़ंक्शन जो हम क्लाइंट के डिवाइस के रिटर्न BCP 47 भाषा टैग का उपयोग कर रहे हैं। हम इस्तेमाल करेंगेgetPreferredLanguageतरीका। समारोह में दो पैरामीटर हैं असफल औरonError। हम इस फंक्शन को जोड़ रहे हैंindex.js।

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
}

एक बार हम दबाते हैं LANGUAGE बटन, चेतावनी स्क्रीन पर दिखाई जाएगी।

चरण 4 बी - लोकेल फंक्शन

यह फ़ंक्शन क्लाइंट की स्थानीय सेटिंग्स के लिए BCP 47 टैग देता है। यह फ़ंक्शन उसी के समान है जिसे हमने पहले बनाया था। फर्क सिर्फ इतना है कि हम उपयोग कर रहे हैंgetLocaleName इस बार विधि।

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

जब हम क्लिक करते हैं LOCALE बटन, अलर्ट हमारे स्थान टैग को दिखाएगा।

चरण 4C - तिथि समारोह

इस फ़ंक्शन का उपयोग क्लाइंट की लोकेल और टाइमज़ोन सेटिंग के अनुसार रिटर्निंग डेट के लिए किया जाता है। date पैरामीटर वर्तमान तिथि है और options पैरामीटर वैकल्पिक है।

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

हम अब ऐप को चला सकते हैं और दबा सकते हैं DATE वर्तमान दिनांक देखने के लिए बटन।

अंतिम फ़ंक्शन जो हम दिखाएंगे, वह क्लाइंट के डिवाइस सेटिंग्स और आईएसओ 4217 मुद्रा कोड के अनुसार मुद्रा मान लौटा रहा है। आप देख सकते हैं कि अवधारणा समान है।

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

CURRENCY बटन अलर्ट को ट्रिगर करेगा जो उपयोगकर्ताओं को मुद्रा पैटर्न दिखाएगा।

यह प्लगइन अन्य विधियाँ प्रदान करता है। आप इसे नीचे दी गई तालिका में देख सकते हैं।

तरीका मापदंडों विवरण
getPreferredLanguage onSuccess, onError क्लाइंट की वर्तमान भाषा देता है।
getLocaleName onSuccess, onError क्लाइंट की वर्तमान लोकल सेटिंग्स लौटाता है।
dateToString दिनांक, onSuccess, onError, विकल्प क्लाइंट के लोकेल और टाइमज़ोन के अनुसार रिटर्न की तारीख।
stringToDate dateString, onSuccess, onError, विकल्प ग्राहक की सेटिंग के अनुसार एक तारीख पार्स।
getCurrencyPattern करेंसीकोड, onSuccess, onError क्लाइंट का मुद्रा पैटर्न लौटाता है।
getDatePattern onSuccess, onError, विकल्प क्लाइंट की डेट पैटर्न लौटाता है।
getDateNames onSuccess, onError, विकल्प क्लाइंट की सेटिंग के अनुसार महीनों, हफ्तों या दिनों के नामों की एक सरणी देता है।
isDayLightSavingsTime तिथि, सफलता, वापसी, त्रुटि यह निर्धारित करने के लिए उपयोग किया जाता है कि क्या दिन के समय की बचत ग्राहक के समय क्षेत्र और कैलेंडर के अनुसार सक्रिय है।
getFirstDayOfWeek onSuccess, onError क्लाइंट सेटिंग के अनुसार सप्ताह का पहला दिन लौटाता है।
numberToString नंबर, onSuccess, onError, विकल्प क्लाइंट की सेटिंग के अनुसार रिटर्न नंबर।
stringToNumber स्ट्रिंग, onSuccess, onError, विकल्प क्लाइंट की सेटिंग के अनुसार एक नंबर को पर्स करता है।
getNumberPattern onSuccess, onError, विकल्प क्लाइंट की सेटिंग के अनुसार नंबर पैटर्न देता है।

इस प्लगइन का उपयोग कॉर्डोवा ऐप के अंदर वेब ब्राउज़र खोलने के लिए किया जाता है।

चरण 1 - प्लगइन स्थापित करना

हमें इस प्लगइन को इनस्टॉल करना होगा command prompt खिड़की से पहले हम इसका उपयोग करने में सक्षम हैं।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

चरण 2 - बटन जोड़ें

हम एक बटन जोड़ेंगे जो खोलने के लिए उपयोग किया जाएगा inAppBrowser खिड़की में index.html।

चरण 3 - ईवेंट श्रोता जोड़ें

अब हमारे बटन के लिए ईवेंट श्रोता जोड़ें onDeviceReady में कार्य करते हैं index.js।

document.getElementById("openBrowser").addEventListener("click", openBrowser);

चरण 4 - फ़ंक्शन बनाएं

इस चरण में हम फ़ंक्शन बना रहे हैं जो हमारे ऐप के अंदर ब्राउज़र खोलेगा। हम इसे असाइन कर रहे हैंref चर जिसे हम बाद में ईवेंट श्रोताओं को जोड़ने के लिए उपयोग कर सकते हैं।

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

अगर हम दबाते हैं BROWSER बटन, हम स्क्रीन पर निम्न आउटपुट देखेंगे।

कंसोल घटनाओं को भी सुनेंगे। loadstart जब URL लोड हो रहा हो और तब ईवेंट आग लग जाएगा loadstopURL लोड होने पर आग लग जाएगी। हम इसे कंसोल में देख सकते हैं।

एक बार जब हम ब्राउज़र बंद कर देते हैं, exit घटना में आग लग जाएगी।

InAppBrowser विंडो के लिए अन्य संभावित विकल्प हैं। हम इसे नीचे दी गई तालिका में बताएंगे।

S.No विकल्प और विवरण
1

location

ब्राउज़र स्थान पट्टी को चालू या बंद करने के लिए उपयोग किया जाता है। मान हैंyes या no।
2

hidden

InAppBrowser को छिपाने या दिखाने के लिए उपयोग किया जाता है। मान हैंyes या no।
3

clearCache

ब्राउज़र कुकी कैश साफ़ करने के लिए उपयोग किया जाता है। मान हैंyes या no।
4

clearsessioncache

सत्र का उपयोग कुकी को साफ़ करने के लिए किया जाता है। मान हैंyes या no।
5

zoom

एंड्रॉइड ब्राउज़र के ज़ूम नियंत्रण को छिपाने या दिखाने के लिए उपयोग किया जाता है। मान हैंyes या no।
6

hardwareback

yes ब्राउज़र इतिहास के माध्यम से वापस नेविगेट करने के लिए हार्डवेयर बैक बटन का उपयोग करें। no ब्राउज़र को बंद करने के लिए एक बार बैक बटन पर क्लिक किया जाता है।

हम प्रयोग कर सकते हैं ref(संदर्भ) कुछ अन्य कार्यात्मकताओं के लिए चर। हम आपको इसके त्वरित उदाहरण दिखाएंगे। घटना श्रोताओं को हटाने के लिए हम उपयोग कर सकते हैं -

ref.removeEventListener(eventname, callback);

InAppBrowser को बंद करने के लिए हम उपयोग कर सकते हैं -

ref.close();

यदि हमने छिपी हुई खिड़की खोली, तो हम इसे दिखा सकते हैं -

ref.show();

यहां तक ​​कि जावास्क्रिप्ट कोड को InAppBrowser में इंजेक्ट किया जा सकता है -

var details = "javascript/file/url"
ref.executeScript(details, callback);

उसी अवधारणा का उपयोग सीएसएस को इंजेक्ट करने के लिए किया जा सकता है -

var details = "css/file/url"
ref.inserCSS(details, callback);

कॉर्डोवा मीडिया प्लगइन को कॉर्डोवा ऐप्स में ऑडियो ध्वनियों की रिकॉर्डिंग और खेलने के लिए उपयोग किया जाता है।

चरण 1 - मीडिया प्लगइन स्थापित करना

निम्नलिखित कोड चलाकर मीडिया प्लगइन स्थापित किया जा सकता है command prompt खिड़की।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

चरण 2 - बटन जोड़ें

इस ट्यूटोरियल में, हम साधारण ऑडियो प्लेयर बनाएंगे। आइए उन बटनों का निर्माण करें जिनकी हमें आवश्यकता हैindex.html।

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

अब हमें अपने बटनों के लिए ईवेंट श्रोताओं को अपने साथ जोड़ना होगा onDeviceReady अंदर कार्य करें index.js।

document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

चरण 4 ए - प्ले फ़ंक्शन

पहला फ़ंक्शन जिसे हम जोड़ने जा रहे हैं, वह है playAudio। हम परिभाषित कर रहे हैंmyMediaफ़ंक्शन के बाहर क्योंकि हम इसे उन कार्यों में उपयोग करना चाहते हैं जो बाद में जोड़े जाने वाले हैं (रोकें, रोकें, वॉल्यूमअप और वॉल्यूमडाउन)। इस कोड में रखा गया हैindex.js फ़ाइल।

var myMedia = null;
function playAudio() {
   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

हम क्लिक कर सकते हैं PLAY बटन पियानो संगीत शुरू करने के लिए src पथ।

चरण 4B - कार्य रोकें और रोकें

अगले कार्य जो हमें चाहिए होते हैं pauseAudio तथा stopAudio।

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop(); 
   }
   myMedia = null;
}

अब हम क्लिक करके पियानो ध्वनि को रोक या रोक सकते हैं PAUSE या STOP बटन।

चरण 4C - वॉल्यूम फ़ंक्शंस

वॉल्यूम सेट करने के लिए, हम उपयोग कर सकते हैं setVolumeतरीका। यह विधि मानों के साथ पैरामीटर लेती है0 सेवा 1। हम शुरुआती मूल्य निर्धारित करेंगे0.5।

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

एक बार हम दबाते हैं VOLUME UP या VOLUME DOWN हम द्वारा मात्रा मान बदल सकते हैं 0.1।

निम्न तालिका अन्य तरीकों को दिखाती है जो यह प्लगइन प्रदान करता है।

S.No विधि और विवरण
1

getCurrentPosition

किसी ऑडियो की वर्तमान स्थिति देता है।
2

getDuration

किसी ऑडियो की अवधि लौटाता है।
3

play

ऑडियो शुरू करने या फिर से शुरू करने के लिए उपयोग किया जाता है।
4

pause

ऑडियो रोकने के लिए उपयोग किया जाता है।
5

release

अंतर्निहित ऑपरेटिंग सिस्टम के ऑडियो संसाधनों को रिलीज़ करता है।
6

seekTo

एक ऑडियो की स्थिति बदलने के लिए उपयोग किया जाता है।
7

setVolume

ऑडियो के लिए वॉल्यूम सेट करने के लिए उपयोग किया जाता है।
8

startRecord

ऑडियो फ़ाइल रिकॉर्ड करना शुरू करें।
9

stopRecord

ऑडियो फ़ाइल रिकॉर्ड करना बंद करें।
10

stop

ऑडियो फ़ाइल चलाना बंद करें।

इस प्लगइन का उपयोग डिवाइस के कैप्चर विकल्पों तक पहुँचने के लिए किया जाता है।

चरण 1 - मीडिया कैप्चर प्लगइन स्थापित करना

इस प्लगइन को स्थापित करने के लिए, हम खुलेंगे command prompt और निम्नलिखित कोड चलाएं -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

चरण 2 - बटन जोड़ें

चूंकि हम आपको ऑडियो, छवि और वीडियो कैप्चर करना दिखाना चाहते हैं, इसलिए हम तीन बटन बनाएंगे index.html।

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

अगला चरण ईवेंट श्रोताओं को अपने साथ जोड़ना है onDeviceReady में index.js।

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

चरण 4 ए - ऑडियो फ़ंक्शन कैप्चर करें

में पहला कॉलबैक फ़ंक्शन index.js है audioCapture। ध्वनि रिकॉर्डर शुरू करने के लिए, हम उपयोग करेंगेcaptureAudioतरीका। हम दो विकल्पों का उपयोग कर रहे हैं -limit एकल कैप्चर ऑपरेशन के प्रति केवल एक ऑडियो क्लिप रिकॉर्ड करने की अनुमति देगा और duration एक ध्वनि क्लिप के सेकंड की संख्या है।

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

जब हम दबाते हैं AUDIO बटन, ध्वनि रिकॉर्डर खुल जाएगा।

कंसोल उन ऑब्जेक्ट्स की लौटी हुई सरणी दिखाएगा, जिन्हें उपयोगकर्ताओं ने कैप्चर किया था।

चरण 4B - छवि फ़ंक्शन कैप्चर करें

छवि कैप्चर करने का कार्य पिछले एक जैसा ही होगा। फर्क सिर्फ इतना है कि हम उपयोग कर रहे हैंcaptureImage इस बार विधि।

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

अब हम क्लिक कर सकते हैं IMAGE कैमरा शुरू करने के लिए बटन।

जब हम तस्वीर लेते हैं, तो कंसोल इमेज ऑब्जेक्ट के साथ एरे को लॉग करेगा।

चरण 4C - वीडियो फ़ंक्शन कैप्चर करें

आइए वीडियो को कैप्चर करने के लिए उसी अवधारणा को दोहराएं। हम इस्तेमाल करेंगेvideoCapture इस बार विधि।

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

अगर हम दबाते हैं VIDEO बटन, कैमरा खुल जाएगा और हम वीडियो रिकॉर्ड कर सकते हैं।

एक बार वीडियो सहेजा जाता है, कंसोल एक बार फिर से सरणी लौटाएगा। इस बार वीडियो ऑब्जेक्ट के साथ अंदर।

यह प्लगइन डिवाइस के नेटवर्क के बारे में जानकारी प्रदान करता है।

चरण 1 - नेटवर्क सूचना प्लगइन स्थापित करना

इस प्लगइन को स्थापित करने के लिए, हम खुलेंगे command prompt और निम्नलिखित कोड चलाएं -

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugin-network-information

चरण 2 - बटन जोड़ें

में एक बटन बनाते हैं index.html कि नेटवर्क के बारे में जानकारी प्राप्त करने के लिए इस्तेमाल किया जाएगा।

<button id = "networkInfo">INFO</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

हम तीन इवेंट श्रोताओं को अपने साथ जोड़ेंगे onDeviceReady में कार्य करते हैं index.js। एक हम पहले बनाए गए बटन पर क्लिक के लिए सुनेंगे और अन्य दो कनेक्शन स्थिति में परिवर्तन के लिए सुनेंगे।

document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

चरण 4 - कार्य बनाना

networkInfoबटन पर क्लिक करते ही फ़ंक्शन वर्तमान नेटवर्क कनेक्शन के बारे में जानकारी लौटा देगा। हम बुला रहे हैंtypeतरीका। अन्य कार्य हैंonOffline तथा onOnline। ये फ़ंक्शन कनेक्शन परिवर्तनों को सुन रहे हैं और कोई भी परिवर्तन संबंधित अलर्ट संदेश को ट्रिगर करेगा।

function networkInfo() {
   var networkState = navigator.connection.type;
   var states = {};
   states[Connection.UNKNOWN]  = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI]     = 'WiFi connection';
   states[Connection.CELL_2G]  = 'Cell 2G connection';
   states[Connection.CELL_3G]  = 'Cell 3G connection';
   states[Connection.CELL_4G]  = 'Cell 4G connection';
   states[Connection.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';
   alert('Connection type: ' + states[networkState]);
}

function onOffline() {
   alert('You are now offline!');
}

function onOnline() {
   alert('You are now online!');
}

जब हम नेटवर्क से जुड़ा ऐप शुरू करते हैं, onOnline फंक्शन अलर्ट को ट्रिगर करेगा।

अगर हम दबाते हैं INFO बटन अलर्ट हमारी नेटवर्क स्थिति दिखाएगा।

यदि हम नेटवर्क से डिस्कनेक्ट करते हैं, onOffline समारोह कहा जाएगा

इस प्लगइन का उपयोग एप्लिकेशन लॉन्च पर एक स्प्लैश स्क्रीन प्रदर्शित करने के लिए किया जाता है।

चरण 1 - स्प्लैश स्क्रीन प्लगइन स्थापित करना

स्प्लैश स्क्रीन प्लगइन में स्थापित किया जा सकता है command prompt निम्न कोड चलाकर विंडो।

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen

चरण 2 - स्प्लैश स्क्रीन जोड़ें

स्प्लैश स्क्रीन को जोड़ना अन्य कॉर्डोवा प्लगइन्स को जोड़ने से अलग है। हमें खोलने की जरूरत हैconfig.xml और निम्नलिखित कोड स्निपेट को अंदर जोड़ें widget तत्व।

पहला स्निपेट है SplashScreen। यह हैvalue संपत्ति जो छवियों का नाम है platform/android/res/drawable- फ़ोल्डर। कॉर्डोवा डिफ़ॉल्ट प्रदान करता हैscreen.pngऐसी छवियां जो हम इस उदाहरण में उपयोग कर रहे हैं, लेकिन आप शायद अपनी खुद की छवियां जोड़ना चाहेंगे। महत्वपूर्ण बात यह है कि चित्र और परिदृश्य दृश्य के लिए छवियों को जोड़ना और विभिन्न स्क्रीन आकारों को कवर करना है।

<preference name = "SplashScreen" value = "screen" />

दूसरा स्निपेट हमें जोड़ने की आवश्यकता है SplashScreenDelay। हम सेट कर रहे हैंvalue सेवा 3000 तीन सेकंड के बाद छप स्क्रीन को छिपाने के लिए।

<preference name = "SplashScreenDelay" value = "3000" />

अंतिम वरीयता वैकल्पिक है। यदि मान सेट हैtrue, स्क्रीन फिट करने के लिए छवि को बढ़ाया नहीं जाएगा। अगर यह करने के लिए सेट हैfalse, इसे बढ़ाया जाएगा।

<preference name = "SplashMaintainAspectRatio" value = "true" />

अब जब हम ऐप चलाते हैं, तो हम स्प्लैश स्क्रीन देखेंगे।

इस प्लगइन का उपयोग डिवाइस की कंपन कार्यक्षमता से कनेक्ट करने के लिए किया जाता है।

चरण 1 - कंपन प्लगइन स्थापित करना

हम इस प्लगइन को इनस्टॉल कर सकते हैं command prompt निम्न कोड चलाकर विंडो -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-vibration

चरण 2 - बटन जोड़ें

एक बार प्लगइन स्थापित हो जाने के बाद हम इसमें बटन जोड़ सकते हैं index.html जो बाद में कंपन को ट्रिगर करने के लिए उपयोग किया जाएगा।

<button id = "vibration">VIBRATION</button>
<button id = "vibrationPattern">PATTERN</button>

चरण 3 - इवेंट श्रोताओं को जोड़ें

अब हम इवेंट श्रोताओं को अपने साथ जोड़ने जा रहे हैं onDeviceReady में index.js।

document.getElementById("vibration").addEventListener("click", vibration);
document.getElementById("vibrationPattern").addEventListener("click", vibrationPattern);

चरण 4 - कार्य बनाएँ

इस प्लगइन का उपयोग करना बहुत आसान है। हम दो कार्य बनाएंगे।

function vibration() {
   var time = 3000;
   navigator.vibrate(time);
}

function vibrationPattern() {
   var pattern = [1000, 1000, 1000, 1000];
   navigator.vibrate(pattern);
}

पहला फ़ंक्शन समय पैरामीटर ले रहा है। इस पैरामीटर का उपयोग कंपन की अवधि निर्धारित करने के लिए किया जाता है। प्रेस करते ही डिवाइस तीन सेकंड के लिए वाइब्रेट होगाVIBRATION बटन।

दूसरा फ़ंक्शन उपयोग कर रहा है patternपैरामीटर। यह सरणी डिवाइस को एक सेकंड के लिए कंपन करने के लिए कहेगा, फिर एक सेकंड के लिए प्रतीक्षा करें, फिर प्रक्रिया को फिर से दोहराएं।

यह प्लगइन हमें ऐप के नेविगेशन के लिए श्वेतसूची नीति लागू करने की अनुमति देता है। जब हम एक नया कॉर्डोवा प्रोजेक्ट बनाते हैं, तोwhitelistप्लगइन डिफ़ॉल्ट रूप से स्थापित और कार्यान्वित किया जाता है। आप खोल सकते हैंconfig.xml देखने के लिए फ़ाइल allow-intent डिफ़ॉल्ट सेटिंग्स कोर्डोवा द्वारा प्रदान की गई हैं।

नेविगेशन श्वेतसूची

नीचे सरल उदाहरण में हम कुछ बाहरी URL के लिंक की अनुमति दे रहे हैं। इस कोड में रखा गया हैconfig.xml। के लिए नेविगेशनfile:// डिफ़ॉल्ट रूप से URL की अनुमति है।

<allow-navigation href = "http://example.com/*" />

तारांकन चिह्न, *, का उपयोग कई मूल्यों में नेविगेशन की अनुमति देने के लिए किया जाता है। उपरोक्त उदाहरण में, हम सभी उप-डोमेन को नेविगेशन की अनुमति दे रहे हैंexample.com। एक ही मेजबान के लिए प्रोटोकॉल या उपसर्ग के लिए लागू किया जा सकता है।

<allow-navigation href = "*://*.example.com/*" />

आशय श्वेतसूची

भी है allow-intentवह तत्व जो यह निर्दिष्ट करने के लिए उपयोग किया जाता है कि सिस्टम को खोलने के लिए कौन से URL की अनुमति है। आप में देख सकते हैंconfig.xml कॉर्डोवा ने पहले ही हमारे लिए अधिकांश आवश्यक लिंक की अनुमति दे दी थी।

नेटवर्क अनुरोध श्वेतसूची

जब तुम भीतर देखते हो config.xml फ़ाइल, वहाँ है <access origin="*" />तत्व। यह तत्व कॉर्डोवा हुक के माध्यम से हमारे ऐप के लिए सभी नेटवर्क अनुरोधों की अनुमति देता है। यदि आप केवल विशिष्ट अनुरोधों की अनुमति देना चाहते हैं, तो आप इसे config.xml से हटा सकते हैं और इसे स्वयं सेट कर सकते हैं।

उसी सिद्धांत का उपयोग पिछले उदाहरणों के रूप में किया जाता है।

<access origin = "http://example.com" />

यह सभी नेटवर्क अनुरोधों को अनुमति देगा http://example.com।

सामग्री सुरक्षा नीति

आप अपने ऐप के लिए वर्तमान सुरक्षा नीति को अंदर देख सकते हैं head में तत्व index.html।

<meta http-equiv = "Content-Security-Policy" content = "default-src 
   'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 
   'self' 'unsafe-inline'; media-src *">

यह डिफ़ॉल्ट कॉन्फ़िगरेशन है। यदि आप एक ही मूल से सब कुछ अनुमति देना चाहते हैं औरexample.com, तो आप उपयोग कर सकते हैं -

<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' foo.com">

आप सब कुछ भी अनुमति दे सकते हैं, लेकिन सीएसएस और जावास्क्रिप्ट को एक ही मूल में प्रतिबंधित कर सकते हैं।

<meta http-equiv = "Content-Security-Policy" content = "default-src *; 
   style-src 'self' 'unsafe-inline'; script-src 'self' 
   'unsafe-inline' 'unsafe-eval'">

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

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

सिंगल पेज एप्स

यह सभी कॉर्डोवा ऐप्स के लिए अनुशंसित डिज़ाइन है। एसपीए ग्राहक-साइड राउटर और एकल पृष्ठ पर लोड किए गए नेविगेशन (आमतौर पर) का उपयोग कर रहा हैindex.html)। मार्ग AJAX के माध्यम से नियंत्रित किया जाता है। यदि आपने हमारे ट्यूटोरियल्स का अनुसरण किया है, तो आपने देखा है कि लगभग हर कॉर्डोवा प्लगइन को डिवाइस के तैयार होने तक प्रतीक्षा करने की आवश्यकता होती है। एसपीए डिजाइन लोडिंग गति और समग्र प्रदर्शन में सुधार करेगा।

घटनाओं को स्पर्श करें

चूंकि कॉर्डोवा का उपयोग मोबाइल दुनिया के लिए किया जाता है इसलिए इसका उपयोग करना स्वाभाविक है touchstart तथा touchend के बजाय घटनाओं clickआयोजन। क्लिक की घटनाओं में 300ms देरी होती है, इसलिए क्लिक देशी नहीं लगते हैं। दूसरी ओर, स्पर्श कार्यक्रम हर प्लेटफ़ॉर्म पर समर्थित नहीं हैं। आपको क्या उपयोग करना है यह तय करने से पहले आपको इसे ध्यान में रखना चाहिए।

एनिमेशन

आपको हमेशा हार्डवेयर का उपयोग त्वरित करना चाहिए CSS Transitions जावास्क्रिप्ट एनिमेशन के बजाय चूंकि वे मोबाइल उपकरणों पर बेहतर प्रदर्शन करेंगे।

भंडारण

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

स्क्रॉल

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

इमेजिस

छवियाँ मोबाइल ऐप को भी धीमा कर सकती हैं। आपको जब भी संभव हो CSS छवि स्प्राइट का उपयोग करना चाहिए। चित्रों को पूरी तरह से तराशने के बजाय फिट करने की कोशिश करें।

सीएसएस शैलियों

आपको छाया और ग्रेडिएंट से बचना चाहिए, क्योंकि वे पृष्ठ के रेंडरिंग समय को धीमा कर देते हैं।

सरलीकरण

ब्राउज़र का DOM धीमा है, इसलिए आपको DOM के हेरफेर और DOM तत्वों की संख्या को कम करने की कोशिश करनी चाहिए।

परिक्षण

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved