यह गाइड आपको सिखाएगा कि लोकप्रिय ऐप-बिल्डिंग प्लेटफॉर्म PhoneGap का उपयोग करके हाइब्रिड ऐप कैसे बनाया जाए। हम जो करने जा रहे हैं, वह आपकी वेबसाइट को एक इंस्टॉल करने योग्य .apk (Android एप्लिकेशन) फ़ाइल में बदल देता है जिसे किसी भी Android फ़ोन पर इंस्टॉल किया जा सकता है। जब ऐप लॉन्च किया जाता है, तो यह एंड्रॉइड के मूल वेबव्यू ब्राउज़र में आपकी वेबसाइट को आसानी से खोल देगा, लेकिन यह एक पूर्ण स्क्रीन ऐप के रूप में दिखाई देगा - कोई URL नेविगेशन बार या कोई अन्य सुराग जो आपकी वेबसाइट को केवल ब्राउज़र में प्रस्तुत किया जा रहा है।
आवश्यकताओं को
आपकी अपनी वेबसाइट (इस गाइड का पालन करने के उद्देश्य से, आप बस एक मुफ्त WordPress ब्लॉग शुरू कर सकते हैं)
GitHub खाता
PhoneGap खाता
Notepad ++ (या समान पाठ-संपादन सॉफ़्टवेयर जो कोड को पहचान सकता है)
ऐप आइकन बनाने के लिए फोटो एडिटिंग सॉफ्टवेयर (फोटोशॉप, जीआईएमपी, आदि)
कोडिंग टेम्पलेट
ये कोड टेम्प्लेट हैं जिन्हें आप इस गाइड के उद्देश्य के लिए उपयोग कर सकते हैं - वे PhoneGap के साथ विकसित मेरे अपने ऐप से हैं, लेकिन मैंने उनसे अपनी व्यक्तिगत जानकारी छीन ली है। सभी सही मापदंडों के साथ इन्हें स्क्रैच से सेट करने से मुझे समस्या निवारण के कई दिन लग गए, इसलिए मैं इन्हें आपकी सुविधा के लिए प्रदान कर रहा हूं। आपका स्वागत है!
> config.xml
> index.html
शुरू करना
अपने डेस्कटॉप पर एक फ़ोल्डर बनाएं और उसे कॉल करें ” www: ' बिना उद्धरण। यह प्रोजेक्ट की मुख्य निर्देशिका होगी, जहां PhoneGap बिल्डर आपके प्रोजेक्ट के लिए सभी फ़ाइलों को खोजने की उम्मीद करेगा। अब हम आपके ऐप के लिए एक आइकन बनाने जा रहे हैं।
अपना फोटो संपादन सॉफ्टवेयर खोलें और .PNG प्रारूप में एक नई छवि बनाएं। आपकी छवि सेटिंग्स इस तरह दिखनी चाहिए:
और अब आप अपना आइकन बना सकते हैं, उदाहरण के लिए मैं सिर्फ एक छोटा बटन बनाने जा रहा हूं:
छवि का आकार आपकी व्यक्तिगत फ़ोन स्क्रीन पर निर्भर करता है, लेकिन यदि आप कई उपकरणों के लिए एक ऐप विकसित करना चाहते हैं, तो आप निश्चित रूप से एक ही आइकन के कई आकार बना सकते हैं। यहाँ प्रयोग की जाने वाली छवि आकारों की एक तालिका है:
36 × 36 (120 डीपीआई / एलडीपीआई)
48 × 48 (160 डीपीआई / एमडीपीआई)
72 × 72 (240 डीपीआई / एचडीपीआई)
96 × 96 (320 डीपीआई / एक्सएचडीपीआई)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)
मैं स्क्रीन साइज़ और DPI के बारे में बात करते हुए बहुत लंबा समय नहीं बिताना चाहता, बस यह जानता हूँ कि DPI बहुत अधिक स्क्रीन रिज़ॉल्यूशन से संबंधित है। एक फ़ोन जो 1080 × 1920 स्क्रीन रिज़ॉल्यूशन का उपयोग करता है वह 480dpi का उपयोग करेगा, लेकिन ऐसा नहीं करता है अनिवार्य रूप से स्क्रीन आकार के साथ वास्तव में सहसंबंधी। फ़ोन में 5.2 ”स्क्रीन या 6” स्क्रीन हो सकती है और इसमें 1080 × 1920 रिज़ॉल्यूशन हो सकता है। लेकिन यह मार्गदर्शिका स्मार्टफोन स्क्रीन के बारे में नहीं है, तो चलिए आगे बढ़ते हैं।
अपना आइकन खींचने के बाद, इसे सहेजें icon.png और इसे अपने www: फ़ोल्डर के अंदर ले जाएं। यह बन जाएगा चूक आपके ऐप के लिए आइकन। यदि आप विभिन्न आकारों में आइकन बनाना चाहते हैं जो उपयोगकर्ता के स्क्रीन रिज़ॉल्यूशन से मेल खाएंगे, तो आप आइकन को विभिन्न आकारों और नामों में सहेजेंगे, उदाहरण के लिए Icon144.png, Icon192.png, Icon96.png, और इसी तरह। फिर आप संपादित करेंगे config.xml प्रत्येक व्यक्तिगत आइकन को इंगित करने के लिए फ़ाइल। पर चलते हैं।
तो अब जब आपके पास अपने ऐप के लिए एक आइकन है, तो आपको एक छप छवि की आवश्यकता है। यह मूल रूप से एक लोडिंग स्क्रीन है, जैसे कि एक वॉलपेपर जो आपके ऐप के लोड होने से पहले प्रदर्शित करता है। स्प्लैश इमेज साइज आइकन के समान सिद्धांत पर काम करते हैं, लेकिन थोड़े बड़े होते हैं। यहाँ तालिका है:
- LDPI:
- पोर्ट्रेट: 200x320px
- लैंडस्केप: 320x200px
- MDPI:
- पोर्ट्रेट: 320x480px
- लैंडस्केप: 480x320px
- HDPI:
- पोर्ट्रेट: 480x800px
- लैंडस्केप: 800x480px
- XHDPI:
- पोर्ट्रेट: 720px1280px
- लैंडस्केप: 1280x720 पिक्सेल
- XXHDPI:
- पोर्ट्रेट: 960px1600px
- लैंडस्केप: 1600x960px
- XXXHDPI:
- पोर्ट्रेट: 1280px1920px
- लैंडस्केप: 1920x1280px
तो अपने डिवाइस के लिए रिज़ॉल्यूशन में अपनी स्प्लैश छवि बनाएं, इसे सहेजें splash.png और फिर इसे अपने प्रोजेक्ट के फ़ोल्डर में ले जाएं। बहुत बढ़िया, अब आपके पास अपने ऐप की आइकन और स्प्लैश इमेज है, आइए अपनी कॉन्फिग और इंडेक्स फ़ाइलों को सेट करें।
Index.HTML और Config.XML समझाया
Config.xml फ़ाइल वह है जो बिल्ड वातावरण (Android, iPhone, Windows Phone), आइकन और स्प्लैश स्थानों को सेट करती है, और अपाचे कॉर्डोवा प्लग-इन जिसे आप अपने ऐप में उपयोग करना चाहते हैं।
नोटपैड + में दिए गए टेम्पलेट को खोलें और आप इन लाइनों को शीर्ष के पास देखेंगे:
अपनी जानकारी के साथ उन क्षेत्रों को अपडेट करें, लेकिन अकेले 'वरीयता' फ़ील्ड छोड़ दें। यदि आप केवल मानों को देखते हैं, तो शेष फ़ाइल का विन्यास स्व-व्याख्यात्मक है। उदाहरण के लिए वरीयता नाम = 'फुलस्क्रीन' खुद को पूर्णस्क्रीन ऐप के रूप में लॉन्च करने के लिए ऐप को बताता है। फ़ाइल के निचले भाग में इस अंतिम मान को छोड़कर, सब कुछ अकेला छोड़ दें:
इसे अपने वास्तविक वेबसाइट URL में बदलें। यह एप्लिकेशन उपयोगकर्ता को आपकी वेबसाइट को पूरी तरह से नेविगेट करने की अनुमति देगा, और केवल आपकी वेबसाइट - वे आपके ऐप का उपयोग करते समय आपकी वेबसाइट को नहीं छोड़ सकते। बेशक ऐप में URL नेविगेशन बार नहीं होगा, यह वास्तव में एक चिंता का विषय नहीं है, लेकिन यह भी सुनिश्चित करता है कि उपयोगकर्ता आपकी वेबसाइट पर सभी पृष्ठों तक पहुंच सकता है। वेबसाइट यूआरएल के बाद * वाइल्डकार्ड , जो कोडिंग शब्दजाल में इसका मतलब है कि यह कुछ भी स्वीकार करेगा जो * साइन के स्थान पर दर्ज किया गया है।
बेशक, यदि आप उपयोगकर्ता को अपनी वेबसाइट के केवल कुछ पृष्ठों तक सीमित करना चाहते हैं, तो आप इस तरह से अलग मान जोड़ेंगे:
चलो आगे बढ़ते हैं index.html फ़ाइल, यह वास्तव में काम करने वाले ऐप बनाने की रोटी और मक्खन है। इसे नोटपैड ++ के अंदर खोलें और दस्तावेज़ की भाषा को एचटीएमएल में स्विच करें। Index.html मूल रूप से एंड्रॉइड ब्राउज़र को आपकी वेबसाइट को प्रदर्शित करने का तरीका बताता है - मेरे द्वारा दिए गए टेम्पलेट में, ब्राउज़र से URL नेविगेशन बार को हटाने के लिए टैग हैं, ऐप से बाहर निकलने के लिए फोन के 'बैक' बटन की अनुमति दें, और लॉन्च करें छप स्क्रीन के बाद एप्लिकेशन प्रदर्शित होता है। आप जिस लाइन को बदलना चाहते हैं, वह यहां है:
var url = ‘http://yourwebsite.com '
PhoneGap बिल्ड में ऐप का निर्माण
इसलिए अपने GitHub खाते में प्रवेश करें, और अपने भंडार के मुख्य पृष्ठ पर जाएँ। रिपॉजिटरी नाम के तहत, 'फाइल अपलोड करें' पर क्लिक करें, और अपने प्रोजेक्ट फ़ोल्डर को फाइल ट्री स्क्रीन में खींचें। अब नीचे एक संदेश लिखें, जैसे ' मेरा पहला ऐप प्रयास ” । अंत में कमिट चेंजेस पर क्लिक करें।
अब जाना है फोनगैप बिल्ड पेज और साइन इन करें। अब बिल्ड पेज पर 'न्यू ऐप' बटन पर क्लिक करें। यह आपको अपने GitHub रिपॉजिटरी में पथ दर्ज करने के लिए कहेगा, इसलिए ऐसा करें, और फिर '.गित रिपॉजिटिटी से पुल' पर क्लिक करें।
अब मुख्य बिल्ड पेज पर वापस 'अपडेट कोड' और 'नवीनतम खींचो' पर क्लिक करें।
अंत में, 'बिल्ड' पर क्लिक करें। यह आपके ऐप को एक .apk फ़ाइल में संकलित करेगा, और फिर आपको .apk डाउनलोड करने के विकल्प के साथ प्रस्तुत करेगा। अब आप इस .apk फ़ाइल को अपने कंप्यूटर पर डाउनलोड कर सकते हैं और इसे अपने फ़ोन में स्थानांतरित कर सकते हैं, फिर इसे वहाँ से इंस्टॉल कर सकते हैं। वैकल्पिक रूप से, आप अपने एंड्रॉइड डिवाइस पर .apk फ़ाइल को स्वचालित रूप से स्थापित करने के लिए अपने कंप्यूटर स्क्रीन पर QR कोड को स्कैन करने के लिए अपने फोन का उपयोग कर सकते हैं।
बस! अब, आपको कुछ महत्वपूर्ण बातें समझाने के लिए:
- यह एक अत्यंत सरलीकृत मार्गदर्शिका थी जो हाइब्रिड ऐप्स के सबसे बुनियादी निर्माण के माध्यम से आपके पास आई थी। आमतौर पर लोग अपनी वेबसाइट को एक देशी ब्राउज़र में लपेटकर और इसे Google Play स्टोर पर Android ऐप के रूप में बंद कर देते हैं। लेकिन अब जब आप जानते हैं कि यह कैसे करना है, तो आप अपने ऐप को कस्टमाइज़ करने और इसमें बहुत सारे स्वाद जोड़ने के लिए PhoneGap डॉक्यूमेंट पढ़ना शुरू कर सकते हैं, ताकि आप उम्मीद कर सकें कि वास्तव में उपयोगी ऐप बन सके।
- दूसरे, Google Play राजस्व के एकमात्र उद्देश्य के लिए लिंक-स्कीम ऐप बनाने के लिए इस तरह की ऐप-बिल्डिंग पद्धति पर प्रतिबंध लगाता है। इसलिए आप 'आज कमाएँ पैसा' नामक एक ऐप नहीं बना सकते हैं! जो विज्ञापन राजस्व पर विज्ञापनों और बैंक से भरी एक वेबसाइट खोलता है। आपको Google Play स्टोर से प्रतिबंधित कर दिया जाएगा।
