Building Kotlin Multiplatform Apps

Kotlin multiplatform is a technology that allows you to share code between Android and iOS. In this talk, we will do a walk through on how to structure and setup a project for Android and iOS. We'll will explore possible architectures that could fit with multiplatform development. We also look at any limitations that you may come across along the way. By the end of the talk, you will have a good starting point to build multiplatform apps.

Transcript

1. Mohit Sarveiya Building Kotlin Multiplatform Apps @heyitsmohit
2. Building Kotlin Multiplatform Apps • Why Kotlin Multiplatform? • How to build KMM project • Networking & Caching • KMM Libraries
3. Why Kotlin Multiplatform? Android Kotlin/JVM iOS Swift/LLVM Web JS
4. Why Kotlin Multiplatform? API API API
5. Why Kotlin Multiplatform? Retrofit Ajax Alamofire
6. Why Kotlin Multiplatform? Room/SQL Delight Core Data
7. Why Kotlin Multiplatform? Business Logic Business Logic Business Logic
8. Why Kotlin Multiplatform? MVP/MVVM/MVI ReactJs VIPER
9. Why Kotlin Multiplatform? Shared code
10. Why Kotlin Multiplatform? API Business Logic Analytics Cache
11. Use Case Show Greeting
12. Use Case Show platform name Hello 
 Android
13. Hello 
 iOS Use Case 9:41 Show platform name
14. Greeter Use Case
15. How to create Multiplatform app
16. Plugin https: // plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile
17. Project Setup Shared
18. Project Setup Shared Android App
19. Project Setup Shared Android App iOS App XCode Project
20. Project Setup Shared Android App iOS App
21. Project Setup Shared Android App iOS App Framework
22. Project Setup Shared Android App iOS App
23. Shared Module Structure
24. Shared Module Shared src commonMain
25. Shared Module Shared src commonMain androidMain
26. Shared Module Shared src commonMain androidMain iOSMain
27. Greeter Use Case
28. Common Shared Module Android iOS Platform name
29. Common expect class Platform() { val platform: String }
30. Common expect class Platform() { val platform: String }
31. Common expect class Platform() { val platform: String }
32. Common expect class Platform() { val platform: String } Common
33. Common Android Android iOS Platform name
34. Android actual class Platform actual constructor() { actual val platform: String = ”Android” }
35. Android actual class Platform actual constructor() { actual val platform: String = ”Android” }
36. Android actual class Platform actual constructor() { actual val platform: String = ”Android” }
37. Android actual class Platform actual constructor() { actual val platform: String = ”Android” } Common Android
38. Common iOS Android iOS Platform name
39. iOS actual class Platform actual constructor() { actual val platform: String = “iOS” }
40. Common Shared Module Android iOS Platform name
41. Common class Greeter { fun greet(): String { return "Hello ${Platform().platform}!" } }
42. Common class Greeter { fun greet(): String { return "Hello ${Platform().platform}!" } }
43. Using Shared Module
44. Project Setup Shared Android App iOS App
45. Use Case Show platform name Hello 
 Android
46. Android App class MainActivity : AppCompatActivity() { }
47. Android App class MainActivity : AppCompatActivity() { fun onCreate( ... ) { val greeting = Greeter().greet() } }
48. Android App class MainActivity : AppCompatActivity() { fun onCreate( ... ) { val greeting = Greeter().greet() textView.text = greeting } }
49. Android App class Greeter { ... } Common Source Build
50. Use Case Hello 
 Android
51. Android App class MainActivity : AppCompatActivity() { fun onCreate( ... ) { val greeting = Greeter().greet() textView.text = greeting } }
52. Hello 
 iOS Use Case 9:41 Show platform name
53. iOS App class Greeter { ... } Common Source Build Framework
54. iOS App import SwiftUI import shared
55. iOS App import SwiftUI import shared func greet() -> String { return Greeting().greeting() }
56. iOS App import SwiftUI import shared struct ContentView: View { var body: some View { } }
57. iOS App import SwiftUI import shared struct ContentView: View { var body: some View { Text(greet()) } }
58. Hello 
 iOS Use Case 9:41 Show platform name
59. Inside Objective-C Framework
60. iOS Framework class Greeter { ... } Common Source Build Framework
61. iOS Framework import SwiftUI import shared func greet() -> String { return Greeting().greeting() }
62. iOS Framework Shared Base Shared Platform Shared Greeting
63. Shared Base __attribute__((swift_name("KotlinBase"))) @interface SharedBase : NSObject ... @end;
64. Shared Base __attribute__((swift_name("KotlinBase"))) @interface SharedBase : NSObject ... @end;
65. iOS actual class Platform actual constructor() { actual val platform: String = “iOS” }
66. Mappings https: // kotlinlang.org/docs/native-objc-interop.html#mappings
67. Shared Platform __ attribute __ ((swift_name(“Platform"))) @interface SharedPlatform : SharedBase ... @end;
68. Shared Platform __ attribute __ ((swift_name(“Platform"))) @interface SharedPlatform : SharedBase @property (readonly) NSString *platform 
 @end;
69. Common class Greeter { fun greet(): String { return "Hello ${Platform().platform}!" } }
70. Common @interface SharedGreeting : SharedBase - (NSString *)greeting __ attribute __ ((swift_name("greeting()"))); @end;
71. Android & iOS Shared Modules
72. Use Case Hello 
 Android 29
73. Shared Module Shared src commonMain androidMain iOSMain
74. Android actual class Platform actual constructor() { actual val platform: String = 
 “Android ${android.os.Build.VERSION.SDK_INT}" }
75. Hello 
 iOS 14.4 Use Case 9:41
76. Shared Module Shared src commonMain androidMain iOSMain
77. iOS import platform.UIKit.UIDevice actual class Platform actual constructor() { actual val platform: String = UIDevice.currentDevice.systemName() + " " + 
 UIDevice.currentDevice.systemVersion }
78. iOS import platform.UIKit.UIDevice actual class Platform actual constructor() { actual val platform: String = UIDevice.currentDevice.systemName() + " " + 
 UIDevice.currentDevice.systemVersion }
79. Summary • How to build KMM project • Shared Module Setup • Inside Shared Framework
80. Networking & Caching
81. Use Case Display list of users
82. API Get Users Get Users
83. API { username: “ ... ” } { username: “ ... ” }
84. Cache User User
85. Networking
86. Networking • Ktor • Kotlin Serialization • Coroutines
87. Networking API Client Shared
88. Ktor https: // ktor.io/
89. Networking Dependencies Ktor Android Core iOS
90. Ktor Ktor HTTP Stream Android NSURLSession iOS
91. Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle
92. Networking Dependencies sourceSets { val commonMain by getting { dependencies { implementation("io.ktor:ktor-client-core:$ktorVersion") } } } }
93. Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle
94. Networking Dependencies sourceSets { val androidMain by getting { dependencies { implementation(“io.ktor:ktor-client-android:$ktorVersion") } } } }
95. Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle
96. Networking Dependencies sourceSets { val iOSMain by getting { dependencies { implementation(“io.ktor:ktor-client-ios:$ktorVersion”) } } } }
97. API Get Users Get Users
98. Setup Ktor • Create HTTP Client • Setup Serialization
99. Create API Client Shared src commonMain androidMain iOSMain build.gradle
100. Using Ktor class ApiClient { private val httpClient = HttpClient { } }
101. Kotlin/Kotlin.serialization Code ! Issues Pull Requests Kotlin Multiplatform / multi-formation reflectionless • Supports Kotlin classes marked as @Serializable. • Provides JSON, Protobuf, CBOR, Hocon and Properties formats. • Complete multiplatform support: JVM, JS and Native. Gradle Build passing
102. Using Ktor class ApiClient { private val httpClient = HttpClient { install(JsonFeature) { val json = Json { ignoreUnknownKeys = true } serializer = KotlinxSerializer(json) } } }
103. Serialization Dependencies Kotlinx.serialization Android Core iOS
104. Using Ktor class ApiClient { private val httpClient = HttpClient { install(JsonFeature) { val json = Json { ignoreUnknownKeys = true } serializer = KotlinxSerializer(json) } } }
105. Setup Ktor • Create HTTP Client • Setup Serialization
106. Create User DTO List<User> List<User>
107. DTO @Serializable data class User( val name: String, val location: String, )
108. Coroutines Get User Get User
109. Coroutines class ApiClient { suspend fun getUsers(): List<User> { } }
110. Coroutines class ApiClient { suspend fun getUsers(): List<User> { return httpClient.get(API_ENDPOINT) } val API_ENDPOINT = “https: // api.com/users” }
111. Using Client on Android API Client Shared
112. Using Client on Android class MainActivity : AppCompatActivity() { }
113. Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) }
114. Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) }
115. Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) override fun onCreate() { val apiClient = ApiClient() }
116. Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) override fun onCreate() { val apiClient = ApiClient() coroutineScope.launch { } }
117. Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) override fun onCreate() { val apiClient = ApiClient() coroutineScope.launch { val users = apiClient.getUsers() ... } }
118. Using Client on iOS API Client Shared
119. Using Client on iOS class ViewModel { let apiClient: ApiClient 
 }
120. Using Client on iOS class ViewModel { let apiClient: ApiClient func loadUsers() { 
 } }
121. Using Client on iOS class ViewModel { let apiClient: ApiClient func loadUsers() { apiClient.getUsers(completionHandler: { users, error in ...
 } }) } }
122. iOS Framework class ApiClient { ... } Common Source Build Framework
123. iOS Framework - (void)getUsers:(completionHandler:( 
 void (^)(NSArray<SharedUser *> * _Nullable, NSError * _Nullable))completionHandler __ attribute __ ((swift_name("getUsers(completionHandler:)"))); @end;
124. iOS Framework __ attribute __ ((swift_name("User"))) @interface SharedUser : SharedBase 
 
 @end;
125. iOS Framework __ attribute __ ((swift_name("User"))) @interface SharedUser : SharedBase @property (readonly) NSString *name 
 __ attribute __ ((swift_name("name"))); @property (readonly) NSString *location 
 __ attribute __ ((swift_name("location"))); @end;
126. Networking API Client Shared
127. Summary • Setup Ktor, Serialization • Create an ApiClient • Used coroutines to make request
128. Caching
129. Caching User User
130. cashapp/sqldelight Code ! Issues Pull Requests SQL Delight Gradle Build passing
131. Caching Dependencies SQL Delight Android Driver iOS Driver
132. Caching Dependencies Shared src commonMain androidMain iOSMain build.gradle.kts
133. Networking Dependencies sourceSets { val commonMain by getting { dependencies { implementation("com.squareup.sqldelight:runtime:1.4.2") } } } }
134. Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle
135. Networking Dependencies sourceSets { val androidMain by getting { dependencies { implementation(“com.squareup.sqldelight:android-driver:1.4.2") } } } }
136. Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle
137. Networking Dependencies sourceSets { val iOSMain by getting { dependencies { implementation(“com.squareup.sqldelight:native-driver:1.4.2”) } } } }
138. Setup SQL Delight • Create queries • Create database
139. Networking Dependencies Shared src commonMain sqldelight AppDatabase.sq
140. SQL Queries CREATE TABLE User ( id TEXT NOT NULL PRIMARY KEY, name TEXT NOT NULL, Location TEXT NOT NULL );
141. SQL Queries insertUser: INSERT INTO User(id, name, location) VALUES(?, ?, ?);
142. SQL Queries selectUsers: SELECT User.* FROM User
143. Configure SQL Delight sqldelight { database("AppDatabase") { packageName = "com.learn.kmmapplication.shared.cache" } }
144. Configure SQL Delight sqldelight { database("AppDatabase") { packageName = "com.learn.kmmapplication.shared.cache" } }
145. Shared Cache Shared
146. Configure SQL Delight class Database() { }
147. class Database() { private val database = AppDatabase() } Configure SQL Delight
148. class Database() { private val database = AppDatabase() fun getUsers(): List<User> { return database.selectUsers().executeAsList() } } Configure SQL Delight
149. class Database() { private val database = AppDatabase() fun insertUser(user: User) { database.insertUser( id = user.id, name = user.name, location = user.location ) } Configure SQL Delight
150. SQL Delight CREATE TABLE USER { ... } Queries Build Generated class Database { ... }
151. Setup SQL Delight • Create queries • Create database
152. API Client class ApiClient { suspend fun getUsers(): List<User> { return httpClient.get(API_ENDPOINT) } val API_ENDPOINT = “https: // api.com/users” }
153. Caching class ApiClient { 
 val database = Database() }
154. Caching class ApiClient { suspend fun getUsers(): List<User> { val users = database.getUsers() }
155. Caching class ApiClient { suspend fun getUsers(): List<User> { val users = database.getUsers() return if (users.isNotEmpty()) { } else { } }
156. Caching class ApiClient { suspend fun getUsers(): List<User> { val users = database.getUsers() return if (users.isNotEmpty()) { users } else { } }
157. Caching class ApiClient { suspend fun getUsers(): List<User> { val users = database.getUsers() return if (users.isNotEmpty()) { users } else { httpClient.get().also { database.inserUsers(users) } } }
158. Shared API Cache Shared
159. Summary • Setup & Configure SQL Delight • Created API Client with caching
160. Cocoapods Integration
161. iOS Framework class Greeter { ... } Common Source Build Framework
162. plugins { kotlin("multiplatform") version "1.4.31" kotlin("native.cocoapods") version "1.4.31" } Cocoapods Integration
163. kotlin { cocoapods { summary = “Shared Module" frameworkName = "shared_framework" } } Cocoapods Integration
164. Kotlin Multiplatform Libraries • KaMPKit • Oolong - MVU for Kotlin Multiplatform • Reaktive - Kotlin Multiplatform Impl of Reactive 
 
 Extensions
165. Thank You! www.codingwithmohit.com @heyitsmohit