स्पंदन - क्रॉस-प्लेटफॉर्म विकास पर एक नया रूप

अगस्त 2018 में, स्टैक ओवरफ्लो पर फ्लटर सबसे अनुरोधित क्रॉस-प्लेटफॉर्म तकनीक बन गया।

हमारे ब्लॉग पर, एक प्रमाणित Google एजेंसी, सर्फ से आर्टेम ज़ैतसेव और एवगेनी सैट्रोव बताएंगे कि यह क्यों और कैसे हुआ:

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

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

बहुत जल्द, Google के नए मोबाइल विकास ढांचे, फ़्लटर की अंतिम रिलीज़, स्टैटर ओवरफ़्लो पर सबसे अनुरोधित क्रॉस-प्लेटफ़ॉर्म तकनीक बनने की उम्मीद है। मैं इस बात पर जोर देता हूं कि इसे विशेष रूप से मोबाइल एप्लिकेशन के लिए डिज़ाइन किया गया है और इसमें दो प्लेटफॉर्म शामिल हैं: एंड्रॉइड और आईओएस। फिलहाल, रिलीज पूर्वावलोकन 2 संस्करण प्रस्तुत किया गया है। स्पंदन पर नई परियोजनाएं एक विशेष संग्रह में आती हैं, जिसका उद्देश्य ढांचे की क्षमताओं को दिखाना है। अब फ्रेमवर्क सक्रिय रूप से घटकों और वास्तुशिल्प ऐड-ऑन के साथ डेवलपर समुदाय (उदाहरण के लिए, Redux के कार्यान्वयन) के लिए अद्यतन किया गया है।

आपको स्पंदन में विश्वास करने की आवश्यकता क्यों है?

त्वरित विकास के लिए महान ट्यूनिंग

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

हॉट रीलोड एक किलर सुविधा है जो आपको कोड से सभी परिवर्तनों को एक रनिंग एमुलेटर या कनेक्टेड डिवाइस में तुरंत स्थानांतरित करने की अनुमति देता है।

सादगी और लेआउट की अभिव्यक्ति

यदि आपने कभी भी Android के लिए एप्लिकेशन विकसित किए हैं, तो मुझे यकीन है कि लेआउट कुछ ऐसा नहीं है जिसका आपने आनंद लिया है।

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

new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: EdgeInsets.all(16.0), child: Text( '$_name', ), ), //... 

इस तरह से Flutter प्रोजेक्ट कोड दिखता है। सबसे पहले, बड़ी संख्या में कोष्ठक डराते हैं, लेकिन ऐसे "पेड़" सुंदर दृश्य हैं। स्पंदन रचना को बढ़ावा देता है: तैयार विगेट्स से आप डिजाइनर की तरह एक नया बना सकते हैं। लगभग हर घटक में एक बच्चा या बच्चों की संपत्ति होती है जो क्रमशः किसी अन्य तत्व या तत्वों की एक सरणी को स्वीकार करता है। सब कुछ सरल और स्पष्ट है। आप एक सुंदर यूजर इंटरफेस को काफी तेज बना सकते हैं।

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

प्रतिक्रियाशील ढांचा

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

स्पंदन प्रत्येक मंच के लिए मूल कोड में संकलित किया गया है। "हुड के तहत," वह एक इंजन इंजन के रूप में स्किया का उपयोग करता है।

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

मंच की पूरी शक्ति अभी भी आपके हाथों में है

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

पर्यावरण की स्थापना

फ्लटर के साथ शुरुआत करना आसान है।

विकास के दौरान, आधिकारिक प्रलेखन उचित प्लगइन्स के साथ एंड्रॉइड स्टूडियो, इंटेलीज या वीएसकोड का उपयोग करने की सलाह देता है, लेकिन कोई भी पाठ संपादक करेगा।

पहला कदम

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

दूसरा कदम

यदि सब कुछ सुचारू रूप से चला, तो आप पहली परियोजना बनाना शुरू कर सकते हैं। यदि त्रुटियां पाई जाती हैं, तो डॉक्टर आपको बताएंगे कि उन्हें कैसे हल किया जाए।

चरण तीन

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

पर्यावरण की स्थापना पर विवरण आधिकारिक दस्तावेज में लिखे गए हैं।

तीव्र गति

 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); 

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

अब उनके साथ डार्ट है । Google इसे मजबूत टाइपिंग, उच्च प्रदर्शन और लचीलेपन के साथ जावास्क्रिप्ट के विकल्प के रूप में स्थान दे रहा है।

डार्ट सिंटैक्स सीखना आसान है, हालांकि कोटलिन के रूप में सुंदर नहीं है। शायद यह स्वाद और आदत का मामला है।

परियोजना निर्माण

आप कंसोल में नाम कमांड को चलाकर या IDE का उपयोग करके एक प्रोजेक्ट बना सकते हैं (Android Studio में -> न्यू फ़्लटर प्रोजेक्ट)।

अनुप्रयोग संरचना

प्रोजेक्ट बनाने के बाद, आप निम्न संरचना देखेंगे। एप्लिकेशन की रूट डायरेक्टरी में चार पैकेज हैं - lib, ios, android और test।

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

रूट निर्देशिका में एक pubspec.yaml कॉन्फ़िगरेशन फ़ाइल है - लाइब्रेरी वहां से जुड़ी हुई हैं, आदि। अगर हम सादृश्य के बारे में बात करते हैं, तो फ़्लटर के लिए यह build.gradle की तरह है (यह भी है, लेकिन पहले से ही देशी एंड्रॉइड में)।

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

आपकी परियोजना में तुरंत एक main.dart फ़ाइल होगी जिसमें एक उदाहरण के साथ कोड होगा। आवेदन में एक एकल प्रवेश बिंदु है - मुख्य विधि। वह रूट विजेट बनाने के लिए जिम्मेदार है।

सब कुछ एक विजेट है

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

आधिकारिक वेबसाइट के अनुसार, "प्रत्येक विजेट उपयोगकर्ता इंटरफ़ेस के एक हिस्से का अपरिवर्तनीय विवरण है"।

उदाहरण के लिए, आइए इस स्क्रीन के साथ एक एप्लिकेशन बनाएं:

निम्नलिखित विगेट्स यहां मौजूद हैं:

• एप्लिकेशन
• प्रदर्शन
• AppBar
• पाठ
• लोडर के साथ बटन

उनमें से कुछ को फ्रेमवर्क में लागू किया गया है, कुछ को स्वयं तैयार भागों से बनाया जाना चाहिए।

विजेट दो प्रकार के होते हैं Stateless और Stateful । पूर्व स्थिर हैं (उदाहरण के लिए, पाठ), बाद वाले राज्य परिवर्तन का समर्थन करते हैं (उदाहरण के लिए, एक स्क्रीन)।

राज्यविहीन

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

 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: new AppBar( title: new Text("Flutter Random Name"), ), body: new MyHomePage(), ), ); } } 

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

उदाहरण में, यह विजेट MaterialApp (मटेरियलडिजाइन से कंपोनेंट्स पर आधारित एप्लिकेशन की जड़) से बनाया गया है, जिसके अंदर Scaffold - यह स्क्रीन है।

MyHomePage एक विजेट भी है जो स्क्रीन के बॉडी को खींचता है, AppBar को छोड़कर। इस मामले में, यह एक राज्य है। हम उसके बारे में नीचे बात करेंगे।

इंटरफ़ेस का निर्माण क्लास कंस्ट्रक्टर को तर्कों के आरंभ के साथ संबंधित फ़ील्ड में पास करके होता है। डार्ट वैकल्पिक विधि मापदंडों का समर्थन करता है, जो UI बनाने में लचीलापन प्रदान करता है।

नोट: दूसरे संस्करण से शुरू होने वाले डार्ट में new शब्द वैकल्पिक है।

विगेट्स के ऐसे लेआउट के साथ, आप एक स्थिर एप्लिकेशन स्क्रीन प्राप्त कर सकते हैं। इसके अलावा, डेवलपर की कल्पना बिल्कुल भी असीमित है।

statefull

जब उनके राज्य में परिवर्तन ( State ) होता है, तो राज्य विजेट का समर्थन किया जाता है। इस तरह के एक विजेट बनाने के लिए, StatefullWidget से इनहेरिट करना और एक इनहेरीटर्ड क्लास State<T> बनाना आवश्यक है, जो विजेट की स्थिति है और जो उपयोगकर्ता स्मार्टफ़ोन स्क्रीन पर देखता है, उसके लिए ज़िम्मेदार है।

विजेट की स्थिति को setState() {} विधि कहकर setState() {} जाता है। उदाहरण के लिए, अंदर आप बटन के लिए एक अलग पृष्ठभूमि का रंग सेट कर सकते हैं, और रूपरेखा स्वयं UI के न्यूनतम आवश्यक पुनः निर्धारण का निर्धारण करेगी।

मेरे मामले में, MyHomePage मुख्य पृष्ठ एक राज्य विजेट होगा। यह _name संग्रहीत _name - वह नाम जो पाठ ब्लॉक में प्रदर्शित किया जाएगा, और _isLoading ध्वज (आंतरिक LoadingButton विजेट को कैसे प्रस्तुत किया जाएगा इसके लिए जिम्मेदार; माता-पिता के माध्यम से राज्य नियंत्रण का एक उदाहरण)।

 class _MyHomePageState extends State<MyHomePage> { String _name = ""; bool _isLoading = false; @override Widget build(BuildContext context) => Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: EdgeInsets.all(16.0), child: Text( '$_name', ), ), LoadingButton( isLoading: _isLoading, action: _generateName, ) ], ), ); } 

बटन में कॉलबैक, action , जहां _generateName() विधि दी गई है। ध्यान दें कि डार्ट में कोई एक्सेस मॉडिफायर नहीं हैं, जैसे private और public । लेकिन अगर आप मॉड्यूल के अंदर कुछ निजी बनाना चाहते हैं, तो नाम उपसर्ग "_" से शुरू होना चाहिए।

_generateName विधि अतुल्यकालिक है। वह नाम लोड करने के लिए जिम्मेदार है, isLoading ध्वज को बदलने और name के मान को सेट करने के लिए, जो बटन और पाठ को फिर से शुरू करने की ओर जाता है।

 final snack = SnackBar(content: Text("Handle error!")); _generateName() async { toggleLoading(); try { //   await // Json setName(map["name"]); toggleLoading(); } catch (e) { setName("oops!"); Scaffold.of(context).showSnackBar(snack); toggleLoading(); } } void toggleLoading() { setState(() { _isLoading = !_isLoading; }); } 

स्थिति बदलने के लिए, आपको setState() {} कॉल करना होगा। इस कॉल के बिना, विजेट केवल पुनः तैयार नहीं किया जाएगा।

लोडर का कार्यान्वयन काफी सरल निकला। Redrawing के समय, या तो टेक्स्ट या एक संकेतक को बटन में प्रतिस्थापित किया जाता है।

कार्यान्वयन केवल कुछ पंक्तियाँ लेता है

 _buildButtonChild() { if (isLoading) { return Transform.scale( scale: 0.5, child: CircularProgressIndicator(), ); } else { return Text("Click for name"); } } 

आकार को कम करने के लिए Transform.scale आवश्यकता होती है।

स्पंदन में असिंक्रोनस इंटरैक्शन, साथ ही डार्ट में, async-await पर आधारित है। अधिक विवरण यहां , यहां और यहां देखे जा सकते हैं ।

कहाँ से शुरू करें?

आज, जब नई स्पंदन सामग्री लगभग दैनिक रूप से जारी की जाती है, तो इस तकनीक के साथ दोस्त बनाने में मदद करने के लिए अच्छे पाठ्यक्रमों की कमी नहीं है।

मूल फ़्लटर कोर्स का एक अच्छा उदाहरण उडनेस पर पाठ्यक्रम है। पाठ को दो अध्यायों में विभाजित किया गया है, जिनमें से प्रत्येक के विचारशील मार्ग में 3-4 घंटे लगेंगे।

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

निष्कर्ष

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