Haɓaka aikace-aikacen akan SwiftUI. Part 1: Dataflow da Redux

Bayan halartar zaman Jiha na Ƙungiyar a WWDC 2019, na yanke shawarar yin zurfin zurfi cikin SwiftUI. Na shafe lokaci mai yawa tare da shi kuma yanzu na fara haɓaka ainihin aikace-aikacen da zai iya zama mai amfani ga masu amfani da yawa.

Na kira shi MovieSwiftUI - wannan app ne don neman sababbin fina-finai da tsofaffi, da kuma tattara su a cikin tarin ta amfani da API ɗin TMDB. A koyaushe ina son fina-finai har ma na kirkiro kamfani da ke aiki a wannan fanni, kodayake tuntuni. Da kyar za a iya kiran kamfani mai sanyi, amma aikace-aikacen ya kasance!

Muna tunatarwa: ga duk masu karatu na "Habr" - rangwame na 10 rubles lokacin yin rajista a kowane kwas na Skillbox ta amfani da lambar talla "Habr".

Skillbox yana ba da shawarar: Ilimin kan layi kwas "Sana'ar Java Developer".

Don haka menene MovieSwiftUI zai iya yi?

• Yana hulɗa tare da API - kusan kowane aikace-aikacen zamani yana yin wannan.
• Yana loda bayanan da aka daidaita akan buƙatun kuma yana rarraba JSON cikin ƙirar Swift ta amfani da Codeable.
• Yana nuna hotuna da aka ɗora akan buƙata kuma yana adana su.
• Wannan app don iOS, iPadOS, da macOS yana ba da mafi kyawun UX ga masu amfani da waɗannan OS.
• Mai amfani zai iya samar da bayanai kuma ya ƙirƙiri jerin sunayen fina-finan nasu. Aikace-aikacen yana adanawa da dawo da bayanan mai amfani.
• An raba ra'ayoyi, abubuwan haɗin gwiwa da ƙira ta amfani da ƙirar Redux. Gudun bayanai a nan ba kai tsaye ba ne. Ana iya adana shi cikakke, maido da kuma sake rubuta shi.
• Aikace-aikacen yana amfani da ainihin abubuwan SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal, da sauransu. Hakanan yana ba da ra'ayoyi na al'ada, motsin motsi, UI/UX.

A zahiri, raye-rayen suna santsi, GIF ɗin ya zama ɗan wasa

Yin aiki a kan app ya ba ni kwarewa mai yawa kuma gaba ɗaya yana da kwarewa mai kyau. Na sami damar rubuta cikakken aikace-aikacen aiki, a watan Satumba zan inganta shi kuma in buga shi a cikin AppStore, tare da sakin iOS 13.

Redux, BindableObject da muhalliObject

Ina aiki da Redux kusan shekaru biyu yanzu, don haka na kware sosai a ciki. Musamman, Ina amfani da shi a gaban gaba don Sake amsa gidan yanar gizo, da kuma don haɓaka aikace-aikacen iOS (Swift) na asali da Android (Kotlin).

Ban taba yin nadamar zabar Redux a matsayin tsarin gine-ginen bayanai don gina aikace-aikacen SwiftUI ba. Sassan mafi ƙalubale lokacin amfani da Redux a cikin ƙa'idar UIKit suna aiki tare da kantin sayar da kayayyaki da samun da dawo da bayanai da yin taswira zuwa ra'ayoyinku/bangarorinku. Don yin wannan, dole ne in ƙirƙiri wani nau'in ɗakin karatu na masu haɗawa (ta amfani da ReSwift da ReKotlin). Yana aiki da kyau, amma yawanci code. Abin takaici, ba (har yanzu) buɗaɗɗen tushe ba ne.

Labari mai dadi! Abubuwan da za ku damu da SwiftUI kawai - idan kuna shirin amfani da Redux - shaguna, jihohi, da masu ragewa. SwiftUI yana kula da hulɗa tare da kantin gaba ɗaya godiya ga @EnvironmentObject. Don haka, shago yana farawa da BindableObject.

Na ƙirƙiri fakitin Swift mai sauƙi, SwiftUIFlux, wanda ke ba da ainihin amfani da Redux. A cikin yanayina ɓangaren MovieSwiftUI ne. Ni kuma ya rubuta koyawa ta mataki-mataki, wanda zai taimaka maka amfani da wannan bangaren.

Yaya ta yi aiki?

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

Duk lokacin da ka kunna wani aiki, za ka kunna akwatin gear. Zai kimanta ayyuka bisa ga halin yanzu na aikace-aikacen. Sannan za ta dawo da sabon yanayin da aka gyara daidai da nau'in aiki da bayanai.

Da kyau, tun da kantin sayar da BindableObject ne, zai sanar da SwiftUI lokacin da ƙimarsa ta canza ta amfani da abin da za a Canja kayan da PassthroughSubject ya bayar. Wannan saboda dole ne BindableObject ya samar da PublisherType, amma aiwatar da ƙa'idar ita ce ke da alhakin sarrafa ta. Gabaɗaya, wannan kayan aiki ne mai ƙarfi daga Apple. Saboda haka, a cikin sake zagayowar ma'ana na gaba, SwiftUI zai taimaka wajen ba da jikin ra'ayoyin bisa ga canjin jihar.

A zahiri, wannan shine duk zuciya da sihiri na SwiftUI. Yanzu, a duk wani ra'ayi da ya shiga cikin jihar, za a yi ra'ayi bisa ga abin da aka samu daga jihar da abin da ya canza.

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

Ana allurar Shagon azaman Abun Muhalli lokacin da aikace-aikacen ya fara kuma ana samun dama ga kowane kallo ta amfani da @EnvironmentObject. Babu wani hukunci na aiki saboda ana samun kaddarorin da aka samu cikin sauri ko ƙididdige su daga yanayin aikace-aikacen.

Lambar da ke sama tana canza hoton idan hoton fim ɗin ya canza.

Kuma a zahiri ana yin hakan ne da layi ɗaya kawai, tare da taimakon waɗanda ra'ayoyin ke da alaƙa da jihar. Idan kun yi aiki tare da ReSwift akan iOS ko ma gama tare da React, zaku fahimci sihirin SwiftUI.

Yanzu zaku iya ƙoƙarin kunna aikin kuma buga sabuwar jihar. Ga misali mai rikitarwa.

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

A cikin lambar da ke sama, Ina amfani da aikin .onDelete daga SwiftUI don kowane IP. Wannan yana ba da damar jere a cikin jerin don nuna al'ada iOS swipe don sharewa. Don haka lokacin da mai amfani ya taɓa maɓallin sharewa, yana kunna aikin da ya dace kuma yana cire fim ɗin daga jerin.

Da kyau, tunda an samo kadarorin lissafin daga jihar BindableObject kuma ana allurar a matsayin mahalliObject, SwiftUI yana sabunta jerin saboda ForEach yana da alaƙa da kayan ƙidayar fina-finai.

Anan ga ɓangaren mai rage 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
}

Ana aiwatar da mai ragewa lokacin da kuka aika aiki kuma ku dawo da sabuwar jiha, kamar yadda aka bayyana a sama.

Ba zan yi cikakken bayani ba tukuna - yadda SwiftUI a zahiri ya san abin da zai nuna. Don fahimtar wannan da zurfi, yana da daraja duba zaman WWDC akan kwararar bayanai a cikin SwiftUI. Hakanan ya bayyana dalla-dalla dalilin da yasa da lokacin amfani Jihar, @Binding, Abun dauri da MuhalliObject.

Skillbox yana ba da shawarar:

• Hakikanin hanya "Mobile Developer PRO".
• Aiwatar da karatun kan layi "Python Data Analyst".
• Kwas na aiki na shekara biyu "Ni mai haɓaka gidan yanar gizon PRO ne".

source: www.habr.com