Building Kotlin Multiplatform Apps

Slide 1

Slide 1 text

Mohit Sarveiya Building Kotlin Multiplatform Apps @heyitsmohit

Slide 2

Slide 2 text

Building Kotlin Multiplatform Apps ● Why Kotlin Multiplatform? ● How to build KMM project ● Networking & Caching ● KMM Libraries

Slide 3

Slide 3 text

Why Kotlin Multiplatform? Android Kotlin/JVM iOS Swift/LLVM Web JS

Slide 4

Slide 4 text

Why Kotlin Multiplatform? API API API

Slide 5

Slide 5 text

Why Kotlin Multiplatform? Retrofit Ajax Alamofire

Slide 6

Slide 6 text

Why Kotlin Multiplatform? Room/SQL Delight Core Data

Slide 7

Slide 7 text

Why Kotlin Multiplatform? Business Logic Business Logic Business Logic

Slide 8

Slide 8 text

Why Kotlin Multiplatform? MVP/MVVM/MVI ReactJs VIPER

Slide 9

Slide 9 text

Why Kotlin Multiplatform? Shared code

Slide 10

Slide 10 text

Why Kotlin Multiplatform? API Business Logic Analytics Cache

Slide 11

Slide 11 text

Use Case Show Greeting

Slide 12

Slide 12 text

Use Case Show platform name Hello   Android

Slide 13

Slide 13 text

Hello   iOS Use Case 9:41 Show platform name

Slide 14

Slide 14 text

Greeter Use Case

Slide 15

Slide 15 text

How to create Multiplatform app

Slide 16

Slide 16 text

Plugin https: // plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile

Slide 17

Slide 17 text

Project Setup Shared

Slide 18

Slide 18 text

Project Setup Shared Android App

Slide 19

Slide 19 text

Project Setup Shared Android App iOS App XCode Project

Slide 20

Slide 20 text

Project Setup Shared Android App iOS App

Slide 21

Slide 21 text

Project Setup Shared Android App iOS App Framework

Slide 22

Slide 22 text

Project Setup Shared Android App iOS App

Slide 23

Slide 23 text

Shared Module Structure

Slide 24

Slide 24 text

Shared Module Shared src commonMain

Slide 25

Slide 25 text

Shared Module Shared src commonMain androidMain

Slide 26

Slide 26 text

Shared Module Shared src commonMain androidMain iOSMain

Slide 27

Slide 27 text

Greeter Use Case

Slide 28

Slide 28 text

Common Shared Module Android iOS Platform name

Slide 29

Slide 29 text

Common expect class Platform() { val platform: String }

Slide 30

Slide 30 text

Common expect class Platform() { val platform: String }

Slide 31

Slide 31 text

Common expect class Platform() { val platform: String }

Slide 32

Slide 32 text

Common expect class Platform() { val platform: String } Common

Slide 33

Slide 33 text

Common Android Android iOS Platform name

Slide 34

Slide 34 text

Android actual class Platform actual constructor() { actual val platform: String = ”Android” }

Slide 35

Slide 35 text

Android actual class Platform actual constructor() { actual val platform: String = ”Android” }

Slide 36

Slide 36 text

Android actual class Platform actual constructor() { actual val platform: String = ”Android” }

Slide 37

Slide 37 text

Android actual class Platform actual constructor() { actual val platform: String = ”Android” } Common Android

Slide 38

Slide 38 text

Common iOS Android iOS Platform name

Slide 39

Slide 39 text

iOS actual class Platform actual constructor() { actual val platform: String = “iOS” }

Slide 40

Slide 40 text

Common Shared Module Android iOS Platform name

Slide 41

Slide 41 text

Common class Greeter { fun greet(): String { return "Hello ${Platform().platform}!" } }

Slide 42

Slide 42 text

Common class Greeter { fun greet(): String { return "Hello ${Platform().platform}!" } }

Slide 43

Slide 43 text

Using Shared Module

Slide 44

Slide 44 text

Project Setup Shared Android App iOS App

Slide 45

Slide 45 text

Use Case Show platform name Hello   Android

Slide 46

Slide 46 text

Android App class MainActivity : AppCompatActivity() { }

Slide 47

Slide 47 text

Android App class MainActivity : AppCompatActivity() { fun onCreate( ... ) { val greeting = Greeter().greet() } }

Slide 48

Slide 48 text

Android App class MainActivity : AppCompatActivity() { fun onCreate( ... ) { val greeting = Greeter().greet() textView.text = greeting } }

Slide 49

Slide 49 text

Android App class Greeter { ... } Common Source Build

Slide 50

Slide 50 text

Use Case Hello   Android

Slide 51

Slide 51 text

Android App class MainActivity : AppCompatActivity() { fun onCreate( ... ) { val greeting = Greeter().greet() textView.text = greeting } }

Slide 52

Slide 52 text

Hello   iOS Use Case 9:41 Show platform name

Slide 53

Slide 53 text

iOS App class Greeter { ... } Common Source Build Framework

Slide 54

Slide 54 text

iOS App import SwiftUI import shared

Slide 55

Slide 55 text

iOS App import SwiftUI import shared func greet() -> String { return Greeting().greeting() }

Slide 56

Slide 56 text

iOS App import SwiftUI import shared struct ContentView: View { var body: some View { } }

Slide 57

Slide 57 text

iOS App import SwiftUI import shared struct ContentView: View { var body: some View { Text(greet()) } }

Slide 58

Slide 58 text

Hello   iOS Use Case 9:41 Show platform name

Slide 59

Slide 59 text

Inside Objective-C Framework

Slide 60

Slide 60 text

iOS Framework class Greeter { ... } Common Source Build Framework

Slide 61

Slide 61 text

iOS Framework import SwiftUI import shared func greet() -> String { return Greeting().greeting() }

Slide 62

Slide 62 text

iOS Framework Shared Base Shared Platform Shared Greeting

Slide 63

Slide 63 text

Shared Base __attribute__((swift_name("KotlinBase"))) @interface SharedBase : NSObject ... @end;

Slide 64

Slide 64 text

Shared Base __attribute__((swift_name("KotlinBase"))) @interface SharedBase : NSObject ... @end;

Slide 65

Slide 65 text

iOS actual class Platform actual constructor() { actual val platform: String = “iOS” }

Slide 66

Slide 66 text

Mappings https: // kotlinlang.org/docs/native-objc-interop.html#mappings

Slide 67

Slide 67 text

Shared Platform __ attribute __ ((swift_name(“Platform"))) @interface SharedPlatform : SharedBase ... @end;

Slide 68

Slide 68 text

Shared Platform __ attribute __ ((swift_name(“Platform"))) @interface SharedPlatform : SharedBase @property (readonly) NSString *platform   @end;

Slide 69

Slide 69 text

Common class Greeter { fun greet(): String { return "Hello ${Platform().platform}!" } }

Slide 70

Slide 70 text

Common @interface SharedGreeting : SharedBase - (NSString *)greeting __ attribute __ ((swift_name("greeting()"))); @end;

Slide 71

Slide 71 text

Android & iOS Shared Modules

Slide 72

Slide 72 text

Use Case Hello   Android 29

Slide 73

Slide 73 text

Shared Module Shared src commonMain androidMain iOSMain

Slide 74

Slide 74 text

Android actual class Platform actual constructor() { actual val platform: String =   “Android ${android.os.Build.VERSION.SDK_INT}" }

Slide 75

Slide 75 text

Hello   iOS 14.4 Use Case 9:41

Slide 76

Slide 76 text

Shared Module Shared src commonMain androidMain iOSMain

Slide 77

Slide 77 text

iOS import platform.UIKit.UIDevice actual class Platform actual constructor() { actual val platform: String = UIDevice.currentDevice.systemName() + " " +   UIDevice.currentDevice.systemVersion }

Slide 78

Slide 78 text

iOS import platform.UIKit.UIDevice actual class Platform actual constructor() { actual val platform: String = UIDevice.currentDevice.systemName() + " " +   UIDevice.currentDevice.systemVersion }

Slide 79

Slide 79 text

Summary ● How to build KMM project ● Shared Module Setup ● Inside Shared Framework

Slide 80

Slide 80 text

Networking & Caching

Slide 81

Slide 81 text

Use Case Display list of users

Slide 82

Slide 82 text

API Get Users Get Users

Slide 83

Slide 83 text

API { username: “ ... ” } { username: “ ... ” }

Slide 84

Slide 84 text

Cache User User

Slide 85

Slide 85 text

Networking

Slide 86

Slide 86 text

Networking ● Ktor ● Kotlin Serialization ● Coroutines

Slide 87

Slide 87 text

Networking API Client Shared

Slide 88

Slide 88 text

Ktor https: // ktor.io/

Slide 89

Slide 89 text

Networking Dependencies Ktor Android Core iOS

Slide 90

Slide 90 text

Ktor Ktor HTTP Stream Android NSURLSession iOS

Slide 91

Slide 91 text

Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle

Slide 92

Slide 92 text

Networking Dependencies sourceSets { val commonMain by getting { dependencies { implementation("io.ktor:ktor-client-core:$ktorVersion") } } } }

Slide 93

Slide 93 text

Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle

Slide 94

Slide 94 text

Networking Dependencies sourceSets { val androidMain by getting { dependencies { implementation(“io.ktor:ktor-client-android:$ktorVersion") } } } }

Slide 95

Slide 95 text

Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle

Slide 96

Slide 96 text

Networking Dependencies sourceSets { val iOSMain by getting { dependencies { implementation(“io.ktor:ktor-client-ios:$ktorVersion”) } } } }

Slide 97

Slide 97 text

API Get Users Get Users

Slide 98

Slide 98 text

Setup Ktor ● Create HTTP Client ● Setup Serialization

Slide 99

Slide 99 text

Create API Client Shared src commonMain androidMain iOSMain build.gradle

Slide 100

Slide 100 text

Using Ktor class ApiClient { private val httpClient = HttpClient { } }

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

Using Ktor class ApiClient { private val httpClient = HttpClient { install(JsonFeature) { val json = Json { ignoreUnknownKeys = true } serializer = KotlinxSerializer(json) } } }

Slide 103

Slide 103 text

Serialization Dependencies Kotlinx.serialization Android Core iOS

Slide 104

Slide 104 text

Using Ktor class ApiClient { private val httpClient = HttpClient { install(JsonFeature) { val json = Json { ignoreUnknownKeys = true } serializer = KotlinxSerializer(json) } } }

Slide 105

Slide 105 text

Setup Ktor ● Create HTTP Client ● Setup Serialization

Slide 106

Slide 106 text

Create User DTO List List

Slide 107

Slide 107 text

DTO @Serializable data class User( val name: String, val location: String, )

Slide 108

Slide 108 text

Coroutines Get User Get User

Slide 109

Slide 109 text

Coroutines class ApiClient { suspend fun getUsers(): List { } }

Slide 110

Slide 110 text

Coroutines class ApiClient { suspend fun getUsers(): List { return httpClient.get(API_ENDPOINT) } val API_ENDPOINT = “https: // api.com/users” }

Slide 111

Slide 111 text

Using Client on Android API Client Shared

Slide 112

Slide 112 text

Using Client on Android class MainActivity : AppCompatActivity() { }

Slide 113

Slide 113 text

Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) }

Slide 114

Slide 114 text

Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) }

Slide 115

Slide 115 text

Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) override fun onCreate() { val apiClient = ApiClient() }

Slide 116

Slide 116 text

Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) override fun onCreate() { val apiClient = ApiClient() coroutineScope.launch { } }

Slide 117

Slide 117 text

Using Client on Android class MyViewModel { val coroutineScope = CoroutineScope(Dispatchers.Main) override fun onCreate() { val apiClient = ApiClient() coroutineScope.launch { val users = apiClient.getUsers() ... } }

Slide 118

Slide 118 text

Using Client on iOS API Client Shared

Slide 119

Slide 119 text

Using Client on iOS class ViewModel { let apiClient: ApiClient   }

Slide 120

Slide 120 text

Using Client on iOS class ViewModel { let apiClient: ApiClient func loadUsers() {   } }

Slide 121

Slide 121 text

Using Client on iOS class ViewModel { let apiClient: ApiClient func loadUsers() { apiClient.getUsers(completionHandler: { users, error in ...  } }) } }

Slide 122

Slide 122 text

iOS Framework class ApiClient { ... } Common Source Build Framework

Slide 123

Slide 123 text

iOS Framework - (void)getUsers:(completionHandler:(   void (^)(NSArray * _Nullable, NSError * _Nullable))completionHandler __ attribute __ ((swift_name("getUsers(completionHandler:)"))); @end;

Slide 124

Slide 124 text

iOS Framework __ attribute __ ((swift_name("User"))) @interface SharedUser : SharedBase     @end;

Slide 125

Slide 125 text

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;

Slide 126

Slide 126 text

Networking API Client Shared

Slide 127

Slide 127 text

Summary ● Setup Ktor, Serialization ● Create an ApiClient ● Used coroutines to make request

Slide 128

Slide 128 text

Caching

Slide 129

Slide 129 text

Caching User User

Slide 130

Slide 130 text

cashapp/sqldelight Code ! Issues Pull Requests SQL Delight Gradle Build passing

Slide 131

Slide 131 text

Caching Dependencies SQL Delight Android Driver iOS Driver

Slide 132

Slide 132 text

Caching Dependencies Shared src commonMain androidMain iOSMain build.gradle.kts

Slide 133

Slide 133 text

Networking Dependencies sourceSets { val commonMain by getting { dependencies { implementation("com.squareup.sqldelight:runtime:1.4.2") } } } }

Slide 134

Slide 134 text

Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle

Slide 135

Slide 135 text

Networking Dependencies sourceSets { val androidMain by getting { dependencies { implementation(“com.squareup.sqldelight:android-driver:1.4.2") } } } }

Slide 136

Slide 136 text

Networking Dependencies Shared src commonMain androidMain iOSMain build.gradle

Slide 137

Slide 137 text

Networking Dependencies sourceSets { val iOSMain by getting { dependencies { implementation(“com.squareup.sqldelight:native-driver:1.4.2”) } } } }

Slide 138

Slide 138 text

Setup SQL Delight ● Create queries ● Create database

Slide 139

Slide 139 text

Networking Dependencies Shared src commonMain sqldelight AppDatabase.sq

Slide 140

Slide 140 text

SQL Queries CREATE TABLE User ( id TEXT NOT NULL PRIMARY KEY, name TEXT NOT NULL, Location TEXT NOT NULL );

Slide 141

Slide 141 text

SQL Queries insertUser: INSERT INTO User(id, name, location) VALUES(?, ?, ?);

Slide 142

Slide 142 text

SQL Queries selectUsers: SELECT User.* FROM User

Slide 143

Slide 143 text

Configure SQL Delight sqldelight { database("AppDatabase") { packageName = "com.learn.kmmapplication.shared.cache" } }

Slide 144

Slide 144 text

Configure SQL Delight sqldelight { database("AppDatabase") { packageName = "com.learn.kmmapplication.shared.cache" } }

Slide 145

Slide 145 text

Shared Cache Shared

Slide 146

Slide 146 text

Configure SQL Delight class Database() { }

Slide 147

Slide 147 text

class Database() { private val database = AppDatabase() } Configure SQL Delight

Slide 148

Slide 148 text

class Database() { private val database = AppDatabase() fun getUsers(): List { return database.selectUsers().executeAsList() } } Configure SQL Delight

Slide 149

Slide 149 text

class Database() { private val database = AppDatabase() fun insertUser(user: User) { database.insertUser( id = user.id, name = user.name, location = user.location ) } Configure SQL Delight

Slide 150

Slide 150 text

SQL Delight CREATE TABLE USER { ... } Queries Build Generated class Database { ... }

Slide 151

Slide 151 text

Setup SQL Delight ● Create queries ● Create database

Slide 152

Slide 152 text

API Client class ApiClient { suspend fun getUsers(): List { return httpClient.get(API_ENDPOINT) } val API_ENDPOINT = “https: // api.com/users” }

Slide 153

Slide 153 text

Caching class ApiClient {   val database = Database() }

Slide 154

Slide 154 text

Caching class ApiClient { suspend fun getUsers(): List { val users = database.getUsers() }

Slide 155

Slide 155 text

Caching class ApiClient { suspend fun getUsers(): List { val users = database.getUsers() return if (users.isNotEmpty()) { } else { } }

Slide 156

Slide 156 text

Caching class ApiClient { suspend fun getUsers(): List { val users = database.getUsers() return if (users.isNotEmpty()) { users } else { } }

Slide 157

Slide 157 text

Caching class ApiClient { suspend fun getUsers(): List { val users = database.getUsers() return if (users.isNotEmpty()) { users } else { httpClient.get().also { database.inserUsers(users) } } }

Slide 158

Slide 158 text

Shared API Cache Shared

Slide 159

Slide 159 text

Summary ● Setup & Configure SQL Delight ● Created API Client with caching

Slide 160

Slide 160 text

Cocoapods Integration

Slide 161

Slide 161 text

iOS Framework class Greeter { ... } Common Source Build Framework

Slide 162

Slide 162 text

plugins { kotlin("multiplatform") version "1.4.31" kotlin("native.cocoapods") version "1.4.31" } Cocoapods Integration

Slide 163

Slide 163 text

kotlin { cocoapods { summary = “Shared Module" frameworkName = "shared_framework" } } Cocoapods Integration

Slide 164

Slide 164 text

Kotlin Multiplatform Libraries ● KaMPKit ● Oolong - MVU for Kotlin Multiplatform ● Reaktive - Kotlin Multiplatform Impl of Reactive     Extensions

Slide 165

Slide 165 text

Thank You! www.codingwithmohit.com @heyitsmohit