रिएक्ट नेटिव में मोबाइल ऐप बनाना शुरू करने के लिए आपको क्या जानना चाहिए

जावास्क्रिप्ट के साथ ऐप्स बनाने से बेहतर कुछ नहीं है। जब तक आप मोबाइल ऐप नहीं बना रहे हैं। जावास्क्रिप्ट वेब ऐप बनाने के लिए है, और इसका उपयोग देशी मोबाइल ऐप बनाने के लिए संभव नहीं हुआ करता था। किसी भी वेब डेवलपर के लिए देशी मोबाइल ऐप्स बनाने में गोता लगाना कठिन था। उन्हें जावा, या ऑब्जेक्टिव-सी…या कोई प्रोग्रामिंग भाषा सीखनी होगी जो इस उद्देश्य के लिए इस्तेमाल की गई थी।

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

यह लेख रिएक्ट नेटिव की दुनिया का परिचय है, तो तैयार हो जाइए?.

रिएक्टिव नेटिव क्यों?

ठीक है, तो रिएक्ट नेटिव क्यों है और कोई अन्य तकनीक क्यों नहीं?

यह हमें कई समाधान देता है जो अन्य प्रौद्योगिकियां बर्दाश्त नहीं कर सकती हैं। यहाँ आप प्रतिक्रियाशील मूल निवासी के साथ क्या कर सकते हैं:

मूल मोबाइल ऐप्लिकेशन बनाना

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

क्रॉस प्लैटफ़ॉर्म मोबाइल ऐप्लिकेशन (iOS और Android) बनाना

हाँ, रिएक्ट नेटिव के साथ आप मोबाइल ऐप बना सकते हैं जो आईओएस और एंड्रॉइड पर चल सकते हैं। यह रिएक्ट नेटिव के महान लाभों में से एक है। फेसबुक के इसे बनाने से पहले, आपको दो बार और अलग-अलग कोड के साथ अपना ऐप बनाना था:एक स्विफ्ट या ऑब्जेक्टिव-सी का उपयोग करके आईओएस के लिए और दूसरा जावा या कोटलिन का उपयोग करके एंड्रॉइड के लिए। रिएक्ट नेटिव ने इस समस्या को हल कर दिया ताकि आप अपना रिएक्ट नेटिव ऐप बना सकें और यह आईओएस और एंड्रॉइड में काम करेगा। बहुत बढ़िया! ?

अपना कोड सभी जावास्क्रिप्ट और प्रतिक्रिया में लिखें

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

प्रतिक्रिया-मूल के साथ प्रारंभ करना

प्रतिक्रिया-मूल से शुरू करना रोमांचक हो सकता है, लेकिन साथ ही थोड़ा भ्रमित करने वाला भी हो सकता है। पहला कदम इसे स्थापित करना है, और इसे करने के कई तरीके हैं:

एक्सपो-क्ली का उपयोग करना:

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

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

प्रतिक्रिया-मूल-क्ली का उपयोग करना

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

विभिन्न प्लेटफार्मों पर रिएक्ट नेटिव ऐप विकसित करना एक अलग प्रक्रिया है। कभी-कभी हमें किसी विशिष्ट प्लेटफ़ॉर्म के लिए कुछ विशिष्ट कॉन्फ़िगरेशन की आवश्यकता होती है। उदाहरण के लिए Android के लिए निर्माण करने के लिए, आपको Android SDK का उपयोग करना होगा, तो आइए जानें कि यह कैसे काम करता है!

Android के लिए मोबाइल ऐप्लिकेशन बनाना

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

Android Studio डाउनलोड करने के बाद आपको कुछ API भी इंस्टॉल करने होंगे। ऐसा करने के लिए Android Studio खोलें, फिर सेटिंग टैब पर क्लिक करें यह विंडो खुल जाएगी:

सबसे पहले, एसडीके प्लेटफॉर्म टैब (उदाहरण के लिए एंड्रॉइड 6.0 मार्शमैलो) में जिस प्लेटफॉर्म का समर्थन करना चाहते हैं, उस प्लेटफॉर्म की जांच करें। फिर SDK टूल पर स्विच करें।

और चेक करें Android SDK Build-Tools , Android SDK tools , और google play service . Android SDK Build-Tools के अंतर्गत सभी प्लेटफ़ॉर्म चुनें:

• 19.0.0 से 20.0.0 तक
• 22.0.0 से 24.0.0 तक
• और 25.0.2 , 26.0.1 से 26.0.3
• 27.0.3 और 28.0.1 से 28.02

अब हम एसडीके और एंड्रॉइड स्टूडियो के साथ कर रहे हैं। अगला कदम एमुलेटर है। एमुलेटर (या सिम्युलेटर) वह जगह है जहां हमें अपने ऐप को चलाना और परीक्षण करना है। कई अलग-अलग विकल्प हैं।

आप एंड्रॉइड स्टूडियो एमुलेटर का उपयोग कर सकते हैं। आप यहां जांचते हैं कि एंड्रॉइड स्टूडियो पर उपयोग करने के लिए एक एमुलेटर कैसे बनाया जाए। ईमानदारी से मैंने कभी उनका इस्तेमाल नहीं किया। मैं इसके बजाय Genymotion या असली डिवाइस पसंद करता हूं।

जीनमोशन

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

असली डिवाइस का इस्तेमाल करना

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

अब तक, हम Android के साथ ठीक हैं — लेकिन iOS के बारे में क्या?

IOS के लिए रिएक्ट-नेटिव ऐप्स बनाना

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

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

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

MacOS में आप iOS और Android दोनों चला सकते हैं। आप निश्चित रूप से MacOS पर Android Studio और Genymotion इंस्टॉल कर सकते हैं। यह संभावना एक पीसी पर मौजूद नहीं है जहां आप केवल एंड्रॉइड एमुलेटर चला सकते हैं लेकिन आईओएस एमुलेटर नहीं। तो आप भाग्यशाली हैं? यदि आपके पास MacOS है - आनंद लें?.

तो अब हमारे पास रिएक्ट नेटिव ऐप बनाने का माहौल है और हमने सब कुछ इंस्टॉल कर लिया है, लेकिन रिएक्ट नेटिव कोड कैसे लिखा जाता है? यह बहुत आसान है:आप वास्तव में Reactjs कोड लिखेंगे।

रिएक्ट नेटिव के साथ कुछ अभ्यास प्राप्त करने के लिए आप आधिकारिक गाइड देख सकते हैं। मैं "रिएक्टिव नेटिव YouTube रेप्लिका" शुरू करने के लिए इस बेहतरीन लेख की सलाह देता हूं। यह आपका पहला रिएक्ट नेटिव ऐप बनाने के लिए कदम दर कदम मार्गदर्शन करेगा।

बहुत खूब! अब तक आप ठीक हैं और आप प्रतिक्रिया-मूल के साथ कोडिंग कर रहे हैं। ? लेकिन आपको अपनी त्रुटियों को जांचने और डीबग करने और अपने कोड के लॉग देखने की जरूरत है। वाईआह लॉग्स !! इसलिए हमें एक . की आवश्यकता है dईबगर! आप रिएक्ट नेटिव के साथ कैसे डिबग करते हैं?

प्रतिक्रिया-मूल डीबग करना

न केवल रिएक्ट नेटिव के साथ बल्कि किसी अन्य प्रोग्रामिंग भाषा के साथ अपने कोड को डिबग करना बहुत महत्वपूर्ण है। तो आपके रिएक्ट नेटिव कोड में, आपको यह जानना होगा कि क्या हो रहा है। रिएक्ट नेटिव ऐप को डीबग करने के कई अलग-अलग तरीके हैं जैसे:

Chrome devtools से डीबग करें

रिएक्ट नेटिव आपको अपने ऐप के लॉग देखने के लिए क्रोम देवटूल का उपयोग करने का विकल्प देता है। क्रोम के साथ डिबग करने और अपने एमुलेटर में डिबगिंग मोड को सक्षम करने के लिए, कीबोर्ड पर बस Ctrl+ m . क्लिक करें ।

यह स्क्रीन पॉप-अप होगी:

और फिर Debug Js Remotely . चुनें . इससे Google Chrome में इस पते के साथ एक टैब खुल जाएगा https://localhost:8081/debugger-ui/ . यह Chrome devtools का उपयोग करने के लिए है, अन्य विकल्पों के बारे में क्या?

React-native-debugger का उपयोग करना

रिएक्ट-नेटिव-डीबगर रिएक्ट नेटिव कोड को डीबग करने के लिए एक बेहतरीन टूल है। यह एक डेस्कटॉप एप्लिकेशन है जो आपको कई फायदे देता है। यह Redux devtools और React-devtools इंटीग्रेशन के साथ आता है। आप शैली को डीबग भी कर सकते हैं। यह वास्तव में रिएक्ट नेटिव के लिए सबसे अच्छा डिबगर है और यह वही है जिसका मैं उपयोग करता हूं। आमतौर पर यह MacOS, Windows और Linux पर उपलब्ध है। स्थापना और एकीकरण मार्गदर्शिका देखें।

मुझे लगता है कि इस समय यह काफी है। यह रिएक्ट नेटिव के साथ मोबाइल ऐप बनाने के लिए संपूर्ण गाइड का पहला भाग है। अगले भाग में हम और अधिक तकनीकी युक्तियों और मुद्दों जैसे कि हम देशी घटकों का उपयोग कैसे कर सकते हैं, रिएक्ट नेटिव एपीआई, अन्य पुस्तकालयों के साथ एकीकरण, Redux, GraphQL और इस तरह की चीजों में गोता लगाने जा रहे हैं। तो अगला भाग आने पर बने रहने के लिए इस मेल-लिस्ट को सब्सक्राइब करें। आपके समय के लिए शुक्रिया। ?

आप मुझे हमेशा ट्विटर पर ढूंढ सकते हैं?