SwiftUI वर अनुप्रयोग विकास. भाग १: डेटाफ्लो आणि रेडक्स

WWDC 2019 च्या स्टेट ऑफ द युनियन सत्रात सहभागी झाल्यानंतर, मी SwiftUI मध्ये खोलवर जाण्याचा निर्णय घेतला. मी त्याच्यासोबत काम करण्यात बराच वेळ घालवला आहे आणि आता एक वास्तविक अनुप्रयोग विकसित करण्यास सुरुवात केली आहे जी वापरकर्त्यांच्या विस्तृत श्रेणीसाठी उपयुक्त असू शकते.

मी याला MovieSwiftUI म्हटले - हे नवीन आणि जुने चित्रपट शोधण्यासाठी तसेच संग्रहात संग्रहित करण्यासाठी एक अॅप आहे TMDB API. मला नेहमीच चित्रपटांची आवड आहे आणि या क्षेत्रात काम करणारी एक कंपनी देखील मी खूप पूर्वीपासून तयार केली आहे. कंपनीला क्वचितच मस्त म्हणता येईल, पण अर्ज होता!

आम्ही आठवण करून देतो: सर्व Habr वाचकांसाठी - Habr प्रोमो कोड वापरून कोणत्याही स्किलबॉक्स कोर्समध्ये नावनोंदणी करताना 10 रूबल सवलत.

स्किलबॉक्स शिफारस करतो: शैक्षणिक ऑनलाइन अभ्यासक्रम "प्रोफेशन जावा डेव्हलपर".

तर MovieSwiftUI काय करू शकते?

• API सह संवाद साधतो - जवळजवळ कोणताही आधुनिक अनुप्रयोग हे करतो.
• विनंत्यांवर असिंक्रोनस डेटा लोड करते आणि JSON वापरून स्विफ्ट मॉडेलमध्ये पार्स करते कोडेबल.
• विनंतीनुसार लोड केलेल्या प्रतिमा दर्शविते आणि त्यांना कॅश करते.
• iOS, iPadOS आणि macOS साठी हे अॅप या OS च्या वापरकर्त्यांसाठी सर्वोत्तम UX प्रदान करते.
• वापरकर्ता डेटा व्युत्पन्न करू शकतो आणि त्यांच्या स्वतःच्या चित्रपटांच्या सूची तयार करू शकतो. अनुप्रयोग वापरकर्त्याचा डेटा वाचवतो आणि पुनर्संचयित करतो.
• Redux पॅटर्न वापरून दृश्ये, घटक आणि मॉडेल स्पष्टपणे वेगळे केले जातात. येथे डेटा प्रवाह दिशाहीन आहे. हे पूर्णपणे कॅशे, पुनर्संचयित आणि अधिलिखित केले जाऊ शकते.
• अॅप्लिकेशन स्विफ्टयूआय, टॅबडव्ह्यू, सेगमेंटेड कंट्रोल, नेव्हिगेशन व्ह्यू, फॉर्म, मॉडेल इ.चे मूलभूत घटक वापरते. हे सानुकूल दृश्ये, जेश्चर, UI/UX देखील प्रदान करते.

खरं तर, अॅनिमेशन गुळगुळीत आहे, जीआयएफ थोडा धक्कादायक आहे

अॅपवर काम केल्याने मला खूप अनुभव मिळाला आणि एकूणच हा एक सकारात्मक अनुभव होता. मी पूर्णपणे कार्यशील अनुप्रयोग लिहू शकलो, सप्टेंबरमध्ये मी त्यात सुधारणा करेन आणि त्याच वेळी iOS 13 च्या रिलीझसह अॅपस्टोरमध्ये प्रकाशित करेन.

Redux, BindableObject आणि EnvironmentObject

मी आता सुमारे दोन वर्षांपासून Redux सह काम करत आहे, म्हणून मी त्यात तुलनेने पारंगत आहे. विशेषतः, मी ते फ्रंटएंडमध्ये वापरतो प्रतिक्रिया द्या वेबसाइट, तसेच मूळ iOS (Swift) आणि Android (Kotlin) अनुप्रयोग विकसित करण्यासाठी.

स्विफ्टयूआय ऍप्लिकेशन तयार करण्यासाठी डेटा फ्लो आर्किटेक्चर म्हणून रेडक्स निवडल्याबद्दल मला कधीही खेद वाटला नाही. UIKit अॅपमध्ये Redux वापरताना सर्वात आव्हानात्मक भाग म्हणजे स्टोअरमध्ये काम करणे आणि डेटा मिळवणे आणि पुनर्प्राप्त करणे आणि ते तुमच्या दृश्ये/घटकांवर मॅप करणे. हे करण्यासाठी, मला कनेक्टर्सची एक प्रकारची लायब्ररी तयार करावी लागली (ReSwift आणि ReKotlin वापरून). चांगले कार्य करते, परंतु बरेच कोड. दुर्दैवाने, ते (अद्याप) मुक्त स्रोत नाही.

चांगली बातमी! SwiftUI सह काळजी करण्यासारख्या गोष्टी - जर तुम्ही Redux वापरण्याची योजना करत असाल तर - स्टोअर्स, स्टेटस आणि रिड्यूसर आहेत. @EnvironmentObject ला धन्यवाद स्विफ्टयूआय द्वारे स्टोअरशी परस्परसंवादाची पूर्णपणे काळजी घेतली जाते. तर, BindableObject ने स्टोअर सुरू होते.

मी एक साधे स्विफ्ट पॅकेज तयार केले, SwiftUIFlux, जे Redux चा मूलभूत वापर प्रदान करते. माझ्या बाबतीत तो 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 ला PublisherType प्रदान करणे आवश्यक आहे, परंतु प्रोटोकॉल अंमलबजावणी हे व्यवस्थापित करण्यासाठी जबाबदार आहे. एकूणच, हे ऍपलचे एक अतिशय शक्तिशाली साधन आहे. त्यानुसार, पुढील रेंडरिंग सायकलमध्ये, स्विफ्टयूआय राज्य बदलानुसार दृश्यांचे मुख्य भाग प्रस्तुत करण्यात मदत करेल.

वास्तविक, हे सर्व स्विफ्टयूआयचे हृदय आणि जादू आहे. आता, राज्याचे सदस्यत्व घेतलेल्या कोणत्याही दृश्यात, राज्याकडून कोणता डेटा प्राप्त झाला आणि काय बदलले आहे त्यानुसार दृश्य प्रस्तुत केले जाईल.

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())
    }
}

जेव्हा ऍप्लिकेशन सुरू होते तेव्हा स्टोअरला 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 रेड्यूसरचा भाग आहे:

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
}

जेव्हा तुम्ही एखादी क्रिया पाठवता आणि वर सांगितल्याप्रमाणे नवीन स्थिती परत करता तेव्हा रेड्यूसर कार्यान्वित केला जातो.

मी अजून तपशीलात जाणार नाही - स्विफ्टयूआयला प्रत्यक्षात काय प्रदर्शित करायचे हे कसे माहित आहे. हे अधिक सखोलपणे समजून घेण्यासाठी, ते फायदेशीर आहे डेटा प्रवाहावर WWDC सत्र पहा SwiftUI मध्ये. ते का आणि केव्हा वापरायचे हे देखील तपशीलवार स्पष्ट करते राज्य, @Binding, ObjectBinding आणि EnvironmentObject.

स्किलबॉक्स शिफारस करतो:

• प्रॅक्टिकल कोर्स "मोबाइल डेव्हलपर प्रो".
• ऑनलाईन कोर्स लागू केला "पायथन डेटा विश्लेषक".
• दोन वर्षांचा प्रॅक्टिकल कोर्स "मी प्रो वेब डेव्हलपर आहे".

स्त्रोत: www.habr.com