फोनगैप - पर्यावरण सेटअप

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

हम मानते हैं कि आप वेब तकनीकों से अच्छी तरह वाकिफ हैं और आपके वेब एप्लिकेशन को ऐप के रूप में भेजने के लिए तैयार हैं। क्योंकि PhoneGap केवल HTML, CSS और JavaScript का समर्थन करता है, इसलिए यह अनिवार्य है कि एप्लिकेशन को केवल इन तकनीकों का उपयोग करके बनाया जाए।

एक डेवलपर के नजरिए से, एक ऐप के पास अपने पैकेज में शामिल निम्नलिखित चीजें होनी चाहिए -

विन्यास फाइल
ऐप के लिए आइकन
सूचना या सामग्री (वेब तकनीकों का उपयोग करके निर्मित)

विन्यास

हमारे वेब ऐप को केवल एक कॉन्फ़िगरेशन फ़ाइल की आवश्यकता होगी जो इसकी सभी आवश्यक सेटिंग्स को कॉन्फ़िगर करने के लिए पर्याप्त होनी चाहिए। इसका नाम config.xml है। इस फ़ाइल में ऐप को संकलित करने के लिए आवश्यक सभी आवश्यक जानकारी शामिल है।

हमें हमारे उदाहरण के लिए config.xml देखें -

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets" 
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
   
   <name>Tutorials Point</name>
   
   <description>
      Tutorials Point Online Viewer
   </description>
   
   <author href = "http://tutorialspoint.com" email = "[email protected]">
      Tutorials Point
   </author>
   
   <preference name = "permissions" value = "none"/>
   
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "ldpi" />
		
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "mdpi" />
		
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "hdpi" />
		
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xhdpi" />
		
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
   
</widget>

सभी कॉन्फ़िगरेशन सामग्री <विजेट> टैग में लिपटे हुए हैं। इनका संक्षिप्त विवरण इस प्रकार है -

<widget id = ”app_id”>

आईडी विभिन्न ऐप स्टोर पर आपकी आरक्षित ऐप-आईडी है। यह रिवर्स-डोमेन नेम स्टाइल यानी com.tutorialspoint.onlineviewer आदि में है।

<widget version = "x.y.z">

यह xyz फॉर्मेट में ऐप का वर्जन नंबर है, जहां (x, y, z) पॉजिटिव पूर्णांक यानी 1.0.0 हैं, यह प्रमुख.मिनोर.पच वर्जन सिस्टम का प्रतिनिधित्व करता है।

<name> App Name</name>

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

<description> My First Web App </description>

यह एक संक्षिप्त विवरण है कि ऐप क्या है और यह क्या है।

<author> Author_Name </author>

इस फ़ील्ड में निर्माता या प्रोग्रामर का नाम होता है, जो आमतौर पर उस संगठन के नाम पर सेट होता है जो इस ऐप को लॉन्च कर रहा है।

<preferences name = "permissions" value = "none">

प्राथमिकताएँ टैग का उपयोग ऐप के लिए विभिन्न विकल्पों जैसे फुलस्क्रीन, बैकग्राउंडक्लोर और ओरिएंटेशन को सेट करने के लिए किया जाता है। ये विकल्प नाम और मूल्य जोड़ी में हैं। उदाहरण के लिए: name = "FullScreen" value = "true" आदि। क्योंकि हमें इनमें से किसी भी एडवांस सेटिंग की आवश्यकता नहीं है, हम सिर्फ किसी को भी परमिशन नहीं देते हैं।

<icon>

हमें हमारे ऐप्स में आइकन जोड़ने की अनुमति देता है। इसे विभिन्न तरीकों से कोडित किया जा सकता है, लेकिन चूंकि हम हर चीज का शॉर्ट-कट सीख रहे हैं, इसलिए यहां यह है। .srcआइकन छवि का मार्ग निर्धारित करता है। gap:platformयह निर्धारित करता है कि किस ओएस प्लेटफ़ॉर्म का उपयोग किया जाना है। gap:qualifierघनत्व है जो Android उपकरणों द्वारा उपयोग किया जाता है। IOS उपकरणों का उपयोग करेंwidth & height मापदंडों।

माउस

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

यहां हम फ़ोल्डर्स का उपयोग कर रहे हैं res/icon/ios तथा res/icon/android/drawable-xxxx.।

इस काम को तेजी से पूरा करने के लिए, आप 1024x1024 आकार का लोगो बना सकते हैं और makeappicon.com पर लॉग इन कर सकते हैं। यह वेबसाइट एंड्रॉइड और आईओएस प्लेटफॉर्म दोनों के लिए सभी आकारों के लोगो को तुरंत बनाने में आपकी मदद करेगी।