Pangwangunan aplikasi dina SwiftUI. Bagian 1: Dataflow sareng Redux

Saatos ngahadiran sési State of Union di WWDC 2019, kuring mutuskeun pikeun nyilem jero kana SwiftUI. Kuring parantos nyéépkeun waktos damel sareng ayeuna parantos ngamimitian ngembangkeun aplikasi nyata anu tiasa mangpaat pikeun sajumlah pangguna.

Kuring nyauran éta MovieSwiftUI - ieu mangrupikeun aplikasi pikeun milarian pilem énggal sareng lami, ogé ngumpulkeunana dina koleksi nganggo TMDB API. Kuring sok resep pilem sareng bahkan nyiptakeun perusahaan anu damel di widang ieu, sanaos lami pisan. Pausahaan boro bisa disebut tiis, tapi aplikasi ieu!

Kami ngingetan: pikeun sakabéh pamiarsa "Habr" - diskon 10 rubles nalika enrolling dina sagala Tangtu Skillbox ngagunakeun "Habr" kode promosi.

Skillbox nyarankeun: Kursus online atikan "Pamekar Profesi Java".

Janten naon anu tiasa dilakukeun ku MovieSwiftUI?

• Berinteraksi sareng API - ampir sadaya aplikasi modern ngalakukeun ieu.
• Ngamuat data asynchronous on requests na parses JSON kana model Swift maké Codable.
• Némbongkeun gambar dimuat dina pamundut na caches aranjeunna.
• Aplikasi ieu pikeun ios, iPadOS, sareng macOS nyayogikeun UX pangsaéna pikeun pangguna OS ieu.
• Pamaké bisa ngahasilkeun data jeung nyieun daptar pilem sorangan. Aplikasi nyimpen sareng malikkeun data pangguna.
• Tampilan, komponén sareng modél jelas dipisahkeun nganggo pola Redux. Aliran data di dieu nyaéta unidirectional. Ieu bisa pinuh sindangan, disimpen na overwritten.
• Aplikasi ngagunakeun komponén dasar SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal, jsb. Éta ogé nyayogikeun pandangan khusus, sapuan, UI / UX.

Kanyataanna, animasi lemes, GIF tétéla rada jerky

Gawé dina aplikasi masihan kuring seueur pangalaman sareng sacara umum éta pangalaman anu positif. Kuring tiasa nyerat aplikasi anu lengkep, dina bulan Séptémber kuring bakal ningkatkeun sareng nyebarkeun éta dina AppStore, sakaligus sareng sékrési iOS 13.

Redux, BindableObject sareng EnvironmentObject

Abdi parantos damel sareng Redux sakitar dua taun ayeuna, janten kuring parantos terang pisan. Hususna, kuring make eta dina frontend pikeun mere tanggapan ramatloka, kitu ogé pikeun ngembangkeun aplikasi ios asli (Swift) jeung Android (Kotlin).

Kuring henteu kantos kuciwa milih Redux salaku arsitéktur aliran data pikeun ngawangun aplikasi SwiftUI. Bagian anu paling nangtang nalika nganggo Redux dina aplikasi UIKit damel sareng toko sareng nyandak sareng nyandak data sareng memetakan kana pandangan / komponén anjeun. Jang ngalampahkeun ieu, kuring kungsi nyieun jenis perpustakaan panyambungna (ngagunakeun ReSwift na ReKotlin). Gawéna ogé, tapi cukup loba kode. Hanjakal, éta henteu (acan) open source.

warta alus! Hiji-hijina hal anu kedah hariwang sareng SwiftUI - upami anjeun badé nganggo Redux - nyaéta toko, nagara bagian, sareng pangurangan. Interaksi sareng toko parantos diurus ku SwiftUI berkat @EnvironmentObject. Janten, toko dimimitian ku BindableObject.

Kuring nyieun pakét Swift basajan, SwiftUIFlux, nu nyadiakeun pamakéan dasar tina Redux. Bisi kuring éta bagian tina MovieSwiftUI. kuring oge nulis step-by-step tutorial, anu bakal ngabantosan anjeun nganggo komponén ieu.

Kumaha carana sangkan eta pagawean?

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

Unggal waktos anjeun micu tindakan, anjeun ngaktipkeun kotak gear. Bakal ngaevaluasi tindakan dumasar kana kaayaan aplikasi ayeuna. Ieu lajeng bakal balik kaayaan dirobah anyar luyu jeung tipe Peta sarta data.

Nya, saprak toko mangrupikeun BindableObject, éta bakal ngabéjaan SwiftUI nalika nilaina robih nganggo harta willChange anu disayogikeun ku PassthroughSubject. Ieu kusabab BindableObject kudu nyadiakeun PublisherType, tapi palaksanaan protokol tanggung jawab ngatur eta. Gemblengna, ieu alat anu pohara kuat ti Apple. Sasuai, dina siklus rendering salajengna, SwiftUI bakal ngabantosan ngadamel badan pintonan dumasar kana parobahan kaayaan.

Sabenerna, ieu mangrupikeun jantung sareng sihir SwiftUI. Ayeuna, dina sagala panempoan anu ngalanggan nagara, pandangan bakal dipasihan dumasar kana data anu ditampi ti nagara sareng naon anu parantos robih.

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

Toko disuntik salaku EnvironmentObject nalika aplikasi dimimitian teras tiasa diaksés dina tampilan naon waé nganggo @EnvironmentObject. Henteu aya hukuman kinerja sabab sipat turunan gancang dicandak atanapi diitung tina kaayaan aplikasi.

Kodeu di luhur ngarobah gambar lamun poster pilem robah.

Sareng ieu saleresna dilakukeun ngan ukur hiji garis, kalayan bantosan pandangan anu dihubungkeun sareng nagara. Upami anjeun parantos damel sareng ReSwift dina ios atanapi malah nyambungan kalayan React, anjeun bakal ngartos sihir SwiftUI.

Ayeuna anjeun tiasa nyobian ngaktipkeun tindakan sareng nyebarkeun kaayaan énggal. Ieu conto anu langkung kompleks.

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

Dina kode di luhur, Kuring ngagunakeun aksi .onDelete ti SwiftUI pikeun tiap IP. Hal ieu ngamungkinkeun baris dina daptar pikeun mintonkeun gesek ios normal pikeun ngahapus. Janten nalika pangguna ngarampa tombol ngahapus, éta micu tindakan anu saluyu sareng ngahapus pilem tina daptar.

Nya, saprak harta daptar diturunkeun tina kaayaan BindableObject sareng disuntikkeun salaku EnvironmentObject, SwiftUI ngamutahirkeun daptar sabab ForEach dikaitkeun sareng harta anu diitung pilem.

Ieu mangrupikeun bagian tina pangurangan 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
}

Reducer dieksekusi nalika anjeun ngirimkeun tindakan sareng uih deui ka kaayaan énggal, sapertos anu dinyatakeun di luhur.

Abdi henteu acan detil - kumaha SwiftUI leres-leres terang naon anu bakal ditampilkeun. Pikeun ngartos ieu langkung jero, éta patut nempo sési WWDC on aliran data dina SwiftUI. Éta ogé ngajelaskeun sacara rinci naha sareng iraha dianggo nagara, @Binding, ObjectBinding jeung EnvironmentObject.

Skillbox nyarankeun:

• Kursus praktis "Pamekar Mobile PRO".
• Kursus online anu diterapkeun "Analis Data Python".
• Kursus praktis dua taun "Kuring pamekar wéb PRO".

sumber: www.habr.com