Muhammad Farhan Al Ghifari - 240060123140186 - KMM

Tutorial KMM (Kotlin Multiplatform Mobile): Cara Setup Project HelloWorld Pertama

Halo Developers! 👋

Setelah kita mencoba berbagai framework, hari ini kita akan masuk ke KMM (Kotlin Multiplatform Mobile).

Ini adalah teknologi yang memungkinkan kita berbagi logika bisnis (business logic) yang sama antara aplikasi Android dan iOS, namun tetap mempertahankan UI Native masing-masing. Hasilnya? Aplikasi yang performanya maksimal dan tampilannya 100% native.

Khusus pengguna Windows, kita akan fokus membuat dan menjalankan sisi Android-nya. Namun struktur project yang kita buat ini sudah siap sepenuhnya untuk iOS (tinggal dipindahkan ke Mac jika ingin di-build ke iPhone).

Mari kita mulai!

Bagian 1: Persiapan Plugin KMM

KMM membutuhkan plugin khusus agar Android Studio bisa mengenali struktur folder iOS.

Langkah 1: Install Plugin

1. Buka Android Studio.
2. Di halaman awal (Welcome Screen), klik menu Plugins.
3. Cari di kolom pencarian: "Kotlin Multiplatform Mobile" (atau terkadang namanya disingkat menjadi Kotlin Multiplatform di versi terbaru).
4. Pastikan publisher-nya adalah JetBrains.
5. Klik Install dan Restart IDE.

Bagian 2: Membuat Project KMM Baru

Setelah restart, kita akan membuat wadah untuk aplikasi kita.

Langkah 2: New Project Wizard

1. Klik tombol (+) New Project.

2. Scroll ke bawah pada daftar template.

3. Pilih template bernama Kotlin Multiplatform App.

   • Catatan: Inilah template standar untuk KMM saat ini.

4. Klik Next.

Langkah 3: Konfigurasi Project KMM

Isi detail project KMM Anda:

• Name: HelloWorld

• Package name: com.example.helloworld

• Save location: (Pilih folder penyimpanan)

• Minimum SDK: Pilih API 24 (Nougat).

• Build configuration language: Biarkan default (Kotlin DSL).

• Klik Next.

Bagian 2: Konfigurasi Project KMP

1. Klik (+) New Project > Pilih Kotlin Multiplatform App > Klik Next.
2. Isi nama project HelloWorld seperti biasa, lalu klik Next.
3. Konfigurasi Platform (PENTING!)kan menggunakan pengaturan default yang paling modern.
4. Android & iOS: Pastikan keduanya dicentang.
5. UI Implementation: Pilih "Share UI" (Default).

• Alasannya: Kita ingin coding tampilan (UI) satu kali saja menggunakan Kotlin, dan tampilannya akan otomatis jalan di Android & iOS.

    6. Klik Finish.

Bagian 3: Menunggu Gradle Sync

Langkah 4: Proses Setup Awal

Project KMM memiliki struktur yang lebih kompleks dibanding Android biasa karena ia menyiapkan dua "dapur" sekaligus (Android & iOS).

• Biarkan proses Gradle Sync berjalan sampai selesai (bisa 3-5 menit tergantung internet).

• Tunggu sampai loading bar di pojok kanan bawah hilang sepenuhnya.

Bagian 4: Cek Struktur Folder

Karena kita memilih "Share UI", strukturnya akan sedikit berbeda dengan cara lama.

Langkah 4: Ubah View ke "Project"

1. Di pojok kiri atas panel file, ubah tampilan dari Android menjadi Project.

2. Buka folder project Anda. Strukturnya harus seperti ini:

• composeApp: Inilah folder utama kita! Berisi kodingan UI yang dipakai bersama oleh Android dan iOS.
• iosApp: Folder pelengkap untuk booting iOS (jarang kita sentuh).
• shared: (Opsional/Legacy) Berisi logika bisnis tambahan.

Bagian 5: Menjalankan Aplikasi

Kita akan menjalankan aplikasi ini di Android Emulator.

Langkah 5: Pilih Konfigurasi

1. Lihat toolbar bagian atas.

2. Pastikan konfigurasi yang terpilih adalah composeApp.

3. Pilih emulator Pixel 7 Anda.

Langkah 6: Run!

Klik tombol Play (Segitiga Hijau).

Tunggu proses build selesai. Emulator akan menampilkan aplikasi dengan logo Compose Multiplatform atau teks "Hello World" yang dibuat menggunakan Jetpack Compose.

Selamat! Project KMM pertama Anda sudah jadi!

Sampai jumpa di tutorial coding selanjutnya! Happy Coding! 💻

Posted by Muhammad Farhan Al Ghifari, Informatics Students at Diponegoro University