Belajar Jetpack Compose - Project Setup & First Composable

#Pendahuluan

Di episode 2 kalian sudah memahami konsep: composable functions, recomposition, dan composition tree. Sekarang saatnya menaruh konsep itu di project nyata. Episode 3 memandu dari layar New Project sampai aplikasi pertama berjalan di emulator.

Project pertama adalah titik banyak orang tersesat: versi plugin salah, kotlinOptions tidak pas, atau preview tidak muncul. Karena itu episode ini juga membedah konfigurasi Gradle yang membentuk project Compose, supaya kalian paham bukan sekadar menekan tombol.

Episode 3 ini meliputi pembuatan project, struktur dan konfigurasi, composable pertama dengan preview, serta menjalankan aplikasi.

#Membuat Project Compose Baru

#Wizard Android Studio

Buka Android Studio, lalu pilih New Project. Pilih template Empty Activity — template ini sudah mengaktifkan Compose dan menyediakan satu composable sederhana. Beri nama project, misalnya BelajarCompose, dengan package id.devnull.belajarcompose.

Pilih minimum SDK API 24 (Android 7.0) sebagai baseline yang wajar, lalu klik Finish. Android Studio menyinkronkan Gradle secara otomatis; tunggu sampai baris status selesai tanpa error.

#Struktur Project

Project Compose standar memiliki dua file build: build.gradle.kts di root dan app/build.gradle.kts. File gradle root mendeklarasikan plugin yang dipakai, sedangkan file app berisi konfigurasi modul. Konfigurasi inilah yang menghubungkan Kotlin, Android, dan Compose compiler.

#Konfigurasi Gradle untuk Compose

#Plugin dan Compose Compiler

Mulai dari versi Compose Compiler Gradle Plugin (sejak Kotlin 2.0), compiler Compose diatur lewat plugin khusus, bukan kotlinOptions di buildFeatures:

app/build.gradle.kts

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("org.jetbrains.kotlin.plugin.compose")
}
 
android {
    namespace = "id.devnull.belajarcompose"
    compileSdk = 35
 
    defaultConfig {
        applicationId = "id.devnull.belajarcompose"
        minSdk = 24
        targetSdk = 35
        versionCode = 1
        versionName = "1.0"
    }
 
    buildFeatures {
        compose = true
    }
}

Plugin org.jetbrains.kotlin.plugin.compose menghubungkan versi compiler dengan versi Kotlin, menghilangkan masalah ketidakcocokan versi yang dulu sering terjadi.

#Dependency Compose

Blok dependencies memuat library BOM Compose, activity-compose, dan Material 3:

Dependency Compose

dependencies {
    val composeBom = platform("androidx.compose:compose-bom:2024.12.01")
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.10.1")
    implementation("androidx.compose.material3:material3")
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
}

Dengan Compose BOM, kalian tidak perlu menulis nomor versi untuk library ui dan material3 — BOM menjamin semuanya kompatibel. Kalian bisa melihat dependency aktual yang ter-resolve dengan perintah ./gradlew :app:dependencies.

#Composable Pertama dan Preview

#Menulis MainActivity

Ganti isi MainActivity.kt dengan screen sederhana yang memakai setContent:

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BelajarComposeTheme {
                KartuSapa("Dunia")
            }
        }
    }
}
 
@Composable
fun KartuSapa(nama: String) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text(
            text = "Halo, $nama!",
            modifier = Modifier.padding(24.dp),
            style = MaterialTheme.typography.headlineMedium
        )
    }
}

setContent { ... } membuka konteks komposisi untuk Activity, dan BelajarComposeTheme adalah theme dari template. Compose mengubah KartuSapa("Dunia") menjadi pohon UI — konsep composition tree yang kalian pelajari di episode 2.

#Preview di Editor

Preview memungkinkan melihat UI tanpa menjalankan emulator. Bikin fungsi kedua dengan anotasi @Preview:

Preview composable

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun KartuSapaPreview() {
    BelajarComposeTheme {
        KartuSapa("Preview")
    }
}

@Preview(showBackground = true, showSystemUi = true) menampilkan composable di panel Design editor. Preview adalah alat debugging yang luar biasa — kombinasi editor dan preview real-time akan dibahas lebih jauh di episode 21.

#Menjalankan di Emulator

#Build dan Install

Pastikan emulator dari episode 0 berjalan, lalu jalankan aplikasi. Dari Android Studio, tekan ikon Run. Dari terminal, build dan install bisa dilakukan manual:

./gradlew :app:assembleDebug
adb install app/build/outputs/apk/debug/app-debug.apk
adb shell am start -n id.devnull.belajarcompose/.MainActivity

./gradlew :app:assembleDebug menghasilkan APK debug, adb install ... memasangnya, dan adb shell am start -n id.devnull.belajarcompose/.MainActivity membuka Activity langsung dari terminal.

#Mengatasi Error Umum

Jika build gagal, periksa urutan berikut: sinkronisasi Gradle sudah selesai, SDK Platform sesuai compileSdk, dan plugin Compose sudah ditambahkan. Pesan error Unresolved reference: Compose hampir selalu menunjuk ke plugin atau dependency yang belum tersinkron.

#Penutup

Episode 3 membawa kalian dari layar New Project sampai aplikasi Compose pertama berjalan: memahami konfigurasi Gradle dengan plugin Compose Compiler dan BOM, menulis composable pertama dengan setContent, membuat preview, serta menjalankannya di emulator lewat Android Studio atau terminal.

Inti yang harus dibawa pulang:

• Template Empty Activity sudah mengaktifkan Compose secara penuh.
• Plugin org.jetbrains.kotlin.plugin.compose mengelola compiler sejak Kotlin 2.0.
• Compose BOM menyatukan versi library agar selalu kompatibel.
• setContent membuka konteks komposisi di dalam Activity.
• @Preview menampilkan composable langsung di editor.
• ./gradlew :app:assembleDebug dan adb install menjalankan aplikasi dari terminal.

Di episode 4 selanjutnya kita akan membahas layouting dan UI building blocks — Column, Row, Box, LazyColumn, dan LazyRow, komponen Material seperti Button dan Card, serta sistem Modifier untuk spacing, alignment, dan responsive layout.