SwiftUI এ অ্যাপ্লিকেশন ডেভেলপমেন্ট। পার্ট 1: ডেটাফ্লো এবং রেডাক্স

WWDC 2019-এ স্টেট অফ দ্য ইউনিয়ন অধিবেশনে যোগ দেওয়ার পরে, আমি SwiftUI-এ গভীরভাবে ডুব দেওয়ার সিদ্ধান্ত নিয়েছি। আমি এটির সাথে কাজ করার জন্য অনেক সময় ব্যয় করেছি এবং এখন একটি বাস্তব অ্যাপ্লিকেশন তৈরি করা শুরু করেছি যা ব্যবহারকারীদের বিস্তৃত পরিসরের জন্য উপযোগী হতে পারে।

আমি এটিকে MovieSwiftUI বলেছি - এটি নতুন এবং পুরানো চলচ্চিত্রগুলি অনুসন্ধান করার পাশাপাশি একটি সংগ্রহে সংগ্রহ করার জন্য একটি অ্যাপ TMDB API. আমি সবসময় চলচ্চিত্র পছন্দ করি এবং এমনকি এই ক্ষেত্রে কাজ করে এমন একটি কোম্পানি তৈরি করেছি, যদিও অনেক আগে। কোম্পানী খুব কমই শীতল বলা যেতে পারে, কিন্তু আবেদন ছিল!

আমরা মনে করিয়ে দিচ্ছি: "Habr"-এর সকল পাঠকদের জন্য - "Habr" প্রচারমূলক কোড ব্যবহার করে যেকোনো Skillbox কোর্সে নথিভুক্ত করার সময় 10 রুবেল ছাড়।

Skillbox সুপারিশ করে: শিক্ষাগত অনলাইন কোর্স "পেশা জাভা বিকাশকারী".

তাহলে MovieSwiftUI কি করতে পারে?

• API-এর সাথে ইন্টারঅ্যাক্ট করে - প্রায় যেকোনো আধুনিক অ্যাপ্লিকেশন এটি করে।
• অনুরোধে অ্যাসিঙ্ক্রোনাস ডেটা লোড করে এবং JSON-কে সুইফট মডেলে পার্স করে কোডেবল.
• অনুরোধে লোড করা ছবি দেখায় এবং সেগুলি ক্যাশে করে।
• iOS, iPadOS এবং macOS-এর জন্য এই অ্যাপটি এই OS-এর ব্যবহারকারীদের জন্য সেরা UX প্রদান করে।
• ব্যবহারকারী ডেটা তৈরি করতে পারে এবং তাদের নিজস্ব মুভি তালিকা তৈরি করতে পারে। অ্যাপ্লিকেশনটি ব্যবহারকারীর ডেটা সংরক্ষণ এবং পুনরুদ্ধার করে।
• Redux প্যাটার্ন ব্যবহার করে দৃশ্য, উপাদান এবং মডেল পরিষ্কারভাবে আলাদা করা হয়েছে। এখানে ডেটা প্রবাহ একমুখী। এটি সম্পূর্ণরূপে ক্যাশে, পুনরুদ্ধার এবং ওভাররাইট করা যেতে পারে।
• অ্যাপ্লিকেশনটি SwiftUI, TabbedView, Segmented Control, NavigationView, Form, Modal ইত্যাদির মৌলিক উপাদান ব্যবহার করে। এটি কাস্টম দৃশ্য, অঙ্গভঙ্গি, UI/UX প্রদান করে।

আসলে, অ্যানিমেশন মসৃণ, GIF একটু ঝাঁকুনি পরিণত

অ্যাপটিতে কাজ করা আমাকে অনেক অভিজ্ঞতা দিয়েছে এবং সামগ্রিকভাবে এটি একটি ইতিবাচক অভিজ্ঞতা ছিল। আমি একটি সম্পূর্ণ কার্যকরী অ্যাপ্লিকেশন লিখতে সক্ষম হয়েছি, সেপ্টেম্বরে আমি এটিকে উন্নত করব এবং এটিকে অ্যাপস্টোরে প্রকাশ করব, একই সাথে iOS 13 প্রকাশের সাথে।

Redux, BindableObject এবং EnvironmentObject

আমি এখন প্রায় দুই বছর ধরে Redux এর সাথে কাজ করছি, তাই আমি এটিতে তুলনামূলকভাবে পারদর্শী। বিশেষ করে, আমি ফ্রন্টএন্ডে এটি ব্যবহার করি প্রতিক্রিয়া ওয়েবসাইট, সেইসাথে নেটিভ আইওএস (সুইফট) এবং অ্যান্ড্রয়েড (কোটলিন) অ্যাপ্লিকেশন বিকাশের জন্য।

একটি SwiftUI অ্যাপ্লিকেশন তৈরির জন্য ডেটা ফ্লো আর্কিটেকচার হিসাবে Redux বেছে নেওয়ার জন্য আমি কখনই অনুশোচনা করিনি। একটি UIKit অ্যাপে Redux ব্যবহার করার সময় সবচেয়ে চ্যালেঞ্জিং অংশ হল স্টোরের সাথে কাজ করা এবং ডেটা পাওয়া এবং পুনরুদ্ধার করা এবং এটিকে আপনার ভিউ/কম্পোনেন্টে ম্যাপ করা। এটি করার জন্য, আমাকে সংযোগকারীগুলির এক ধরণের লাইব্রেরি তৈরি করতে হয়েছিল (ReSwift এবং ReKotlin ব্যবহার করে)। ভাল কাজ করে, কিন্তু বেশ অনেক কোড। দুর্ভাগ্যবশত, এটি (এখনও) ওপেন সোর্স নয়।

ভাল খবর! SwiftUI এর সাথে চিন্তা করার একমাত্র জিনিস - আপনি যদি Redux ব্যবহার করার পরিকল্পনা করেন - তা হল স্টোর, স্টেট এবং রিডিউসার। @EnvironmentObject-কে ধন্যবাদ সুইফটইউআই দ্বারা স্টোরের সাথে মিথস্ক্রিয়া সম্পূর্ণরূপে যত্ন নেওয়া হয়েছে। সুতরাং, দোকান একটি BindableObject দিয়ে শুরু হয়।

আমি একটি সাধারণ সুইফট প্যাকেজ তৈরি করেছি, সুইফটইউআইফ্লাক্স, যা 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, তাই এটি SwiftUI কে জানিয়ে দেবে যখন পাসথ্রু সাবজেক্ট দ্বারা প্রদত্ত willChange প্রপার্টি ব্যবহার করে এর মান পরিবর্তন হবে। এটি কারণ 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!]))
            }
        }
    }
}

উপরের কোডে, আমি প্রতিটি আইপির জন্য 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
}

আপনি যখন একটি অ্যাকশন পাঠান এবং উপরে উল্লিখিত হিসাবে একটি নতুন অবস্থা ফিরিয়ে দেন তখন রিডিউসারটি কার্যকর করা হয়।

আমি এখনও বিশদে যাব না - কীভাবে SwiftUI আসলে কী প্রদর্শন করতে হবে তা জানে। এটি আরও গভীরভাবে বোঝার জন্য এটি মূল্যবান ডাটা প্রবাহের WWDC সেশন দেখুন SwiftUI-তে। কেন এবং কখন ব্যবহার করতে হবে তাও বিশদভাবে ব্যাখ্যা করে রাষ্ট্র, @Binding, ObjectBinding এবং EnvironmentObject.

Skillbox সুপারিশ করে:

• ব্যবহারিক কোর্স "মোবাইল ডেভেলপার প্রো".
• অনলাইন কোর্সের আবেদন করা হয়েছে "পাইথন ডেটা বিশ্লেষক".
• দুই বছরের ব্যবহারিক কোর্স "আমি একজন প্রো ওয়েব ডেভেলপার".

উত্স: www.habr.com