Android Academy · Pelajaran

Apa Itu Jetpack Compose?

Pahami UI deklaratif di Android.

Apa Itu Jetpack Compose? adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Apa Itu Jetpack Compose?

Jetpack Compose adalah perangkat modern Android untuk membangun UI native. Alih-alih menulis file tata letak XML, Anda mendeskripsikan UI secara langsung dalam kode Kotlin.

Compose bersifat deklaratif: Anda memberi tahu seperti apa tampilan layar untuk suatu keadaan, lalu Compose menentukan cara menggambar dan memperbaruinya.

Cara Lama: Tampilan XML

Secara tradisional, layar Android memerlukan dua bagian:

File tata letak XML yang mendeskripsikan widget.
Kode Kotlin/Java yang menemukan tampilan tersebut dengan findViewById dan mengubahnya.

Menjaga XML dan kode tetap sinkron terasa merepotkan dan rawan kesalahan.

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Imperatif vs Deklaratif

Dengan tampilan XML, Anda menulis kode imperatif: mengambil sebuah tampilan, lalu mengubahnya langkah demi langkah.

Dengan Compose, Anda menulis kode deklaratif: mendeskripsikan hasil akhir sebagai fungsi dari data Anda. Saat data berubah, Compose secara otomatis menggambar ulang bagian yang diperlukan.

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

Fungsi Composable

Blok pembangun Compose adalah fungsi composable: fungsi Kotlin biasa yang diberi anotasi @Composable dan menghasilkan UI.

Composable dapat memanggil composable lain, sehingga Anda dapat membangun layar dari bagian-bagian kecil yang dapat digunakan kembali.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Tanpa findViewById

Di Compose tidak ada findViewById dan tidak ada ID tampilan. UI adalah pemanggilan fungsi. Untuk menampilkan teks yang berbeda, Anda cukup meneruskan argumen yang berbeda dan membiarkan Compose melakukan komposisi ulang.

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

UI sebagai Fungsi dari Keadaan

Gagasan utama: UI = f(state). Layar adalah keluaran dari composable Anda berdasarkan keadaan saat ini. Ubah keadaannya, dan fungsi yang sama akan menghasilkan UI baru.

Hal ini membuat UI lebih mudah diprediksi dan dipahami.

Semuanya Adalah Kotlin

Karena composable adalah fungsi Kotlin, Anda dapat menggunakan perulangan, kondisional, dan variabel untuk membangun UI. Tidak diperlukan bahasa templat khusus.

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

Lebih Sedikit Kode Boilerplate

Compose menghilangkan sangat banyak kode penghubung. Tidak ada inflasi XML, tidak ada adaptor untuk daftar sederhana, dan tidak ada pengaitan manual antara tata letak dan logika.

Hasilnya: lebih sedikit file dan lebih sedikit bug.

Dapat Dioperasikan dengan View

Anda tidak perlu menulis ulang seluruh aplikasi. Compose dapat beroperasi bersama sistem View lama. Anda dapat menyematkan Compose di dalam layar XML yang sudah ada, atau menyematkan View di dalam Compose.

Dengan demikian, tim dapat melakukan migrasi secara bertahap.

Yang Anda Perlukan

Untuk menggunakan Compose, Anda memerlukan:

Android Studio versi terbaru.
Dependensi Compose dalam file Gradle Anda.
Activity yang memanggil setContent { } untuk menampung composable.

Layar Sederhana

Berikut adalah layar Compose minimal yang lengkap. setContent adalah penghubung dari Activity Android ke dunia Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

Pemeriksaan Singkat

Manakah yang paling tepat menggambarkan Jetpack Compose?

Rangkuman

Anda telah mempelajari bahwa Jetpack Compose adalah perangkat UI deklaratif yang mengutamakan Kotlin. Gagasan utamanya:

UI dibangun dari fungsi @Composable.
Tidak ada XML dan tidak ada findViewById.
UI = f(state) — ubah keadaan, lalu Compose menggambar ulang UI.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Apa Itu Jetpack Compose?” gratis?

Ya — teks lengkap “Apa Itu Jetpack Compose?” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Apa Itu Jetpack Compose?”?

Pahami UI deklaratif di Android. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Apa Itu Jetpack Compose?” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy