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

Ionic सर्विसेज के साथ आरंभ करें: डेप्लॉय (Deploy)

by
Difficulty:IntermediateLength:LongLanguages:

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

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

इस पोस्ट में, हम Ionic डेप्लॉय पर एक नजर डालने जा रहे हैं। यह रीकंपाइल और रीसब्मिट करने की जरूरत के बिना अपने Ionic ऐप में परिवर्तनों को पब्लिश करने और इसे ऐप स्टोर में फिर से सबमिट करने की अनुमति देता है। ऐप पर बग फिक्स, मामूली अपडेट और अन्य कॉस्मेटिक परिवर्तनों को जल्दी से पुष्ट करने के लिए यह बहुत उपयोगी है। “Deploy Channels” फीचर के साथ, आप अलग-अलग रिप्लाई चैनलों में अलग अलग कोड परिवर्तनों को शुरू करके A/B टेस्ट्स भी कर सकते हैं।

वे सभी परिवर्तन नहीं जो आप अपने ऐप में इंट्रोड्यूस कराना चाहते हैं, उन्हें Ionic डेप्लॉय का उपयोग करके पुश किया जा सकता है। केवल आपके www डायरेक्टरी के अंडर में आप के HTML, CSS, JavaScript और एसेट में परिवर्तन इस तरह से पुश किए जा सकते हैं। Cordova प्लेटफॉर्म के वर्जन के अपडेट्स, Cordova के प्लगिंस (या तो पहले से मौजूद को अपडेट करने वाले या नए जोड़ने वाले) जैसे बायनरी परिवर्तन, और आइकन और स्प्लैश स्क्रीन जैसे ऐप के एसेट को Ionic डेप्लॉय का उपयोग करके पुश नहीं किया जा सकता है।

यह किस तरह से काम करता है

आपकी Ionic ऐप में, आपके पास कौन हो सकता है जो उपलब्ध डेप्लॉयमेंट (अपडेट) को चेक करेगा। डिफ़ॉल्ट रूप से, यह production चैनल में डिप्लोमेट्स के लिए चेक करेगा। लेकिन आप दूसरे चैनल्स को भी स्पेसिफाई कर सकते हैं ताकि उनसे अपडेट्स प्राप्त कर सकें।

उसके बाद आप अपने परिवर्तनों को ionic upload कमांड का प्रयोग करके पुश कर सकते हैं। यह आपके परिवर्तनों को Ionic Cloud पर अपलोड कर देगा। एक बार जब यह अपलोड हो जाते हैं, आप चुन सकते हैं कि कौन से चैनल से आप डेप्लॉय करना चाहते हैं, और साथ ही साथ क्या आप डेप्लॉय अभी करना चाहते हैं या बाद में कभी।

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

आप क्या बनाएंगे

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

सेटअप करना

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

ऊपर दी गई कमांड टैब्स टेंप्लेट का उपयोग करके एक नई ऐप बनाएगी। एक बार इसे इंस्टॉल करने के बाद deployApp डायरेक्टरी के अंदर नेविगेट।

इसके बाद, आपको @ionic/could-angular पैकेज को इंस्टॉल करने की आवश्यकता होगी। यह Ionic क्लाउड सर्विस के लिए जावास्क्रिप्ट की एक लाइब्रेरी है। यह हमें जावास्क्रिप्ट कोड की मदद से Ionic डेप्लॉय सर्विस और अन्य Ionic सर्विसेज के साथ इंटरेक्ट करने की अनुमति देता है।

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

यह आपके Ionic एप्स के डैशबोर्ड के अंडर में एक नई ऐप बनाएगा, जिसका नाम है “deployApp” (या जब भी आप एक नई Ionic ऐप को बूटस्ट्रैप करते हुए उसे जो भी नाम देते हैं)।

एक बार जब आप यह वेरीफाई कर लेते हैं कि ऐप आपके Ionic फेसबुक पर लिस्टेड है, तो टर्मिनल पर वापस जाएं और Deploy प्लगइन को इंस्टॉल करें:

ध्यान दें कि यह plugin वह है जो वास्तव में मुश्किल काम करता है। @ionic/cloud-angular पैकेज केवल एक Ionic ऐप के अंदर Ionic सर्विसेज के साथ आसानी से काम करने के लिए आवश्यक API को एक्सपोज करता है।

डेप्लॉय के साथ काम करना

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

यह आपको यह जांचने की अनुमति देता है कि आपने जो कोड जोड़ा है वह काम कर रहा है या नहीं। इस तरह आप एक एरर देखते ही आवश्यक सुधार कर सकते हैं।

src/app/app.module.ts फाइल को खोलें। SplashScreen इंपोर्ट के अंडर में, Ionic क्लाउड के साथ काम करने के लिए आवश्यक सर्विसेज को इंपोर्ट करें:

इसके बाद, अपने Ionic ऐप  के app_id को जोड़ें। आप इसे ऐप  के नाम के ठीक नीचे अपने Ionic ऐप  के डैशबोर्ड पर पा सकते हैं।

एक बार आपने इसे जोड़ लिया, तो अब आप इसे ऐप के एक मॉड्यूल के रूप में शामिल कर सकते हैं:

इसके बाद src/app/app.component.ts फाइल को खोलें। TabsPage इंपोर्ट के ठीक नीचे, निम्नलिखित को शामिल करें:

constructor() में, उन सर्विसेज को जोड़ें जिन्हें हमने पहले इंपोर्ट किया था:

डेप्लॉयमेंट चैनल सेट करना

क्योंकि हम अभी भी ऐप डेवलप कर रहे हैं, डेप्लॉयमेंट चैनल को dev पर सेट करें:

बाद में, यदि आप प्रोडक्शन चैनल पर स्विच करना चाहते हैं, तो आप बस इस लाइन को हटा सकते हैं क्योंकि production डेप्लॉयमेंट के लिए डिफ़ॉल्ट चैनल है। यदि आपने यहां कोई और चैनल भी बनाया है, तो आप यहां उसका नाम भी शामिल कर सकते हैं।

स्नैपशॉट के साथ काम करना

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

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

अपडेट के लिए चेक करना

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

यदि स्नैपशॉट डाउनलोड के लिए उपलब्ध है, तो आप getMetaData() मेथड को कॉल करके इसके बारे में अतिरिक्त जानकारी प्राप्त कर सकते हैं। इस मेटा डाटा को Ionic ऐप डैशबोर्ड के माध्यम से एक डेप्लॉय में जोड़ा जा सकता है। key-value के जोड़े को यहां जोड़ सकते हैं, और उनमें से हर एक metadata ऑब्जेक्ट के लिए एक प्रॉपर्टी के रूप में उपलब्ध हो जाता है। बाद में, हम एप्लीकेशन में दिखाए गए मैसेजेस को हर बार नया अपडेट उपलब्ध होने के लिए कस्टमाइज करने के लिए मेटा डाटा का उपयोग करेंगे।

इसके बाद, यूजर को यह तय करने के लिए एक कन्फर्मेशन अलर्ट मैसेज दिखाएं कि वे अपडेट डाउनलोड करना चाहते हैं या नहीं:

आप चिंतित हो सकते हैं कि यह यूजर को नाराज कर देगा यदि वे अपने ऐप को अपडेट करने के लिए प्रांप्ट प्राप्त करना जारी रखते हैं यदि वे “No” का जवाब देते रहे। अधिकतर, हालांकि, यह वास्तव में एक अच्छी बात है। किसी यूज़र द्वारा किसी अपडेट को रिजेक्ट करने का कोई कारण नहीं होना चाहिए यदि वह उनके अनुभव को बेहतर बनाने वाला हो।

अपडेट्स को डाउनलोड और अप्लाई करना

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

उन सभी परिवर्तनों के बाद अपडेट किए गए app.components.ts फाइल को कैसा दिखना चाहिए, इस पर एक नजर डालें।

डिवाइस पर ऐप को इंस्टॉल करना

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

आगे बढ़ें और अपने Ionic प्रोजेक्ट में Android प्लेटफॉर्म को जोड़ें और निम्न कमांड के साथ .apk फाइल को बनाएं:

यह platforms/android/build/outputs/apk फोल्डर के अंदर एक android-debug.apk फाइल को बनाएगा। इसे अपने डिवाइस पर कॉपी करें और इंस्टॉल करें।

परिवर्तनों को पुश करना

अब हमारे लिए ऐप में कुछ बदलाव लाने का समय है। इसे आजमाने के लिए, बस ऐप UI में कुछ छोटे बदलाव करें। और अब आप परिवर्तनों को अपलोड कर सकते हैं।

मेटा डाटा को जोड़ना

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

add metadata

इसके बाद अपने परिवर्तनों को कमिट करने के लिए Save बटन पर क्लिक करें। अंत में, रिलीज को डेप्लॉय करने के लिए Deploy बटन पर क्लिक करें। जैसे ही ऐप परिवर्तनों को ले लेता है, वह मेटा डाटा जो आपने सप्लाई किया था उपलब्ध हो जाता है।

आप देख सकते हैं कि यह अब रिलीज के वर्जन नंबर को दिखाता है।

version number

वर्जनिंग

कभी-कभी आप एक अपडेट को Ionic डेप्लॉय के साथ पुश करके बाहर करना चाहेंगे, लेकिन उन पैकेज को App Store में बंडल किए गए एप्लिकेशन के साथ रीबिल्ड और शिप भी करेंगे। हालांकि, ध्यान रखें, क्योंकि Ionic नहीं जानता है कि आपकी ऐप में पहले से ही वह अपडेट मौजूद है, और आपका ऐप यूजर को लेटेस्ट अपडेट डाउनलोड करने के लिए प्रेरित करेगा, जब आपका ऐप पहली बार चलाया जाएगा।

वर्जनिंग फीचर इसे रोकने में मदद कर सकता है। वर्जन फीचर के साथ, आप उस स्पेसिफाई कर सकते हैं जो अपडेट प्राप्त कर सकता है।

  • Minimum: केवल तभी प्रदर्शित होता है जब करंट ऐप का वर्जन इस वर्जन के बराबर या अधिक हो।
  • Maximum: यह केवल तभी डेप्लॉय होता है यदि करंट ऐप का वर्जन इसके वर्जन से छोटा या बराबर हो।
  • Equivalent: डेप्लॉय को परफॉर्म नहीं करता यदि करंट ऐप का वर्जन इसके वर्जन के बराबर हो।

आप किसी खास रिलीज पर EDIT लिंक पर क्लिक करके और फिर VERSIONING टैब पर जाकर वर्जन की इंफॉर्मेशन जोड़ सकते हैं। वहां से, आप उन वर्जन (या तो IOS या Android) को स्पेसिफाई कर सकते हैं जिन्हें आप टारगेट करना चाहते हैं।

Versioning

Ionic यह करता है कि इस वर्जन की तुलना आप के द्वारा अपने config.xml में बताए गए वर्जन से करता है:

यदि ऐप का वर्जन स्पेसिफी किये गए minimum और maximum के बीच में होता है, तो रिलीज को पिक कर लिया जाता है। और अगर ऐप का वर्जन equivalent वर्जन की वैल्यू के बराबर होता है, रिलीज को अनदेखा कर दिया जाता है। इसलिए ऊपर दिए गए स्क्रीनशॉट के लिए, यदि config.xml फाइल में इंडिकेट किया वर्जन 0.0.1 है, तो रिलीज को ऐप द्वारा अनदेखा कर दिया जाएगा।

एसेट अपडेट

अगला बदलाव जो हम करने जा रहे हैं वह है इमेज को दिखाना।

पहली चीज जो आपको करने की जरूरत है वह है एक इमेज को ढूंढना। इसे src/assets/img फोल्डर के अंदर रख दें और इसे src/pages/home/home.html फाइल के अंदर लिंक करें:

अपने परिवर्तनों को एक नए रिलीज के रूप में Ionic डेप्लॉय पर अपलोड करें।

एक बार अपलोड होने के बाद, अब Ionic ऐप डैशबोर्ड पर जाएं और मेटा डाटा में नोट और रिलेटेड version के साथ रिलीज को अपडेट करें। परिवर्तनों को सेव करें और इसे डेप्लॉय करें।

ऐप को खोलने पर अब उसे इस नई रिलीज को चुनना चाहिए, और इसे अपडेट करने से UI में सभी परिवर्तन अप्लाई होंगे।

asset changes

चैनल्स को डेप्लॉय करें

डिफ़ॉल्ट रूप से, Ionic डेप्लॉय में तीन चैनल होते हैं जिन्हें आप इनमें डेप्लॉय कर सकते हैं: dev, staging, और production। लेकिन आप अपने ऐप के अपडेट को सुनने के लिए नए चैनल भी बना सकते हैं। आप अपने ऐप डैशबोर्ड पर Ionic Deploy टैब पर गियर आइकन पर क्लिक करके ऐसा कर सकते हैं।

Create Deploy Channel

यह A/B टेस्टिंग जैसी चीजों के लिए उपयोगी है, इसलिए आप खास यूजर्स के लिए खास परिवर्तन को पुश कर सकते हैं।

उस ख़ास डेप्लॉय चैनल का उपयोग करने के लिए अपना कोड अपडेट करना ना भूले:

रोलबैक

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

ध्यान दें कि आप टूटे हुए (broken) कोड को वापस रोल करके ठीक नहीं कर सकते हैं। उदाहरण के लिए, यदि आपके जावास्क्रिप्ट कोड में कोई सिंटेक्स एरर है, तो यह पूरे ऐप को तोड़ देगा और अपडेट को चेक करने के लिए कोड कभी नहीं चलेंगे। उस तरह के एरर्स को ठीक करने के लिए, केवल एक चीज है जो आप कर सकते हैं, वह है ऐप स्टोर पर एक नया वर्जन रिलीज करना।

आप किसी भी दिए गए डेप्लॉय पर Roll back to here लिंक पर क्लिक करके रोलबैक कर सकते हैं।

Rollback

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

Deploy लिंक पर क्लिक करके आप स्पेसिफिक रिलीज को भी डेप्लॉय कर सकते हैं जो उस रिलीज के बगल में होगा जिसे आप डेप्लॉय करना चाहते हैं।

Git हुक्स का उपयोग करना

आप Ionic डेप्लॉय पर Git हुक्स के साथ ऐप अपडेट के डेप्लॉय को ऑटोमेटिक कर सकते हो। Git hooks आपको specific Git इवेंट्स जैसे commit, push, और receive से पहले या बाद में स्क्रिप्ट को एग्जीक्यूट करने की अनुमति देता है। इस मामले में हम pre-push हुक का प्रयोग करेंगे ताकि हम अपने परिवर्तनों को Ionic Cloud पर अपलोड करें इससे पहले की git push कमांड अपना काम करें।

सैंपल pre-push स्क्रिप्ट के नाम को असली नाम जिसे Git पहचानता है के साथ बदल कर आप शुरुआत करें:

अपने टेक्स्ट एडिटर में फाइल को खोलें और इसके कंटेंट को निम्नलिखित के साथ बदल दें:

अब अपने परिवर्तनों को कमेंट करें और इन्हें रिमोट रेपो पर पुश करें:

git push कमांड एग्जीक्यूट होने से ठीक पहले, ionic upload को एग्जीक्यूट किया जाएगा।

यदि आप चाहें तो आप ऑटोमेटिक रूप से रिलीज को डेप्लॉय भी कर सकते हैं:

हालांकि, यह हमारे उदाहरण के लिए काम नहीं करेगा, क्योंकि आप मेटा डाटा स्पेसिफाई नहीं कर सकते हैं।

यदि आप डेप्लॉयमेंट प्रोसेस को और आगे ले जाना चाहते हैं, तो मैं आपको Ionic Deploy के लिए HTTP API को चेक करने की सलाह देता हूं। यह आप के प्रोग्राम को अन्य Continuous Integration सर्वर से अपने ऐप में बदलाव करने की अनुमति देता है। यह आपको अपने डेप्लॉयमेंट पर वर्जन नंबर और मेटा डाटा को अपडेट करने की अनुमति देता है। यह सब आटोमेटिक रूप से और कभी भी Ionic ऐप डैशबोर्ड को छुए बिना किया जा सकता है।

निष्कर्ष

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

Ionic और क्लाउड पर सर्विसेज ऐसे Ionic Deploy पर अधिक कंटेंट के लिए साथ बने रहे! यदि आप Ioinc 2 ऐप के डेवलपमेंट के साथ आरंभ करने के लिए एक पूरा परिचय चाहते हैं, तो Envato Tuts+ पर हमारे कोर्स को देखें।

इसके साथ ही Ioinc और cross-platform मोबाइल ऐप डेवलपमेंट के ऊपर हमारे कुछ अन्य पोस्ट को भी चेक करें।

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.