SwiftUI પર એપ્લિકેશન વિકાસ. ભાગ 1: ડેટાફ્લો અને રેડક્સ

WWDC 2019 ખાતે સ્ટેટ ઑફ ધ યુનિયન સત્રમાં હાજરી આપ્યા પછી, મેં SwiftUI માં ઊંડા ઉતરવાનું નક્કી કર્યું. મેં તેની સાથે કામ કરવામાં ઘણો સમય વિતાવ્યો છે અને હવે એક વાસ્તવિક એપ્લિકેશન વિકસાવવાનું શરૂ કર્યું છે જે વપરાશકર્તાઓની વિશાળ શ્રેણી માટે ઉપયોગી થઈ શકે.

મેં તેને MovieSwiftUI કહયું - આ નવી અને જૂની ફિલ્મો શોધવાની સાથે સાથે તેને સંગ્રહમાં એકત્રિત કરવા માટેની એપ્લિકેશન છે TMDB API. મને હંમેશા ફિલ્મો પસંદ છે અને આ ક્ષેત્રમાં કામ કરતી એક કંપની પણ બનાવી છે, જોકે ઘણા સમય પહેલા. કંપનીને ભાગ્યે જ ઠંડી કહી શકાય, પરંતુ એપ્લિકેશન હતી!

અમે યાદ કરાવીએ છીએ: Habrના તમામ વાચકો માટે - Habr પ્રોમો કોડનો ઉપયોગ કરીને કોઈપણ સ્કિલબોક્સ કોર્સમાં નોંધણી કરતી વખતે 10 રૂબલ ડિસ્કાઉન્ટ.

સ્કિલબોક્સ ભલામણ કરે છે: શૈક્ષણિક ઓનલાઈન કોર્સ "પ્રોફેશન જાવા ડેવલપર".

તો MovieSwiftUI શું કરી શકે?

• API સાથે ક્રિયાપ્રતિક્રિયા કરે છે - લગભગ કોઈપણ આધુનિક એપ્લિકેશન આ કરે છે.
• વિનંતીઓ પર અસુમેળ ડેટા લોડ કરે છે અને JSON નો ઉપયોગ કરીને સ્વિફ્ટ મોડલમાં પાર્સ કરે છે કોડેબલ.
• વિનંતી પર લોડ કરેલી છબીઓ બતાવે છે અને તેમને કેશ કરે છે.
• iOS, iPadOS અને macOS માટેની આ એપ્લિકેશન આ OS ના વપરાશકર્તાઓ માટે શ્રેષ્ઠ UX પ્રદાન કરે છે.
• વપરાશકર્તા ડેટા જનરેટ કરી શકે છે અને તેમની પોતાની મૂવી લિસ્ટ બનાવી શકે છે. એપ્લિકેશન વપરાશકર્તા ડેટાને સાચવે છે અને પુનઃસ્થાપિત કરે છે.
• Redux પેટર્નનો ઉપયોગ કરીને દૃશ્યો, ઘટકો અને મૉડલ સ્પષ્ટ રીતે અલગ કરવામાં આવે છે. અહીં ડેટાનો પ્રવાહ દિશાવિહીન છે. તે સંપૂર્ણપણે કેશ્ડ, પુનઃસ્થાપિત અને ફરીથી લખી શકાય છે.
• એપ્લિકેશન SwiftUI, TabbedView, Segmented Control, NavigationView, Form, Modal, વગેરેના મૂળભૂત ઘટકોનો ઉપયોગ કરે છે. તે કસ્ટમ વ્યૂ, હાવભાવ, UI/UX પણ પ્રદાન કરે છે.

હકીકતમાં, એનિમેશન સરળ છે, GIF થોડો આંચકો લાગ્યો

એપ પર કામ કરવાથી મને ઘણો અનુભવ મળ્યો અને એકંદરે તે સકારાત્મક અનુભવ હતો. હું એક સંપૂર્ણ કાર્યાત્મક એપ્લિકેશન લખવામાં સક્ષમ હતો, સપ્ટેમ્બરમાં હું તેને સુધારીશ અને તેને એપસ્ટોરમાં પ્રકાશિત કરીશ, એક સાથે iOS 13 ના પ્રકાશન સાથે.

Redux, BindableObject અને EnvironmentObject

હું લગભગ બે વર્ષથી Redux સાથે કામ કરી રહ્યો છું, તેથી હું તેમાં પ્રમાણમાં સારી રીતે વાકેફ છું. ખાસ કરીને, હું તેને માટે અગ્રભાગમાં ઉપયોગ કરું છું પ્રતિક્રિયા વેબસાઇટ, તેમજ મૂળ iOS (Swift) અને Android (Kotlin) એપ્લિકેશન વિકસાવવા માટે.

સ્વિફ્ટયુઆઈ એપ્લીકેશન બનાવવા માટે ડેટા ફ્લો આર્કિટેક્ચર તરીકે રેડક્સને પસંદ કરવા બદલ મને ક્યારેય અફસોસ થયો નથી. UIKit એપ્લિકેશનમાં Redux નો ઉપયોગ કરતી વખતે સૌથી પડકારજનક ભાગો સ્ટોર સાથે કામ કરે છે અને ડેટા મેળવવો અને પુનઃપ્રાપ્ત કરવો અને તેને તમારા દૃશ્યો/ઘટકોમાં મેપ કરવો. આ કરવા માટે, મારે કનેક્ટર્સની એક પ્રકારની લાઇબ્રેરી બનાવવાની હતી (ReSwift અને ReKotlin નો ઉપયોગ કરીને). સારી રીતે કામ કરે છે, પરંતુ કોડ ઘણો. કમનસીબે, તે (હજુ સુધી) ઓપન સોર્સ નથી.

સારા સમાચાર! SwiftUI સાથે ચિંતા કરવાની એકમાત્ર બાબતો - જો તમે Redux નો ઉપયોગ કરવાની યોજના ઘડી રહ્યા હોવ તો - સ્ટોર્સ, સ્ટેટ્સ અને રીડ્યુસર છે. @EnvironmentObjectનો આભાર સ્વિફ્ટયુઆઈ દ્વારા સ્ટોર સાથેની ક્રિયાપ્રતિક્રિયાની સંપૂર્ણ કાળજી લેવામાં આવે છે. તેથી, સ્ટોર 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 છે, તે SwiftUI ને જાણ કરશે જ્યારે PassthroughSubject દ્વારા પૂરી પાડવામાં આવેલ willChange પ્રોપર્ટીનો ઉપયોગ કરીને તેનું મૂલ્ય બદલાશે. આ એટલા માટે છે કારણ કે BindableObject એ PublisherType પ્રદાન કરવું આવશ્યક છે, પરંતુ પ્રોટોકોલ અમલીકરણ તેના સંચાલન માટે જવાબદાર છે. એકંદરે, આ Apple તરફથી ખૂબ જ શક્તિશાળી સાધન છે. તદનુસાર, આગામી રેન્ડરિંગ સાયકલમાં, સ્વિફ્ટયુઆઈ રાજ્યના ફેરફાર અનુસાર મંતવ્યોના મુખ્ય ભાગને રેન્ડર કરવામાં મદદ કરશે.

ખરેખર, આ સ્વિફ્ટયુઆઈનું હૃદય અને જાદુ છે. હવે, રાજ્યમાં સબ્સ્ક્રાઇબ કરનાર કોઈપણ દૃશ્યમાં, રાજ્યમાંથી કયો ડેટા પ્રાપ્ત થયો છે અને શું બદલાયું છે તેના આધારે દૃશ્ય રેન્ડર કરવામાં આવશે.

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 તરીકે ઇન્જેક્ટ કરવામાં આવે છે અને પછી @EnvironmentObject નો ઉપયોગ કરીને કોઈપણ દૃશ્યમાં ઍક્સેસ કરી શકાય છે. ત્યાં કોઈ પ્રદર્શન દંડ નથી કારણ કે વ્યુત્પન્ન ગુણધર્મો ઝડપથી પુનઃપ્રાપ્ત કરવામાં આવે છે અથવા એપ્લિકેશનની સ્થિતિમાંથી ગણતરી કરવામાં આવે છે.

જો મૂવી પોસ્ટર બદલાય તો ઉપરનો કોડ ઈમેજ બદલે છે.

અને આ વાસ્તવમાં માત્ર એક લાઇન સાથે કરવામાં આવે છે, જેની મદદથી દૃશ્યો રાજ્ય સાથે જોડાયેલા છે. જો તમે iOS અથવા તો ReSwift સાથે કામ કર્યું છે જોડાવા React સાથે, તમે 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 રીડ્યુસરનો ભાગ છે:

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.

સ્કિલબોક્સ ભલામણ કરે છે:

• પ્રેક્ટિકલ કોર્સ "મોબાઇલ ડેવલપર પ્રો".
• ઓનલાઈન કોર્સ લાગુ કર્યો "પાયથોન ડેટા એનાલિસ્ટ".
• બે વર્ષનો પ્રેક્ટિકલ કોર્સ "હું પ્રો વેબ ડેવલપર છું".

સોર્સ: www.habr.com