रिएक्टिव नेटिव वेब एप्लिकेशन डेवलपमेंट गाइड

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



सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, वह एक छोटा लेकिन काफी विस्तृत गाइड है जो कि रिएक्ट नेटिव का उपयोग करके सार्वभौमिक अनुप्रयोगों के विकास के लिए है।

यह सब क्यों है?

संक्षिप्त नाम "PWA" ( प्रोग्रेसिव वेब ऐप्स , प्रगतिशील वेब एप्लिकेशन) आज हर किसी के लिए अच्छी तरह से जाना जाता है, यह तीन अक्षर का संक्षिप्त नाम तकनीकी शब्दों के समुद्र में सिर्फ एक व्हेल लगता है। लेकिन यह लोकप्रिय तकनीक अभी भी खामियों के बिना नहीं है। ऐसे अनुप्रयोगों के साथ बहुत सारी तकनीकी कठिनाइयाँ जुड़ी हुई हैं, ऐसी स्थितियाँ हैं जिनमें एक डेवलपर को एक साथ देशी और वेब एप्लिकेशन बनाने के लिए मजबूर किया जाता है। यहाँ एक अच्छा लेख है जिसकी तुलना PWA और देशी अनुप्रयोगों से की जा रही है।

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

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


पापू एक फूड ऑर्डरिंग एप्लिकेशन है जो एंड्रॉइड, आईओएस और वेब के लिए डिज़ाइन किया गया है

आवेदन भवन ब्लॉकों

यहां हम रिएक्ट का उपयोग करते हैं, इसलिए हमें उपयोगकर्ता इंटरफ़ेस से एप्लिकेशन लॉजिक को अलग करने की आवश्यकता है। Redux या Mobx जैसे एप्लिकेशन की स्थिति को नियंत्रित करने के लिए किसी प्रकार की प्रणाली का उपयोग करना सबसे अच्छा है। इस तरह के एक कदम तुरंत आवेदन के तर्क को सार्वभौमिक बनाता है। यह, परिवर्तनों के बिना, विभिन्न प्लेटफार्मों पर उपयोग किया जा सकता है।

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

उदाहरण के लिए, एक मानक वेब कंटेनर आपको इस तरह से संपर्क करेगा:

<div> !  -   !</div> 

और मूल निवासी - इस तरह:

 <View>!  -    React Native</View> 

कुछ स्मार्ट लोगों को इस स्थिति से बाहर निकलने का रास्ता मिल गया है। उत्पादन में विशेष तत्व पुस्तकालय थे। मेरे पसंदीदा में से एक अद्भुत रिएक्टिव नेटिव वेब लाइब्रेरी है। यह न केवल वेब पर प्रतिक्रियाशील मूल घटकों के उपयोग की अनुमति देता है (सभी घटकों को नहीं!), लेकिन यह भी विभिन्न प्रतिक्रियाशील मूल निवासी एपीआई तक पहुंच प्रदान करता है। इनमें Geolocation , Platform , Animated , AsyncStorage और कई अन्य हैं। उन महान उदाहरणों पर एक नज़र डालें जो इस पुस्तकालय के लिए मैनुअल में पाए जा सकते हैं।

टेम्पलेट

हमने आदिम लोगों का पता लगाया। लेकिन हमें अभी भी वेब विकास और देशी विकास के लिए पर्यावरण को जोड़ने की जरूरत है। मेरी परियोजना क्रिएट-रिएक्शन-ऐप (एक वेब एप्लिकेशन के लिए) और एक रिएक्टिव नेटिव इनिशियलाइज़ेशन स्क्रिप्ट (मूल एप्लिकेशन के लिए, एक्सपोज़र के बिना) का उपयोग करती है। सबसे पहले, मैंने इस कमांड के साथ एक प्रोजेक्ट बनाया: create-react-app rnw_web । फिर उन्होंने एक दूसरी परियोजना बनाई: react-native init raw_native । फिर, विक्टर फ्रेंकस्टीन के उदाहरण के बाद, मैंने इन दो परियोजनाओं से package.json फाइलें लीं और उन्हें मिला दिया। उसके बाद, नई परियोजना के फ़ोल्डर में, मैंने नई yarn फ़ाइल को खिलाया। यहाँ प्रश्न में package फ़ाइल है:

 { "name": "rnw_boilerplate", "version": "0.1.0", "private": true, "dependencies": {   "react": "^16.5.1",   "react-art": "^16.5.1",   "react-dom": "^16.5.1",   "react-native": "0.56.0",   "react-native-web": "^0.9.0",   "react-navigation": "^2.17.0",   "react-router-dom": "^4.3.1",   "react-router-modal": "^1.4.2" }, "devDependencies": {   "babel-jest": "^23.4.0",   "babel-preset-react-native": "^5",   "jest": "^23.4.1",   "react-scripts": "1.1.5",   "react-test-renderer": "^16.3.1" }, "scripts": {   "start": "node node_modules/react-native/local-cli/cli.js start",   "test": "jest",   "start-ios": "react-native run-ios",   "start-web": "react-scripts start",   "build": "react-scripts build",   "test-web": "react-scripts test --env=jsdom",   "eject-web": "react-scripts eject" } } 

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


फ़ोल्डर को एक नई परियोजना में कॉपी किया जाना है

अब, src फ़ोल्डर में, जो नई परियोजना की निर्देशिका में निहित है, दो फाइलें बनाएं: App.js और App.native.js । वेबपैक के लिए धन्यवाद , हम बंडलर को यह बताने के लिए फ़ाइल नाम एक्सटेंशन का उपयोग कर सकते हैं कि किस फाइल का उपयोग करना है। जब हम ऐप्स नेविगेट करने के लिए अलग-अलग दृष्टिकोणों का उपयोग करने जा रहे हैं, तब से App फ़ाइलों को अलग करना महत्वपूर्ण है।

यहाँ वेब के लिए App.js फ़ाइल है। नेविगेशन के लिए react-router उपयोग किया जाता है।

 // App.js - WEB import React, { Component } from "react"; import { View } from "react-native"; import WebRoutesGenerator from "./NativeWebRouteWrapper/index"; import { ModalContainer } from "react-router-modal"; import HomeScreen from "./HomeScreen"; import TopNav from "./TopNav"; import SecondScreen from "./SecondScreen"; import UserScreen from "./UserScreen"; import DasModalScreen from "./DasModalScreen"; const routeMap = { Home: {   component: HomeScreen,   path: "/",   exact: true }, Second: {   component: SecondScreen,   path: "/second" }, User: {   component: UserScreen,   path: "/user/:name?",   exact: true }, DasModal: {   component: DasModalScreen,   path: "*/dasmodal",   modal: true } }; class App extends Component { render() {   return (     <View>       <TopNav />       {WebRoutesGenerator({ routeMap })}       <ModalContainer />     </View>   ); } } export default App; 

यहाँ App.js नेटिव ऐप के लिए App.js । यहां react-navigation उपयोग react-navigation किया जाता react-navigation ।

 // App.js - React Native import React, { Component } from "react"; import { createStackNavigator, createBottomTabNavigator } from "react-navigation"; import HomeScreen from "./HomeScreen"; import DasModalScreen from "./DasModalScreen"; import SecondScreen from "./SecondScreen"; import UserScreen from "./UserScreen"; const HomeStack = createStackNavigator({ Home: { screen: HomeScreen, navigationOptions: { title: "Home" } } }); const SecondStack = createStackNavigator({ Second: { screen: SecondScreen, navigationOptions: { title: "Second" } }, User: { screen: UserScreen, navigationOptions: { title: "User" } } }); const TabNav = createBottomTabNavigator({ Home: HomeStack, SecondStack: SecondStack }); const RootStack = createStackNavigator( {   Main: TabNav,   DasModal: DasModalScreen }, {   mode: "modal",   headerMode: "none" } ); class App extends Component { render() {   return <RootStack />; } } export default App; 

इस तरह मैंने एक साधारण एप्लिकेशन टेम्प्लेट बनाया और आगे के काम के लिए प्लेटफॉर्म तैयार किया। आप इस रिपॉजिटरी को देखकर इस टेम्पलेट को आज़मा सकते हैं।

अब हम इस टेम्पलेट को थोड़ा जटिल करेंगे, एक रूटिंग / नेविगेशन सिस्टम जोड़ें।

नेविगेशन की समस्याएं और उनके समाधान

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

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

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

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

इस दृष्टिकोण ने मुझे दो प्रकार के अनुप्रयोगों के लिए अलग-अलग घटक बनाने की आवश्यकता को समाप्त करते हुए एक वेब एप्लिकेशन की स्क्रीन के बीच स्थानांतरित करने की अनुमति दी।

इस तंत्र को लागू करने में पहला कदम वेब अनुप्रयोग के लिए मार्गों के विवरण के साथ एक वस्तु बनाना है:

 import WebRoutesGenerator from "./NativeWebRouteWrapper"; //   ,    React Router     HOC const routeMap = { Home: {   screen: HomeScreen,   path: '/',   exact: true }, Menu: {   screen: MenuScreen,   path: '/menu/sectionIndex?' } } //  render <View> {WebRoutesGenerator({ routeMap })} </View> 

वास्तव में, यहां रिएक्ट राउटर-विशिष्ट क्षमताओं के अतिरिक्त रिएक्ट नेविगेशन निर्माण फ़ंक्शन की एक प्रति है।

अगला, अपने सहायक फ़ंक्शन का उपयोग करके, मैं react-router मार्ग बनाता हूं और उन्हें HOC में लपेटता हूं। यह आपको screen घटक को क्लोन करने और इसके गुणों में navigation जोड़ने की अनुमति देता है। यह दृष्टिकोण रिएक्ट नेविगेशन के व्यवहार की नकल करता है और navigate() , goBack() , getParam() जैसे तरीके getParam() ।

मोडल स्क्रीन

React नेविगेशन, createStackNavigator के लिए धन्यवाद, यह एप्लिकेशन के एक निश्चित पृष्ठ के लिए एक मोडल स्क्रीन के रूप में नीचे से पॉप करने के लिए संभव बनाता है। एक वेब एप्लिकेशन में इसे प्राप्त करने के लिए, मुझे रिएक्ट राउटर मोडल लाइब्रेरी का उपयोग करना था। मोडल स्क्रीन के साथ काम करने के लिए, आपको पहले routeMap ऑब्जेक्ट में उचित विकल्प जोड़ना होगा:

 const routeMap = { Modal: {   screen: ModalScreen,   path: '*/modal',   modal: true //    ModalRoute     } } 

इसके अलावा, react-router-modal लाइब्रेरी से <ModalContainer /> घटक को एप्लिकेशन लेआउट में जोड़ा जाना चाहिए। संबंधित पृष्ठ वहां प्रदर्शित किया जाएगा।

स्क्रीन के बीच नेविगेशन

हमारे विकास के HOC के लिए धन्यवाद (अस्थायी रूप से इस घटक को NativeWebRouteWrapper कहा जाता है, और यह, वैसे, एक भयानक नाम है), हम लगभग उसी तरह के कार्यों का उपयोग कर सकते हैं जैसे रिएक्शन नेविगेशन में एप्लिकेशन के वेब संस्करण में पृष्ठों के साथ आंदोलन को व्यवस्थित करने के लिए:

 const { product, navigation } = this.props <Button onPress={navigation.navigate('ProductScreen', {id: product.id})} title={`Go to ${product.name}`} /> <Button onPress={navigation.goBack} title="Go Back" /> 

पिछली स्क्रीन पर लौटें।

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

 import pop from '/NativeWebRouteWrapper/pop' render() { const { navigation } = this.props return (   <Button     onPress={pop({screen: 'FirstScreen', n: 2, navigation})}     title="Go back two screens"   /> ) } 

हम इन मापदंडों का वर्णन करते हैं:

• screen - screen का नाम (अनुप्रयोग के वेब संस्करण में रिएक्ट राउटर द्वारा प्रयुक्त)।
• n स्टैक का उपयोग करके वापस आने के लिए स्क्रीन की संख्या है (प्रतिक्रिया नेविगेशन का उपयोग करके)।
• navigation - एक वस्तु जो नेविगेशन प्रदान करती है।

काम के परिणाम

यदि आप यहां प्रस्तुत सार्वभौमिक अनुप्रयोगों के विकास के विचार के साथ प्रयोग करना चाहते हैं, तो मैंने दो टेम्पलेट बनाए।

पहला वेब अनुप्रयोगों और देशी अनुप्रयोगों के विकास के लिए एक स्वच्छ, सार्वभौमिक वातावरण है।

दूसरा , संक्षेप में, पहला टेम्पलेट है, जिसे एप्लिकेशन के माध्यम से नेविगेशन के आयोजन के लिए मेरी प्रणाली के कारण विस्तारित किया गया है।

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

परिणाम

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

प्रिय पाठकों! क्या आप यूनिवर्सल एप्लिकेशन बनाने के लिए रिएक्ट का लाभ उठाते हैं?