സ്വിഫ്റ്റ്യുഐയിലെ ആപ്ലിക്കേഷൻ വികസനം. ഭാഗം 1: ഡാറ്റാഫ്ലോയും റീഡക്സും

WWDC 2019-ലെ സ്റ്റേറ്റ് ഓഫ് യൂണിയൻ സെഷനിൽ പങ്കെടുത്തതിന് ശേഷം, SwiftUI-യിലേക്ക് ആഴ്ന്നിറങ്ങാൻ ഞാൻ തീരുമാനിച്ചു. ഞാൻ അതിനൊപ്പം പ്രവർത്തിക്കാൻ ധാരാളം സമയം ചിലവഴിച്ചു, കൂടാതെ വിശാലമായ ശ്രേണിയിലുള്ള ഉപയോക്താക്കൾക്ക് ഉപയോഗപ്രദമാകുന്ന ഒരു യഥാർത്ഥ ആപ്ലിക്കേഷൻ വികസിപ്പിക്കാൻ തുടങ്ങിയിരിക്കുന്നു.

ഞാൻ ഇതിനെ MovieSwiftUI എന്ന് വിളിച്ചു - ഇത് പുതിയതും പഴയതുമായ സിനിമകൾക്കായി തിരയുന്നതിനും അവ ഉപയോഗിച്ച് ഒരു ശേഖരത്തിൽ ശേഖരിക്കുന്നതിനുമുള്ള ഒരു അപ്ലിക്കേഷനാണ്. TMDB API. ഞാൻ എല്ലായ്പ്പോഴും സിനിമകളെ സ്നേഹിക്കുകയും ഈ മേഖലയിൽ പ്രവർത്തിക്കുന്ന ഒരു കമ്പനി സൃഷ്ടിക്കുകയും ചെയ്തിട്ടുണ്ട്, വളരെക്കാലം മുമ്പാണെങ്കിലും. കമ്പനിയെ കൂൾ എന്ന് വിളിക്കാൻ കഴിയില്ല, പക്ഷേ ആപ്ലിക്കേഷൻ ആയിരുന്നു!

ഞങ്ങൾ ഓർമ്മിപ്പിക്കുന്നു: "Habr"-ന്റെ എല്ലാ വായനക്കാർക്കും - "Habr" പ്രൊമോഷണൽ കോഡ് ഉപയോഗിച്ച് ഏതെങ്കിലും സ്കിൽബോക്സ് കോഴ്സിൽ ചേരുമ്പോൾ 10 റൂബിൾസ് കിഴിവ്.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു: വിദ്യാഭ്യാസ ഓൺലൈൻ കോഴ്സ് "പ്രൊഫഷൻ ജാവ ഡെവലപ്പർ".

അപ്പോൾ MovieSwiftUI-യ്ക്ക് എന്തുചെയ്യാൻ കഴിയും?

• API-യുമായി സംവദിക്കുന്നു - മിക്കവാറും എല്ലാ ആധുനിക ആപ്ലിക്കേഷനുകളും ഇത് ചെയ്യുന്നു.
• അഭ്യർത്ഥനകളിലെ അസിൻക്രണസ് ഡാറ്റ ലോഡുചെയ്യുകയും JSON ഉപയോഗിക്കുന്ന സ്വിഫ്റ്റ് മോഡലിലേക്ക് പാഴ്‌സ് ചെയ്യുകയും ചെയ്യുന്നു കോഡബിൾ.
• അഭ്യർത്ഥന പ്രകാരം ലോഡ് ചെയ്ത ചിത്രങ്ങൾ കാണിക്കുകയും അവ കാഷെ ചെയ്യുകയും ചെയ്യുന്നു.
• iOS, iPadOS, macOS എന്നിവയ്‌ക്കായുള്ള ഈ ആപ്പ് ഈ OS-കളുടെ ഉപയോക്താക്കൾക്ക് മികച്ച UX നൽകുന്നു.
• ഉപയോക്താവിന് ഡാറ്റ സൃഷ്ടിക്കാനും അവരുടെ സ്വന്തം മൂവി ലിസ്റ്റുകൾ സൃഷ്ടിക്കാനും കഴിയും. ആപ്ലിക്കേഷൻ ഉപയോക്തൃ ഡാറ്റ സംരക്ഷിക്കുകയും പുനഃസ്ഥാപിക്കുകയും ചെയ്യുന്നു.
• Redux പാറ്റേൺ ഉപയോഗിച്ച് കാഴ്ചകളും ഘടകങ്ങളും മോഡലുകളും വ്യക്തമായി വേർതിരിച്ചിരിക്കുന്നു. ഇവിടെയുള്ള ഡാറ്റാ പ്രവാഹം ഏകദിശയിലാണ്. ഇത് പൂർണ്ണമായും കാഷെ ചെയ്യാനും പുനഃസ്ഥാപിക്കാനും തിരുത്തിയെഴുതാനും കഴിയും.
• ആപ്ലിക്കേഷൻ SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal മുതലായവയുടെ അടിസ്ഥാന ഘടകങ്ങൾ ഉപയോഗിക്കുന്നു. ഇത് ഇഷ്‌ടാനുസൃത കാഴ്ചകൾ, ആംഗ്യങ്ങൾ, UI/UX എന്നിവയും നൽകുന്നു.

വാസ്തവത്തിൽ, ആനിമേഷൻ സുഗമമാണ്, GIF അൽപ്പം ഞെട്ടിപ്പോയി

ആപ്പിൽ പ്രവർത്തിക്കുന്നത് എനിക്ക് വളരെയധികം അനുഭവം നൽകി, മൊത്തത്തിൽ ഇത് ഒരു നല്ല അനുഭവമായിരുന്നു. എനിക്ക് പൂർണ്ണമായും പ്രവർത്തനക്ഷമമായ ഒരു ആപ്ലിക്കേഷൻ എഴുതാൻ കഴിഞ്ഞു, സെപ്റ്റംബറിൽ ഞാൻ അത് മെച്ചപ്പെടുത്തുകയും iOS 13 ന്റെ റിലീസിനൊപ്പം ആപ്പ്സ്റ്റോറിൽ പ്രസിദ്ധീകരിക്കുകയും ചെയ്യും.

Redux, BindableObject, EnvironmentObject

ഞാൻ ഇപ്പോൾ ഏകദേശം രണ്ട് വർഷമായി Redux-ൽ പ്രവർത്തിക്കുന്നു, അതിനാൽ എനിക്ക് അതിൽ നല്ല പരിചയമുണ്ട്. പ്രത്യേകിച്ചും, ഞാൻ ഇത് മുൻവശത്ത് ഉപയോഗിക്കുന്നു തിരിച്ചടി നടത്തുക വെബ്‌സൈറ്റ്, കൂടാതെ നേറ്റീവ് iOS (സ്വിഫ്റ്റ്), ആൻഡ്രോയിഡ് (കോട്ട്ലിൻ) ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുന്നതിനും.

ഒരു SwiftUI ആപ്ലിക്കേഷൻ നിർമ്മിക്കുന്നതിനുള്ള ഡാറ്റാ ഫ്ലോ ആർക്കിടെക്ചറായി Redux തിരഞ്ഞെടുത്തതിൽ ഞാൻ ഒരിക്കലും ഖേദിച്ചിട്ടില്ല. UIKit ആപ്പിൽ Redux ഉപയോഗിക്കുമ്പോൾ ഏറ്റവും വെല്ലുവിളി നിറഞ്ഞ ഭാഗങ്ങൾ സ്റ്റോറിൽ പ്രവർത്തിക്കുകയും ഡാറ്റ നേടുകയും വീണ്ടെടുക്കുകയും നിങ്ങളുടെ കാഴ്ചകൾ/ഘടകങ്ങൾ എന്നിവയിലേക്ക് മാപ്പ് ചെയ്യുകയും ചെയ്യുന്നു. ഇത് ചെയ്യുന്നതിന്, എനിക്ക് കണക്ടറുകളുടെ ഒരു തരം ലൈബ്രറി സൃഷ്ടിക്കേണ്ടി വന്നു (ReSwift, ReKotlin എന്നിവ ഉപയോഗിച്ച്). നന്നായി പ്രവർത്തിക്കുന്നു, പക്ഷേ ധാരാളം കോഡ്. നിർഭാഗ്യവശാൽ, ഇത് (ഇതുവരെ) ഓപ്പൺ സോഴ്സ് അല്ല.

നല്ല വാര്ത്ത! SwiftUI-ൽ വിഷമിക്കേണ്ട ഒരേയൊരു കാര്യം - നിങ്ങൾ Redux ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ - സ്റ്റോറുകൾ, സ്റ്റേറ്റുകൾ, റിഡ്യൂസറുകൾ എന്നിവയെക്കുറിച്ചാണ്. @EnvironmentObject-ന് നന്ദി, സ്റ്റോറുമായുള്ള ഇടപെടൽ SwiftUI പൂർണ്ണമായും പരിപാലിക്കുന്നു. അതിനാൽ, സ്റ്റോർ ആരംഭിക്കുന്നത് ഒരു BindableObject ഉപയോഗിച്ചാണ്.

ഞാൻ ഒരു ലളിതമായ സ്വിഫ്റ്റ് പാക്കേജ് സൃഷ്ടിച്ചു, SwiftUIFlux, ഇത് 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 ആയതിനാൽ, PassthroughSubject നൽകുന്ന willChange പ്രോപ്പർട്ടി ഉപയോഗിച്ച് അതിന്റെ മൂല്യം മാറുമ്പോൾ അത് SwiftUI-യെ അറിയിക്കും. കാരണം, BindableObject ഒരു PublisherType നൽകണം, എന്നാൽ അത് കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഉത്തരവാദിത്തം പ്രോട്ടോക്കോൾ നടപ്പിലാക്കലാണ്. മൊത്തത്തിൽ, ഇത് ആപ്പിളിൽ നിന്നുള്ള വളരെ ശക്തമായ ഉപകരണമാണ്. അതനുസരിച്ച്, അടുത്ത റെൻഡറിംഗ് സൈക്കിളിൽ, സംസ്ഥാന മാറ്റത്തിനനുസരിച്ച് കാഴ്ചകളുടെ ബോഡി റെൻഡർ ചെയ്യാൻ 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 അവസ്ഥയിൽ നിന്ന് ഉരുത്തിരിഞ്ഞതും ഒരു EnvironmentObject ആയി കുത്തിവയ്ക്കപ്പെട്ടതും ആയതിനാൽ, SwiftUI ലിസ്റ്റ് അപ്ഡേറ്റ് ചെയ്യുന്നു, കാരണം ForEach സിനിമകൾ കണക്കാക്കിയ പ്രോപ്പർട്ടിയുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു.

MoviesState reducer-ന്റെ ഭാഗം ഇതാ:

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
}

മുകളിൽ പറഞ്ഞതുപോലെ, നിങ്ങൾ ഒരു പ്രവർത്തനം അയച്ച് ഒരു പുതിയ അവസ്ഥ തിരികെ നൽകുമ്പോൾ റിഡ്യൂസർ എക്സിക്യൂട്ട് ചെയ്യപ്പെടും.

ഞാൻ ഇതുവരെ വിശദാംശങ്ങളിലേക്ക് പോകുന്നില്ല - എന്താണ് പ്രദർശിപ്പിക്കേണ്ടതെന്ന് സ്വിഫ്റ്റ്യുഐക്ക് എങ്ങനെ അറിയാം. ഇത് കൂടുതൽ ആഴത്തിൽ മനസ്സിലാക്കാൻ, അത് വിലമതിക്കുന്നു ഡാറ്റാ ഫ്ലോയിൽ WWDC സെഷൻ കാണുക SwiftUI-ൽ. എന്തിന്, എപ്പോൾ ഉപയോഗിക്കണമെന്നും വിശദമായി വിവരിക്കുന്നു അവസ്ഥ, @Binding, ObjectBinding, EnvironmentObject.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു:

• പ്രായോഗിക കോഴ്സ് "മൊബൈൽ ഡെവലപ്പർ PRO".
• ഓൺലൈൻ കോഴ്സിന് അപേക്ഷിച്ചു "പൈത്തൺ ഡാറ്റ അനലിസ്റ്റ്".
• രണ്ടുവർഷത്തെ പ്രാക്ടിക്കൽ കോഴ്സ് "ഞാൻ ഒരു PRO വെബ് ഡെവലപ്പർ ആണ്".

അവലംബം: www.habr.com