जानवर आया। रिएक्ट नेटिव पर एक व्यक्तिगत डायरी एप्लिकेशन विकसित करते समय हमने क्या सामना किया

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

हम ढांचे के साथ अपने स्वयं के अनुभव के बारे में बात करते हैं, कार्यक्षमता का विस्तार करने के तरीके, "नुकसान" (जहां आप उनके बिना हैं!) और हम उनके आसपास कैसे पहुंचे।

पूरे ढांचे के बारे में

इस अवसर के नायक के बारे में थोड़ा - रिएक्टिव नेटिव । वह अभी भी अच्छा है!

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

मुख्य बात यह है कि आउटपुट वास्तव में मूल अनुप्रयोग है। एक्सटेंशन और प्लगइन्स लगभग 99% विशिष्ट कार्यों को कवर करते हैं। तत्काल आवश्यकता के मामले में शेष प्रतिशत को देशी भाषाओं (जावा, ऑब्जेक्ट-सी) में जोड़ा जा सकता है और रिएक्टिव नेटिव एप्लिकेशन से जोड़ा जा सकता है।

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

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

बस जागरूक रहें: रिएक्ट नेटिव टोंटी बिल्ड वातावरण है। Google सीखने, फ़ोरम पढ़ने और स्टैकओवरफ़्लो के लिए तैयार रहें। नतीजतन, हमने तैनाती पर खर्च किया: Ubuntu - 3 दिन, Win10 - 2 दिन। अजीब के रूप में यह लग सकता है, सब कुछ विंडोज पर सरल हो गया, अच्छी तरह से, या बस उबंटु पर वे शंकु से छुटकारा पा गए और पहले से ही समझ गए कि क्या और कहाँ से हथेली करना है।

ध्यान दें, अचानक किसी के काम आता है: नीचे दिए गए कोड ने परियोजना को संकलित करते समय ऐड-ऑन के एसडीके संस्करणों की संगतता के साथ सभी समस्याओं को हल किया।

subprojects { afterEvaluate {project -> if (project.hasProperty("android")) { android { compileSdkVersion 26 buildToolsVersion '26.0.3' } } } } 

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

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



जब एक नियमित रूप से TextInput में पाठ दर्ज करने पर "कैंट" की खोज की गई थी, तो धैर्य टूट गया। बस एक टेक्स्ट बॉक्स। ऑन-स्क्रीन कीबोर्ड से बस टेक्स्ट इनपुट। मुद्रण के कुछ मिनटों के बाद, सिस्टम के भयानक अंतराल और ब्रेक शुरू होते हैं। हम एक समस्या को देखने के लिए दौड़े - हाँ, एक है, यह आरएन 5x.xx संस्करण के साथ शुरू हुआ क्या आप समस्या का समाधान करते हैं? नहीं। विषय पर दो या तीन मुद्दे बस बंद हैं। कुछ और एक बड़े में विलीन हो गए।

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

डेटाबेस

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

सबसे पहले, एक दुगना एहसास था, वे कहते हैं, आपके लिए कोई ओआरएम नहीं है, वास्तव में कोई वर्ग नहीं है, रिकॉर्डिंग केवल कॉलबैक के अंदर है। असामान्य और अजीब, विशेष रूप से मूल रूप से PHP से एक वेब डेवलपर के लिए, जो ActiveRecord और Doctrine पर बड़ा हुआ। लेकिन वास्तव में, CRUD के लिए अपने न्यूनतम कार्यों का प्रारूपण काफी सरल और तेज है। और स्वाद और आदतों के सभी सवालों को आधिकारिक जानकारी, संक्षिप्त, संक्षिप्त और समझने योग्य पढ़कर हल किया गया था।

और फिर उपहार हिंडोला शुरू हुआ:

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

ऐसा लगता था कि डेटाबेस के साथ समस्या पूरी तरह से बंद थी। हम काम कर रहे हैं! जब तक वे खोज में पहुंचे तब तक इस मामले पर बहस हुई। बल्कि, पूर्ण-पाठ खोज के लिए। अधिक सटीक, रूसी में पूर्ण-पाठ खोज के लिए, मामला संवेदनशील नहीं। उसने काम नहीं किया। निश्चित रूप से। अंग्रेजी में - काम किया। केस संवेदनशील ने भी काम किया। लेकिन एक रजिस्टर के बिना, लेकिन रूसी में - यहां तक ​​कि रोना। मदद, बगट्रैकर और इंटरनेट के माध्यम से खुदाई करने के बाद, यह पता चला कि कुछ तकनीकी कारणों से डेवलपर को मल्टीबाइट एन्कोडिंग और लैटिन वर्णमाला से परे जाने वाली सभी चीजों का समर्थन करने के बारे में "सोचने" के लिए बहुत असुविधाजनक था। खैर, वह नहीं किया। क्यों नहीं?

कुछ नहीं करना है, मुझे वर्कअराउंड की तलाश करनी थी। एक छोटे हमले के परिणामस्वरूप, एक "मजबूत-इच्छाशक्ति" निर्णय किया गया था - हम एक अलग क्षेत्र "फुलटेक्स्ट_इंडिया" बनाते हैं। इसमें, हम ऊपरी मामले में सभी पाठों की नकल करते हैं, साथ ही साथ अनावश्यक विराम चिह्नों, अनावश्यक समस्याओं और सभी प्रकार के कचरे को "कट आउट" करते हैं। उसके बाद, यह मानना ​​तर्कसंगत है कि हम मजबूर ऊपरी मामले के साथ एक खोज करते हैं।

जीत! खोज अब रूसी में एक घड़ी की तरह काम करती है, यहां तक ​​कि अंग्रेजी में भी!

कुल: रजिस्टर के साथ समस्याओं के बावजूद, डेटाबेस वास्तव में तेजी से काम करता है, सुविधा स्तर है, बॉक्स से बाहर तैयार चिप्स का एक गुच्छा - सामान्य तौर पर, मैं इसे सुझाता हूं।

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

wix / प्रतिक्रिया-देशी-नेविगेशन एक सरल और स्थिर नेविगेटर है (एक राउटर, जैसा कि एक वेब प्रोग्रामर कहेगा)।

इसे केवल इसलिए चुना गया क्योंकि इसमें सभी आवश्यक आंतरिक परीक्षण (स्क्रीन खोलने, कॉल स्टैक, रिटर्न, साइडबार) पास किए गए थे। सामान्य तौर पर, न्यूनतम आवश्यक न्यूनतम।


व्यापक रूप से पसंद किए गए प्रतिक्रिया-नेविगेशन के विपरीत, wix में 100% nativeness है। तो यह है - स्क्रीन के बीच सभी बदलाव जावा एप्लिकेशन कोड में अनुवादित किए जाते हैं और सिस्टम स्तर पर काम करते हैं।

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

इस "जंब" को छोड़कर - सब कुछ कमोबेश सहनीय और सुगम है। और, सबसे महत्वपूर्ण बात, देशी!

फाइल सिस्टम

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

"मूल फ़ाइल सिस्टम तक पहुंच" - यह रिपॉजिटरी के प्रवेश द्वार पर लिखा गया है। खैर, शायद यह है, लेकिन कुछ संशोधनों और सीमाओं के साथ।

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

एक एसिंक्रोनस फ़ंक्शन (प्रतीक्षा) के सिंक्रोनस निष्पादन के लिए आवश्यक है कि वर्तमान फ़ंक्शन एसिंक्रोनस (async) हो। ऐसा करने के लिए, फ़ंक्शन के नाम के सामने बस एसिंक्स जोड़ें। और हाँ, React.Component क्लास पद्धति के लिए, यह भी काम करता है। (प्रतिक्रिया सहायता में, ReactNative इस बारे में चुप है, हालांकि यह अपने आप में निहित है)।

 export default class CloudIndex extends BasePage { async setupBackupFolders(init = false) { // some stuff there... await RunSomeAsyncFuncInSyncMode(foo, bar) RunFuncAfter(bar) } } 

यह याद रखना महत्वपूर्ण है कि इसके बाद फ़ंक्शन भी अतुल्यकालिक हो जाता है! यदि यह पहले से कहीं इस्तेमाल किया गया है, तो इसकी कॉल को दोबारा जांचें।

2. पूर्ण क्रॉस-प्लेटफ़ॉर्म एक्सेस फ़ाइल सिस्टम का केवल एक हिस्सा है। अनिवार्य रूप से केवल एक निर्देशिका: DocumentDirectoryPath। और यह, वास्तव में, वह निर्देशिका है जिसमें एप्लिकेशन निहित है। रूट निर्देशिका को स्कैन करने के बारे में भूल जाओ, गैलरी, ऑडियो आदि में चित्रों की खोज करना।

लेकिन सामान्य तौर पर, यह अपने कार्यों को 100% हल करता है। गुल्लक में मस्तूल हेव।

बादल का उपयोग

कार्य सरल और जटिल दोनों है। सरल, क्योंकि सभी के पास एक एपीआई है - इसे लें और इसका उपयोग करें। यह मुश्किल है - मैं गहराई में नहीं जाना चाहता, और समय प्रारूप ने मुझे "संभवतः काम करने" के तरीकों में बैठने और प्रहार करने की अनुमति नहीं दी। हमने कुछ ऐसा खोजने का फैसला किया जो 100% काम करता है और यह रिएक्ट नेटिव के लिए तैयार एक्सटेंशन में लागू किया गया है।

उनमें से एक बिल्कुल थे: Google ड्राइव। डिस्क के साथ काम समझ में आता है और इसे बीवाईएल एपीआई अनुरोधों द्वारा संचालित किया जाता है। लेकिन डिस्क पर एप्लिकेशन एक्सेस प्राप्त करना पूरी तरह से अलग कहानी है।
React-native-google-signin - Google प्राधिकरण प्रबंधन प्रणाली।


यह वह जगह है जहाँ हमने "मज़े" किए। वे इसे सरल और अधिक विश्वसनीय चाहते थे, लेकिन उन्हें मिल गया ...

यह सब डेवलपर कुंजी प्राप्त करने के साथ शुरू हुआ। पहले, Google ने ही यह सब किया था। लेकिन फायरबेस के अधिग्रहण के बाद, इस समारोह को इसके अद्भुत कंसोल में स्थानांतरित करने का निर्णय लिया गया।

तो, कुंजी पाने के लिए, आपको चाहिए:

1. Google डेवलपर कंसोल पर एप्लिकेशन को वहां की ड्राइव सेवा तक "सक्षम" करने के लिए रजिस्टर करें।
2. फायरबेस कंसोल पर एप्लिकेशन को पंजीकृत करें।
3. फायरबेस कंसोल में एक फ़ाइल google-services.json बनाएँ - जिसमें सेवा कुंजियाँ सुरक्षित हों।
4. इस फाइल को इंस्टॉल किए गए एक्सटेंशन रिएक्शन-देशी-गूगल-साइनिन के साथ प्रोजेक्ट में स्लिप करें।

और फिर, हाँ। कुछ काम करने लगता है। बल्कि, सेवा प्रतिक्रियाओं में त्रुटि कोड सार्थक होने लगते हैं।

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

Google से API कुंजी प्राप्त करने की प्रक्रिया इस प्रकार है:

 await GoogleSignin.hasPlayServices() const userInfo = await GoogleSignin.signIn() this.setState({ userInfo: userInfo, }) settings.set('google.drive.key', userInfo.accessToken) trace('>> Key obtained:', userInfo.accessToken) this.apiKey = userInfo.accessToken 

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

 backupRootID = await Storage.safeCreateFolder({ name: backupFolder, parents: ["root"], }).catch((e)=>{ if(e.status == 401) { trace(' >> Google signin unauthorized', e) signGoogle() return false } else { trace(' >> Google signin failed', e) } }) // Yeahh. The api key is valid, and rootID found on GoogleDrive! SomeStorage.setRootId(backupRootID) 

यदि नहीं (त्रुटि 401 आया) - हम एक नई एपीआई कुंजी प्राप्त करने का प्रयास करते हैं और बैकअप फ़ोल्डर की आईडी फिर से प्राप्त करने के लिए अनुरोध दोहराते हैं।

और कुछ और सुखद बातें

दिनांक और समय के साथ काम करें

सम्मान और प्रशंसा का क्षण। js
इस चमत्कार से परिचित होना बहुत पहले शुरू हुआ था और यह बहुत अच्छा था कि यह रिएक्टिव नेटिव वातावरण में भी काम करता है।

प्रारूपों का एक गुच्छा, जादू + - दिन / महीना / वर्ष। बहुभाषावाद और राष्ट्रीय प्रारूपों के लिए समर्थन। ब्यूटी!

टमाटर से हमें स्नान करना संभव है, यह दर्शाता है कि यह सब साधारण तारीख के साथ हाथों से आसानी से "शासित" है, लेकिन तेजी से विकास की स्थिति में, ऐसी चीजों के बारे में मत सोचो, बहुत उपयोगी है!

रेखांकन और चार्ट

प्रतिक्रिया-मूल-चार्ट-आवरण - देशी Android MPAndroidCharts के लिए जावास्क्रिप्ट आवरण।

मुझे विभिन्न प्रकार के ग्राफ़ की बहुतायत की उपस्थिति पसंद आई (हालांकि इस स्तर पर हमने उनमें से केवल दो का उपयोग किया है - रैखिक और "पाई")।

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

बहुभाषावाद और अनुवाद

प्रतिक्रिया- देशी- i18n -वर्क एक आकर्षण की तरह, दोस्तों!

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

अनुवादक मापदंडों का उपयोग करना भी एक धमाके के साथ काम करता है:

 // en.js sync: { success: 'All items are up to date!', progress: 'Sync Notes %{idx} of %{total}' } //app.js import I18n from 'react-native-i18n' import en from './en.js' I18n.translations = { en } I18n.locale = "en" const _t = (msg, data) => { return I18n.t(msg, data) } console.log(_t('sync.progress', {idx: 3, total: 10})) 

सूखे अवशेषों में

रिएक्ट नेटिव अपनी सभी अपेक्षाओं को पूरा करता है। इसकी मदद से, आप अपेक्षाकृत तेज़ी से एक प्रोटोटाइप एप्लिकेशन को इकट्ठा कर सकते हैं, संरचना और प्रयोज्य का काम कर सकते हैं। "आधार" के लिए सभी आवश्यक उपकरण हैं।

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

जैसा कि बाजार में रिएक्ट नेटिव पर इकट्ठे हमारे उत्पाद खुद को दिखाएंगे, हम आने वाले महीनों में पता लगाएंगे। लेकिन यह पूरी तरह से अलग कहानी है।