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

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

मैले यसलाई MovieSwiftUI भनिन्छ - यो नयाँ र पुराना चलचित्रहरू खोज्नको लागि एउटा अनुप्रयोग हो, साथै तिनीहरूलाई सङ्ग्रहमा सङ्कलन गर्ने TMDB API। मैले सधैं चलचित्रहरू मन पराएको छु र यस क्षेत्रमा काम गर्ने कम्पनी पनि खोलेको छु, यद्यपि धेरै समय अघि। कम्पनीलाई कूल भन्न सकिँदैन, तर आवेदन थियो!

हामी सम्झाउँछौं: सबै Habr पाठकहरूका लागि - Habr प्रोमो कोड प्रयोग गरी कुनै पनि Skillbox पाठ्यक्रममा भर्ना गर्दा १०,००० रूबल छुट।

Skillbox सिफारिस गर्दछ: शैक्षिक अनलाइन पाठ्यक्रम "पेशे जाभा विकासकर्ता".

त्यसोभए MovieSwiftUI के गर्न सक्छ?

• API सँग अन्तर्क्रिया गर्दछ - लगभग कुनै पनि आधुनिक अनुप्रयोगले यो गर्छ।
• अनुरोधहरूमा एसिन्क्रोनस डेटा लोड गर्दछ र JSON लाई स्विफ्ट मोडेल प्रयोग गरेर पार्स गर्दछ कोडेबल.
• अनुरोधमा लोड गरिएका छविहरू देखाउँदछ र तिनीहरूलाई क्यास गर्दछ।
• iOS, iPadOS, र macOS को लागि यो एपले यी OS का प्रयोगकर्ताहरूका लागि उत्तम UX प्रदान गर्दछ।
• प्रयोगकर्ताले डाटा उत्पन्न गर्न र आफ्नै चलचित्र सूचीहरू सिर्जना गर्न सक्छ। अनुप्रयोगले प्रयोगकर्ता डेटा बचत र पुनर्स्थापना गर्दछ।
• दृश्य, कम्पोनेन्ट र मोडेलहरू Redux ढाँचा प्रयोग गरेर स्पष्ट रूपमा छुट्याइएका छन्। यहाँ डाटा प्रवाह दिशाहीन छ। यसलाई पूर्ण रूपमा क्यास, पुनर्स्थापना र अधिलेखन गर्न सकिन्छ।
• अनुप्रयोगले SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal, आदि को आधारभूत कम्पोनेन्टहरू प्रयोग गर्दछ। यसले अनुकूलन दृश्यहरू, इशाराहरू, UI/UX पनि प्रदान गर्दछ।

वास्तवमा, एनिमेसन चिकनी छ, GIF अलिकति झटका भयो

एपमा काम गर्दा मलाई धेरै अनुभव दियो र समग्रमा यो सकारात्मक अनुभव थियो। मैले एक पूर्ण कार्यात्मक अनुप्रयोग लेख्न सक्षम भएँ, सेप्टेम्बरमा म यसलाई सुधार गर्नेछु र यसलाई एपस्टोरमा प्रकाशित गर्नेछु, आईओएस 13 को रिलीजको साथ।

Redux, BindableObject र EnvironmentObject

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

मैले स्विफ्टयूआई एप्लिकेसन निर्माण गर्नको लागि डाटा फ्लो आर्किटेक्चरको रूपमा Redux छनौट गरेकोमा कहिल्यै पछुताएको छैन। UIKit एपमा Redux प्रयोग गर्दा सबैभन्दा चुनौतीपूर्ण भागहरू स्टोरसँग काम गर्ने र डेटा प्राप्त गर्ने र पुन: प्राप्त गर्ने र यसलाई तपाईंको दृश्य/कम्पोनेन्टहरूमा म्याप गर्ने हो। यो गर्नको लागि, मैले कनेक्टरहरूको एक प्रकारको पुस्तकालय सिर्जना गर्नुपर्‍यो (ReSwift र ReKotlin प्रयोग गरेर)। राम्रोसँग काम गर्दछ, तर धेरै कोड। दुर्भाग्यवश, यो (अझै) खुला स्रोत होइन।

खुसीको खबर! स्विफ्टयूआईको साथ चिन्ता गर्ने मात्र चीजहरू - यदि तपाइँ 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 प्रदान गर्नुपर्छ, तर प्रोटोकल कार्यान्वयन यसको व्यवस्थापनको लागि जिम्मेवार छ। समग्रमा, यो एप्पलबाट धेरै शक्तिशाली उपकरण हो। तदनुसार, अर्को रेन्डरिङ चक्रमा, SwiftUI ले राज्य परिवर्तन अनुसार विचारहरूको मुख्य भाग प्रस्तुत गर्न मद्दत गर्नेछ।

वास्तवमा, यो 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())
    }
}

एप्लिकेसन सुरु हुँदा स्टोरलाई EnvironmentObject को रूपमा इन्जेक्ट गरिन्छ र त्यसपछि @EnvironmentObject प्रयोग गरेर कुनै पनि दृश्यमा पहुँचयोग्य हुन्छ। त्यहाँ कुनै कार्यसम्पादन दण्ड छैन किनभने व्युत्पन्न गुणहरू छिट्टै पुन: प्राप्त हुन्छन् वा अनुप्रयोग स्थितिबाट गणना गरिन्छ।

माथिको कोडले छवि परिवर्तन गर्छ यदि चलचित्र पोस्टर परिवर्तन हुन्छ।

र यो वास्तवमा केवल एक लाइनको साथ गरिन्छ, जसको मद्दतले विचारहरू राज्यसँग जोडिएका छन्। यदि तपाईंले iOS मा ReSwift सँग काम गर्नुभएको छ भने कनेक्टआइपीएस एप प्रतिक्रियाको साथ, तपाईंले 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
}

माथि उल्लेख गरिए अनुसार, तपाईंले कार्य पठाउँदा र नयाँ अवस्था फर्काउँदा रिड्यूसर कार्यान्वयन हुन्छ।

म अझै विस्तारमा जानेछैन - कसरी SwiftUI लाई वास्तवमा के प्रदर्शन गर्ने थाहा छ। यसलाई अझ गहिरो रूपमा बुझ्न, यो लायक छ डाटा प्रवाह मा WWDC सत्र हेर्नुहोस् SwiftUI मा। यसले किन र कहिले प्रयोग गर्ने भनेर पनि विस्तृत रूपमा वर्णन गर्दछ राज्य, @Binding, ObjectBinding र EnvironmentObject।

Skillbox सिफारिस गर्दछ:

• व्यावहारिक पाठ्यक्रम "मोबाइल विकासकर्ता प्रो".
• अनलाइन पाठ्यक्रम लागू गरियो "पाइथन डाटा विश्लेषक".
• दुई वर्षे व्यावहारिक पाठ्यक्रम "म एक प्रो वेब विकासकर्ता हुँ".

स्रोत: www.habr.com