DevCoach 173: iOS | Mendalami SwiftUI, UI Framework Masa Depan!

Transcript

1. Position Mendalami SwiftUI, UI Framework Masa Depan! iOS Developer Gilang Ramadhan Curriculum Mobile Developer
2. Developer Coaching #142 iOS Developer • Pentingnya networking dalam pengembangan aplikasi iOS. • Fungsi URL Session sebagai tool networking. • Perbedaan setiap tipe dari URLSession • Cara mengubah data dengan format JSON
3. Learning Objectives • Pengantar SwiftUI • Perbandingan SwiftUI dan UIKit • Komponen UI dalam SwiftUI • State Management di SwiftUI • Future of iOS Development dengan SwiftUI • Swift Playgrounds iOS Developer
4. Pengantar SwiftUI iOS Developer
5. iOS Developer iOS Developer
6. iOS Developer iOS Developer
7. Perkembangan SwiftUI SwiftUI 1.0 - Debut rilis - Deklaratif dan reaktif - Cross-platform - Integrasi dengan UIKit dan AppKit - Hot-reload dengan Xcode Previews 2019 iOS Developer
8. Perkembangan SwiftUI SwiftUI 2.0 - WidgetKit - Appearance Modifier - ProgressView - Menus dan Context Menus - Multiplatform app templates - Lifecycle API baru 2020 SwiftUI 1.0 - Debut rilis - Deklaratif dan reaktif - Cross-platform - Integrasi dengan UIKit dan AppKit - Hot-reload dengan Xcode Previews 2019 iOS Developer
9. Perkembangan SwiftUI SwiftUI 3.0 - List, Form, dan Grid Improvements - AsyncImage - Material - Accessibility Improvements - iOS 15 Focus Mode Support - Markdown Support in Text 2021 SwiftUI 2.0 - WidgetKit - Appearance Modifier - ProgressView - Menus dan Context Menus - Multiplatform app templates - Lifecycle API baru 2020 SwiftUI 1.0 - Debut rilis - Deklaratif dan reaktif - Cross-platform - Integrasi dengan UIKit dan AppKit - Hot-reload dengan Xcode Previews 2019 iOS Developer
10. Perkembangan SwiftUI SwiftUI 4.0 - NavigationStack & NavigationSplitView - Resizable Bottom Sheets - Grid Layout - ShareLink - Improvements to Charts - Enhanced ScrollView 2022 SwiftUI 3.0 - List, Form, dan Grid Improvements - AsyncImage - Material - Accessibility Improvements - iOS 15 Focus Mode Support - Markdown Support in Text 2021 SwiftUI 2.0 - WidgetKit - Appearance Modifier - ProgressView - Menus dan Context Menus - Multiplatform app templates - Lifecycle API baru 2020 SwiftUI 1.0 - Debut rilis - Deklaratif dan reaktif - Cross-platform - Integrasi dengan UIKit dan AppKit - Hot-reload dengan Xcode Previews 2019 iOS Developer
11. Perkembangan SwiftUI SwiftUI 5.0 - Macros - Improved Scroll Performance - Interactivity in Charts - Scene Management Updates - SwiftData - MapKit Improvements 2023 SwiftUI 4.0 - NavigationStack & NavigationSplitView - Resizable Bottom Sheets - Grid Layout - ShareLink - Improvements to Charts - Enhanced ScrollView 2022 SwiftUI 3.0 - List, Form, dan Grid Improvements - AsyncImage - Material - Accessibility Improvements - iOS 15 Focus Mode Support - Markdown Support in Text 2021 SwiftUI 2.0 - WidgetKit - Appearance Modifier - ProgressView - Menus dan Context Menus - Multiplatform app templates - Lifecycle API baru 2020 SwiftUI 1.0 - Debut rilis - Deklaratif dan reaktif - Cross-platform - Integrasi dengan UIKit dan AppKit - Hot-reload dengan Xcode Previews 2019 iOS Developer
12. Perkembangan SwiftUI SwiftUI 5.0 - Macros - Improved Scroll Performance - Interactivity in Charts - Scene Management Updates - SwiftData - MapKit Improvements 2023 SwiftUI 4.0 - NavigationStack & NavigationSplitView - Resizable Bottom Sheets - Grid Layout - ShareLink - Improvements to Charts - Enhanced ScrollView 2022 SwiftUI 3.0 - List, Form, dan Grid Improvements - AsyncImage - Material - Accessibility Improvements - iOS 15 Focus Mode Support - Markdown Support in Text 2021 SwiftUI 2.0 - WidgetKit - Appearance Modifier - ProgressView - Menus dan Context Menus - Multiplatform app templates - Lifecycle API baru 2020 SwiftUI 1.0 - Debut rilis - Deklaratif dan reaktif - Cross-platform - Integrasi dengan UIKit dan AppKit - Hot-reload dengan Xcode Previews 2019 SwiftUI 6.0 - Custom Containers - Accessibility Enhancements - Improved Xcode Previews - Text Selection and Suggestions - Graphics and Animations - SF Symbols 6 2024 iOS Developer
13. SwiftUI vs yang Lain iOS Developer
14. Bagaimana Perbandingan SwiftUI dengan yang lain? Dicoding Developer Coaching #121 iOS Developer
15. Bagaimana Perbandingan SwiftUI dengan yang lain? Dicoding Developer Coaching #121 iOS Developer
16. iOS Developer • Menambahkan TableView di Storyboard. • Hubungkan TableView dengan View Controller. • Membuat TableViewCell beserta XIB file-nya. • Susun tampilan TableViewCell. • Hubungkan TableViewCell dengan kelas UITableViewCell. • Siapkan data yang diperlukan. • Menambahkan delegation dataSource di TableView. • Mendaftarkan TableViewCell ke TableView. • Mengatur delegation dari TableView. • Menjalankan aplikasi. UIKit • Siapkan data yang diperlukan. • Menyusun AcademyItemView. • Menggabungkan AcademyItemView dengan ContentView. • Menjalankan aplikasi. SwiftUI
17. iOS Developer SwiftUI Perbedaan UIKit Deklaratif, di mana developer mendeklarasikan apa yang harus ditampilkan dan bagaimana UI berinteraksi dengan data. 1 Pendekatan Pemrograman Imperatif, yang berarti developer harus secara eksplisit menentukan setiap perubahan pada UI melalui kode.
18. iOS Developer SwiftUI Perbedaan UIKit Menggunakan View sebagai elemen dasar untuk membangun UI, di mana semua tampilan dideklarasikan sebagai struktur fungsional. 2 Manajemen Tampilan Menggunakan UIView dan UIViewController sebagai elemen dasar. Deklaratif, di mana developer mendeklarasikan apa yang harus ditampilkan dan bagaimana UI berinteraksi dengan data. 1 Pendekatan Pemrograman Imperatif, yang berarti developer harus secara eksplisit menentukan setiap perubahan pada UI melalui kode.
19. iOS Developer SwiftUI Perbedaan UIKit Menggunakan View sebagai elemen dasar untuk membangun UI, di mana semua tampilan dideklarasikan sebagai struktur fungsional. 2 Manajemen Tampilan Menggunakan UIView dan UIViewController sebagai elemen dasar. Dilengkapi dengan Xcode Previews, yang memungkinkan developer melihat pratinjau UI secara real-time saat menulis kode tanpa harus menjalankan aplikasi sepenuhnya. 3 Alat Pengembangan Tidak memiliki fitur preview langsung. Developer harus menjalankan aplikasi di simulator atau perangkat fisik setiap kali ingin melihat perubahan pada UI. Deklaratif, di mana developer mendeklarasikan apa yang harus ditampilkan dan bagaimana UI berinteraksi dengan data. 1 Pendekatan Pemrograman Imperatif, yang berarti developer harus secara eksplisit menentukan setiap perubahan pada UI melalui kode.
20. iOS Developer SwiftUI Perbedaan UIKit Menggunakan View sebagai elemen dasar untuk membangun UI, di mana semua tampilan dideklarasikan sebagai struktur fungsional. 2 Manajemen Tampilan Menggunakan UIView dan UIViewController sebagai elemen dasar. Dilengkapi dengan Xcode Previews, yang memungkinkan developer melihat pratinjau UI secara real-time saat menulis kode tanpa harus menjalankan aplikasi sepenuhnya. 3 Alat Pengembangan Tidak memiliki fitur preview langsung. Developer harus menjalankan aplikasi di simulator atau perangkat fisik setiap kali ingin melihat perubahan pada UI. Menggunakan property wrapper seperti State, Binding, ObservedObject, dan EnvironmentObject untuk manajemen data dan sinkronisasi antara UI dan data secara otomatis. 4 Pengelolaan Data Tidak memiliki konsep ini. Developer biasanya harus menggunakan delegates, closures, atau notifications untuk mengelola pembaruan data dan UI. Deklaratif, di mana developer mendeklarasikan apa yang harus ditampilkan dan bagaimana UI berinteraksi dengan data. 1 Pendekatan Pemrograman Imperatif, yang berarti developer harus secara eksplisit menentukan setiap perubahan pada UI melalui kode.
21. iOS Developer SwiftUI Perbedaan UIKit Menggunakan View sebagai elemen dasar untuk membangun UI, di mana semua tampilan dideklarasikan sebagai struktur fungsional. 2 Manajemen Tampilan Menggunakan UIView dan UIViewController sebagai elemen dasar. Dilengkapi dengan Xcode Previews, yang memungkinkan developer melihat pratinjau UI secara real-time saat menulis kode tanpa harus menjalankan aplikasi sepenuhnya. 3 Alat Pengembangan Tidak memiliki fitur preview langsung. Developer harus menjalankan aplikasi di simulator atau perangkat fisik setiap kali ingin melihat perubahan pada UI. Menggunakan property wrapper seperti State, Binding, ObservedObject, dan EnvironmentObject untuk manajemen data dan sinkronisasi antara UI dan data secara otomatis. 4 Pengelolaan Data Tidak memiliki konsep ini. Developer biasanya harus menggunakan delegates, closures, atau notifications untuk mengelola pembaruan data dan UI. Menggunakan struktur App untuk mendeklarasikan siklus hidup aplikasi, yang lebih ringkas dan mudah diatur dibandingkan UIKit. 5 Lifecycle Management Menggunakan UIApplicationDelegate dan UIViewController untuk mengelola siklus hidup aplikasi dan tampilan, yang lebih kompleks. Deklaratif, di mana developer mendeklarasikan apa yang harus ditampilkan dan bagaimana UI berinteraksi dengan data. 1 Pendekatan Pemrograman Imperatif, yang berarti developer harus secara eksplisit menentukan setiap perubahan pada UI melalui kode.
22. Storyboard iOS Developer
23. Design Tools iOS Developer
24. SwiftUI Component iOS Developer
25. iOS Developer
26. View Layout View Modifier iOS Developer
27. Text iOS Developer Text("Hello, Dicoding!")
28. Label iOS Developer Label( "Lightning", systemImage: "bolt.fill" )
29. TextField iOS Developer @State private var value: String = "" var body: some View { TextField("Masukkan nilai", text: $value) .textFieldStyle(.roundedBorder) .padding() }
30. Button iOS Developer Button(action: signIn) { Text("Sign In") }
31. Toggle iOS Developer @State private var isLove: Bool = false var body: some View { Toggle(isOn: $isLove) { Text("Apakah kamu suka Dicoding?") } }
32. Image iOS Developer Image("Dicoding_Image") .resizable() .aspectRatio(contentMode: .fit) .padding()
33. List iOS Developer List { Text("Achmad Ilham") Text("Ahmad Arif Faizin") Text("Gilang Ramadhan") }
34. Stack iOS Developer
35. Lazy Stack iOS Developer
36. NavigationView iOS Developer NavigationView { List(dicodingMembers) { member in Text(member.name) }.navigationTitle("Member Dicoding") }
37. NavigationLink iOS Developer NavigationView { List(dicodingMembers) { member in NavigationLink { DetailView(member: member) } label: { Text(member.name) } }.navigationTitle("Member Dicoding") }
38. iOS 16.0+ NavigationStack iOS Developer NavigationStack { List(dicodingMembers) { member in NavigationLink(member.name, value: member) }.navigationDestination(for: Member.self) { member in DetailView(member: member) }.navigationTitle("Member Dicoding") }
39. iOS 16.0+ NavigationSplitView iOS Developer NavigationSplitView { List(dicodingMembers, selection: $selectedMember) { member in NavigationLink(member.name, value: member) }.navigationTitle("Member Dicoding") } detail: { if let member = selectedMember { DetailView(member: member) } else { Text("Nothing Selected.") } }
40. TabView iOS Developer TabView { Tab("Member", systemImage: "graduationcap") { MemberView() } Tab("Academy", systemImage: "books.vertical") { AcademyView() }.badge(4) Tab("Account", systemImage: "person.crop.circle.fill") { AccountView() }.badge("!") }
41. Quiz #1 DevCoach 173
42. Quiz #1 DevCoach 173 Sebutkan SwiftUI Component yang digunakan untuk membangun tampilan ini. Minimal 3
43. Responding to Events iOS Developer
44. Scene Architecture iOS Developer @main struct DicodingApp: App { var body: some Scene { WindowGroup { ContentView() } } }
45. Scene Architecture iOS Developer @main struct DicodingApp: App { var body: some Scene { WindowGroup { ContentView() } } }
46. Scene Architecture iOS Developer @main struct DicodingApp: App { var body: some Scene { WindowGroup { ContentView() } } }
47. Scene Architecture iOS Developer @main struct DicodingApp: App { var body: some Scene { WindowGroup { ContentView() } } }
48. Scene Phases and Transitions iOS Developer
49. Events and State iOS Developer
50. View Lifecycle Events iOS Developer active inactive
51. View Lifecycle Events iOS Developer onAppear(perform:) any time the view appears on screen active inactive
52. View Lifecycle Events iOS Developer onAppear(perform:) any time the view appears on screen onDisappear(perform:) when a view disappears from screen active inactive
53. task(priority:_:) execute asynchronously before the view appears on screen View Lifecycle Events iOS Developer onAppear(perform:) any time the view appears on screen onDisappear(perform:) when a view disappears from screen active inactive
54. State Management iOS Developer
55. State iOS Developer
56. Binding iOS Developer
57. Example iOS Developer @State private var isPlaying: Bool = false var body: some View { VStack { Text("Apakah kamu menyukai Coding?") .padding() Button(action: { self.isLove.toggle() // false -> true }) { Image(systemName: isLove ? "heart.fill" : "heart") } } }
58. Example iOS Developer struct ContentView: View { @State private var isLove: Bool = false var body: some View { VStack { Text("Apakah kamu menyukai Coding?") .padding() LoveButton(isLove: $isLove) } } } struct LoveButton: View { @Binding var isLove: Bool var body: some View { Button(action: { self.isLove.toggle() }) { Image(systemName: isLove ? "heart.fill" : "heart") } } }
59. Observable Class iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false }
60. Observable Class iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false }
61. Observable Class iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false } struct MyView: View { @StateObject private var model = DataModel() var body: some View { Text(model.name) } }
62. Observable Class iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false } struct MyView: View { @StateObject private var model = DataModel() var body: some View { Text(model.name) } }
63. struct MyView: View { @StateObject private var model = DataModel() var body: some View { Text(model.name) MySubView(model: model) } } Observable Class iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false }
64. struct MyView: View { @StateObject private var model = DataModel() var body: some View { Text(model.name) MySubView(model: model) } } Observable Class iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false } struct MySubView: View { @ObservedObject var model: DataModel var body: some View { Toggle("Enabled", isOn: $model.isEnabled) } }
65. Observable Class iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false } struct MyView: View { @StateObject private var model = DataModel() var body: some View { Text(model.name) MySubView(model: model) } } struct MySubView: View { @ObservedObject var model: DataModel var body: some View { Toggle("Enabled", isOn: $model.isEnabled) } }
66. Observable Class iOS Developer @Published name @Published isEnabled DataModel @StateObject var model MySubView(model: model) MyView @ObservedObject var model MySubView
67. struct MyView: View { @StateObject private var model = DataModel() var body: some View { Text(model.name) MySubView(model: model) } } Observable Class iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false } struct MySubView: View { @ObservedObject var model: DataModel var body: some View { Toggle("Enabled", isOn: $model.isEnabled) } }
68. struct MyView: View { @StateObject private var model = DataModel() var body: some View { Text(model.name) MySubView() .environmentObject(model) } } struct MySubView: View { @ObservedObject var model: DataModel var body: some View { Toggle("Enabled", isOn: $model.isEnabled) } } class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false } Environment Object iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false }
69. struct MyView: View { @StateObject private var model = DataModel() var body: some View { Text(model.name) MySubView() .environmentObject(model) } } struct MySubView: View { @ObservedObject var model: DataModel var body: some View { Toggle("Enabled", isOn: $model.isEnabled) } } class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false } Environment Object iOS Developer class DataModel: ObservableObject { @Published var name = "Some Name" @Published var isEnabled = false }
70. MySubView() .environmentObject(model) Observable Class iOS Developer @Published name @Published isEnabled DataModel @StateObject var model MySubView(model: model) MyView @ObservedObject var model MySubView @EnvironmentObject var model MySubView
71. Quiz #2 DevCoach 173
72. Quiz #2 DevCoach 173 Pada state manakah pemanggilan data dari API/Networking dilakukan dalam pengembangan aplikasi dengan SwiftUI?
73. Future of iOS Development iOS Developer
74. • Concurrency Model yang Diperbarui a. Global Actors b. Task Cancellation c. AsyncSequence Enhancements • Memperbaiki Penggunaan Memori a. Ownership Model • Peningkatan pada Error Handling • Swift Testing Swift 6.0 iOS Developer
75. Swift Testing is a new framework with expressive and intuitive APIs that make testing your Swift code a breeze. Swift Testing iOS Developer
76. SwiftData makes it easy to persist data using declarative code. You can query and filter data using regular Swift code. And itʼs designed to integrate seamlessly with SwiftUI. Swift Data iOS Developer
77. Swift Charts is a powerful and concise SwiftUI framework you can use to transform your data into informative visualizations. Swift Chart iOS Developer
78. Swift Playgrounds iOS Developer
79. Swift Playgrounds 󰻑 iOS Developer
80. Swift Playgrounds 󰻑 iOS Developer
81. Quiz #3 DevCoach 173
82. Quiz #3 DevCoach 173 Apa itu Swift Playgrounds? Jelaskan dengan singkat!
83. iOS Developer SwiftUI adalah framework modern Apple yang memudahkan pembuatan UI aplikasi dengan sintaksis ringkas dan fitur Preview real-time.
84. Feedback! dicoding.id/devcoachfeedback
85. iOS Developer Learning Path iOS🔥 dicoding.id/ios
86. Thank You gilang-adhan gilang@dicoding.com iOS Developer