Instalasi Kotlin Multiplatform Mobile dan Cara Membuat HelloWorld Pertama

 Kotlin Multiplatform Mobile (KMM) adalah teknologi yang memungkinkan pengembang membangun aplikasi Android dan iOS menggunakan satu basis kode yang sama. Konsep ini sangat membantu ketika ingin mengembangkan aplikasi lintas platform tanpa harus membuat logika program dua kali. Untuk memulai perjalanan memahami KMM, langkah pertama yang perlu dilakukan adalah menyiapkan lingkungan pengembangan di Android Studio dan memastikan plugin KMM sudah aktif agar fitur yang dibutuhkan dapat digunakan.

Bagian ini akan membahas proses awal persiapan lingkungan, dimulai dari mengakses dokumentasi resmi hingga memastikan plugin Kotlin Multiplatform terpasang dengan benar.

Step 1 – Membaca Dokumentasi dan Menyiapkan Plugin KMM

Sebelum membuat project KMM, penting untuk melihat panduan resmi terlebih dahulu. Dokumentasi Kotlin Multiplatform memberikan penjelasan dasar tentang cara kerja KMM serta langkah konfigurasi yang perlu disiapkan.

Setelah memahami gambaran dari dokumentasi, buka Android Studio dan pastikan plugin Kotlin Multiplatform sudah terpasang.

Langkahnya sebagai berikut:

1. Buka Android Studio.

2. Masuk ke menu Plugins melalui halaman Welcome Screen.

3. Pada tab Marketplace, ketik Kotlin Multiplatform di kolom pencarian.

4. Pilih plugin Kotlin Multiplatform lalu klik Install.

5. Setelah instalasi selesai, restart Android Studio agar plugin aktif sepenuhnya.

Plugin ini wajib dipasang agar Android Studio mendukung pembuatan project KMM, termasuk template project, konfigurasi Gradle, dan integrasi kode lintas platform.

Step 2 — Membuat Project Kotlin Multiplatform

1. Buka Android Studio lalu pilih New Project.

2. Pada daftar template, pilih Kotlin Multiplatform kemudian klik Next.

3. Isi konfigurasi dasar proyek seperti nama proyek, package name, dan lokasi penyimpanan.

4. Pilih target platform yang diperlukan, minimal Android.

5. Atur Minimum SDK sesuai kebutuhan (misalnya API 24).

6. Klik Finish dan tunggu proses Gradle sync selesai.
   
   

Step 3 — Mengisi Konfigurasi Proyek KMM

1. Isi Name dengan nama proyek KMM yang diinginkan, misalnya PBP_KMMProjects.

2. Atur Package name sebagai identitas unik aplikasi.

3. Tentukan Save location untuk direktori proyek.

4. Pilih Minimum SDK, misalnya API 24 agar kompatibel dengan mayoritas perangkat Android.

5. Biarkan Build configuration language pada Kotlin DSL (build.gradle.kts) sebagai opsi yang direkomendasikan.

6. Klik Next untuk melanjutkan ke pengaturan platform.
   
   
   

Step 4 — Menunggu Proses Sinkronisasi dan Memahami Struktur Proyek KMM

1. Setelah klik Next atau Finish, Android Studio akan otomatis melakukan Gradle Sync untuk menyiapkan seluruh dependensi proyek multplatform.

2. Tunggu hingga indikator di bagian bawah menunjukkan proses sync selesai tanpa error.

3. Jika berhasil, struktur proyek KMM akan tampil di panel sebelah kiri, biasanya terdiri dari:

   • composeApp → modul utama aplikasi yang berisi kode UI Compose Multiplatform.

   • androidMain → kode khusus Android.

   • iosMain → kode khusus iOS.

   • commonMain → kode bersama yang bisa dipakai di Android dan iOS.

4. Pastikan modul composeApp dan folder commonMain sudah muncul, karena di sinilah kode HelloWorld akan dibuat.
   
   

Step 5 — Menulis Kode HelloWorld di commonMain

Setelah struktur project berhasil dibuat dan modul Android siap dijalankan, langkah berikutnya adalah membuat tampilan sederhana untuk menampilkan teks Hello world! pada Kotlin Multiplatform Mobile. Semua UI utama untuk Compose Multiplatform berada di dalam folder:

composeApp > src > commonMain > kotlin > com.example.pbp_kmmprojects > App.kt

Pada tahap ini, buka file App.kt dan ganti isinya menjadi kode berikut (sesuai screenshot):

@Preview
fun App() {
    MaterialTheme {
        Column(
            modifier = Modifier
                .background(MaterialTheme.colorScheme.primaryContainer)
                .safeContentPadding()
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Hello world!",
                fontSize = 40.sp,
                fontWeight = FontWeight.Bold,
                color = MaterialTheme.colorScheme.onPrimaryContainer
            )

            Spacer(modifier = Modifier.height(6.dp))

            Text(
                text = "by Rayhan Septian Wijaya",
                fontSize = 14.sp,
                fontWeight = FontWeight.Normal,
                color = MaterialTheme.colorScheme.onPrimaryContainer
            )
        }
    }
}

Penjelasan singkat komponennya:

1. MaterialTheme memberikan gaya dan warna default Compose.

2. Column digunakan untuk menumpuk komponen UI secara vertikal.

3. Modifier mengatur layout, seperti background, padding, dan ukuran layar.

4. Text pertama menampilkan tulisan Hello world! dengan ukuran besar.

5. Spacer memberi jarak antar elemen.

6. Text kedua berisi nama kamu sebagai penanda bahwa UI berhasil dirender.

Setelah kode disimpan, jalankan aplikasi di emulator dari modul Android.
Jika berjalan dengan benar, emulator akan menampilkan UI seperti pada screenshot: teks Hello world! dan nama kamu di tengah layar.

Dengan memahami langkah dasar instalasi dan pembuatan project menggunakan Kotlin Multiplatform Mobile, kita bisa mulai melihat bagaimana kuatnya konsep shared code dalam ekosistem modern pengembangan aplikasi. KMM memberi kita fleksibilitas untuk menulis logika program satu kali, lalu menggunakannya kembali di Android maupun iOS tanpa harus membuat dua versi kode yang berbeda. Pendekatan ini tidak hanya menghemat waktu pengembangan, tetapi juga mempermudah pemeliharaan aplikasi dalam jangka panjang.

Melalui proses instalasi plugin KMM, pembuatan project baru, memahami struktur proyek, hingga menjalankan kode HelloWorld pertama, kita sudah menempuh fondasi penting yang akan sangat membantu ketika masuk ke tahap pengembangan fitur nyata. Selanjutnya, kamu bisa mulai mengeksplorasi bagian lain seperti pengelolaan state, integrasi API, hingga berbagi business logic antar platform.

Jika semua langkah berhasil hingga aplikasi menampilkan teks Hello world! di emulator, berarti lingkungan pengembangan KMM kamu sudah siap digunakan. Setelah ini, kamu bisa melanjutkan dengan membangun UI yang lebih kompleks atau mempelajari cara menghubungkan commonMain dengan kode native Android dan iOS.