मैंने फ़्लटर (+ बोनस) पर एक डेस्कटॉप एप्लिकेशन कैसे किया

हाल ही में, समाचार मेरे ध्यान में आया कि फ़्लटर (1.9) की अगली रिलीज़ रिलीज़ हुई , जो विभिन्न उपहारों का वादा करती है, जिसमें वेब अनुप्रयोगों के शुरुआती समर्थन भी शामिल हैं।

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

ऐसा "सभी पर शासन करने के लिए एक अंगूठी है।"

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

कट के तहत - एक कहानी के बारे में कि कैसे मैंने सामान्य रिएक्टर मूल निवासी प्रोग्रामर के कार्यों को फ़्लटर टूल्स का उपयोग करके हल किया, साथ ही तकनीक का सामान्य प्रभाव भी।



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

• दूरस्थ एपीआई के लिए अनुरोध;
• स्क्रीन के बीच संक्रमण;
• संक्रमण एनिमेशन
• राज्य प्रबंधक - redux या कुछ इसी तरह की।

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

ट्रेनिंग

चूँकि flutter create कमांड अभी तक नहीं जानता कि विंडोज / लिनक्स के लिए एक प्रोजेक्ट कैसे बनाया जाए (केवल मैक वर्तमान में समर्थित है, इसके लिए --macos ध्वज का उपयोग करें), आपको इस रिपॉजिटरी का उपयोग करना होगा , जहां एक तैयार उदाहरण है। हम रिपॉजिटरी को क्लोन करते हैं, example फ़ोल्डर को वहां से लेते हैं, यदि आवश्यक हो, तो इसका नाम बदलें और इसमें काम करना जारी रखें।

चूंकि डेस्कटॉप प्लेटफ़ॉर्म के लिए समर्थन अभी भी विकास के अधीन है, फिर भी आपको कई जोड़तोड़ करने की आवश्यकता है। विकास के तहत सुविधाओं तक पहुँचने के लिए, टर्मिनल में दौड़ें:

 flutter channel master flutter upgrade 

इसके अलावा, आपको फ़्लटर को यह बताने की ज़रूरत है कि यह आपके प्लेटफ़ॉर्म का उपयोग कर सकता है:

 flutter config --enable-linux-desktop 

या

 flutter config --enable-macos-desktop 

या

 flutter config --enable-windows-desktop 

यदि सब कुछ ठीक रहा, तो flutter doctor कमांड चलाने से आपको एक समान आउटपुट देखना चाहिए:



तो, दृश्य तैयार है, हॉल में दर्शक - हम शुरू कर सकते हैं।

ख़ाका

पहली बात जो आपकी नज़र को प्रतिक्रियाशील मूल के बाद पकड़ती है, वह है एक विशेष मार्कअप लैंग्वेज a la JSX की कमी। स्पंदन आपको डार्ट में मार्कअप और व्यावसायिक तर्क दोनों लिखने के लिए मजबूर करता है। सबसे पहले, यह कष्टप्रद है: देखो को पकड़ने के लिए कुछ भी नहीं है, कोड बोझिल लगता है, और यहां तक ​​कि ये ब्रैकेट घटक के अंत में हैं!

उदाहरण के लिए, जैसे:



और यह सीमा नहीं है! यह गलत जगह पर एक को हटाने के लायक है और एक सुखद (नहीं) शगल आपको गारंटी देता है।

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

यह विशेषता है कि स्पंदन शैली में समान घटक हैं (अधिक सटीक होना - विगेट्स)।

यदि View अंदर एक पंक्ति में तीन बटन की व्यवस्था करने के लिए रिएक्ट नेटिव में, ताकि वे कंटेनर स्पेस को समान रूप से वितरित करें, तो यह मेरे लिए flexDirection: 'row' को निर्दिष्ट करने के लिए पर्याप्त है flexDirection: 'row' शैलियों में View लिए flexDirection: 'row' और शैलियों में बटन के लिए flex: 1 जोड़ें, तो फ़्लटर का एक अलग घटक है Row में तत्वों की व्यवस्था के लिए पंक्ति और पूरे उपलब्ध स्थान पर एक तत्व के "विस्तारशीलता" के लिए एक अलग: Expanded ।

परिणामस्वरूप, के बजाय

 <View style={{height: 100, width:300, flexDirection: 'row'}}> <Button title='A' style={{flex:1}}> <Button title='B' style={{flex:1}}> <Button title='C' style={{flex:1}}> </View> 

हमें इस तरह लिखना होगा:

 Container( height: 100, width: 300, child: Row( children: <Widget>[ Expanded( child: RaisedButton( onPressed: () {}, child: Text('A'), ), ), Expanded( child: RaisedButton( onPressed: () {}, child: Text('B'), ), ), Expanded( child: RaisedButton( onPressed: () {}, child: Text('C'), ), ), ], ), ) 

अधिक क्रिया, यह नहीं है?

या, कहें, आप इस कंटेनर में गोल किनारों के साथ एक फ्रेम जोड़ना चाहते हैं। प्रतिक्रिया मूल में, हम बस शैलियों में जोड़ते हैं:

 borderRadius: 5, borderWidth: 1, borderColor: '#ccc' 

स्पंदन में, हमें कंटेनर तर्कों में ऐसा कुछ जोड़ना होगा:

 decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(5)), border: Border.all(width: 1, color: Color(0xffcccccc)) ), 

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

सबसे पहले, बड़े घटकों को निश्चित रूप से टूट जाना चाहिए - अलग विजेट में या कम से कम आपके विजेट वर्ग के तरीकों में।

दूसरे, वीएस कोड में फ़्लटर प्लगइन बहुत मदद करता है - ऊपर की तस्वीर में कोष्ठक पर टिप्पणी प्लगइन द्वारा ही हस्ताक्षरित होती है (और वे अपरिभाषित होते हैं), जो कोष्ठक में भ्रमित न होने में मदद करता है। प्लस ऑटो-स्वरूपण उपकरण - आधे घंटे के बाद आपको समय-समय पर Ctrl+Shift+I को कोड स्वरूपित करने के लिए उपयोग करने की आदत होती है।

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

एपीआई अनुरोध

रिएक्ट नेटिव में, कुछ एपीआई से डेटा प्राप्त करने के लिए, हम आमतौर पर fetch के fetch विधि का उपयोग करते हैं, जो हमें Promise है।

स्पंदन में, स्थिति समान है। दस्तावेज़ीकरण में उदाहरणों को देखने के बाद, मैंने HTTP पैकेज को pubspec.yaml जोड़ा (जेएस दुनिया से pubspec.yaml एक एनालॉग) और कुछ इस तरह लिखा:

 Future<http.Response> getAnything() { return http.get(URL); } 

Future ऑब्जेक्ट प्रोमिस के अर्थ में बहुत समान है, इसलिए यहां सब कुछ बहुत पारदर्शी है। खैर, json ऑब्जेक्ट्स को fromJSON / toJSON करने के लिए, आप JSON / toJSON विशेष विधियों के साथ मॉडल कक्षाओं की अवधारणा का उपयोग कर सकते हैं। आप प्रलेखन में इसके बारे में अधिक पढ़ सकते हैं।

स्क्रीन के बीच संक्रमण

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

स्क्रीन के बीच संक्रमण काफी तुच्छ है: हम एक स्क्रीन विजेट वर्ग बनाते हैं, और फिर मानक Navigator वर्ग का उपयोग करते हैं।

सबसे सरल मामले में, यह कुछ इस तरह दिख सकता है:

 RaisedButton( child: Text('Go to Detail'), onPressed: () { Navigator.of(context).push<void>(MaterialPageRoute(builder: (context) => DetailScreen())); }, ) 

यदि आपके एप्लिकेशन में कई स्क्रीन हैं, तो पहले मार्गों का एक शब्दकोश तैयार करना अधिक उचित है, और फिर pushNamed विधि का उपयोग करें। प्रलेखन से एक छोटा सा उदाहरण:

 class NavigationApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( ... routes: <String, WidgetBuilder>{ '/a': (BuildContext context) => usualNavscreen(), '/b': (BuildContext context) => drawerNavscreen(), } ... ); } } // AnyWidget ... onPressed: () { Navigator.of(context).pushNamed('/a'); }, ... 

इसके अलावा, आप स्क्रीन के बीच स्विच करने के लिए एक विशेष एनीमेशन तैयार कर सकते हैं और कुछ इस तरह लिख सकते हैं:

 Navigator.of(context).push<void>(ScaleRoute(page: DetailScreen())); 

यहाँ ScaleRoute संक्रमण एनिमेशन बनाने के लिए एक विशेष वर्ग है। इस तरह के एनिमेशन के अच्छे उदाहरण यहां देखे जा सकते हैं ।

राजकीय प्रबंध

ऐसा होता है कि हमें अपने एप्लिकेशन के किसी भी हिस्से से कुछ डेटा तक पहुंच की आवश्यकता होती है। React Native में, इन उद्देश्यों के लिए अक्सर (यदि अक्सर नहीं) redux उपयोग किया जाता है।

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

इन उदाहरणों में थोड़ा सा रमने के बाद, मैंने Provider को रोकने का फैसला किया।

सामान्य तौर पर, यह विचार काफी सरल है: हम एक विशेष वर्ग बनाते हैं जो कि ChangeNotifier वर्ग को ChangeNotifier , जिसमें हम अपने डेटा को स्टोर करेंगे, इस वर्ग के तरीकों का उपयोग करके उन्हें अपडेट करेंगे, और यदि आवश्यक हो तो उन्हें वहां से उठा लेंगे। अधिक विवरण के लिए पैकेज प्रलेखन देखें।

ऐसा करने के लिए, provider पैकेज को pubspec.yaml और प्रदाता वर्ग तैयार करें। मेरे मामले में, यह इस तरह दिखता है:

 import 'package:flutter/material.dart'; import 'package:rates_app/models/rate.dart'; class RateProvider extends ChangeNotifier { Rate currentrate; void setCurrentRate(Rate rate) { this.currentrate = rate; notifyListeners(); } } 

यहाँ Rate मेरी मुद्रा मॉडल वर्ग है (फ़ील्ड name , code , value , आदि के साथ), वर्तमान क्षेत्र वह क्षेत्र है जिसमें चयनित मुद्रा संग्रहीत की जाएगी, और setCurrentRate वह विधि है जिसके द्वारा वर्तमान मान currentrate ।

हमारे प्रदाता को आवेदन में संलग्न करने के लिए, हम एप्लिकेशन क्लास कोड को बदलते हैं:

 @override Widget build(BuildContext context) { return ChangeNotifierProvider( builder: (context) => RateProvider(), //   child: MaterialApp( ... ), home: HomeScreen(), ), ); } 

यही है, अब यदि हम चयनित मुद्रा को बचाना चाहते हैं, तो हम कुछ इस तरह लिखते हैं:

 Provider.of<RateProvider>(context).setCurrentRate(rate); 

और अगर हम संग्रहीत मूल्य प्राप्त करना चाहते हैं, तो यह:

 var rate = Provider.of<RateProvider>(context).currentrate; 

सब कुछ काफी पारदर्शी है और कोई बॉयलरप्लेट (Redux के विपरीत) नहीं है। बेशक, शायद अधिक जटिल अनुप्रयोगों के लिए सब कुछ इतनी आसानी से नहीं होगा, लेकिन उन लोगों के लिए जो मेरे उदाहरण की तरह हैं, शुद्ध वाइन।

आवेदन बनाएँ

सिद्धांत रूप में, flutter build <platform> कमांड का उपयोग एप्लिकेशन को बनाने के लिए किया जाता है। व्यवहार में, जब मैंने flutter build linux कमांड निष्पादित किया, तो मुझे यह संदेश मिला:



"मुझे दुख नहीं हुआ," मुझे लगा, मैं build फ़ोल्डर के वजन से घबरा गया था - 287.5 एमबी - और मेरी आत्मा की सादगी के कारण, मैंने इस फ़ोल्डर को हमेशा के लिए हटा दिया। जैसा कि यह निकला - व्यर्थ में।

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

थोड़ा शोध के बाद, यह पता चला कि इस फ़ोल्डर में एक snapshot_blob.bin.d फ़ाइल थी, जिसमें, जाहिरा तौर पर, परियोजना में उपयोग की जाने वाली सभी फ़ाइलों के लिए पथ लिखे गए थे। मैंने गुम रास्तों को जोड़ा और यह काम कर गया।

इस प्रकार, इस समय स्पंदन को पता नहीं है कि डेस्कटॉप के लिए रिलीज़ बिल्ड कैसे तैयार किया जाए। वैसे भी, लिनक्स के लिए।

सामान्य तौर पर, यदि आप इस माइनस में अपनी आँखें बंद कर लेते हैं, तो आवेदन उस तरह से बाहर निकल जाता है जैसा मैं चाहता था और दिखता है

बोनस

हम वादा किए गए बोनस को पास करते हैं।

यहां तक ​​कि आवेदन लिखने के चरण में, मुझे यह जांचने की इच्छा थी कि इसे अन्य प्लेटफार्मों पर पोर्ट करना कितना मुश्किल होगा। चलो सेल फोन के साथ शुरू करते हैं।

निश्चित रूप से कम बर्बर तरीका है, लेकिन मैंने तय किया कि सबसे छोटा रास्ता सीधा है। इसलिए, मैंने बस एक नया pubspec.yaml प्रोजेक्ट बनाया, pubspec.yaml फ़ाइल को हस्तांतरित किया, इसके लिए assets , fonts और pubspec.yaml निर्देशिकाएं और AndroidManifest.xml में लाइन जोड़ी:

 <uses-permission android:name="android.permission.INTERNET" /> 

आवेदन एक आधा किक के साथ शुरू हुआ और मुझे यह मिल गया


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

नतीजतन, सब कुछ जितना संभव हो उतना सरल हो गया - यह केवल वेब अनुप्रयोगों के लिए समर्थन शामिल करने के लिए आवश्यक था। मैनुअल से निचोड़:

 flutter channel master flutter upgrade flutter config --enable-web cd <into project directory> flutter create . flutter run -d chrome 

तब मैंने इस परियोजना के लिए उसी बर्बर तरीके से आवश्यक फाइलें स्थानांतरित कीं और ऐसी प्राप्त की

सामान्य इंप्रेशन

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

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

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

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

पर्यावरण । रिएक्ट नेटिव में पर्यावरण के साथ, सब कुछ उदास है। Vscode प्लगइन्स लगातार गिरते हैं, डिबगर ऑपरेटिव के 16 गीगा और स्वैप के 70 गिग को कसकर पकड़ सकता है, सिस्टम को कसकर लटका सकता है (व्यक्तिगत अनुभव से), और सबसे आम त्रुटि सुधार परिदृश्य: "नोड_मॉड्यूल्स को हटा दें, फिर से पैकेज स्थापित करें और कई बार पुनरारंभ करने का प्रयास करें।" यह आमतौर पर मदद करता है, लेकिन ब्लाजड! ऐसा नहीं होना चाहिए, ऐसा नहीं है।

इसके अलावा, आपको समय-समय पर AndroidStudio और Xcode चलाना होगा, क्योंकि कुछ को केवल इस तरह से लगाया जाता है (निष्पक्षता में, आरएन 0.60 की रिहाई के साथ यह बेहतर हो गया)।

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

क्रॉस-प्लेटफ़ॉर्म । प्रतिक्रियात्मक मूल सिद्धांत "एक बार सीखो, हर जगह लिखो" को प्रमाणित करता है - एक बार जब आप सीख जाते हैं, तो आप विभिन्न प्लेटफार्मों के लिए लिख सकते हैं। सच है, प्रत्येक प्लेटफ़ॉर्म के तहत आप इसके लिए विशिष्ट समस्याओं का सामना करेंगे। लेकिन शायद यह केवल प्रतिक्रियाशील मूल की अपरिपक्वता का परिणाम है - फिलहाल, नवीनतम स्थिर संस्करण 0.61 है। हो सकता है कि संस्करण 1.0 के रिलीज के साथ, इनमें से अधिकांश समस्याएं दूर हो जाएंगी।

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

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

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

परियोजना के लिए स्रोत कोड GitHub पर पाया जा सकता है ।

PS मैं पिछले शिक्षक दिवस में शामिल सभी लोगों को बधाई देने के लिए यह अवसर लेता हूं।