फ्रंट-एंड वेब डेवलपर्स के लिए स्पंदन

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

इस लेख में, मैं अपना अनुभव साझा करना चाहता हूं और किसी को भी एक पारिस्थितिकी तंत्र को दूसरे पर चुनने के साथ लकवा महसूस करने के लिए प्रेरित करना चाहता हूं, यह दिखाकर कि कैसे अवधारणाएं स्थानांतरित होती हैं और कोई भी नई अवधारणा सीखने योग्य होती है।

अवधारणाएं जो स्थानांतरित हो गईं

यह खंड उन स्थानों को दिखाता है जहां फ्रंट-एंड वेब डेवलपमेंट और फ़्लटर समान हैं। यह उन कौशलों की व्याख्या करता है जो आपके पास पहले से हैं जो आपके लिए एक लाभ हैं यदि आप फ़्लटर शुरू करते हैं।

1. यूजर इंटरफेस (यूआई) को लागू करना

किसी दिए गए UI को फ्रंट-एंड वेब में लागू करने के लिए, आप HTML तत्वों की रचना करते हैं और उन्हें CSS के साथ स्टाइल करते हैं। स्पंदन में UI को लागू करने के लिए, आप लिखें विजेट्स और उनके साथ स्टाइल करें गुण.

सीएसएस की तरह, Color डार्ट में वर्ग "आरजीबीए" और "हेक्स" के साथ काम करता है। सीएसएस की तरह, स्पंदन अंतरिक्ष और आकार इकाइयों के लिए पिक्सेल का उपयोग करता है।

स्पंदन में, हमारे पास लगभग सभी सीएसएस गुणों और उनके मूल्यों के लिए डार्ट कक्षाएं और एनम हैं। उदाहरण के लिए:

स्पंदन भी है Column और Row विजेट। ये स्पंदन समतुल्य हैं display: flex सीएसएस में। कॉन्फिगर करना justify-content और align-items शैलियों, आप उपयोग करते हैं MainAxisAlignment और CrossAxisAlignment गुण। समायोजित करने के लिए flex-grow शैली, प्रभावित बच्चे (बच्चों) विजेट को लपेटें Column/Rowमें, ए Expanded or Flexible.

उन्नत UI के लिए, Flutter के पास है CustomPaint वर्ग - यह स्पंदन करने के लिए है क्या Canvas API वेब विकास के लिए है। CustomPaint आपको अपनी इच्छानुसार कोई भी UI बनाने के लिए एक पेंटर देता है। आप आमतौर पर उपयोग करेंगे CustomPaint जब आप कुछ ऐसा चाहते हैं जो वास्तव में जटिल हो। भी, CustomPaint जब विगेट्स का संयोजन काम नहीं करता है, तो यह सबसे आसान तरीका है।

2. एकाधिक के लिए विकास स्क्रीन संकल्प

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

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

मोबाइल वेब विकास से स्पंदन तक आ रहा है, आपके पास है MediaQuery सहायक वर्ग।  MediaQuery क्लास आपको वर्तमान डिवाइस देता है orientation (परिदृश्य या चित्र)। यह आपको वर्तमान व्यूपोर्ट भी देता है size, devicePixelRatio, अन्य डिवाइस जानकारी के बीच। साथ में, ये मान आपको मोबाइल डिवाइस के कॉन्फ़िगरेशन के बारे में जानकारी देते हैं। आप उनका उपयोग यह बदलने के लिए कर सकते हैं कि आपका मोबाइल ऐप विभिन्न स्क्रीन आकारों में कैसा दिखता है।

3. डिबगर्स, संपादकों और कमांड लाइन टूल्स के साथ कार्य करना

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

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

अधिकांश फ्रंट-एंड जावास्क्रिप्ट फ्रेमवर्क उनके साथ आते हैं कमांड लाइन इंटरफेस (सीएलआई)। उदाहरण के लिए: कोणीय सीएलआई, रिएक्ट ऐप बनाएं, Vue सीएलआई, आदि। स्पंदन भी एक विशेष के साथ आता है सीएलआई. स्पंदन सीएलआई आपको कोणीय परियोजनाओं के निर्माण, निर्माण और विकास की अनुमति देता है। इसमें स्पंदन परियोजनाओं के विश्लेषण और परीक्षण के लिए आदेश हैं।

अवधारणाएं जो नई थीं

यह खंड फ़्लटर-विशिष्ट अवधारणाओं के बारे में बात करता है जो वेब विकास में आसान या गैर-मौजूद हैं। यह उन विचारों की व्याख्या करता है जिन्हें आपको Flutter में प्रवेश करते समय ध्यान में रखना चाहिए।

स्क्रॉलिंग को कैसे हैंडल करें

वेब के लिए विकसित करते समय, डिफ़ॉल्ट स्क्रॉलिंग व्यवहार को वेब ब्राउज़र द्वारा नियंत्रित किया जाता है। फिर भी, आप CSS के साथ स्क्रॉलिंग को अनुकूलित करने के लिए स्वतंत्र हैं (उपयोग करके overflow).

फ्लटर में ऐसा नहीं है। विजेट समूह डिफ़ॉल्ट रूप से स्क्रॉल नहीं करते हैं। जब आपको लगता है कि विजेट समूह ओवरफ्लो हो सकते हैं, तो आपको स्क्रॉलिंग को सक्रिय रूप से कॉन्फ़िगर करना होगा।

स्पंदन में, आप स्क्रॉलिंग की अनुमति देने वाले अजीबोगरीब विजेट्स का उपयोग करके स्क्रॉलिंग को कॉन्फ़िगर करते हैं। उदाहरण के लिए: ListView, SingleChildScrollView, CustomScrollView, आदि। ये स्क्रॉल करने योग्य विजेट आपको स्क्रॉलिंग पर बहुत अच्छा नियंत्रण देते हैं। साथ CustomScrollView, आप एप्लिकेशन के भीतर विशेषज्ञ और जटिल स्क्रॉल तंत्र को कॉन्फ़िगर कर सकते हैं।

स्पंदन की ओर, का उपयोग कर ScrollViews अपरिहार्य है। Android और iOS के पास है ScrollView और UIScrollView स्क्रॉलिंग को संभालने के लिए। स्पंदन को इसका उपयोग करके प्रतिपादन और डेवलपर अनुभव को एकीकृत करने के लिए एक तरीके की आवश्यकता है ScrollViews, बहुत।

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

2. अपना विकास पर्यावरण स्थापित करना

सबसे सरल वेबसाइट बनाने के लिए, आप a . के साथ एक फाइल बना सकते हैं .html एक्सटेंशन और इसे एक ब्राउज़र में खोलें। स्पंदन इतना सरल नहीं है। स्पंदन का उपयोग करने के लिए, आपको फ़्लटर एसडीके स्थापित करना होगा और एक परीक्षण उपकरण के लिए स्पंदन कॉन्फ़िगर किया है। इसलिए यदि आप Android के लिए Flutter को कोड करना चाहते हैं, तो आपको करना होगा एंड्रॉइड एसडीके सेट करें. आपको कम से कम एक एंड्रॉइड डिवाइस (एक एंड्रॉइड एमुलेटर या एक भौतिक डिवाइस) को कॉन्फ़िगर करने की भी आवश्यकता होगी।

Apple उपकरणों (iOS और macOS) के लिए भी यही स्थिति है। मैक पर फ़्लटर स्थापित करने के बाद, आपको आगे जाने से पहले अभी भी Xcode सेट करना होगा। IOS पर फ़्लटर का परीक्षण करने के लिए आपको कम से कम एक iOS सिम्युलेटर या एक iPhone की भी आवश्यकता होगी। डेस्कटॉप के लिए स्पंदन भी काफी सेटअप है। विंडोज़ पर, आपको विजुअल स्टूडियो (वीएस कोड नहीं) के साथ विंडोज डेवलपमेंट एसडीके स्थापित करने की आवश्यकता है। लिनक्स पर, आप अधिक पैकेज स्थापित करेंगे।

अतिरिक्त सेटअप के बिना, फ़्लटर ब्राउज़र पर काम करता है। परिणामस्वरूप, आप लक्षित उपकरणों के लिए अतिरिक्त सेटअप की अनदेखी कर सकते हैं। ज्यादातर मामलों में, आप मोबाइल एप्लिकेशन के विकास के लिए फ़्लटर का उपयोग करेंगे। इसलिए, आप कम से कम Android या iOS सेटअप करना चाहेंगे। स्पंदन के साथ आता है flutter doctor आज्ञा। यह आदेश आपके विकास सेटअप की स्थिति की रिपोर्ट करता है। इस तरह, आप जानते हैं कि जरूरत पड़ने पर सेटअप में क्या काम करना है।

इसका मतलब यह नहीं है कि स्पंदन में विकास धीमा है। स्पंदन एक शक्तिशाली इंजन के साथ आता है। flutter run कोडिंग करते समय कमांड टेस्ट डिवाइस पर हॉट-रीलोडिंग की अनुमति देता है। लेकिन फिर आपको प्रेस करना होगा R वास्तव में हॉट-रीलोड करने के लिए। यह कोई मुद्दा नहीं है। स्पंदन का वीएस कोड एक्सटेंशन फ़ाइल परिवर्तनों पर ऑटो-हॉट-रीलोड की अनुमति देता है।

3. पैकेजिंग और परिनियोजन

मोबाइल एप्लिकेशन परिनियोजित करने की तुलना में वेबसाइटों को परिनियोजित करना सस्ता और आसान है। जब आप वेबसाइटों को परिनियोजित करते हैं, तो आप उन्हें डोमेन नामों के माध्यम से एक्सेस करते हैं। ये डोमेन नाम आमतौर पर सालाना नवीनीकृत होते हैं। हालांकि, वे वैकल्पिक हैं।

आज कई प्लेटफॉर्म फ्री होस्टिंग ऑफर करते हैं।

उदाहरण के लिए: DigitalOcean आपको एक मुफ़्त उप डोमेन देता है .ondigitalocean.com.

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

फ़्लटर की दुनिया में मोबाइल एप्लिकेशन के साथ, आप आमतौर पर ज्यादातर मामलों में अपने ऐप को दो स्थानों पर तैनात करते हैं।

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

ऐप स्टोर के लिए, आपको ऐप्पल डेवलपर प्रोग्राम के लिए नामांकन करना होगा। आपको बनाए रखने की आवश्यकता है $99 . की वार्षिक सदस्यता. Google Play के लिए, आपको एक बनाना होगा एकमुश्त $25 भुगतान खाते के लिए।

ये स्टोर लाइव होने से पहले समीक्षा किए गए प्रत्येक ऐप की समीक्षा करते हैं।

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

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

स्पंदन पर अतिरिक्त विचार

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

स्पंदन कुशल है। इसमें उच्च प्रदर्शन स्तर हैं। ऐसा इसलिए है क्योंकि इसे डार्ट के साथ बनाया गया है और यह डार्ट की विशेषताओं का लाभ उठाता है।

इन कई लाभों के साथ, फ़्लटर कई अनुप्रयोगों के लिए एक अच्छा विकल्प है। क्रॉस-प्लेटफ़ॉर्म ऐप्स उत्पादन और रखरखाव के दौरान पैसे और समय बचाते हैं। हालाँकि, फ़्लटर (और क्रॉस-प्लेटफ़ॉर्म समाधान) कुछ मामलों में एक इष्टतम विकल्प नहीं हो सकता है।

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

यदि आप ब्राउज़र एक्सटेंशन से वेबसाइट के साथ इंटरैक्ट करने की अपेक्षा करते हैं, तो वेब के लिए फ़्लटर का उपयोग न करें।

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

निष्कर्ष

यह उन कौशलों की समीक्षा थी जो फ़्लटर के साथ काम करने के लिए फ्रंट-एंड वेब डेवलपमेंट से लेकर काम करते हैं। हमने ऐप डेवलपमेंट कॉन्सेप्ट पर भी चर्चा की, जिसे आपको एक वेब डेवलपर के रूप में सीखना होगा।

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

चीयर्स!