🦆 🔩 📶 UIKit और UIKit डेवलपर्स के लिए स्विफ्टयूआई अनुप्रयोगों में MVVMs को मिलाएं 📧 👨🏾‍🤝‍👨🏻 🧝

हम जानते हैं कि ObservableObjecइसके साथ टी कक्षाएं @Publishedगुण में बनाए गए हैं Combineके लिए विशेष रूप View Modelमें SwiftUI। लेकिन वास्तुकला View Modelके UIKitकार्यान्वयन में बिल्कुल उसी का उपयोग किया जा सकता है MVVM, हालांकि इस मामले में हमें एल के गुणों को मैन्युअल रूप से "बाइंड" ( bind) करना होगा । आप आश्चर्यचकित होंगे, लेकिन इसकी मदद से आप कुछ लाइनों के कोड कर सकते हैं। इसके अलावा, अनुप्रयोगों को डिजाइन करते समय इस विचारधारा का पालन करना , आप बाद में दर्द रहित रूप से स्विच करेंगे । इस लेख का उद्देश्य एक आदिम सरल उदाहरण के साथ दिखाना है कि आप किस तरह से एक वास्तुकला को प्रभावी ढंग से लागू कर सकते हैं । इसके विपरीत, हम उसी का उपयोग दिखाते हैंUI@Published View ModeCombineUIKitSwiftUI

MVVMUIKit CombineView Model सी SwiftUI।

लेख दो सरल अनुप्रयोगों पर चर्चा करेगा जो आपको OpenWeatherMa p साइट से किसी विशिष्ट शहर के लिए नवीनतम मौसम की जानकारी का चयन करने की अनुमति देता है । लेकिन UIउनमें से एक एप्लिकेशन के साथ बनाया जाएगा SwiftUI, और दूसरा मदद से UIKit। उपयोगकर्ता के लिए, ये एप्लिकेशन लगभग समान दिखाई देंगे।

कोड Github पर है ।

उपयोगकर्ता इंटरफ़ेस ( UI) में केवल 2 UI तत्व शामिल होंगे : शहर में प्रवेश करने के लिए एक पाठ क्षेत्र और तापमान प्रदर्शित करने के लिए एक लेबल। शहर में प्रवेश करने के लिए पाठ बॉक्स सक्रिय INPUT ( Input) है, और तापमान लेबल निष्क्रिय EXIT ( Output) है।

भूमिका View Model वास्तुकला में MVVMहै कि यह से इनपुट (रों) लेता है View(या ViewControllerमें UIKitआवेदन के व्यापार तर्क), औजार और आउटपुट के पास वापस भेजता View(या ViewControllerमें UIKit), संभवतः वांछित प्रारूप में यह डेटा पेश।

इस बात View Modelसे Combineकोई फर्क नहीं पड़ता है कि आप किस प्रकार के व्यावसायिक तर्क - तुल्यकालिक या अतुल्यकालिक - बहुत सरल हैं यदि आप ObservableObject इसके @Publishedगुणों के साथ एक वर्ग का उपयोग करते हैं।

`API` OpenWeatherMap

हालांकि OpenWeatherMap सेवा आपको बहुत व्यापक मौसम की जानकारी का चयन करने की अनुमति देती है, जिस डेटा में हम रुचि रखते हैं उसका मॉडल बहुत सरल होगा, यह WeatherDetailचयनित शहर में वर्तमान मौसम के बारे में विस्तृत जानकारी प्रदान करता है और Model.swift फ़ाइल में स्थित है :

हालांकि इस विशिष्ट कार्य में हम केवल तापमान में रुचि रखेंगे temp, जो संरचना में है Main, मॉडल वर्तमान मौसम के बारे में पूरी विस्तृत जानकारी एक मूल संरचना के रूप में प्रदान करता है WeatherDetail, यह विश्वास करते हुए कि भविष्य में आप इस एप्लिकेशन की क्षमताओं का विस्तार करना चाहते हैं। संरचना WeatherDetail कोडेबल है, यह हमें कोड के सिर्फ दो लाइनों के JSONसाथ मॉडल में डेटा को सचमुच डिकोड करने की अनुमति देगा ।

संरचना WeatherDetail भी होनी चाहिएIdentifiableअगर हम भविष्य में मौसम की भविष्यवाणी [WeatherDetail] की एक सूची प्रदर्शित करने के लिए भविष्य में खुद को आसान बनाना चाहते हैं, तो सूची List के रूप में SwiftUI। यह भविष्य के अधिक परिष्कृत वर्तमान मौसम ऐप के लिए भी एक रिक्त है। प्रोटोकॉल के Identifiableलिए उस संपत्ति की उपस्थिति की आवश्यकता होती है id,जो हमारे पास पहले से है, इसलिए हमसे कोई अतिरिक्त प्रयास की आवश्यकता नहीं होगी।

आमतौर पर, OpenWeatherMap सेवा सहित सेवाएँ, URLs हमें आवश्यक संसाधनों को प्राप्त करने के लिए सभी प्रकार की सेवाएँ प्रदान करती हैं । OpenWeatherMap सेवा हमें URLsएक निश्चित शहर में 5 दिनों के लिए वर्तमान मौसम या पूर्वानुमान के बारे में विस्तृत जानकारी प्राप्त करने की पेशकश करती है city। इस आवेदन में, हम केवल वर्तमान मौसम की जानकारी और इस मामले के लिए दिलचस्पी लेंगेURLफ़ंक्शन का उपयोग करके गणना की गई absoluteURL (city: String): OpenWeatherMap

API सेवा के लिए, हम इसे WeatherAPI.swift फ़ाइल में रखेंगे । इसका केंद्रीय भाग एक शहर में विस्तृत मौसम की जानकारी का चयन करने के लिए एक विधि होगी :WeatherDetailcity

fetchWeather (for city: String) -> AnyPublisher<WeatherDetail, Never>

फ्रेमवर्क के संदर्भ में, Combine यह विधि न केवल विस्तृत मौसम की जानकारी देती है WeatherDetail, बल्कि संबंधित "प्रकाशक" है Publisher। हमारा "प्रकाशक" AnyPublisher<WeatherDetail, Never>किसी भी त्रुटि को वापस नहीं करता है - Neverऔर यदि कोई नमूना या कोडिंग त्रुटि अभी भी हुई है, तो डिप्टी WeatherDetail.placeholderत्रुटि के कारण के बारे में किसी भी अतिरिक्त संदेश के बिना लौटता है ।

अधिक विस्तार से उस विधि पर विचार करें fetchWeather (for city: String) -> AnyPublisher<WeatherDetail, Never>जो OpenWeatherMap वेबसाइट से शहर के लिए विस्तृत मौसम की जानकारी का चयन करती है cityऔर कोई त्रुटि वापस नहीं करती है Never:

शहर के नाम के आधार पर हम city गया फ़ॉर्म URL का उपयोग करके absoluteURL(city:city)विस्तृत मौसम जानकारी का अनुरोध करने WeatherDetail,
«» dataTaskPublisher(for:), Output (data: Data, response: URLResponse), Failure - URLError,
map { } (data: Data, response: URLResponse) data,
JSON data , WeatherDetail, ,
- «» catch (error ... ) «» WeatherDetail.placeholder,
main , UI,
«» «» eraseToAnyPublisher() AnyPublisher.

अतुल्यकालिक "प्रकाशक" इस प्रकार AnyPublisher"बंद" नहीं लेता है, यह तब तक कुछ भी वितरित नहीं करता है जब तक कि कोई इसे "सदस्यता" नहीं देता है। हम इसे एक ऐसे ObservableObject वर्ग में उपयोग करेंगे View Modelजो SwiftUIदोनों में एक भूमिका निभाता है और UIKit।

मॉडल बनाएं देखें

करने के लिए View Modelएक बहुत ही सरल वर्ग बनाने TempViewModelकि औजार एक प्रोटोकॉल ObservableObject दो के साथ @Published गुण:

एक @Published var city: Stringशहर है (आप इसे सशर्त रूप से एक प्रविष्टि कह सकते हैं, क्योंकि इसका मूल्य उपयोगकर्ता द्वारा नियंत्रित किया जाता है View),
दूसरा @Published var currentWeather = WeatherDetail.placeholder इस समय इस शहर में मौसम है (हम सशर्त रूप से इस संपत्ति को EXIT कह सकते हैं, क्योंकि यह OpenWeatherMap वेबसाइट से डेटा प्राप्त करके प्राप्त किया गया है )।

एक बार जब हम एक @Published संपत्ति निर्धारित cityकर लेते हैं , तो हम इसे एक साधारण संपत्ति के cityरूप में और "प्रकाशक" दोनों के रूप में उपयोग करना शुरू कर सकते हैं $city।

एक वर्ग में TempViewModel, आप न केवल हमारे लिए हित के गुणों की घोषणा कर सकते हैं, बल्कि उनके इंटरैक्शन के व्यापारिक तर्क भी लिख सकते हैं। यह अंत करने के लिए, जब हम कक्षा के एक उदाहरण को शुरू करते हैं TempViewModel , init?तो हम एक "सदस्यता" बना सकते हैं जो कक्षा के उदाहरण के पूरे "जीवन चक्र" में काम करेगी TempViewModelऔर currentWeather शहर पर वर्तमान मौसम की निर्भरता को पुन: उत्पन्न करेगी city।

ऐसा करने के लिए, Combineहम श्रृंखला को इनपुट "प्रकाशक" $city से आउटपुट "प्रकाशक" AnyPublisher<WeatherDetail, Never>तक खींचते हैं, जिसका मूल्य वर्तमान मौसम है। इसके बाद, हम "सब्सक्राइबर" की मदद से इसे "सब्सक्राइब" करते हैं assign (to: \.currentWeather, on: self) और वर्तमान मौसम का वांछित मान currentWeather "आउटपुट" @Published संपत्ति के रूप में प्राप्त करें।

हमें श्रृंखलाओं को केवल गुणों से नहीं खींचना चाहिए city, अर्थात् "प्रकाशकों" से $cityजो निर्माण में भाग लेंगे UI और यह वहां है कि हम इसे बदल देंगे।

हम यह कैसे करेंगे?

हमारे पास पहले से ही हमारे शस्त्रागार में एक फ़ंक्शन fetchWeather (for city: String)है जो कक्षा में है WeatherAPIऔर AnyPublisher<WeatherDetail, Never> शहर के आधार पर विस्तृत मौसम की जानकारी के साथ "प्रकाशक" लौटाता है city, और हम केवल किसी भी "प्रकाशक" के मूल्य का उपयोग करके $cityइसे इस फ़ंक्शन के तर्क में बदल सकते हैं। हमारे ऑपरेटर की मदद

करने के लिए सही प्रकाशक fetchWeather (for city: String) पर जाएं : ऑपरेटरCombineflatMap

flatMapपिछले "प्रकाशक" से प्राप्त आंकड़ों के आधार पर एक नया "प्रकाशक" बनाता है।

इसके बाद, हम एक बहुत ही सरल "सब्सक्राइबर" की मदद से इस नए "पब्लिशर" को "सब्सक्राइब" करते हैं assign (to: \.currentWeather, on: self)और @Publishedप्रॉपर्टी को "पब्लिशर" से प्राप्त वैल्यू असाइन करते हैं currentWeather:

हमने सिर्फ एक init( )ASYNCHRONOUS "पब्लिशर" और "सब्स्क्राइब्ड" बनाया, जिसके परिणामस्वरूप AnyCancellable"सब्सक्रिप्शन" मिला। "।

AnyCancellable "सब्सक्रिप्शन" किसी भी समय कॉल करने वाले को "सब्सक्रिप्शन" को रद्द करने की अनुमति देता है और अब "प्रकाशक" से मान प्राप्त नहीं करता है, लेकिन इसके अलावा, जैसे ही AnyCancellable"सदस्यता" अपना दायरा छोड़ती है, "प्रकाशक" द्वारा कब्जा की गई मेमोरी को मुक्त कर दिया जाता है। इसलिए, जैसे ही यह init( ) पूरा हो जाएगा, यह "सदस्यता" सिस्टम द्वारा हटा दिया जाएगा ARC, और समय की देरी के साथ प्राप्त वर्तमान मौसम के बारे में अतुल्यकालिक जानकारी असाइन करने का समय नहीं है currentWeather। इस तरह के "सब्सक्रिप्शन" को बचाने के लिए, एक OUTSIDE init()वैरिएबल बनाना आवश्यक है, जो इस "वैरिएबल" को क्लास के पूरे "लाइफ साइकल" में इस वेरिएबल में var cancellableSetरखेगा । "सदस्यता" चर में संग्रहीत किया जाता है ऑपरेटर का उपयोग : नतीजतन, "सदस्यता" वर्ग उदाहरण के पूरे "जीवन चक्र" भर में संरक्षित किया जाएगा । हम प्रकाशक के मूल्य को इच्छानुसार बदल सकते हैं , और इस शहर का वर्तमान मौसम हमेशा हमारे निपटान में रहेगा । शहर टाइप करते समय सर्वर कॉल की संख्या कम करने के लिए AnyCancellableTempViewMode

AnyCancellablecancellableSetstore ( in: &self.cancellableSet)

TempViewModel$citycurrentWeather

city, हमें शहर के नाम के साथ लाइन के "प्रकाशक" का सीधे उपयोग नहीं करना चाहिए $city, लेकिन ऑपरेटरों debounceऔर removeDuplicates: के साथ इसका संशोधित संस्करण

। ऑपरेटर को debounce कीबोर्ड पर आवश्यक जानकारी टाइप करने तक इंतजार करने के लिए उपयोग किया जाता है, और उसके बाद ही संसाधन-गहनता एक बार करें।

इसी तरह, एक ऑपरेटर removeDuplicatesमूल्यों को तभी प्रकाशित करेगा जब वे किसी भी पिछले मूल्यों से अलग होंगे। उदाहरण के लिए, यदि उपयोगकर्ता पहले प्रवेश करता है john, तो joe, और फिर john, हम johnकेवल एक बार प्राप्त करेंगे । यह हमारे UIऔर अधिक कुशल बनाने में मदद करता है ।

SwiftUI के साथ UI बनाना

अब जब हमारे पास यह है View Model, तो चलिए शुरू करते हैं UI। सबसे पहले SwiftUI, और फिर पर UIKit।

हम Xcodeएक नई परियोजना बनाते हैं SwiftUIऔर जिसके परिणामस्वरूप संरचना में हम एक चर के रूप में अपना ContentView स्थान रखते हैं । शीर्षक के साथ बदलें , शहर में प्रवेश करने के लिए एक पाठ बॉक्स जोड़ें और तापमान प्रदर्शित करने के लिए एक लेबल: हमने सीधे अपने चर के मूल्यों का उपयोग किया । हमने शहर में प्रवेश करने के लिए पाठ बॉक्स में उपयोग किया , और तापमान को प्रदर्शित करने के लिए लेबल में - । अब, गुणों में किसी भी परिवर्तन से "पुनर्वितरण" होगा : यह इस तथ्य से सुनिश्चित होता है कि हमारा हैView Model @ObservedObject modelText ("Hello, World!") Text ("WeatherApp")TextField ("City", text: self.$model.city)

model: TempViewModel()$model.citymodel.currentWeather.main?.temp

@PublishedView

View Model @ObservedObject, यह है कि, हमारे गुणों और उपयोगकर्ता इंटरफ़ेस तत्वों ( ) के "बाध्यकारी" ( binding) @Publishedको बाहर किया जाता है । ऐसा स्वत: "बाध्यकारी" केवल में संभव है ।View ModelUISwiftUI

UIKit वाला UI बनाना

इसमें क्या करना है UIKit? यह वहाँ नहीं है @ObservedObject। में UIKit हम "बाइंडिंग" प्रदर्शन करेंगे ( bindingमैन्युअल)। इस "मैनुअल बाइंडिंग" को करने के कई तरीके हैं:

Key-Value Observing या KVO: किसी key pathsसंपत्ति की निगरानी करने और अधिसूचना को प्राप्त करने के लिए उपयोग करने के लिए एक तंत्र जो इसे बदल दिया है।
कार्यात्मक प्रतिक्रियाशील प्रोग्रामिंग या FRP: एक ढांचे का उपयोग Combine।
Delegation: एक संपत्ति मूल्य बदल गया है कि एक अधिसूचना भेजने के लिए प्रतिनिधि तरीकों का उपयोग करना।
Boxing: didSet { } , .

लेख के शीर्षक को देखते हुए, हम स्वाभाविक रूप से क्षेत्र में काम करेंगे Combine। में UIKitआवेदन, हम दिखा देंगे कितना आसान है के साथ बनाने के लिए "मैन्युअल बाइंडिंग" है Combine।

में UIKitआवेदन, हम भी दो होगा UI : तत्वों UITextFieldशहर में प्रवेश करने के लिए और UILabelतापमान प्रदर्शित करने के लिए। में ViewControllerहम स्वाभाविक रूप से होगा Outletइन तत्वों:

एक साधारण वैरिएबल के रूप में viewModel, हम के रूप में ही एक है View Modelपिछले अनुभाग में:

कर "मैनुअल बंधन" के साथ पहले Combine, चलो पाठ क्षेत्र बनाते हैं UITextFieldहमारे सहयोगी और हमारे सामग्री की "प्रकाशक" text:

यह हमें viewDidLoadफ़ंक्शन का उपयोग करके "मैनुअल बाइंडिंग" को बहुत आसानी से लागू करने की अनुमति देगाbinding ():

वास्तव में, हम "प्रकाशक" की cityTextField.textPublisher"सदस्यता" एक बहुत ही सरल "ग्राहक" की मदद से लेते हैं assign (to: \.city, on: viewModel)और उपयोगकर्ता द्वारा टाइप किए गए पाठ cityTextFieldको हमारी "इनपुट" @Publishedसंपत्ति के लिए हमारे "इनपुट" संपत्ति में असाइन करते cityहैं View Model।

इसके अलावा, हम एक और दिशा में परिवर्तन करते हैं: हम "सब्सक्राइबर" की @Publishedसंपत्ति $currentWeather को "सब्सक्राइबर" sink और उसके बंद होने की मदद से "सब्सक्राइब" receiveValueकरते हैं, तापमान मान बनाते हैं और इसे लेबल पर असाइन करते हैं temperatureLabel। "सदस्यता"

में प्राप्त viewDidLoad एक चर में संग्रहीत किया जाता है var cancellableSet। उन्हें एक बार बनाने के बाद, हम उन्हें कक्षा उदाहरण के पूरे "जीवन चक्र" में काम करने की अनुमति देते हैं ViewControllerऔर साथ में हमारे "सदस्यता" के साथ View Modelआवेदन के सभी व्यावसायिक तर्क को लागू करें।

वैसे, प्रोटोकॉल के ObservableObjectसाथ काम नहीं करता है UIKit, लेकिन यह हस्तक्षेप नहीं करता है। UIKit पूरी तरह से प्रोटोकॉल के प्रति उदासीन ObservableObjectऔर, सिद्धांत रूप में, इसे अनुप्रयोगों View Modelमें हटाया जा सकता है UIKit :

लेकिन हम ऐसा नहीं करेंगे, क्योंकि हम इसे View Modelचालू अनुप्रयोग UIKitऔर संभवतः भविष्य के अनुप्रयोगों दोनों के लिए अपरिवर्तित रखना चाहते हैं SwiftUI।

बस इतना ही। कोड Github पर है ।

निष्कर्ष

एक कार्यात्मक प्रतिक्रियाशील ढांचे Combineतुम बहुत बस और संक्षेप में लागू करने के लिए अनुमति देता है MVVMदोनों वास्तुकला SwiftUIमें UIKitऔर समझने और पठनीय कोड के रूप में।

लिंक:

संयुक्त + UIKit + MVVM
कंबाइन
आईओएस एमवीवीएम ट्यूटोरियल का उपयोग करना : आईवीएस पीएस के
लिए कंबाइन ट्यूटोरियल के साथ एमवीसी एमवीवीएम से रिफ़ेक्ट

करना यदि आप कुछ मौसम की जानकारी देखना चाहते हैं, तो आपको ओपनवेरपेज़ पर पंजीकरण करना होगा और प्राप्त करना होगा API key। इस प्रक्रिया में आपको 2 मिनट से अधिक नहीं लगेगा।

UIKit और UIKit डेवलपर्स के लिए स्विफ्टयूआई अनुप्रयोगों में MVVMs को मिलाएं

API OpenWeatherMap

मॉडल बनाएं देखें

SwiftUI के साथ UI बनाना

UIKit वाला UI बनाना

More articles:

`API` OpenWeatherMap