ការអភិវឌ្ឍន៍កម្មវិធីនៅលើ SwiftUI ។ ផ្នែកទី 1: លំហូរទិន្នន័យ និង Redux

បន្ទាប់ពីបានចូលរួមសម័យប្រជុំរដ្ឋនៃសហភាពនៅ WWDC ឆ្នាំ 2019 ខ្ញុំបានសម្រេចចិត្តចូលជ្រៅទៅក្នុង SwiftUI ។ ខ្ញុំបានចំណាយពេលច្រើនក្នុងការធ្វើការជាមួយវា ហើយឥឡូវនេះបានចាប់ផ្តើមបង្កើតកម្មវិធីពិតប្រាកដដែលអាចមានប្រយោជន៍ដល់អ្នកប្រើប្រាស់ជាច្រើន។

ខ្ញុំបានហៅវាថា MovieSwiftUI - នេះគឺជាកម្មវិធីសម្រាប់ស្វែងរកខ្សែភាពយន្តថ្មី និងចាស់ ក៏ដូចជាការប្រមូលវានៅក្នុងបណ្តុំដោយប្រើ TMDB API. ខ្ញុំតែងតែចូលចិត្តភាពយន្ត ហើយថែមទាំងបង្កើតក្រុមហ៊ុនមួយដែលកំពុងធ្វើការក្នុងវិស័យនេះ ទោះបីជាយូរយារណាស់មកហើយក៏ដោយ។ ក្រុមហ៊ុនស្ទើរតែមិនអាចហៅថាឡូយ ប៉ុន្តែកម្មវិធីគឺ!

យើងរំលឹក៖ សម្រាប់អ្នកអានទាំងអស់នៃ "Habr" - ការបញ្ចុះតម្លៃ 10 rubles នៅពេលចុះឈ្មោះក្នុងវគ្គសិក្សា Skillbox ណាមួយដោយប្រើលេខកូដផ្សព្វផ្សាយ "Habr" ។

Skillbox ណែនាំ៖ វគ្គសិក្សាតាមអ៊ីនធឺណិត "Profession Java Developer".

ដូច្នេះតើ MovieSwiftUI អាចធ្វើអ្វីបាន?

• អន្តរកម្មជាមួយ API - ស្ទើរតែគ្រប់កម្មវិធីទំនើបធ្វើបែបនេះ។
• ផ្ទុកទិន្នន័យអសមកាលនៅលើសំណើ និងញែក JSON ទៅក្នុងគំរូ Swift ដោយប្រើ Codable.
• បង្ហាញរូបភាពដែលបានផ្ទុកតាមសំណើ និងរក្សាទុកពួកវា។
• កម្មវិធីនេះសម្រាប់ iOS, iPadOS និង macOS ផ្តល់នូវ UX ដ៏ល្អបំផុតសម្រាប់អ្នកប្រើប្រាស់ប្រព័ន្ធប្រតិបត្តិការទាំងនេះ។
• អ្នកប្រើប្រាស់អាចបង្កើតទិន្នន័យ និងបង្កើតបញ្ជីភាពយន្តផ្ទាល់ខ្លួនរបស់ពួកគេ។ កម្មវិធីរក្សាទុក និងស្ដារទិន្នន័យអ្នកប្រើប្រាស់។
• ទិដ្ឋភាព សមាសភាគ និងម៉ូដែលត្រូវបានបំបែកយ៉ាងច្បាស់ដោយប្រើលំនាំ Redux ។ លំហូរទិន្នន័យនៅទីនេះគឺគ្មានទិសដៅ។ វាអាចត្រូវបានដាក់ក្នុងឃ្លាំងសម្ងាត់ពេញលេញ ស្ដារ និងសរសេរជាន់ពីលើ។
• កម្មវិធីប្រើប្រាស់សមាសធាតុជាមូលដ្ឋាននៃ SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal ជាដើម។ វាក៏ផ្តល់នូវទិដ្ឋភាពផ្ទាល់ខ្លួន កាយវិការ UI/UX ផងដែរ។

តាម​ពិត ចលនា​គឺ​រលូន GIF បាន​ប្រែ​ទៅ​ជា​កន្ត្រាក់​បន្តិច

ការធ្វើការលើកម្មវិធីបានផ្តល់ឱ្យខ្ញុំនូវបទពិសោធន៍ជាច្រើន ហើយជាទូទៅវាគឺជាបទពិសោធន៍វិជ្ជមាន។ ខ្ញុំ​អាច​សរសេរ​កម្មវិធី​ដែល​មាន​មុខងារ​ពេញ​លេញ​ ហើយ​នៅ​ខែ​កញ្ញា​ខ្ញុំ​នឹង​កែលម្អ​វា​ហើយ​បោះផ្សាយ​វា​ក្នុង​ AppStore ព្រម​គ្នា​នឹង​ការ​ចេញ​ iOS 13។

Redux, BindableObject និង EnvironmentObject

ខ្ញុំបានធ្វើការជាមួយ Redux ប្រហែល XNUMX ឆ្នាំហើយ ដូច្នេះខ្ញុំយល់ច្បាស់អំពីវា។ ជាពិសេសខ្ញុំប្រើវានៅក្នុង frontend សម្រាប់ ប្រតិកម្ម គេហទំព័រ ក៏ដូចជាសម្រាប់បង្កើតកម្មវិធី iOS (Swift) និង Android (Kotlin) ដើម។

ខ្ញុំមិនដែលសោកស្តាយក្នុងការជ្រើសរើស Redux ជាស្ថាបត្យកម្មលំហូរទិន្នន័យសម្រាប់បង្កើតកម្មវិធី SwiftUI នោះទេ។ ផ្នែកដែលពិបាកបំផុតនៅពេលប្រើ Redux នៅក្នុងកម្មវិធី UIKit កំពុងធ្វើការជាមួយហាង និងទទួលបាន និងទាញយកទិន្នន័យ និងគូសវាសទៅនឹងទិដ្ឋភាព/សមាសធាតុរបស់អ្នក។ ដើម្បី​ធ្វើ​ដូច្នេះ ខ្ញុំ​ត្រូវ​បង្កើត​បណ្ណាល័យ​ឧបករណ៍​ភ្ជាប់​មួយ​ប្រភេទ (ដោយ​ប្រើ ReSwift និង ReKotlin)។ ដំណើរការបានល្អ ប៉ុន្តែមានកូដច្រើន។ ជាអកុសល វាមិនមែនជា (មិនទាន់) ប្រភពបើកចំហទេ។

ដំណឹង​ល្អ! រឿងតែមួយគត់ដែលត្រូវព្រួយបារម្ភជាមួយ SwiftUI - ប្រសិនបើអ្នកមានគម្រោងប្រើ Redux - គឺហាង រដ្ឋ និងឧបករណ៍កាត់បន្ថយ។ អន្តរកម្មជាមួយហាងត្រូវបានយកចិត្តទុកដាក់ទាំងស្រុងដោយ SwiftUI អរគុណដល់ @EnvironmentObject ។ ដូច្នេះ ហាងចាប់ផ្តើមដោយ BindableObject ។

ខ្ញុំបានបង្កើតកញ្ចប់ Swift ដ៏សាមញ្ញមួយ 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 នៅពេលដែលតម្លៃរបស់វាផ្លាស់ប្តូរដោយប្រើលក្ខណៈសម្បត្តិ willChange ដែលផ្តល់ដោយ PassthroughSubject ។ នេះគឺដោយសារតែ BindableObject ត្រូវតែផ្តល់ប្រភេទ PublisherType ប៉ុន្តែការអនុវត្តពិធីការគឺទទួលខុសត្រូវក្នុងការគ្រប់គ្រងវា។ សរុបមក នេះគឺជាឧបករណ៍ដ៏មានឥទ្ធិពលបំផុតពី Apple ។ ដូច្នោះហើយ នៅក្នុងវដ្តនៃការបង្ហាញបន្ទាប់ SwiftUI នឹងជួយបង្ហាញតួនៃទិដ្ឋភាពយោងទៅតាមការផ្លាស់ប្តូររដ្ឋ។

តាមពិតនេះគឺជាបេះដូង និងវេទមន្តទាំងអស់របស់ 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())
    }
}

Store ត្រូវបានចាក់បញ្ចូលជា EnvironmentObject នៅពេលដែលកម្មវិធីចាប់ផ្តើម ហើយបន្ទាប់មកអាចចូលប្រើបានក្នុងទិដ្ឋភាពណាមួយដោយប្រើ @EnvironmentObject ។ មិនមានការផាកពិន័យលើការអនុវត្តទេ ពីព្រោះលក្ខណៈសម្បត្តិដែលទទួលបានត្រូវបានទាញយក ឬគណនាយ៉ាងរហ័សពីស្ថានភាពកម្មវិធី។

លេខកូដខាងលើផ្លាស់ប្តូររូបភាព ប្រសិនបើផ្ទាំងរូបភាពភាពយន្តផ្លាស់ប្តូរ។

ហើយនេះពិតជាត្រូវបានធ្វើដោយគ្រាន់តែមួយបន្ទាត់ ដោយមានជំនួយដែលទិដ្ឋភាពត្រូវបានភ្ជាប់ទៅរដ្ឋ។ ប្រសិនបើអ្នកបានធ្វើការជាមួយ ReSwift នៅលើ iOS ឬសូម្បីតែ ភ្ជាប់ ជាមួយនឹង 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!]))
            }
        }
    }
}

នៅក្នុងកូដខាងលើ ខ្ញុំកំពុងប្រើសកម្មភាព .onDelete ពី SwiftUI សម្រាប់ IP នីមួយៗ។ វាអនុញ្ញាតឱ្យជួរដេកក្នុងបញ្ជីបង្ហាញការអូស 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
}

ឧបករណ៍កាត់បន្ថយត្រូវបានប្រតិបត្តិនៅពេលអ្នកបញ្ជូនសកម្មភាពមួយ ហើយត្រឡប់ស្ថានភាពថ្មីដូចដែលបានបញ្ជាក់ខាងលើ។

ខ្ញុំ​នឹង​មិន​លម្អិត​នៅ​ឡើយ​ទេ - តើ SwiftUI ពិត​ជា​ដឹង​ពី​អ្វី​ដែល​ត្រូវ​បង្ហាញ។ ដើម្បីយល់ពីរឿងនេះឱ្យកាន់តែស៊ីជម្រៅវាមានតម្លៃ មើលវគ្គ WWDC លើលំហូរទិន្នន័យ នៅក្នុង SwiftUI ។ វាក៏ពន្យល់យ៉ាងលម្អិតផងដែរអំពីមូលហេតុ និងពេលណាត្រូវប្រើ រដ្ឋ, @Binding, ObjectBinding និង EnvironmentObject ។

Skillbox ណែនាំ៖

• វគ្គសិក្សាជាក់ស្តែង "អ្នកអភិវឌ្ឍន៍ចល័ត PRO".
• បានអនុវត្តវគ្គសិក្សាតាមអ៊ីនធឺណិត "អ្នកវិភាគទិន្នន័យ Python".
• វគ្គសិក្សាជាក់ស្តែងរយៈពេលពីរឆ្នាំ "ខ្ញុំជាអ្នកបង្កើតគេហទំព័រ PRO".

ប្រភព: www.habr.com