शुरुआती एंड्रॉइड डेवलपर्स के लिए रिएक्टिव नेटिव गाइड (नमूना आवेदन के साथ)

हम आपके लिए hackernoon.com पर प्रकाशित निखिल सचदेवा लेख का अनुवाद प्रस्तुत करते हैं। लेखक रिएक्टिव नेटिव का उपयोग करके मोबाइल एप्लिकेशन विकसित करने में अपना अनुभव साझा करता है और इस रूपरेखा का उपयोग करके अपना एप्लिकेशन बनाने का सुझाव देता है।



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

रिएक्टिव नेटिव क्या है?

आधिकारिक वेबसाइट से जानकारी:

“प्रतिक्रिया मूल आपको केवल जावास्क्रिप्ट के साथ प्रतिक्रिया के रूप में संरचना के साथ मोबाइल एप्लिकेशन बनाने की अनुमति देता है। यह घोषणात्मक घटकों का उपयोग करके एक बहुआयामी मोबाइल UI बनाना संभव बनाता है। "

ये देशी आईओएस या स्विफ्ट या जावा / कोटलिन में लिखे गए एंड्रॉइड एप्लिकेशन के समान अनुप्रयोग हैं।

“रिएक्ट नेटिव का उपयोग करके आपके द्वारा बनाए गए एप्लिकेशन मोबाइल वेब एप्लिकेशन नहीं हैं क्योंकि रिएक्ट नेटिव नियमित आईओएस और एंड्रॉइड एप्लिकेशन के समान घटकों का उपयोग करता है। स्विफ्ट, कोटलिन या जावा का उपयोग करने के बजाय, आप इन घटकों का उपयोग जावास्क्रिप्ट और रिएक्ट का निर्माण करते हैं। "

तो, यह पता चलता है कि React.js पर आधारित रिएक्ट नेटिव एक फ्रेमवर्क है, जो आपको एंड्रॉइड और आईओएस दोनों के लिए क्रॉस-प्लेटफॉर्म एप्लिकेशन विकसित करने की अनुमति देता है।

आप पूछ सकते हैं कि परिचित जावा से दूर क्यों जाएं और JavaScript और React.js सीखें? इन भाषाओं का उपयोग करने के कुछ फायदे यहां दिए गए हैं।

पेशेवरों: आप क्या जीतेंगे

1. क्रॉस-प्लेटफॉर्म विकास

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

रिएक्ट नेटिव फ्रेमवर्क पोर्टेबल है, यानी इसका एकल कोड बेस, जो जावास्क्रिप्ट में लिखा है, एंड्रॉइड और आईओएस दोनों के लिए मॉड्यूल बनाएगा।

2. मास्टरींग प्रतिक्रिया

प्रतिक्रियाशील मूल निवासी और जावास्क्रिप्ट में महारत हासिल करने के बाद, आप उदाहरण के लिए, वेबसाइटों के संबंध में फ्रंट-एंड डेवलपमेंट की एक नई दुनिया की खोज करेंगे। रिएक्ट नेटिव फ्रेमवर्क रिएक्ट के समान घटकों पर आधारित है, इसलिए यहां प्राप्त कौशल मोबाइल एप्लिकेशन के विकास तक सीमित नहीं हैं।

3. बिल्ड टाइम एंड्रॉइड स्टूडियो की तुलना में तेज है

क्या आपने कभी बेसिक फंक्शन को टेस्ट / फिक्स करने के लिए 2-3 मिनट से ज्यादा का समय बिताया है, और साथ ही बगफिक्स को कई घंटों तक बढ़ाया गया था? इसका समाधान रिएक्ट नेटिव होगा। इसके साथ, विधानसभा में बहुत कम समय लगता है। हॉट रीलोडिंग जैसी सुविधा के साथ, उपयोगकर्ता इंटरफ़ेस को डिजाइन करना और परीक्षण करना आसान है। इस सुविधा के लिए धन्यवाद, जेएस फ़ाइल सहेजे जाने पर हर बार एप्लिकेशन पुनरारंभ होता है!

4. नेटवर्क पर डेटा संचारित करने के लिए जावास्क्रिप्ट सुविधाजनक है।

रिएक्ट नेटिव में, एपीआई को कॉल करना, यूआरएल द्वारा छवियों को प्रस्तुत करना, और अन्य प्रक्रियाएं बहुत सरल हैं। अब आपको Retrofit, OkHttp, पिकासो , आदि का उपयोग करने की आवश्यकता नहीं है। स्थापना के लिए बहुत कम समय खर्च किया जाता है। जब एंड्रॉइड प्लेटफॉर्म पर एपीआई से डेटा आता है, तो इसे पहले एक पीओजेओ मॉडल में बदल दिया जाता है और उसके बाद ही यूआई तत्वों में उपयोग किया जाता है। लेकिन रिएक्ट नेटिव में प्राप्त JSON डेटा जावास्क्रिप्ट के लिए सुविधाजनक है और यूआई का पूर्वावलोकन करने के लिए सीधे उपयोग किया जा सकता है। इससे REST API से GET या POST अनुरोधों के लिए वेब इंटरफ़ेस प्राप्त करना आसान हो जाता है।

5. यूआई विकास

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

विपक्ष: आप क्या खोने की संभावना है

1. शायद आप जावास्क्रिप्ट से नफरत करते हैं

कई लोग जावास्क्रिप्ट को केवल इसलिए पसंद नहीं करते हैं क्योंकि यह भाषा पारंपरिक भाषाओं जैसे जावा, सी ++ और अन्य की तरह नहीं दिखती है। आप यहां और यहां विस्तृत नकारात्मक समीक्षा पा सकते हैं।

2. कई तृतीय-पक्ष पुस्तकालय नहीं

रिएक्ट नेटिव समुदाय अभी भी अपनी प्रारंभिक अवस्था में है और तीसरे पक्ष के पुस्तकालयों का समर्थन करता है, देशी एंड्रॉयड लाइब्रेरी के रूप में लोकप्रिय नहीं है (वैसे, मेरे एंड्रॉइड लाइब्रेरी के स्लाइडशो को रेट करें)।

आवेदन उदाहरण

आरंभ करने के लिए, आइए समझने के लिए एपीआई से डेटा निकालने के लिए एक एप्लिकेशन विकसित करने का प्रयास करें कि कैसे सरल रिएक्टिव मूल काम करता है। जाहिर है, पहला कदम रिएक्ट नेटिव को स्थापित करना है। ऐसा करने के लिए, आधिकारिक वेबसाइट पर जाएं । आपको वहां शुरुआती लोगों के लिए भी महान निर्देश मिलेंगे - इसे पढ़ें। हम डमी एपीआई https://jsonplaceholder.typicode.com/photos का उपयोग करेंगे, जिसमें निम्नलिखित डेटा शामिल हैं:



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

चलो MockApp प्रोजेक्ट बनाने के लिए आगे बढ़ते हैं:

प्रतिक्रिया-देशी init नकली
सीडी mockapp

इसके बाद, इसका उपयोग करके अपने वर्चुअल / स्थानीय डिवाइस पर चलाएं:

प्रतिक्रिया-देशी रन-एंड्रॉइड

निम्न छवि स्क्रीन पर दिखाई देगी:


अनुप्रयोग प्रारंभ स्क्रीन

हम जो API एप्लिकेशन बनाएंगे, वह इस तरह दिखाई देगा:


तो परिणाम एक आवेदन की तरह दिखता है

अब टेक्स्ट एडिटर में प्रोजेक्ट खोलें और नीचे दिखाए अनुसार App.js को एडजस्ट करें:

export default class App extends Component<Props> { constructor(props){ super(props); this.state ={ isLoading: true} } componentDidMount(){ return fetch('https://jsonplaceholder.typicode.com/photos') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson, }, function(){ }); }) .catch((error) =>{ console.error(error); }); } render() { if(this.state.isLoading){ return( <View style={{flex: 1, padding: 20}}> <ActivityIndicator/> </View> )} return( <View style={{flex: 1, paddingTop:20}}> <Text style={styles.header}>Mock App</Text> <FlatList data={this.state.dataSource} renderItem={({item}) => <View style={styles.card}><Text style={styles.id}> {item.id}</Text><Text style={styles.title}>{item.title}</Text><Image source ={{uri : item.url }} style={styles.image}/></View>} keyExtractor={({id}, index) => id} /> </View> ); } 

इस कोड में बहुत सी जानकारी है। मैं कोड के सभी मुख्य कीवर्ड का संक्षिप्त विवरण दूंगा, लेकिन प्रत्येक कीवर्ड की खोज जारी रखें जिसे आप नहीं समझ रहे हैं। इसमें थोड़ा समय लगेगा।

1. घटकडिमाउंट। यह अनुप्रयोग जीवन चक्र में प्रतिक्रिया मूल का हिस्सा है। कंपोनेंटडिमाउंट () कंपोनेंट ट्री में कंपोनेंट जोड़े जाने के तुरंत बाद लॉन्च किया जाता है ।

2. लाना। नेटवर्क अनुरोधों को संभालने के लिए, React Native में एक Fetch API है ।

3. राज्य चर (isLading, dataSource)। isLading एक बूल वैरिएबल है जो दिखाता है कि API डेटा लोड है या नहीं। dataSource एक वैरिएबल है जो JSON रिस्पांस को फ़्लो कमांड से स्टोर करता है।

4. सपाट। यह रीएक्टिव नेटिव में RecyclerView के बराबर है, केवल बहुत सरल है। FlatList घटक डेटा की एक स्क्रॉल शीट प्रदर्शित करता है जो बदल सकता है, हालांकि इसमें एक सामान्य संरचना है। फ्लैटलिस्ट लंबी सूचियों के साथ काम करने के लिए महान है जिसमें समय के साथ वस्तुओं की संख्या बदल सकती है।

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

जैसा कि हम देख सकते हैं, प्रत्येक घटक की शैलियों को पहले से ही परिभाषित किया गया है। हमें चरों का मान निर्धारित करने की आवश्यकता है। यह निम्नलिखित तरीके से किया जा सकता है:

 const styles = StyleSheet.create({ card: { padding: 20, margin: 10, borderColor: '#ff7a00', borderWidth: 2, borderRadius: 10, backgroundColor: '#f3ea68', flex: 1, }, header: { fontSize: 40, padding: 10, }, image: { height: 60, width: 60, }, title: { fontSize: 20, color: '#000', }, id: { fontSize: 30, } }); 

यहीं पर हमारा काम खत्म होता है। हम एक एप्लिकेशन बनाने में सक्षम थे, जिसके घटकों को एपीआई के उपयोग के माध्यम से पूर्वावलोकन किया जा सकता है।

और अंत में, यहाँ परिणाम है: