🕣 🕵🏿 🏣 JQuery मोबाइल और PhoneGap का उपयोग करके एक स्थिर वेबसाइट को मोबाइल एप्लिकेशन में बदलना ⬅️ 🔘 🍡

Android फ़ोन प्राप्त करने के बाद, brainexer वेबसाइट से मोबाइल एप्लिकेशन बनाने की चुनौती उत्पन्न हुई। चुनाव jQuery मोबाइल और PhoneGap पर गिर गया। इससे पहले, मोबाइल विकास के क्षेत्र में कोई ज्ञान नहीं था, इसलिए मुझे नई जानकारी की एक परत का एहसास करना था, जिससे मैं निचोड़ साझा करना चाहूंगा। नतीजतन, लेख एक छोटी सी त्वरित शुरुआत है - एचटीएमएल फाइलों के एक पैकेट से Google Play पर प्रकाशित आवेदन कैसे प्राप्त करें।

jQuery मोबाइल

सबसे पहले, हम सब कुछ अतिरेक (मेनू, पाद, आदि) को हटाते हैं और मुख्य सामग्री को डेटा-भूमिका = "सामग्री" में मानक टेम्पलेट में डालते हैं।

<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1></h1> </div> <div data-role="content"> <p></p> </div> </div> </body> </html>

हमें निर्माण से पहले js और css फ़ाइलों को स्थानीय संस्करणों में बदलना नहीं भूलना चाहिए।
मेनू को अनुक्रमिक-सेट और सूची से मिलकर एक समझौते के रूप में index.html के प्रारंभ पृष्ठ पर रखा जा सकता है

 <div data-role="collapsible-set" data-theme="b"> <div data-role="collapsible"> <h3> 1</h3> <ul data-role="listview"> <li><a href="page1.html"> 1</a></li> <li><a href="page2.html"> 2</a></li> </ul> </div> <div data-role="collapsible"> <h3> 2</h3> <ul data-role="listview"> <li><a href="page3.html"> 3</a></li> </ul> </div> </div>

JQuery मोबाइल में कई विषय हैं [ae] और हमारे द्वारा निर्दिष्ट डेटा-थीम विशेषता जिसका हम उपयोग करना चाहते हैं। "बी" नीला है।

यदि साइट मोडल संवादों का उपयोग करती है, तो उन्हें निम्नानुसार लागू किया जा सकता है। पृष्ठ पर ब्लॉक रखा गया है

 <div id="dialog1" data-role="page"> <div data-role="header"> <h1> </h1> </div> <div data-role="content"> <p> </p> </div> </div>

और एक लिंक देखें,

 <a data-rel="dialog" href="#dialog1">  </a>

जिस पर क्लिक करने से एक डायलॉग खुलेगा।

यदि पृष्ठ पर किसी भी अतिरिक्त मेनू की आवश्यकता है, तो इसे दाईं ओर हेडर में रखा जा सकता है। इस मामले में, शीर्षक को बाईं ओर स्थानांतरित किया जाना चाहिए, अन्यथा बटन इसके ऊपर चलेंगे।

 <div data-role="header"> <h1 style="text-align:left;margin-left:15px;"></h1> <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right"> <a data-rel="dialog" data-iconpos="notext" data-icon="gear" data-role="button" href="#dialog1"></a> <a data-rel="dialog" data-iconpos="notext" data-icon="bars" data-role="button" href="#dialog2"></a> </div> </div>

यहां हम बटन नियंत्रण डेटा-भूमिका = "बटन" का उपयोग करते हैं, जो आइकन डेटा-आइकन = "गियर" का उपयोग पाठ डेटा-आइकनपोस = "नोटेक्स" के बिना करता है।

वास्तव में यह संपूर्ण आधार है जो मुझे अपने आवेदन के लिए आवश्यक था। अन्य सभी नियंत्रण वेबसाइट पर पाए जा सकते हैं।
view.jquerymobile.com/1.3.2/dist/demos

PhoneGap

अगला कदम एपीके में हुई हर चीज को पैक करना है।
सबसे पहले, ndjs.org स्थापित किया गया है , फोनगैप के बाद ही स्थापित किया गया है

 npm install -g phonegap

HelloWorld ऐप बनाना

 phonegap create MyApp

सभी HTML फ़ाइलों को www फ़ोल्डर, index.html start पेज में रखा गया है।
आवेदन के निर्माण के लिए दो विकल्प हैं।
1) एंड्रॉइड एसडीके डाउनलोड करें और जब आप फोनगैप बिल्ड चलाते हैं, तो स्थानीय वातावरण का उपयोग किया जाएगा। एसडीके को स्थापित करने का मुख्य प्लस यह है कि एंड्रॉइड एमुलेटर का उपयोग करना संभव होगा, लेकिन इसमें एक माइनस भी है, यह काफी ब्रेकिंग है।
2) सेवा build.phonegap.com का उपयोग करें - जिसका मुख्य कार्य ठीक है ताकि डेवलपर को विभिन्न प्लेटफार्मों के लिए विधानसभा के लिए पर्यावरण को कॉन्फ़िगर करने की आवश्यकता न हो। यानी, sdk Android, Windows Phone को इंस्टॉल किए बिना, आप एपीके, xap, आदि का निर्माण कर सकते हैं। एकमात्र सवाल यह है कि उन पर क्या परीक्षण किया जाए। यदि आपके पास एक से अधिक एप्लिकेशन हैं, तो इस विकल्प का माइनस प्रकट होता है। चूंकि केवल एक निजी परियोजना की विधानसभा मुफ्त में उपलब्ध है।
Build.phonegap.com का उपयोग करके एक एप्लिकेशन बनाने के लिए, रन करें

 phonegap remote build android

प्लगइन्स।

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

 npm install -g cordova

और तदनुसार, एप्लिकेशन फ़ोल्डर में कमांड चलाएं

 cordova plugin add org.apache.cordova.media cordova plugin add org.apache.cordova.globalization

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

 cordova plugin list [ 'org.apache.cordova.globalization', 'org.apache.cordova.media' ]

Html में cordova.js का लिंक जोड़ें

 <script src="cordova.js"></script>

अब, उदाहरण के लिए, आप स्थान प्राप्त कर सकते हैं। देवियों के आयोजन के बाद आपी तक पहुंच होनी चाहिए।

 document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.globalization.getLocaleName( function (locale) { alert(locale.value); }, function (error) { alert(error); }); }

प्रतीक और स्क्रीनसेवर

फ़ोल्डरों में "www \ res \ icon \ android \" "www \ res \ screen \ android \" क्रमशः आइकन और स्क्रीनसेवर हैं। डिफ़ॉल्ट रूप से, PhoneGap लोगो के साथ चित्र हैं, इसलिए उन्हें अपने स्वयं के साथ प्रतिस्थापित करना अच्छा होगा। साथ ही, www \ में पड़े सामान्य डिफ़ॉल्ट आइकन को icon.png कहा जाता है

कॉन्फ़िगरेशन फ़ाइल

Config.xml फ़ाइल www फ़ोल्डर में है, आपको इसमें एप्लिकेशन आईडी, एप्लिकेशन संस्करण, नाम, विवरण और लेखक निर्दिष्ट करना होगा।

 <widget id="com.phonegap.helloworld" version="1.0.0"> <name>HelloWorld</name> <description> Hello World sample application that responds to the deviceready event. </description> <author email="support@phonegap.com" href="http://phonegap.com"> PhoneGap Team </author> </widget>

संस्करण जारी करें

Google Play पर प्रकाशित होने वाले एपीके के एक संस्करण का निर्माण करने के लिए, आपको JDK से keytool.exe उपयोगिता का उपयोग करके एक कीस्टोर फ़ाइल बनाने की आवश्यकता है और इसे build.phonegap.com पर अपलोड करना होगा। फिर से बनाएँ और TestApp-release.apk प्राप्त करें

गूगल प्ले

अंतिम चरण play.google.com/apps/publish/signup पर साइन अप करना है।

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

क्रॉस-प्लेटफॉर्म

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

JQuery मोबाइल और PhoneGap का उपयोग करके एक स्थिर वेबसाइट को मोबाइल एप्लिकेशन में बदलना