په SwiftUI کې د غوښتنلیک پراختیا. برخه 1: ډیټا فلو او ریډکس

په WWDC 2019 کې د اتحادیې ریاست غونډې کې د ګډون وروسته ، ما پریکړه وکړه چې په SwiftUI کې ژور غوطه واخلم. ما د دې سره کار کولو ډیر وخت تیر کړی او اوس د یو ریښتیني غوښتنلیک رامینځته کول پیل کړي چې د کاروونکو پراخه لړۍ لپاره ګټور کیدی شي.

ما دې ته مووی سویفټ UI وویل - دا د نوي او زړو فلمونو لټون کولو لپاره یو اپلیکیشن دی ، په بیله بیا د دوی په کارولو سره په ټولګه کې راټول کړئ TMDB API. ما تل د فلمونو سره مینه درلوده او حتی یو شرکت جوړ کړی چې پدې برخه کې کار کوي، که څه هم ډیر وخت دمخه. شرکت په سختۍ سره ښه بلل کیدی شي، مګر غوښتنلیک و!

موږ یادونه کوو: د ټولو هابر لوستونکو لپاره - د 10 روبل تخفیف کله چې د هابر پرومو کوډ په کارولو سره د مهارت بکس کوم کورس کې نوم لیکنه وکړئ.

Skillbox وړاندیز کوي: تعلیمي آنلاین کورس "د جاوا پرمخ وړونکی مسلک".

نو MovieSwiftUI څه کولی شي؟

• د API سره اړیکه لري - نږدې هر عصري غوښتنلیک دا کوي.
• په غوښتنو کې غیر متناسب ډیټا بار کوي او JSON په کارولو سره سویفټ ماډل کې پارس کوي د کوډ وړ.
• د غوښتنې پراساس بار شوي عکسونه ښیې او ذخیره کوي.
• د iOS، iPadOS او macOS لپاره دا ایپ د دې OS کاروونکو لپاره غوره UX چمتو کوي.
• کاروونکي کولی شي ډاټا تولید کړي او د خپل فلم لیستونه جوړ کړي. غوښتنلیک د کارونکي ډیټا خوندي کوي او بیرته راګرځوي.
• لیدونه، اجزاوې او ماډلونه په واضح ډول د Redux نمونې په کارولو سره جلا شوي. دلته د معلوماتو جریان غیر مستقیم دی. دا په بشپړ ډول زیرمه کیدی شي ، بیا رغول کیدی شي او بیا لیکل کیدی شي.
• غوښتنلیک د SwiftUI، TabbedView، Segmented Control، NavigationView، Form، Modal، او داسې نورو اساسي برخې کاروي. دا دودیز لیدونه، اشارې، UI/UX هم وړاندې کوي.

په حقیقت کې ، حرکت اسانه دی ، GIF یو څه ځیرک شو

په اپلیکیشن کې کار کول ماته ډیره تجربه راکړه او په ټولیز ډول دا یوه مثبته تجربه وه. زه توانیدلی وم چې یو بشپړ فعال اپلیکیشن ولیکم، په سپتمبر کې به زه دا ښه کړم او په AppStore کې به یې خپور کړم، په ورته وخت کې د iOS 13 خوشې کولو سره.

Redux، BindableObject او EnvironmentObject

زه اوس شاوخوا دوه کاله د ریډکس سره کار کوم ، نو زه پدې کې نسبتا ښه پوه یم. په ځانګړي توګه ، زه دا د دې لپاره په فرنټ اینڈ کې کاروم غبرګون ویب پاڼه، او همدارنګه د اصلي iOS (Swift) او Android (Kotlin) غوښتنلیکونو پراختیا لپاره.

ما هیڅکله د SwiftUI غوښتنلیک جوړولو لپاره د ډیټا جریان جوړښت په توګه د ریډکس غوره کولو پښیمانه نه دی. ترټولو ننګونې برخې کله چې په UIKit ایپ کې د ریډکس کارول کیږي د پلورنځي سره کار کوي او د ډیټا ترلاسه کول او ترلاسه کول او ستاسو لیدونو / برخو ته یې نقشه کول دي. د دې کولو لپاره، زه باید د نښلونکو یو ډول کتابتون جوړ کړم (د ReSwift او ReKotlin په کارولو سره). ښه کار کوي، مګر خورا ډیر کوډ. له بده مرغه، دا (تر اوسه) خلاص سرچینه نه ده.

ښه خبر! د SwiftUI سره د اندیښنې لپاره یوازینی شیان - که تاسو د ریډکس کارولو پلان لرئ - پلورنځي ، ایالتونه او کمونکي دي. د پلورنځي سره تعامل په بشپړ ډول د SwiftUI لخوا پاملرنه کیږي @EnvironmentObject څخه مننه. نو، پلورنځی د BindableObject سره پیل کیږي.

ما یو ساده سویفټ بسته جوړه کړه، SwiftUIFlux، کوم چې د ریډکس لومړني کارول چمتو کوي. زما په قضیه کې دا د 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)
    }
}

هرکله چې تاسو یو عمل پیل کړئ، تاسو ګیربکس فعال کړئ. دا به د غوښتنلیک اوسني حالت سره سم عملونه ارزوي. دا به بیا د عمل ډول او معلوماتو سره سم یو نوی بدل شوی حالت بیرته راولي.

ښه، له هغه ځایه چې پلورنځی د بانډ ایبل آبجکټ دی ، نو دا به 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 په کارولو سره په هر لید کې د لاسرسي وړ وي. د فعالیت جزا شتون نلري ځکه چې ترلاسه شوي ملکیتونه په چټکۍ سره ترلاسه کیږي یا د غوښتنلیک حالت څخه محاسبه کیږي.

پورته کوډ عکس بدلوي که چیرې د فلم پوسټر بدل شي.

او دا په حقیقت کې یوازې د یوې کرښې سره ترسره کیږي، د کوم نظر په مرسته چې د دولت سره تړاو لري. که تاسو په 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 حالت څخه اخیستل شوی او د چاپیریال آبجیکٹ په توګه انجیکشن شوی، SwiftUI لیست تازه کوي ځکه چې ForEach د فلمونو حساب شوي ملکیت سره تړاو لري.

دلته د فلم سټیټ کمولو برخه ده:

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 وړاندیز کوي:

• عملي کورس "د ګرځنده پرمخ وړونکي PRO".
• آنلاین کورس پلي شوی "د پایتون ډیټا شنونکی".
• دوه کلن عملي کورس "زه د پرو ویب جوړونکی یم".

سرچینه: www.habr.com