KOTLIN MULTIPLATFORM MOBILE (KMM)

Kategori: KMM (Multiplatform)
Topik: Kotlin Multiplatform Mobile (KMM)

Cara Instal dan Menjalankan Kotlin Multiplatform Mobile (KMM) di Windows

Kotlin Multiplatform Mobile (KMM) memungkinkan pengembang membangun aplikasi Android dan iOS menggunakan satu basis kode Kotlin. Berikut ini adalah panduan singkat untuk menginstal dan menjalankan KMM di sistem operasi Windows.

---

Prasyarat

Sebelum memulai, pastikan perangkat Anda telah memenuhi kebutuhan berikut:

Android Studio versi terbaru (Hedgehog atau versi di atasnya).

JDK versi 17 atau lebih baru (sudah tersedia secara bawaan di Android Studio).

Opsional untuk iOS: Komputer macOS dan Xcode diperlukan untuk membangun dan menjalankan aplikasi iOS.

---

Rekomendasi Minimum Platform

• Android:
  minSdk 24, targetSdk/compileSdk 35.

• iOS:
  iOS Deployment Target 14.1 atau lebih tinggi
  (pengaturan dapat diubah melalui Xcode).

---

Mengecek Versi Java

Pastikan Java telah terinstal dengan benar dengan menjalankan perintah berikut di Command Prompt:

java -version

---

Langkah-Langkah Instalasi

1. Mengunduh dan Menginstal Android Studio

1. Buka situs resmi Android Studio di:
   https://developer.android.com/studioUnduh versi terbaru Android Studio.

2. Jalankan proses instalasi dan ikuti petunjuk hingga selesai.

---

2. Membuka Android Studio dan Menginstal Plugin KMM

    Setelah Android Studio berhasil dijalankan, lakukan langkah-langkah beriku

1. Klik menu File → Settings → Plugins.

2. Pada kolom pencarian, ketik “Kotlin Multiplatform Mobile”.

3. Klik tombol Install, kemudian restart Android Studio setelah proses instalasi selesai.

Plugin ini berfungsi untuk menambahkan dukungan pembuatan proyek multiplatform, sehingga satu basis kode Kotlin dapat digunakan untuk aplikasi Android dan iOS.

    

3. Membuat Proyek Baru KMM

Untuk membuat proyek Kotlin Multiplatform Mobile, ikuti langkah berikut:

• Pada halaman awal Android Studio, klik New Project. Pilih Kotlin Multiplatform App, lalu lanjutkan.

• Masukkan nama proyek, misalnya KMMapp.

• Tentukan lokasi penyimpanan proyek, contohnya:  D:\PBP\TUGAS\KMM\KMMapp

                                    

       4. Pilih platform yang akan digunakan:

• Android 
• iOS (akan dikonfigurasi menggunakan Gradle)

       5.  Klik Next, kemudian klik Finish untuk menyelesaikan pembuatan proyek.

                                     

   Setelah langkah ini selesai, Android Studio akan menyiapkan struktur proyek KMM secara otomatis.

 4. Struktur Folder KMM

    Setelah proyek berhasil dibuat, struktur folder awal akan terlihat seperti berikut:

        KMM/

        ├── composeApp/                          ← modul multiplatform (Android & iOS UI dengan Compose)

        │   ├── src/

        │   │   ├── androidMain/               ← entry Android (Activity, AndroidManifest, resources)

        │   │   ├── iosMain/                       ← entry iOS (uikit launcher/compose-cinterop)

        │   │   └── commonMain/              ← Kode bersama (UI Compose, business logic, expect/actual)

        │   └── build.gradle.kts                   ← konfigurasi Gradle modul composeApp

        │

        ├── iosApp/                                     ← wrapper Xcode untuk jalankan di iOS

        │   ├── iosApp/                               ← sources Swift (AppDelegate/SceneDelegate)

        │   ├── Configuration/                    ← xcconfigs, signing, dsb.

        │   └── iosApp.xcodeproj               ← buka ini di Xcode untuk run di simulator/device

        │

        ├── gradle/                                      ← wrapper & versi Gradle

        │   └── wrapper/

        ├── .idea/                                        ← metadata IDE

        ├── gradle.properties

        ├── settings.gradle.kts

        ├── build.gradle.kts

        └── local.properties                          ← SDK path (otomatis)

5. Jalankan Proyek di Android

Buka tab Run Configuration di atas IDE → pilih androidApp.

Lalu klik Run

• Android Studio akan:
• Men-download dependensi Gradle
• Build proyek
• Menjalankan aplikasi di emulator Android

Jika berhasil, akan muncul aplikasi sederhana, dan struktur direktori otomatis berubah 

Edit & Uji Kode (Android)

6. Lihat Isi Awal MainActivity.kt

Buka: composeApp/src/androidMain/kotlin/com/example/kmmapp/MainActivity.kt
Cek isi default dari template. 

                        

7. Ubah Kode UI (Compose)

    Ganti isinya menjadi:

    package com.example.kmmapp

    import android.os.Bundle

    import androidx.activity.ComponentActivity

    import androidx.activity.compose.setContent

    import androidx.activity.enableEdgeToEdge

    import androidx.compose.foundation.layout.*

    import androidx.compose.material3.*

    import androidx.compose.runtime.Composable

    import androidx.compose.ui.Alignment

    import androidx.compose.ui.Modifier

    import androidx.compose.ui.tooling.preview.Preview

    import androidx.compose.ui.unit.dp

    import androidx.compose.ui.unit.sp

    class MainActivity : ComponentActivity() {

        override fun onCreate(savedInstanceState: Bundle?) {

            enableEdgeToEdge()

            super.onCreate(savedInstanceState)

            

            setContent {

                App()

            }

        }

    }

    @Composable

    fun App() {

        MaterialTheme {

            Box(

                modifier = Modifier

                    .fillMaxSize()

                    .padding(16.dp),

                contentAlignment = Alignment.Center

            ){

                Text(

                    text = "Hello Worlddddd!!!!!!",

                    fontSize = 26.sp

                )

            }

        }

    }

    @Preview(showBackground = true)

    @Composable

        fun AppAndroidPreview() {

            App()

        }

                                    

8. Run Ulang Aplikasi

Klik Run ‘MainActivity’ atau Run composeApp

9. Verifikasi di Emulator

Aplikasi akan tampil di layar 

                                  

(Opsional) Menjalankan Proyek di iOS 

catatan: Hanya jika kamu punya macOS + Xcode.

Untuk menjalankan di iOS:

1. Pastikan kamu memiliki macOS dan Xcode.
2. Buka folder proyek iosApp dengan Xcode.
3. Pilih target device (simulator iPhone).
4. Tekan Run (⌘ + R).
5. KMM akan membangun project iOS menggunakan kode yang sama dari modul shared/.