🏍️ 🙋🏽 🍗 Xamarin + PCL + MVVM - विभिन्न प्लेटफार्मों के लिए मोबाइल एप्लिकेशन लिखने की सुविधा कैसे प्रदान करें 💣 ⚒️ 🏌️

ज़मीरिन 2.0 प्लेटफ़ॉर्म किसी तरह पूरी तरह से उपेक्षित रूप से उपेक्षित है, और मैं इसके सभी अद्भुत गुणों का वर्णन शुरू करना चाहता हूं

सबसे पहले, ज़मरीन क्या है?

Xamarin एक ओपन-सोर्स प्रोजेक्ट मोनो पर आधारित एक व्यावसायिक उत्पाद है, जो आपको क्रॉस-प्लेटफॉर्म विकास के लिए C # भाषा सहित .Net फ्रेमवर्क का उपयोग करने की अनुमति देता है।

मुख्य गुण:

Android, iOs और Windows8 के लिए एप्लिकेशन लिखने के लिए C #। LINQ और async / कार्य समर्थन
नेटिव यूआई, नेटिव पेफॉर्मेंस - कोड एक विशिष्ट प्लेटफ़ॉर्म के लिए संकलित किया गया है और देशी UI नियंत्रणों का उपयोग करता है
विजुअल स्टूडियो और उसके सभी प्लगइन्स, जिसमें रेस्परर, एनयूनिट परीक्षण शामिल हैं ...
ज़ामरीन स्टूडियो, जो विज़ुअल स्टूडियो के समान है, लेकिन मैक के लिए भी उपलब्ध है
.Net पुस्तकालयों का उपयोग करना
C # में लिपटे अन्य पूर्वनिर्धारित देशी घटकों का उपयोग करना
Android के लिए ग्राफिक संपादक

MvvmCross

इस उदाहरण में, मैं उन MVVM मॉडल का उपयोग करूंगा, जो इससे परिचित नहीं हैं, फिर संक्षेप में विकिपीडिया से उद्धृत करते हैं:

मॉडल-देखें-ViewModel टेम्पलेट

MVVM पैटर्न को तीन भागों में विभाजित किया गया है:
मॉडल, शास्त्रीय MVC की तरह, मॉडल काम करने के लिए आवेदन के लिए आवश्यक मूलभूत डेटा का प्रतिनिधित्व करता है।
दृश्य एक ग्राफिकल इंटरफ़ेस है, जो एक विंडो, बटन आदि है। दृश्य मॉडल द्वारा प्रदान की गई संपत्तियों या आदेशों के मूल्यों को बदलने की घटना के लिए एक ग्राहक है। यदि दृश्य मॉडल में कोई संपत्ति बदली गई है, तो वह इसके बारे में सभी ग्राहकों को सूचित करता है, और दृश्य, बदले में, दृश्य मॉडल से एक अद्यतन संपत्ति मूल्य का अनुरोध करता है। यदि उपयोगकर्ता किसी भी इंटरफ़ेस तत्व पर कार्य करता है, तो दृश्य मॉडल द्वारा प्रदान की गई कमांड को देखें।
एक दृश्य मॉडल (ViewModel, जिसका अर्थ है "मॉडल ऑफ व्यू" [1]) एक तरफ, व्यू का एक अमूर्त हिस्सा है, और दूसरी तरफ, मॉडल से डेटा को जोड़ने के लिए एक आवरण प्रदान करता है। यही है, इसमें एक मॉडल होता है जिसे एक दृश्य में परिवर्तित किया जाता है, और इसमें वे कमांड भी होते हैं जो दृश्य मॉडल को प्रभावित करने के लिए उपयोग कर सकते हैं।

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

चलिए शुरू करते हैं

एक उदाहरण के लिए, हम एक साधारण टिप काउंटिंग एप्लिकेशन बनाएंगे। हमारी उदारता और बिल की राशि के आधार पर, वह उस टिप की गणना करेगा, जिसे हम छोड़ना चाहते हैं।

स्थापना

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

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

लगभग किसी भी एप्लिकेशन में कई प्रोजेक्ट शामिल होंगे।

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

विजुअल स्टूडियो में एक नया प्रोजेक्ट बनाएं, विजुअल सी #, विंडोज, पोर्टेबल क्लास लाइब्रेरी चुनें।
हम TipCalc.Core प्रोजेक्ट और TipCalc समाधान बनाते हैं। विकल्प का चयन करें विंडोज फोन 7.5 और उच्चतर।
मैं यह नोट करना चाहता हूं कि अब तक केवल संस्करण .Net 4.0 का समर्थन किया जाता है, लेकिन इसे इस महीने शाब्दिक रूप से बदलना चाहिए।

तस्वीरें

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

kartinka

एक सफल स्थापना के बाद, हम दो नई फाइलें देखेंगे: App.cs, जिसमें MvvmCross का प्रारंभिक आरंभीकरण किया गया है, और ViewModels फ़ोल्डर में FirstViewModel.cs फ़ाइल। उचित प्रोग्रामिंग के दृष्टिकोण से, मुझे FirstViewModel वर्ग का नाम बदलकर TipViewModel करना चाहिए, लेकिन उदाहरण को सरल बनाने के लिए, इसे इस तरह से छोड़ दें।

FirstViewModel वर्ग MvxViewModel से विरासत में मिला है, यह MvvmCross लाइब्रेरी का एक वर्ग है और हमें बाद में यूआई संदेश भेजने की अनुमति देता है जब डेटा बदल गया है। यह वर्ग INotifyPropertyChanged को लागू करता है और WPF में इसकी सादृश्य BaseViewModel है।
इस वर्ग में 3 गुण जोड़ें: सबटोटल (चालान राशि), उदारता (उदारता) और टिप (टिप हम छोड़ देंगे)। और उन पर निर्भर करते हुए युक्तियों का पुनर्गणना:

पूरी कक्षा का कोड

using Cirrious.MvvmCross.ViewModels; namespace TipCalc.Core.ViewModels { public class FirstViewModel : MvxViewModel { public FirstViewModel() { } public override void Start() { _subTotal = 100; _generosity = 10; Recalcuate(); base.Start(); } private double _subTotal; public double SubTotal { get { return _subTotal; } set { _subTotal = value; RaisePropertyChanged(() => SubTotal); Recalcuate(); } } private int _generosity; public int Generosity { get { return _generosity; } set { _generosity = value; RaisePropertyChanged(() => Generosity); Recalcuate(); } } private double _tip; public double Tip { get { return _tip; } set { _tip = value; RaisePropertyChanged(() => Tip);} } private void Recalcuate() { Tip = SubTotal * ((double)Generosity) / 100.0; } } }

हम संकलन करते हैं, चीयर्स करते हैं, 'कोर' लाइब्रेरी तैयार है।

Android पर ग्राहक

अब हम अपने तर्क को लाइव स्क्रीन / फोन / टैबलेट पर देखना चाहते हैं। तो उसका स्केच दिखेगा:

एक ही समाधान में, एक नई परियोजना जोड़ें, लेकिन इसका प्रकार एंड्रॉइड -> एंड्रॉइड एप्लिकेशन होगा। चलिए इसे टिप्काल इत्यादि कहते हैं
यदि सब कुछ सही तरीके से स्थापित है, तो हम निम्नलिखित चित्र देखेंगे:

kartinka

Project1.cs और Main.axml को प्रोजेक्ट से निकालें।
हम उसी तरह से जोड़ते हैं, NuGet के माध्यम से, उसी MvvmCross पैकेज - हॉट टूना स्टार्टर पैक। हम परियोजना में नई फाइलें देखेंगे:

SplashScreen.cs - आवेदन के लिए प्रारंभिक गतिविधि
Setup.cs - MvvmCross को प्रारंभ करना और इसे 'कोर' से जोड़ना
FirstView.cs - हमारे FirstViewModel के लिए गतिविधि
FirstView.axml - और इसका लेआउट

संदर्भ में TipCalc.Core.csproj प्रोजेक्ट जोड़ें

kartinka

अब हम खुद पर नियंत्रण बनाएंगे।
ऐसा करने के लिए, FirstView.axml खोलें और इसे किसी ग्राफ़िक्स एडिटर या xml एडिटर में एडिट करें। हम वहाँ LinearLayout, TextView, EditText, SeekBar जोड़ देंगे।
MvxBind के माध्यम से हम अपने ViewModel की संपत्ति के साथ नियंत्रण गुण जोड़ेंगे।
यह इस चित्र की तरह दिखना चाहिए:

kartinka

यदि हम यह कोड लिखते हैं:

FirstView.axml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:local="http://schemas.android.com/apk/res/TipCalc.UI.Droid" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="SubTotal" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" local:MvxBind="Text SubTotal" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Generosity" /> <SeekBar android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="40" local:MvxBind="Progress Generosity" /> <View android:layout_width="fill_parent" android:layout_height="1dp" android:background="#ffff00" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Tip to leave" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" local:MvxBind="Text Tip" /> </LinearLayout>

यह ध्यान रखना महत्वपूर्ण है कि हम संपत्ति बंधन नियंत्रण कैसे करते हैं। TextView तत्व की टेक्स्ट प्रॉपर्टी लाइन लोकल का उपयोग करके हमारे FirstViewModel क्लास की टिप प्रॉपर्टी के साथ (टू-वे) जुड़ी हुई है: नियंत्रण विवरण के अंदर MvxBind = "टेक्स्ट टिप"। अन्य सभी मामलों में, axml फ़ाइल एंड्रॉइड में किसी भी लेआउट के समान है।

हम बचाते हैं, संकलित करते हैं और चलाते हैं। वोइला, हम बिल की राशि बदलते हैं या हमारी उदारता और ग्रेच्युटी स्वचालित रूप से बदल जाती है।

परिणाम

हमने ज़ामरीन स्टूडियो स्थापित किया
हमने सामान्य तर्क के साथ एक क्रॉस-प्लेटफॉर्म लाइब्रेरी बनाई
हमने एक Android एप्लिकेशन बनाया जो MvvmCross के माध्यम से तर्क के साथ संचार करता है (यह आवश्यक नहीं है, लेकिन Mvvm शांत है)

हमें क्या याद आया?

ज़ामरीन कैसे काम करती है
Mvvm क्या है, इसे MvvmCross में कैसे लागू किया जाता है और हमें क्या अतिरिक्त सुविधाएँ मिल सकती हैं
हमने iOs और Windows8 के लिए उदाहरण नहीं बनाए
और भी बहुत कुछ

सूत्रों का कहना है

Xamarin
एमवीएमक्रॉस परियोजना
एमवीएमक्रॉस ट्यूटोरियल
MvvmCross ट्यूटोरियल वीडियो

Xamarin + PCL + MVVM - विभिन्न प्लेटफार्मों के लिए मोबाइल एप्लिकेशन लिखने की सुविधा कैसे प्रदान करें

सबसे पहले, ज़मरीन क्या है?

MvvmCross

चलिए शुरू करते हैं

स्थापना

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

Android पर ग्राहक

परिणाम

हमें क्या याद आया?

सूत्रों का कहना है

More articles: