एक्सपो के साथ जम्प स्टार्ट रिएक्ट नेटिव

विषय

• 01. एक्सपो सेट करें
• 02. अपना पहला ऐप बनाएं
• 03. सूचनाएं जोड़ें
• 04. एक्सपो के साथ प्रकाशित करें
• अधिक तरीके सीखना चाहते हैं जिससे आप प्रतिक्रिया में महारत हासिल कर सकें?

रिएक्ट नेटिव एक ऐसा प्लेटफॉर्म है जो आपको जावास्क्रिप्ट का उपयोग करके देशी मोबाइल ऐप बनाने में सक्षम बनाता है। जैसा कि नाम से ही स्पष्ट है, यह रिएक्ट का उपयोग करता है, इसलिए मोबाइल इंटरफेस की रचना वेब पर रिएक्ट का उपयोग करने के समान है। HTML टैग्स का उपयोग करके घटक बनाने के बजाय, इसके घटकों का अपना सेट है जो मूल UI घटकों से जुड़ता है।

रिएक्ट नेटिव को सेट करना मुश्किल हो सकता है, खासकर जब पुश नोटिफिकेशन की बात आती है। आपको प्रमाण पत्र सेट करने और iOS के लिए Objective-C और Android के लिए Java में गोता लगाने की आवश्यकता है। हालांकि, एक्सपो इसकी जरूरत को खत्म कर देता है।

ऐप के बजाय वेबसाइट बनाना? आप एक अच्छे वेबसाइट बिल्डर का उपयोग कर सकते हैं। और साइट को मेंटेन करने के लिए अपना वेब होस्टिंग स्पॉट ऑन करें।

• आपके वर्कफ़्लो को तेज़ करने के लिए 30 वेब डिज़ाइन टूल

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

एक्सपो Xcode या Android Studio का उपयोग किए बिना सबमिशन-रेडी ऐप बिल्ड भी बना सकता है। यदि आपने पहले दोनों में से किसी का भी उपयोग नहीं किया है, तो वे एक डरावनी जगह हो सकती हैं, खासकर यदि आप अभी-अभी रिएक्ट नेटिव के साथ शुरुआत कर रहे हैं - या ऐप बनाने के बारे में सामान्य रूप से आश्वस्त नहीं हैं। ऐप स्टोर पर सबमिट करने के बजाय ऐप (या प्रोजेक्ट) को एक्सपो में भी प्रकाशित किया जा सकता है, जो उपयोगकर्ताओं को एक्सपो मोबाइल क्लाइंट के माध्यम से प्रोजेक्ट को आज़माने देता है। चिंता न करें, इसे बाद में कवर किया जाएगा!

क्या आप एक टीम के साथ अपना ऐप बना रहे हैं? अपनी फ़ाइलों को सुलभ, विश्वसनीय क्लाउड स्टोरेज में सेव करें।

01. एक्सपो सेट करें

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

फिर आप एक्सपो सेवा में ऐप प्रकाशित कर सकते हैं ताकि उपयोगकर्ता ऐप स्टोर और Google Play समीक्षा प्रक्रियाओं के माध्यम से जाने की आवश्यकता के बिना एक्सपो मोबाइल क्लाइंट के माध्यम से आपके तैयार प्रोजेक्ट चला सकें।

एक्सपो स्टैंड-अलोन ऐप बनाने का समर्थन करता है जिसे मैन्युअल रूप से ऐप स्टोर या प्ले स्टोर पर प्रकाशित किया जा सकता है, हालाँकि आपको उन प्लेटफ़ॉर्म के लिए डेवलपर खातों की आवश्यकता होगी, जिन पर आप रिलीज़ करते हैं। Apple के डेवलपर प्रोग्राम की लागत £79 प्रति वर्ष है और Google के Play कंसोल की लागत $25 USD का एकमुश्त शुल्क है।

02. अपना पहला ऐप बनाएं

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

यहां से, आप ऐप को प्रकाशित कर सकते हैं, ऐप को एक्सपो मोबाइल क्लाइंट के साथ साझा कर सकते हैं या ऐप को सिम्युलेटर पर चला सकते हैं। इस ऐप में पुश नोटिफिकेशन बनाना शामिल है, इसलिए आप एक्सपो मोबाइल क्लाइंट को साझा करने जा रहे हैं, क्योंकि सिमुलेटर उनका समर्थन नहीं करते हैं। स्कैन करने के लिए क्यूआर कोड या एसएमएस या ईमेल के जरिए लिंक भेजने का विकल्प पाने के लिए शेयर बटन पर क्लिक करें। एक्सपो क्लाइंट के साथ क्यूआर कोड को स्कैन करें। यह एक्सपो क्लाइंट के माध्यम से ऐप चलाता है और यह एक स्क्रीन पर खुलता है: 'अपने ऐप पर काम करना शुरू करने के लिए ऐप खोलें!'

ऐप चलने के साथ, अपने पसंदीदा कोड संपादक में प्रोजेक्ट खोलें और App.js खोलें। ऊपर दिया गया टेक्स्ट ढूंढें और इसे क्लासिक 'हैलो वर्ल्ड' में बदलें! , फिर सहेजें। आपको ऐप को स्वचालित रूप से पुनः लोड होते देखना चाहिए और 'हैलो वर्ल्ड!' टेक्स्ट होना चाहिए। अब दिखाई दे रहा है। जादू!

जब आप विकास कर रहे हों, तो डिवाइस को हिलाने से एक डेवलपर मेनू प्रकट होगा, जिसमें डिबगिंग के लिए सहायक विकल्प हैं। इस मेनू से आप एक्सपो होम में भी लौट सकते हैं - ऐप से बाहर निकलने या दूसरे पर स्विच करने में मददगार।

03. सूचनाएं जोड़ें

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

सबसे पहले, आपको एक्सपो से अनुमतियाँ और सूचनाएं आयात करने और ऐप क्लास में एक नया फ़ंक्शन बनाने की आवश्यकता है:

'एक्सपो' से आयात {अनुमतियां, सूचनाएं}; निर्यात डिफ़ॉल्ट वर्ग ऐप React.Component {async registerForPushNotifications() { } } का विस्तार करता है

यहां आप ES2017 async/प्रतीक्षा सुविधा का उपयोग करने के लिए async कीवर्ड का उपयोग करते हैं - रिएक्ट नेटिव में बैबेल हुड के तहत काम कर रहा है ताकि आप सभी नई जावास्क्रिप्ट अच्छाई का लाभ उठा सकें। अब, अधिसूचना अनुमतियों के लिए पूछें और एक्सपो पुश टोकन को पुनः प्राप्त करें - डिवाइस की पहचान करने के लिए - ताकि एक्सपो को पता चले कि पुश नोटिफिकेशन कहां भेजना है:

async registerForPushNotifications() { const परिणाम = प्रतीक्षा अनुमतियाँ।askAsync (अनुमतियाँ। REMOTE_NOTIFICATIONS); अगर (परिणाम। स्थिति! == 'अनुदान') {वापसी; } कॉन्स्ट टोकन = प्रतीक्षा करें अधिसूचनाएं। getExpoPushTokenAsync (); कंसोल.लॉग (टोकन); }

यहां, आप Permissions.askAsync() विधि का उपयोग करके अधिसूचना अनुमति मांगेंगे। अलर्ट केवल iOS पर दिखाई देगा क्योंकि Android डिफ़ॉल्ट रूप से सूचनाओं को सक्षम करता है। इसके बावजूद, आपको वास्तव में अभी भी Android पर उसी तर्क के माध्यम से चलने की आवश्यकता है, क्योंकि सूचनाओं को बंद करना संभव है।

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

इस समय यह ध्यान देने योग्य है कि - iOS पर - यह अलर्ट डिज़ाइन द्वारा केवल एक बार ट्रिगर किया जा सकता है; इसलिए, यदि कोई उपयोगकर्ता अनुमति से इनकार करता है, तो आप फ़ंक्शन से बाहर लौटने से पहले एक कस्टम नोटिस या अलर्ट जोड़ने पर विचार कर सकते हैं। इस बिंदु पर सूचनाओं को सक्षम करने के लिए, उपयोगकर्ता को ऐप सेटिंग्स पर जाना होगा (हमारे मामले में, यह एक्सपो होगा)> सूचनाएं और उन्हें वहां से सक्षम करें। इस वजह से, आपको एक्सपो मोबाइल क्लाइंट को हटाना होगा और यदि आप आईओएस पर एक से अधिक बार अनुमति अलर्ट का परीक्षण करना चाहते हैं तो फिर से इंस्टॉल करना होगा।

इसके अतिरिक्त, एक्सपो Permissions.getAsync() नामक एक विधि प्रदान करता है और यह iOS अलर्ट को बंद किए बिना, Permissions.askAsync() के समान काम करता है। यह उपयोगी हो सकता है यदि आप एक कस्टम प्रवाह बनाने के लिए पहले स्थिति की जांच करना चाहते हैं जो आपसे अनुमति मांगेगा, उदाहरण के लिए। यदि आईओएस अलर्ट पहले ट्रिगर किया गया है (याद रखें, इसे प्रति ऐप इंस्टॉल केवल एक बार सक्रिय किया जा सकता है), Permissions.askAsync() वही जानकारी लौटाएगा जो Permissions.getAsync() है, इसलिए हमारे उपयोग के मामले में हमें इसकी आवश्यकता नहीं है Permissions.getAsync() का उपयोग करने के लिए।

फिर आपको इस फ़ंक्शन को कंपोनेंटडिडमाउंट जीवनचक्र विधि में कॉल करने की आवश्यकता है ताकि यह ऐप लॉन्च पर चले:

कंपोनेंटडिडमाउंट () {this.registerForPushNotifications (); }

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

एक्सपो में https://exp.host/--/api/v2/push/send पर सूचनाएं भेजने की सेवा है; आपको बस इतना करना है कि इसमें कुछ डेटा भेजें। यह तब निम्न जैसा कुछ दिखाई देगा:

{// पुश टोकन। "टू": ऐप से टोकन> // अधिसूचना शीर्षक। "शीर्षक": "अधिसूचना शीर्षक", // अधिसूचना निकाय। "बॉडी": "नोटिफिकेशन बॉडी", // डेटा को ऑब्जेक्ट के रूप में पास करें, इसका उपयोग नोटिफिकेशन को हैंडल करते समय किया जा सकता है। "डेटा": {"मूल्य": "नमस्ते दुनिया!" } }

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

हैंडल अधिसूचना (अधिसूचना) {अलर्ट (अधिसूचना। डेटा। मूल्य); }

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

कंपोनेंटडिडमाउंट () {this.registerForPushNotifications (); अधिसूचनाएं जोड़ें। लिस्टनर (यह। हैंडल अधिसूचना); }

अब आप सेट हो गए हैं। आइए एक कर्ल अनुरोध के साथ एक पुश सूचना भेजें:

कर्ल -X POST -H "सामग्री-प्रकार: एप्लिकेशन/जेसन" -d '{"to": "TOKEN>", "शीर्षक": "अधिसूचना शीर्षक", "शरीर": "अधिसूचना निकाय", " डेटा": {"वैल्यू": "हैलो वर्ल्ड!" } }' https://exp.host/--/api/v2/push/send

आप इस कर्ल कमांड को यहां ले सकते हैं। यदि आप कर्ल से परिचित नहीं हैं, तो आप पोस्टमैन जैसी किसी चीज़ का उपयोग करके अनुरोध भेज सकते हैं, जो अनुरोध भेजने के लिए GUI का उपयोग करता है।

एक बार अनुरोध भेजे जाने के बाद, अब आपको अधिसूचना के माध्यम से आना चाहिए। एक्सपो पुश सेवा का उपयोग करने की कोई सीमा नहीं है। वास्तविक दुनिया के परिदृश्य में, दक्षता के लिए बाहर भेजे जाने के लिए, 100 के बैचों में, पुश सूचनाओं की एक सरणी भेजकर बैच एपीआई का उपयोग करने के लिए प्रोत्साहित किया जाता है:

[{// अधिसूचना वस्तु ऊपर के रूप में}, {// एक और अधिसूचना वस्तु}]

04. एक्सपो के साथ प्रकाशित करें

तो, अब जब हमारे पास एक चमकदार नया रिएक्ट नेटिव ऐप है (भले ही यह अभी तक बहुत कुछ नहीं करता है!), हम एक्सपो एक्सडीई से इसे चलाए बिना दूसरों को इसका उपयोग कैसे करने देते हैं? सबसे आसान तरीका है XDE से Publish पर क्लिक करना। यह प्रोजेक्ट को एक्सपो में प्रकाशित करेगा और आपकी प्रोफ़ाइल पर एक लिंक दिखाई देगा, जिसे आप https://expo.io/@username> पर देख सकते हैं।

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

यह लेख मूल रूप से वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे ज्यादा बिकने वाली पत्रिका नेट के अंक 297 में प्रकाशित हुआ था। यहां नेट सब्सक्राइब करें. 

अधिक तरीके सीखना चाहते हैं जिससे आप प्रतिक्रिया में महारत हासिल कर सकें?

यदि आप रिएक्ट के बारे में अधिक जानने में रुचि रखते हैं, तो सुनिश्चित करें कि आपने अपना टिकट प्राप्त कर लिया है 19-21 सितंबर 2018 से लंदन उत्पन्न करें. दुनिया भर में रिएक्ट सिखाने के लिए रिएक्ट अकादमी की स्थापना की और लॉन्च किया sizzy.co तथा ओके-google.io, क्रिस्टिजन रिस्तोवस्की अपनी कार्यशाला - लर्न हाउ टू थिंक इन रिएक्ट - वितरित करेंगे जिसमें वह रिएक्ट की सर्वोत्तम प्रथाओं का पता लगाएगा और आपको वास्तविक समस्याओं का समाधान सिखाएगा जो आपको एक ऐप बनाने की प्रक्रिया में सामना करना पड़ सकता है।

जनरेट लंदन 19-21 सितंबर 2018 से होता है। अभी अपना टिकट प्राप्त करें.