SwiftUI पर अनुप्रयोग विकास। भाग 1: डेटा प्रवाह और Redux

WWDC 2019 में यूनियन सत्र में भाग लेने के बाद, मैंने विस्तार से SwiftUI का अध्ययन करने का निर्णय लिया। मैंने उनके साथ काम करने में बहुत समय बिताया और अब मैंने एक वास्तविक एप्लिकेशन विकसित करना शुरू कर दिया है जो उपयोगकर्ताओं की एक विस्तृत श्रृंखला के लिए उपयोगी हो सकता है।

मैंने इसे MovieSwiftUI कहा - यह नई और पुरानी फिल्मों को खोजने के साथ-साथ TMDB API का उपयोग करके उन्हें एक संग्रह में एकत्रित करने के लिए एक ऐप है । मैं हमेशा फिल्मों से प्यार करता था और इस क्षेत्र में काम करने वाली एक कंपनी भी बनाई, हालांकि लंबे समय तक। कंपनी को शांत कहना कठिन था, लेकिन आवेदन - हाँ!

हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रोमो कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

स्किलबॉक्स अनुशंसा करता है: ऑन-लाइन शैक्षिक पाठ्यक्रम "प्रोफेशन जावा-डेवलपर" ।

तो MovieSwiftUI क्या करता है?

• एपीआई के साथ बातचीत - यह लगभग कोई भी आधुनिक अनुप्रयोग करता है।
• लोड अतुल्यकालिक डेटा और पार्सल JSON कोडेबल का उपयोग कर स्विफ्ट मॉडल में।
• मांग पर डाउनलोड की गई छवियों को दिखाता है और उन्हें कैश करता है।
• IOS, iPadOS, और macOS के लिए यह ऐप इन OS के उपयोगकर्ताओं के लिए सबसे अच्छा UX प्रदान करता है।
• उपयोगकर्ता डेटा उत्पन्न कर सकता है, अपनी मूवी सूची बना सकता है। एप्लिकेशन उपयोगकर्ता डेटा को बचाता है और पुनर्स्थापित करता है।
• Redux पैटर्न का उपयोग करके दृश्य, घटक और मॉडल स्पष्ट रूप से अलग किए गए हैं। यहां डेटा स्ट्रीम यूनिडायरेक्शनल है। इसे पूरी तरह से कैश, रिस्टोर और ओवरराइट किया जा सकता है।
• अनुप्रयोग मूल घटकों का उपयोग करता है SwiftUI, TabbedView, SegmentedControl, NavigationView, प्रपत्र, मोडल, आदि। यह कस्टम व्यू, जेस्चर, UI / UX भी प्रदान करता है।

वास्तव में, एनीमेशन चिकनी है, GIF थोड़ा चिकोटी निकला

आवेदन पर काम करने से मुझे बहुत अनुभव मिला, और कुल मिलाकर यह एक सकारात्मक अनुभव है। मैं पूरी तरह से कार्यात्मक एप्लिकेशन लिखने में सक्षम था, सितंबर में मैं इसे सुधारूंगा और इसे iOS 13 की रिलीज के साथ, AppStore में डालूंगा।

Redux, BindableObject, और EnvironmentObject

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

मैंने SwiftUI पर एक एप्लिकेशन के निर्माण के लिए डेटा प्रवाह वास्तुकला के रूप में Redux को चुनने का कभी अफसोस नहीं किया। UIKit एप्लिकेशन में Redux का उपयोग करते समय सबसे कठिन क्षणों में स्टोर के साथ काम कर रहे हैं, साथ ही डेटा प्राप्त करना और प्राप्त करना और अपने विचारों / घटकों के साथ तुलना करना। ऐसा करने के लिए, मुझे एक प्रकार की कनेक्टर लाइब्रेरी (रीस्विफ़्ट और रेकोटलिन पर) बनानी पड़ी। अच्छी तरह से काम करता है, लेकिन काफी कोड। दुर्भाग्य से, यह खुला स्रोत नहीं है।

अच्छी खबर है! SwiftUI के बारे में चिंता करने वाली एकमात्र चीज़ - यदि आप Redux का उपयोग करने की योजना बनाते हैं - स्टोर, स्टेट्स और रिड्यूसर हैं। स्विफ्टयूआई ने @EnvironmentObject के लिए स्टोर के साथ बातचीत की। तो, स्टोर BindableObject से शुरू होता है।

मैंने एक साधारण स्विफ्ट पैकेज बनाया, स्विफ्ट यूफ्लक्स , जो रेडक्स का मूल उपयोग प्रदान करता है। मेरे मामले में, यह MovieSwiftUI का हिस्सा है। मैंने इस घटक का उपयोग करने में आपकी मदद करने के लिए एक चरण-दर-चरण ट्यूटोरियल भी लिखा है ।

यह कैसे काम करता है?

final public class Store<State: FluxState>: BindableObject { public let willChange = PassthroughSubject<Void, Never>() private(set) public var state: State private func _dispatch(action: Action) { willChange.send() state = reducer(state, action) } } 

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

खैर, चूँकि स्टोर एक BindableObject है, इसलिए यह PassthroughSubject द्वारा प्रदान की जाने वाली WillChange संपत्ति का उपयोग करके अपने मूल्य में बदलाव के SwiftUI को सूचित करेगा। ऐसा इसलिए है क्योंकि BindableObject को Publisher टाइप प्रदान करना होगा, लेकिन प्रोटोकॉल कार्यान्वयन इसके प्रबंधन के लिए जिम्मेदार है। सब के सब, यह Apple का एक बहुत शक्तिशाली उपकरण है। तदनुसार, अगले रेंडरिंग चक्र में, SwiftUI राज्य परिवर्तन के अनुसार प्रतिनिधित्व के शरीर को प्रदर्शित करने में मदद करेगा।

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

 class SceneDelegate: UIResponder, UIWindowSceneDelegate { var window: UIWindow? func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { if let windowScene = scene as? UIWindowScene { let window = UIWindow(windowScene: windowScene) let controller = UIHostingController(rootView: HomeView().environmentObject(store)) window.rootViewController = controller self.window = window window.makeKeyAndVisible() } } } struct CustomListCoverRow : View { @EnvironmentObject var store: Store<AppState> let movieId: Int var movie: Movie! { return store.state.moviesState.movies[movieId] } var body: some View { HStack(alignment: .center, spacing: 0) { Image(movie.poster) }.listRowInsets(EdgeInsets()) } } 

जब अनुप्रयोग प्रारंभ होता है, तब Store एक EnvironmentObject के रूप में लागू किया जाता है, और फिर @EnvironmentObject का उपयोग करके किसी भी दृश्य में उपलब्ध होता है। प्रदर्शन को कम नहीं किया जाता है क्योंकि व्युत्पन्न गुणों को जल्दी से पुनर्प्राप्त किया जाता है या आवेदन स्थिति से गणना की जाती है।

यदि फिल्म के लिए पोस्टर में बदलाव होता है, तो ऊपर दिया गया कोड छवि बदलता है।

और यह वास्तव में सिर्फ एक पंक्ति में किया जाता है, जिसकी मदद से राज्य से विचार जुड़े हुए हैं। यदि आपने iOS पर ReSwift के साथ काम किया है या यहां तक ​​कि React से जुड़ते हैं , तो आप समझेंगे कि SwiftUI जादू क्या है।

और अब आप कार्रवाई को सक्रिय करने और एक नया राज्य प्रकाशित करने का प्रयास कर सकते हैं। यहाँ एक और अधिक जटिल उदाहरण है।

 struct CustomListDetail : View { @EnvironmentObject var store: Store<AppState> let listId: Int var list: CustomList { store.state.moviesState.customLists[listId]! } var movies: [Int] { list.movies.sortedMoviesIds(by: .byReleaseDate, state: store.state) } var body: some View { List { ForEach(movies) { movie in NavigationLink(destination: MovieDetail(movieId: movie).environmentObject(self.store)) { MovieRow(movieId: movie, displayListImage: false) } }.onDelete { (index) in self.store.dispatch(action: MoviesActions.RemoveMovieFromCustomList(list: self.listId, movie: self.movies[index.first!])) } } } } 

ऊपर दिए गए कोड में, मैं प्रत्येक IP के लिए SwiftUI से .onDelete क्रिया का उपयोग करता हूं। यह सूची में लाइन को हटाने के लिए सामान्य iOS स्वाइप प्रदर्शित करने की अनुमति देता है। इसलिए, जब उपयोगकर्ता डिलीट बटन को छूता है, तो वह संबंधित कार्रवाई शुरू करता है और फिल्म को सूची से हटा देता है।

खैर, चूंकि सूची संपत्ति को BindableObject की स्थिति से लिया गया है और इसे एक EnvironmentObject के रूप में लागू किया गया है, इसलिए SwiftUI सूची को अपडेट करता है, क्योंकि ForEach गणना की गई फिल्म संपत्ति के साथ जुड़ा हुआ है।

यहाँ MoviesState reducer का हिस्सा है:

 func moviesStateReducer(state: MoviesState, action: Action) -> MoviesState { var state = state switch action { // other actions. case let action as MoviesActions.AddMovieToCustomList: state.customLists[action.list]?.movies.append(action.movie) case let action as MoviesActions.RemoveMovieFromCustomList: state.customLists[action.list]?.movies.removeAll{ $0 == action.movie } default: break } return state } 

Reducer को तब निष्पादित किया जाता है जब आप कार्रवाई सबमिट करते हैं और एक नया राज्य वापस करते हैं, जैसा कि ऊपर बताया गया है।

मैं अभी के लिए विवरण में नहीं जाऊंगा - स्विफ्टयूआई वास्तव में कैसे प्रदर्शित करता है। इसे और गहराई से समझने के लिए, आपको SwiftUI में डेटा प्रवाह पर WWDC सत्र को देखना चाहिए। यह भी विस्तार से बताता है कि क्यों, कब और कैसे राज्य का उपयोग करना है, @Binding, ObjectBinding, और EnvironmentObject।

स्किलबॉक्स अनुशंसा करता है:

• व्यावहारिक पाठ्यक्रम "मोबाइल डेवलपर प्रो" ।
• एप्लाइड पायथन डेटा विश्लेषक ऑनलाइन पाठ्यक्रम।
• दो वर्षीय व्यावहारिक पाठ्यक्रम "मैं एक प्रो वेब डेवलपर हूं । "