Horumarinta Codsiga ee SwiftUI. Qaybta 1: Xogta qulqulka iyo Redux

Ka dib markii aan ka soo qayb galay kalfadhiga Gobolka ee WWDC 2019, waxaan go'aansaday inaan si qoto dheer u quuso SwiftUI. Waqti badan ayaan ku qaatay la shaqeyntiisa waxaana hadda bilaabay sameynta codsi dhab ah oo faa'iido u leh isticmaaleyaasha ballaaran.

Waxaan u bixiyey MovieSwiftUI - kani waa app lagu raadinayo filimaan cusub iyo kuwii hore, iyo sidoo kale ururinta iyaga oo isticmaalaya ururinta TMDB API. Weligey waan jeclaa filimada oo xitaa waxaan abuuray shirkad ka shaqeysa arrimahan, inkastoo waqti hore ka hor. Shirkadda si dhib leh ayaa loogu yeeri karaa qabow, laakiin codsigu wuxuu ahaa!

Waxaan xusuusineynaa: dhammaan akhristayaasha "Habr" - qiimo dhimis ah 10 rubles marka la qorayo koorso kasta oo Skillbox ah iyadoo la adeegsanayo koodhka xayeysiinta "Habr".

Skillbox waxay ku talinaysaa: Koorso online ah oo waxbarasho "Horumarinta Xirfadda Java".

Haddaba muxuu samayn karaa MovieSwiftUI?

• Wuxuu la falgalaa API - ku dhawaad ​​codsi kasta oo casri ah ayaa tan sameeya.
• Waxay ku shubtaa xogta aan isku midka ahayn ee codsiyada waxayna ku kala saartaa JSON qaabka Swift iyadoo la isticmaalayo Codable.
• Wuxuu muujiyaa sawirro lagu shubay codsi oo kaydiya.
• App-kan loogu talagalay iOS, iPadOS, iyo macOS waxa uu bixiyaa UX ugu fiican isticmaalayaasha OS-yadan.
• Isticmaaluhu wuxuu soo saari karaa xog wuxuuna abuuri karaa liisaska filimada iyaga u gaar ah. Codsiga wuxuu kaydiyaa oo soo celiyaa xogta isticmaalaha.
• Muuqaallada, qaybaha iyo moodooyinka ayaa si cad loo kala saaray iyadoo la isticmaalayo qaabka Redux. Socodka xogta halkan waa mid aan jiho lahayn. Si buuxda ayaa loo kaydin karaa, loo soo celin karaa oo dib loo qori karaa.
• Codsigu wuxuu adeegsadaa qaybaha aasaasiga ah ee SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal, iwm. Waxay kaloo bixisaa aragtiyo gaar ah, dhaqdhaqaaqyo, UI/UX.

Dhab ahaantii, animation-ku waa siman yahay, GIF-ga ayaa soo baxay wax yar

Ka shaqeynta app-ka waxay i siisay khibrad badan, guud ahaanna waxay ahayd waayo-aragnimo togan. Waxa aan awooday in aan qoro codsi si buuxda u shaqaynaya, bisha Sebtembar waan wanaajin doonaa oo aan ku daabici doonaa AppStore, isla mar ahaantaana la sii daayay iOS 13.

Redux, BindableObject iyo DeegaankaObject

Waxaan la shaqeynayay Redux ilaa laba sano hadda, markaa si fiican ayaan u yaqaan. Gaar ahaan, waxaan u isticmaalaa hore ee hore Diido website-ka, iyo sidoo kale horumarinta macruufka asalka ah (Swift) iyo Android (Kotlin) codsiyada.

Waligay kama qoomamayn doorashada Redux oo ah qaab dhismeedka socodka xogta si loo dhiso codsiga SwiftUI. Qaybaha ugu adag marka aad Redux ku isticmaalayso abka UIKit waxa ay la shaqaynayaan bakhaarka oo ay helaan oo soo saaraan xogta oo ay ku sawiraan aragtidaada/qaybahaaga. Si tan loo sameeyo, waa inaan abuuraa nooc ka mid ah maktabadaha isku xirka (adoo isticmaalaya ReSwift iyo ReKotlin). Si fiican u shaqeeya, laakiin aad u badan oo code. Nasiib darro, ma aha (wali) il furan.

War wanaagsan! Waxa kaliya ee laga werwero SwiftUI - haddii aad qorshaynayso inaad isticmaasho Redux - waa dukaamada, gobolada, iyo wax-yareyaasha. Is dhexgalka bakhaarka waxaa si buuxda u xanaaneeyay SwiftUI mahada leh @EnvironmentObject. Marka, dukaanku wuxuu ka bilaabmaa BindableObject.

Waxaan sameeyay xirmo fudud oo Swift ah, SwiftUIFlux, kaas oo bixiya isticmaalka aasaasiga ah ee Redux. Xaaladeyda waa qayb ka mid ah MovieSwiftUI. Anigana wuxuu qoray casharro tallaabo-tallaabo ah, kaas oo kaa caawin doona inaad isticmaasho qaybtan.

Sidee u shaqeeyaan?

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

Mar kasta oo aad kiciso fal, waxa aad dadajinaysaa sanduuqa gear-ka Waxay qiimeyn doontaa ficillada iyadoo loo eegayo xaaladda hadda ee codsiga. Kadib waxay soo celin doontaa xaalad cusub oo la bedelay iyadoo la raacayo nooca ficilka iyo xogta.

Hagaag, maadaama bakhaarku yahay BindableObject, waxay ogaysiin doontaa SwiftUI marka qiimihiisu is beddelo iyadoo la adeegsanayo is beddelka hantida ay bixiso PassthroughSubject. Tani waa sababta oo ah BindableObject waa inuu bixiyaa PublisherType, laakiin hirgelinta borotokoolka ayaa mas'uul ka ah maaraynta. Guud ahaan, tani waa qalab aad u awood badan oo ka yimid Apple. Sidaas awgeed, wareegga soo-bandhigista ee soo socda, SwiftUI waxay gacan ka geysan doontaa soo saarista jirka aragtiyaha iyadoo loo eegayo isbeddelka gobolka.

Dhab ahaantii, tani waa dhammaan wadnaha iyo sixirka SwiftUI. Hadda, aragti kasta oo ku biirta gobol, aragtida waxaa loo soo saari doonaa iyadoo loo eegayo xogta laga helo gobolka iyo waxa isbeddelay.

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

Bakhaarka waxa loo duraa sidii wax deegaan ahaan marka arjigu bilaabmo ka dibna laga heli karo aragti kasta iyadoo la isticmaalayo @EnvironmentObject. Ma jiro ciqaab hawleed sababtoo ah guryaha la helay si dhakhso leh ayaa looga soo ceshadaa ama looga xisaabiyaa gobolka codsiga.

Koodhka kore wuxuu beddelaa sawirka haddii boodhka filimku isbeddelo.

Taasna dhab ahaantii waxaa lagu sameeyaa hal xariiq oo keliya, iyadoo la kaashanayo aragtiyaha ku xiran gobolka. Haddii aad la soo shaqeysay ReSwift iOS ama xitaa xirmaan React, waxaad fahmi doontaa sixirka SwiftUI.

Hadda waxaad isku dayi kartaa inaad dhaqaajiso ficilka oo aad daabacdo gobolka cusub. Waa kan tusaale ka adag.

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!]))
            }
        }
    }
}

Koodhka sare, waxaan u isticmaalayaa .onDelete action from SwiftUI IP kasta. Tani waxay u oggolaanaysaa safka liiska ku jira inuu soo bandhigo jibbaarada caadiga ah ee iOS si loo tirtiro. Markaa marka isticmaaluhu taabto badhanka tirtirka, waxay kicisaa ficilka u dhigma oo ka saara filimka liiska.

Hagaag, maadaama liiska hantida liiska laga soo qaatay gobolka BindableObject oo lagu duray sidii EnvironmentObject ahaan, SwiftUI waxay cusbooneysiisaa liiska sababtoo ah ForEach waxay la xiriirtaa filimada xisaabinta hantida.

Waa kan qayb ka mid ah MoviesState wax-yaraha:

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
}

Wax-yaraha waxa la fuliyaa marka aad dirto ficil oo aad soo celiso gobol cusub, sida kor lagu sheegay.

Wali ma sii faahfaahin doono - sida SwiftUI dhab ahaantii u garanayso waxa la soo bandhigayo. Si aad tan si qoto dheer u fahamto, waa u qalantaa eeg fadhiga WWDC ee socodka xogta gudaha SwiftUI. Waxa kale oo ay si faahfaahsan u sharraxaysaa sababta iyo goorta la isticmaalayo State, @Binding, ObjectBinding and EnvironmentObject.

Skillbox waxay ku talinaysaa:

• Koorso wax ku ool ah "Developer Mobile PRO".
• Codsaday koorsada khadka tooska ah "Python Data Analyst".
• Koorso wax ku ool ah oo laba sano ah "Waxaan ahay horumariye mareegaha PRO".

Source: www.habr.com