Kotlin Multiplatform Mobile (KMM): Panduan Lengkap dari Setup hingga Hello World

xcode-select --print-path

/Applications/Xcode.app/Contents/Developer

sudo xcodebuild -license accept

xcode-select --install

sudo gem install cocoapods

pod --version

brew install kdoctor

kdoctor

java -version

brew install openjdk@17

HelloWorldKMM/
├── androidApp/              # Android application
│   ├── src/
│   │   └── main/
│   │       ├── AndroidManifest.xml
│   │       └── kotlin/
│   │           └── MainActivity.kt
│   └── build.gradle.kts
├── iosApp/                  # iOS application (macOS only)
│   ├── iosApp/
│   │   ├── ContentView.swift
│   │   └── iOSApp.swift
│   └── iosApp.xcodeproj
├── shared/                  # Shared Kotlin code
│   ├── src/
│   │   ├── commonMain/      # Common code
│   │   │   └── kotlin/
│   │   │       └── Greeting.kt
│   │   ├── androidMain/     # Android-specific code
│   │   │   └── kotlin/
│   │   ├── iosMain/         # iOS-specific code
│   │   │   └── kotlin/
│   │   └── commonTest/      # Common tests
│   └── build.gradle.kts
├── gradle/
├── build.gradle.kts
└── settings.gradle.kts

package com.example.helloworldkmm
 
class Greeting {
    private val platform: Platform = getPlatform()
 
    fun greet(): String {
        return "Hello, ${platform.name}!"
    }
}
 
interface Platform {
    val name: String
}
 
expect fun getPlatform(): Platform

package com.example.helloworldkmm
 
import android.os.Build
 
class AndroidPlatform : Platform {
    override val name: String = 
        "Android ${Build.VERSION.SDK_INT}"
}
 
actual fun getPlatform(): Platform = AndroidPlatform()

package com.example.helloworldkmm
 
import platform.UIKit.UIDevice
 
class IOSPlatform: Platform {
    override val name: String = 
        UIDevice.currentDevice.systemName() + " " + 
        UIDevice.currentDevice.systemVersion
}
 
actual fun getPlatform(): Platform = IOSPlatform()

package com.example.helloworldkmm.android
 
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.helloworldkmm.Greeting
 
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingView(Greeting().greet())
                }
            }
        }
    }
}
 
@Composable
fun GreetingView(text: String) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = text,
            style = MaterialTheme.typography.headlineMedium
        )
    }
}

import SwiftUI
import shared
 
struct ContentView: View {
    let greet = Greeting().greet()
 
    var body: some View {
        VStack {
            Text(greet)
                .font(.largeTitle)
                .padding()
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

package com.example.helloworldkmm
 
class Greeting {
    private val platform: Platform = getPlatform()
 
    fun greet(): String {
        return "Hello World!\nSelamat datang di ${platform.name}"
    }
    
    fun getFullGreeting(): String {
        return """
            🎉 Hello World! 🎉
            
            Selamat datang di Kotlin Multiplatform Mobile
            
            Platform: ${platform.name}
            
            Shared business logic, native UI!
        """.trimIndent()
    }
}
 
interface Platform {
    val name: String
}
 
expect fun getPlatform(): Platform

./gradlew :shared:build

emulator -list-avds
emulator -avd Pixel_6_API_33

./gradlew :androidApp:installDebug

@Composable
fun GreetingView(text: String) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Icon(
            imageVector = Icons.Default.Star,
            contentDescription = null,
            modifier = Modifier.size(80.dp),
            tint = MaterialTheme.colorScheme.primary
        )
        
        Spacer(modifier = Modifier.height(24.dp))
        
        Text(
            text = text,
            style = MaterialTheme.typography.headlineMedium,
            textAlign = TextAlign.Center
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        Text(
            text = "Native UI, Shared Logic",
            style = MaterialTheme.typography.bodyLarge,
            color = MaterialTheme.colorScheme.onSurfaceVariant
        )
    }
}

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star
import androidx.compose.ui.text.style.TextAlign

cd HelloWorldKMM
open iosApp/iosApp.xcodeproj

./gradlew :shared:embedAndSignAppleFrameworkForXcode

import SwiftUI
import shared
 
struct ContentView: View {
    let greeting = Greeting()
 
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "star.fill")
                .resizable()
                .scaledToFit()
                .frame(width: 80, height: 80)
                .foregroundColor(.blue)
            
            Text(greeting.getFullGreeting())
                .font(.title2)
                .multilineTextAlignment(.center)
                .padding()
            
            Text("Native UI, Shared Logic")
                .font(.body)
                .foregroundColor(.secondary)
        }
        .padding()
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

package com.example.helloworldkmm.models
 
data class User(
    val id: Int,
    val name: String,
    val email: String
)

package com.example.helloworldkmm.repository
 
import com.example.helloworldkmm.models.User
 
class UserRepository {
    // Simulated data - in real app, this would be from API/Database
    private val users = listOf(
        User(1, "John Doe", "john@example.com"),
        User(2, "Jane Smith", "jane@example.com"),
        User(3, "Bob Johnson", "bob@example.com")
    )
    
    fun getAllUsers(): List<User> {
        return users
    }
    
    fun getUserById(id: Int): User? {
        return users.find { it.id == id }
    }
    
    fun searchUsers(query: String): List<User> {
        return users.filter { 
            it.name.contains(query, ignoreCase = true) ||
            it.email.contains(query, ignoreCase = true)
        }
    }
}

package com.example.helloworldkmm.viewmodel
 
import com.example.helloworldkmm.models.User
import com.example.helloworldkmm.repository.UserRepository
 
class UserViewModel {
    private val repository = UserRepository()
    
    fun getUsers(): List<User> {
        return repository.getAllUsers()
    }
    
    fun getUserDetails(userId: Int): User? {
        return repository.getUserById(userId)
    }
    
    fun search(query: String): List<User> {
        return if (query.isBlank()) {
            repository.getAllUsers()
        } else {
            repository.searchUsers(query)
        }
    }
}

package com.example.helloworldkmm.android
 
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.helloworldkmm.Greeting
import com.example.helloworldkmm.viewmodel.UserViewModel
 
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    UserListScreen()
                }
            }
        }
    }
}
 
@Composable
fun UserListScreen() {
    val viewModel = remember { UserViewModel() }
    val users = remember { viewModel.getUsers() }
    
    Column(modifier = Modifier.fillMaxSize()) {
        // Header
        Text(
            text = Greeting().greet(),
            style = MaterialTheme.typography.headlineSmall,
            modifier = Modifier.padding(16.dp)
        )
        
        Divider()
        
        // User List
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(16.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(users) { user ->
                UserCard(user)
            }
        }
    }
}
 
@Composable
fun UserCard(user: com.example.helloworldkmm.models.User) {
    Card(
        modifier = Modifier.fillMaxWidth()
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = user.name,
                style = MaterialTheme.typography.titleMedium
            )
            Text(
                text = user.email,
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

import SwiftUI
import shared
 
struct ContentView: View {
    let greeting = Greeting()
    let viewModel = UserViewModel()
    
    var body: some View {
        NavigationView {
            VStack {
                // Header
                Text(greeting.greet())
                    .font(.headline)
                    .padding()
                
                Divider()
                
                // User List
                List(viewModel.getUsers(), id: \.id) { user in
                    UserRow(user: user)
                }
                .listStyle(PlainListStyle())
            }
            .navigationTitle("KMM Demo")
        }
    }
}
 
struct UserRow: View {
    let user: User
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(user.name)
                .font(.headline)
            Text(user.email)
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
        .padding(.vertical, 4)
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

package com.example.helloworldkmm.utils
 
// Expect declaration
expect fun generateUUID(): String
 
class UUIDGenerator {
    fun createId(): String {
        return generateUUID()
    }
}

package com.example.helloworldkmm.utils
 
import java.util.UUID
 
// Actual implementation untuk Android
actual fun generateUUID(): String {
    return UUID.randomUUID().toString()
}

package com.example.helloworldkmm.utils
 
import platform.Foundation.NSUUID
 
// Actual implementation untuk iOS
actual fun generateUUID(): String {
    return NSUUID().UUIDString()
}

val commonMain by getting {
    dependencies {
        implementation("io.ktor:ktor-client-core:2.3.7")
        implementation("io.ktor:ktor-client-content-negotiation:2.3.7")
        implementation("io.ktor:ktor-serialization-kotlinx-json:2.3.7")
        implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
        implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.2")
    }
}
 
val androidMain by getting {
    dependencies {
        implementation("io.ktor:ktor-client-android:2.3.7")
    }
}
 
val iosMain by getting {
    dependencies {
        implementation("io.ktor:ktor-client-darwin:2.3.7")
    }
}

plugins {
    // ... existing plugins
    kotlin("plugin.serialization") version "1.9.21"
}

package com.example.helloworldkmm.api
 
import io.ktor.client.*
import io.ktor.client.call.*
import io.ktor.client.plugins.contentnegotiation.*
import io.ktor.client.request.*
import io.ktor.serialization.kotlinx.json.*
import kotlinx.serialization.json.Json
 
class ApiService {
    private val client = HttpClient {
        install(ContentNegotiation) {
            json(Json {
                ignoreUnknownKeys = true
                isLenient = true
            })
        }
    }
    
    suspend fun fetchGreeting(): String {
        return try {
            val response: String = client.get("https://api.example.com/greeting").body()
            response
        } catch (e: Exception) {
            "Error: ${e.message}"
        }
    }
}

# Clean dan rebuild shared module
./gradlew :shared:clean
./gradlew :shared:build
 
# Atau di Xcode
# Product > Clean Build Folder (Shift+Cmd+K)

cd iosApp
pod deintegrate
pod install

xcode-select --install

kdoctor

rm -rf ~/.konan

# Rebuild framework
./gradlew :shared:embedAndSignAppleFrameworkForXcode
 
# Di Xcode
# Product > Clean Build Folder
# Product > Build (Cmd+B)

./gradlew clean
./gradlew :shared:clean
./gradlew :androidApp:clean

shared/src/
├── commonMain/
│   └── kotlin/
│       ├── models/          # Data models
│       ├── repository/      # Data access layer
│       ├── usecase/         # Business logic
│       ├── api/             # Network layer
│       └── utils/           # Utilities
├── androidMain/
│   └── kotlin/
│       └── platform/        # Android-specific impl
└── iosMain/
    └── kotlin/
        └── platform/        # iOS-specific impl

// Koin (popular DI framework untuk KMM)
dependencies {
    implementation("io.insert-koin:koin-core:3.5.0")
}

// shared/src/commonTest/kotlin/UserRepositoryTest.kt
class UserRepositoryTest {
    @Test
    fun testGetAllUsers() {
        val repo = UserRepository()
        val users = repo.getAllUsers()
        assertEquals(3, users.size)
    }
}

./gradlew :shared:test

class ApiService {
    suspend fun fetchData(): Result<List<User>> {
        return withContext(Dispatchers.Default) {
            // Network call
        }
    }
}

sealed class Result<out T> {
    data class Success<T>(val data: T) : Result<T>()
    data class Error(val exception: Exception) : Result<Nothing>()
    object Loading : Result<Nothing>()
}

// Common
expect class FileReader {
    fun readFile(path: String): String
}
 
// Android
actual class FileReader {
    actual fun readFile(path: String): String {
        // Use java.io.File
    }
}
 
// iOS
actual class FileReader {
    actual fun readFile(path: String): String {
        // Use NSFileManager
    }
}

// shared/build.gradle.kts
kotlin {
    android()
    
    listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach {
        it.binaries.framework {
            baseName = "shared"
            isStatic = true  // Improve build performance
        }
    }
}

# gradle/libs.versions.toml
[versions]
ktor = "2.3.7"
coroutines = "1.7.3"
 
[libraries]
ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }

// shared/build.gradle.kts
plugins {
    id("com.squareup.sqldelight") version "2.0.0"
}
 
sqldelight {
    databases {
        create("AppDatabase") {
            packageName.set("com.example.helloworldkmm.db")
        }
    }
}

// Common ViewModel
class UserListViewModel {
    private val repository = UserRepository()
    
    private val _users = MutableStateFlow<List<User>>(emptyList())
    val users: StateFlow<List<User>> = _users
    
    fun loadUsers() {
        viewModelScope.launch {
            _users.value = repository.getAllUsers()
        }
    }
}

// Use Kamel for KMM
dependencies {
    implementation("media.kamel:kamel-image:0.9.0")
}