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

अपनी पहली Ionic 2 ऐप को कोड करें: एक फोटो शेयर करने वाली ऐप

by
Difficulty:BeginnerLength:LongLanguages:

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

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

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

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

आप क्या बना रहे हैं

इस ट्यूटोरियल में, आप एक फोटो शेयरिंग ऐप बना रहे होंगे। बेसिक फ्लो नीचे दिए गए अनुसार होना चाहिए:

  1. यूज़र एप्लीकेशन को खुलता है और लॉगिन करता है। उन्हें पेज पर रीडायरेक्ट किया जाएगा ताकि वे शेयर करने के लिए इमेज को चुन सके।
  2. यूजर Pick Image बटन पर क्लिक करता है। इमेज पिकर सामने नजर आता है, और यूजर एक इमेज को चलता है। फिर उस इमेज को प्रीव्यू किया जाएगा।
  3. यूजर एक कैप्शन डालता है और इंस्टाग्राम ऐप पर इमेज को पास करने के लिए Share Image बटन पर क्लिक करता है।

यह ट्यूटोरियल आपको केवल Android डिवाइस पर ऐप चलाने का तरीका दिखाएगा, लेकिन Cordova (वह फ्रेमवर्क जिस पर Ionic चलता है) क्रॉस-प्लेटफॉर्म है। Ionic 2 में Android, IOS, और Windows के लिए बिल्ट-इन थीम है, इसलिए उन टूल्स के लिए भी अपने ऐप का एक वर्जन बनाना इसमें आसान होता है।

यहां देखें कि ऐप कैसी दिख रही है:

Completed photo sharing app

प्रोजेक्ट सेटअप

यदि आपने पिछले ट्यूटोरियल को भी फॉलो किया है तो आपका पहले से ही अपना Ionic 2 डेवलपमेंट एनवायरमेंट सेटअप हो गया होगा और आप का प्रोजेक्ट तैयार हो गया होगा। प्रोजेक्ट फोल्डर ट्री बनाने और Android पर डेप्लॉयमेंट के लिए तैयार करने के लिए हमने निम्नलिखित Ionic 2 CLI कमांड का उपयोग किया:

हमने कुछ उपयोगी प्लगिंस भी इंस्टॉल किए:

होम पेज पर कोड करना

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

src फोल्डर के अंदर 4 फोल्डर होते हैं:

  • app: यह वह जगह है जहां ऐप-वाइड कोड परिभाषित किए गए हैं। यदि ऐप शुरू होने पर आपको कोई खास को चलाने की आवश्यकता होती है, या आप ग्लोबल CSS अपडेट करना चाहते हैं तो यह वो जगह है।
  • assets: यह वह जगह है जहां assets जैसे कि इमेजेस को ऐप चलने पर कंटेंट की तरह प्रयोग किया जाता है।
  • pages: यह वह जगह है जहां इंडिविजुअल पेजेस के लिए कोड किए जाते हैं। हर पेज का अपना एक फोल्डर होता है, और हर एक फोल्डर के अंदर तीन फाइलें होते हैं जो पेज के टेंपलेट (HTML), styling (CSS), और स्क्रिप्ट (TypeScript) को परिभाषित करती है।
  • themes: यह वह जगह है जहां आप जाते हैं यदि आप डिफॉल्ट Ionic 2 टीम को मॉडिफाई करना चाहते हैं।

होम पेज टेंप्लेट

डिफ़ॉल्ट रूप से, Ionic का ब्लैंक खाली स्टार्ट टेंप्लेट पहले से ही एक होम पेज के साथ आता है। इसलिए आपको इसे अपनी इच्छा के अनुसार कंटेंट दिखाने के लिए एडिट करना होगा। pages/home/home.html फाइल को खोलें और इसके वर्तमान कंटेंट को हटा दें। पेज के टॉप पर निम्नलिखित को जोड़ें:

ऊपर दिए गए कोड में ऐप के हेडर के लिए ब्वॉयलरप्लेट है। <ion-navbar> कंपोनेंट एक नेवीगेशनल टूल बार के रूप में कार्य करता है। जब भी आप डिफॉल्ट पेज से दूर नेविगेट करेंगे तो यह ऑटोमेटिक रूप से एक बैक बटन दिखाएगा। <ion-title> नेव बार का टाइटल सेट करता है।

इसके बाद असली पेज कंटेंट आता है। आप इसे <ion-content> कॉम्पोनेंट के अंदर परिभाषित कर सकते हैं। padding ऑप्शन को निर्दिष्ट करके डिफॉल्ट padding को लागू किया जा सकता है। उस कंटेनर के अंदर, एक नई लिस्ट बनाएं जिसमें यूजरनाम और पासवर्ड एंटर करने के लिए इनपुट फील्ड मौजूद है। एडिट फील्ड्स को कंटेन करने के लिए एक लिस्ट बनाना Ionic में एक स्टैंडर्ड प्रैक्टिस है - यह आपको हर एक फील्ड को बड़े सफाई से एक दूसरे के ऊपर स्टैक करने की अनुमति देता है। लिस्ट के नीचे लॉगइन करने के लिए बटन है।

टेक्स्ट को एंटर करने और एक बटन क्लिक करने के लिए कोड को देखने के लिए कुछ समय लगाएं। Ionic में, आप <ion-input> कॉम्पोनेंट का उपयोग करके एक टेक्स्ट इनपुट फील्ड को परिभाषित कर सकते हैं। अपने पेज स्क्रिप्ट में परिभाषित 1 क्लास प्रॉपर्टी के लिए टेक्स्ट फील्ड को bind करने के लिए, [(ngModel)] उपयोग करें। फिर इसे दी गई वैल्यू क्लास की एक प्रॉपर्टी का नाम होता है।

दो-तरफा डाटा बाइंडिंग सेट करने के लिए, आप [(ngModel)] के लिए उपयोग किए गए उसी प्रॉपर्टी के नाम पर [value] सेट कर सकते हैं। यह आपको पेज स्क्रिप्ट से मॉडल की वैल्यू को बदलकर टेक्स्ट फील्ड की वैल्यू को अपडेट करने की अनुमति देता है। बाद में, आप देखेंगे कि पेज स्क्रिप्ट के अंदर एक क्लास प्रॉपर्टी को कैसे परिभाषित किया जाए।

बटन को परिभाषित करने के लिए, HTML में स्टैंडर्ड button एलिमेंट का उपयोग करें। यदि आप सोच रहे हैं कि यह <ion-button> क्यों नहीं है, तो यह एक्सेसिबिलिटी कारणों के वजह से है। बटन एक महत्वपूर्ण इंटरफ़ेस कंपोनेंट है, इस Ionic टीम ने उन्हें आसान बनाने के लिए स्टैंडर्ड HTML बटन के साथ ही रहने का फैसला किया। ion-button डायरेक्टिव इसके बजाय अतिरिक्त फंक्शनैलिटी प्रदान करने के लिए जोड़ा गया है।

Ionic 2 buttons

क्लिक हैंडलर जोड़ने के लिए, आप (click) डायरेक्टिव का प्रयोग करते हैं, उसके साथ वह वैल्यू होती है जो फंक्शन को बताती है ( जो कि आपके खुद के पेज स्क्रिप्ट में डिफाइन है) ताकि यह एग्जीक्यूट हो सके जब क्लिक इवेंट होता है।

होम पेज स्क्रिप्ट

pages/home/home.ts फाइल को खोलें, इसके सभी कंटेंट को हटा दें, और निम्नलिखित जोड़े:

ऊपर दिए गए कोड को ब्रेक करके, हम पहले Angular कॉम्पोनेंट क्लास को इंपोर्ट करते हैं जिसमें सभी ionic डायरेक्टिव पहले से ही शामिल हैं।

इसके बाद, हम ionic-angular पैकेज से नेविगेशन और अलर्ट के लिए कंट्रोलर्स को इंपोर्ट करते हैं। यह वह जगह है जहां सभी Ionic कंट्रोलर शामिल होते हैं।

उसके बाद, हम PickerPage को इंपोर्ट करेंगे। आप इसे बाद में बनाएंगे, इसलिए इसे अभी के लिए कमेंट ही छोड़ दें। एक बार लोड होने के लिए तैयार होने के बाद कमेंट को हटाना मत भूलना।

इंपोर्ट करने के बाद, स्क्रिप्ट द्वारा उपयोग किए जाने वाले HTML टेंप्लेट को स्पेसिफाई करने के लिए @Component डेकोरेटर का उपयोग करें:

अब हम अपने होम पेज की स्क्रिप्ट के लिए क्लास को परिभाषित कर सकते हैं। हम इस क्लास को इंपोर्ट करना चाहते हैं ताकि इसे ऐप में अन्य फाइलों से इंपोर्ट किया जा सके।

constructor में पैरामीटर के रूप में परिभाषित कर के, पूरे क्लास में NavController और AlertController उपलब्ध कराएं। यह आपको this.navCtrl उपयोग करने की अनुमति देता है। उदाहरण के लिए, जब आप किसी अन्य पेज पर नेविगेट करने के लिए NavController का उपयोग करना चाहते हैं।

अब हम अपने कंट्रोलर की प्रॉपर्टीज को परिभाषित करने के लिए तैयार हैं जिन्हें टेंप्लेट से रेफरेंस किया जा सकता है। इन प्रॉपर्टीज में यूजर नेम और पासवर्ड के लिए टेक्स्ट फील्ड की वर्तमान वैल्यू होगी:

चीजों को सरल रखने के लिए, हम यूजरनेम और पासवर्ड के लिए हार्ड-कोडेड वैल्यूज का उपयोग करेंगे। लेकिन वास्तविक दुनिया के एप्स के लिए, आप आमतौर पर यूजर को ऑथेंटिकेट करने के लिए एक सर्वर से रिक्वेस्ट करेंगे।

login() फंक्शन के अंदर, यूजर द्वारा गलत यूजरनेम या पासवर्ड इनपुट करने पर एक अलर्ट बनाएं:

यदि क्रेडेंशियल गलत है, तो अलर्ट दिखाएं:

Ionic 2 alerts

यदि यूज़र द्वारा यूजर नेम और पासवर्ड इनपुट हार्ड-कोडेड values शिमेल खाते हैं, तो नेवीगेशन स्टैक में पिकर पेज को पुष्ट करने के लिए NavController का उपयोग करें। जो भी पेज आफ नेवीगेशन स्टैक में पुश करेंगे वह वर्तमान पेज बन जाएगा, जबकि एक पेज को प्रभावी ढंग से पॉप करने से यह पिछले पेज पर नेविगेट होता है। यह वह तरीका है जिससे Ionic 2 में navigation कार्य करता है।

पिकर पेज

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

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

पिकर पेज टेंप्लेट

एक बार जब यह पूरा हो जाता है, pages/picker/picker.html फाइल को खोलें और बॉयलर प्लेट कोड को निम्न codes के साथ बदल दें:

hidden डायरेक्टिव और <ion-card> कॉम्पोनेंट के उपयोग के अलावा इस कोड में से कोई भी वास्तव में हमारे लिए अपरिचित नहीं है।

hidden डायरेक्टिव आपको अपने पेज स्क्रिप्ट में परिभाषित एक खास वैल्यू के आधार पर एक एलिमेंट को छुपाने की अनुमति देता है। तो अगर has_picked_image true है, तभी यह div दिखाई देगा।

cards को बनाने के लिए <ion-card> कॉम्पोनेंट का उपयोग किया जाता है। कार्ड्स एप्स के अंदर की इमेजेस को प्रदर्शित करने का एक शानदार तरीका है।

Ionic 2 card images

पिकर पेज स्टाइल

pages/picker/picker.scss फाइल को खोलें और उसमे निम्नलिखित को जोड़ें:

पिकर पेज स्क्रिप्ट

pages/picker/picker.ts फाइल को खोलें और उसमे निम्नलिखित को जोड़ें:

मैं इसे थोड़ा तोड़कर समझा लूंगा। पहले हम उन प्लगिंस को इंपोर्ट करते हैं जिन्हें आपने पहले इंस्टॉल किया था। ध्यान दें कि प्लगिंस सभी एक ही पैकेज (ionic-native) के अंडर इंस्टॉल किए गए हैं। यह वास्तव में अच्छा है क्योंकि हर एक प्लगइन को अपनी लाइन में इंपोर्ट करने के बजाय, आप इसे केवल एक ही लाइन में कर सकते हैं।

इसके बाद हम क्लास प्रॉपर्टीज को डिक्लेअर करते हैं:

जब Pick Image बटन पर क्लिक किया जाता है, तो इमेज पिकर के लिए ऑप्शन स्कोर डिफाइन करें। ये ऑफ आत्म-व्याख्यात्मक (self-explanatory) हैं, लेकिन मैंने हर एक को स्पष्ट करने के लिए कुछ कमेंट से जुड़े हैं।

width और height को निर्दिष्ट करने का मतलब यह नहीं है कि रिजल्टिंग इमेज उन सटीक चौड़ाई और ऊंचाई का ही प्रयोग करेंगे। इसका मतलब यह है कि Ionic उन डाइमेंशंस को अधिकतम चौड़ाई ऊंचाई के रूप में इस तरह से उपयोग करेगा कि एस्पेक्ट रेश्यो फिर भी बनाए रखा जा सके।

हम डाटा URI का उपयोग आउटपुट टाइप के रूप में कर रहे हैं क्योंकि Instagram लॉगइन केवल डाटा URI को स्वीकार करता है। इसका मतलब है कि आपको चौड़ाई, ऊंचाई, और क्वालिटी को कम से कम इस पर एडजस्ट करना होगा क्योंकि बेटा URK बहुत लंबा हो सकता है यदि क्वालिटी अधिक है - संपूर्ण इमेज URI स्ट्रिंग में इनकोडेड है! इससे ऐप क्रैश हो सकती है इसलिए डाटा URI के साथ काम करते समय कम क्वालिटी और छोटी इमेजेस के साथ रहना हमेशा एक अच्छा अभ्यास होता है।

इसके बाद, इमेज सिलेक्शन स्क्रीन को ट्रिगर करने के लिए Image Picker प्लगइन का उपयोग करें। क्योंकि हम सिर्फ एक इमेज की उम्मीद कर रहे हैं, हम रिजल्ट के array में पहले आइटम तक पहुंच सकते हैं। हमें डाटा URI के लिए प्रीफिक्स को भी रोकना होगा।

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

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

सब कुछ एक साथ लेकर आना

अंतिम स्टेप app/app.module.ts फाइल को खोलना है। यह ऐप का रूट मॉड्यूल है, जहां आप सभी पेज और प्रोवाइडर्स (जैसे डिफॉल्ट Ionic error हैंडलर) को परिभाषित करते हैं, जिसे आप पूरे ऐप में इस्तेमाल करेंगे।

सुनिश्चित करें की आपके द्वारा बनाए गए सभी पेज परिभाषित हैं, अन्यथा जब आप किसी ऐसे पेज पर जाते हैं जिसे परिभाषित नहीं किया गया है, तो आप को एक error मिलेगा मिलेगा। डिफ़ॉल्ट रूप से, HomePage पहले से ही यहां परिभाषित है, इसलिए आपको बस PickerPage को जोड़ना होगा। बस इसे फाइल के टॉप पर इंपोर्ट करें और फिर declarations और entryComponents array के अंडर में जोड़ें। ध्यान दें कि MyApp एक पेज नहीं है; यह एक कॉम्पोनेंट है जो पेजेस को लोड करने के लिए एक खाली शेल के रूप में कार्य करता है।

यदि आप app/app.components.ts फाइल को खोलते हैं, तो आप निम्नलिखित को देखेंगे:

यह वह जगह है जहां आप रुठ पेज को परिभाषित कर सकते हैं - वह पेज जो यूजर को ऐप खोलने के बाद दिखाई देगा। इस स्थिति में, HomePage रूट पेज है। यह इनीशिएलाइजेशन कोड एग्जीक्यूट करने के लिए भी सही है, क्योंकि यहां कोर्ट केवल एक बार एग्जीक्यूट होता है जब यूजर एप लॉन्च करता है। जब किसी चीज को इनिशियलाइज़ कर रहे हो ( जैसे कि ब्लूटूथ को इनेबल करने की अनुमति मांगना), तो आप हमेशा तब तक इंतजार करना चाहेंगे जब तक के platform.ready() इवेंट को फायर नहीं कर दिया जाता। केवल तब जब इवेंट को फायर कर दिया गया हो, तो आप यह सुनिश्चित कर सकते हैं कि नेटिव फंक्शन कॉल किए जा सकते हैं।

ऐप को चलाना

अब आप ऐप को मोबाइल डिवाइस या एम्युलेटर पर चलाने के लिए तैयार है। आप निम्न कमांड को एक्सेक्यूट करके ऐसा कर सकते हैं:

सुनिश्चित करें कि आपके पास आपके कंप्यूटर से जुड़ा कोई डिवाइस है या आपके पास किसी एम्युलेटर का रनिंग इंस्टेंस है जब आप ऊपर दिए गए कमांड को एग्जीक्यूट करते हैं। यदि यह अभी भी काम नहीं करता है, तो जांच करें कि आपने अपने डिवाइस में USB debugging को इनेबल किया है और adb devices को चलाएं। जो आपके कंप्यूटर को आपकी डिवाइस से कनेक्ट करने के लिए ट्रिगर करेगा। अपने डिवाइस में ऑथेंटिकेशन प्रॉम्प्ट दिखने के बाद सिर्फ उसे एंग्री कर ले।

यदि आप APK फाइल की एक कॉपी चाहते हैं ताकि आप इसे किसी दोस्त के साथ सांझा कर सकें, आप इसके बजाय निम्नलिखित को एग्जीक्यूट करके यह जनरेट कर सकते हैं:

यह platforms/android/build/outputs/apk फोल्ड में एक android-debug.apk फाइल बनाएगा।

निष्कर्ष

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

इस बीच, Ionic 2 पर हमारे कुछ अन्य ट्यूटोरियल भी देखें!

यदि आप Ionic 2 फ्रेमवर्क में गहराई से और व्यवहारिक परिचय चाहते हैं, तो हमारे कोर्स Getting Started With Ionic 2 की जांच करें।

इस कोर्स में, Reggie Dawson आप को Ionic के फ्रेम वर्क के बारे में सब कुछ सिखाएगा और आपको दिखाएगा की scratch से मोबाइल एप कैसे बनाई जाए। इस रास्ते में, आप Ionic कॉम्पोनेंट लाइब्रेरी के बारे में जानेंगे, TypeScript के साथ स्टैटिक-टाइप किए गए जावास्क्रिप्ट को प्रोग्रामिंग करने के बारे में और एक समृद्ध मीडिया API के साथ Ionic 2 ऐप को इंटीग्रेट करने के बारे में जानेंगे।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.