Jetpack Compose Academy · Pelajaran

Membangun Penghitung Ketukan

Hubungkan state ke button untuk pembaruan langsung.

Membangun Penghitung Ketukan adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Our Goal

Let's build a tiny tap counter: a number on screen and a button that increases it with every tap. 🙂

Start With the State

First declare the state that will change. The counter starts at zero and lives inside the Composable for now.

var count by remember { mutableStateOf(0) }

Show the Count

Read the state in a Text so it always displays the current value. Reading it here subscribes the Text to changes.

Text("Count: " + count)

Add the Button

A Button needs an onClick action. Inside it we will change the state, which is what makes the UI react.

Button(onClick = { }) {
    Text("Tap me")
}

Increment on Tap

In onClick, bump the counter. Changing the state tells Compose to recompose anything that reads count.

Button(onClick = { count++ }) {
    Text("Tap me")
}

Stack Them in a Column

Place the text above the button using a Column, which lays out its children vertically, top to bottom.

Column {
    Text("Count: " + count)
    Button(onClick = { count++ }) { Text("Tap me") }
}

How the Loop Works

Tap fires onClick, count changes, Compose recomposes the Text, and you instantly see the new number. That is the full cycle.

Add a Reset Button

Want a fresh start? Add a second button whose onClick sets count back to zero. Reset is just another state change.

Button(onClick = { count = 0 }) {
    Text("Reset")
}

React to the Value

Because the UI is a function of state, you can style it from count, like showing a message once it passes ten taps.

if (count > 10) Text("Wow, keep going!")

Wrap It in a Function

Put everything in a reusable Composable named TapCounter. Now you can drop your counter anywhere in the app.

@Composable
fun TapCounter() {
    var count by remember { mutableStateOf(0) }
}

You Built Interactivity

That simple loop of state to UI to event to state is the heart of every interactive Compose screen you will ever write.

Quick Check

What makes the displayed number update after a tap?

Recap

You wired state to a Text and a Button to build a live tap counter, your first truly interactive Compose screen. Great work! 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Penghitung Ketukan” gratis?

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

Apa yang akan aku pelajari di “Membangun Penghitung Ketukan”?

Hubungkan state ke button untuk pembaruan langsung. Kamu berlatih Jetpack Compose 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 Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose 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 3 dari 4.

Berapa lama pelajaran “Membangun Penghitung Ketukan” 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 Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose 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 Jetpack Compose Academy