Jetpack Compose Academy · Pelajaran

UI Memuat, Berhasil & Error

Tampilkan setiap hasil jaringan dengan rapi.

Pelajaran 4 dari 413 langkah

UI Memuat, Berhasil & Error adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Setiap Permintaan Memiliki Tiga Hasil

Panggilan jaringan dapat masih memuat, selesai dengan data, atau gagal. Layar yang baik menampilkan keadaan yang sesuai untuk ketiganya.

Memodelkan State dengan Sealed Class

sealed class mewakili hasil-hasil tersebut sebagai jenis yang berbeda, sehingga kompilator memaksa Anda menangani setiap kasus di UI.

sealed class UiState {
    object Loading : UiState()
    data class Success(val users: List<User>) : UiState()
    data class Error(val message: String) : UiState()
}

Mulai dari State Loading

Inisialisasikan state Anda sebagai Loading agar layar menampilkan indikator pemuatan segera setelah muncul, sebelum data apa pun tiba.

var state by mutableStateOf<UiState>(UiState.Loading)

Memperbarui saat Berhasil

Saat panggilan selesai, ubah state menjadi Success bersama daftar yang diambil. Compose akan melakukan recomposition dan menampilkan konten.

state = UiState.Success(api.getUsers())

Memperbarui saat Terjadi Error

Di blok catch, ubah state menjadi Error dengan pesan yang ramah, alih-alih membiarkan pengguna terus melihat indikator pemuatan.

catch (e: Exception) {
    state = UiState.Error("Couldn't load users")
}

Membuat Percabangan dengan when

Di Composable, gunakan when pada state. Setiap cabang menampilkan UI yang tepat untuk hasil tersebut.

when (val s = state) {
    is UiState.Loading -> { }
    is UiState.Success -> { }
    is UiState.Error -> { }
}

Tampilkan Pemutar Saat Memuat

Untuk cabang pemuatan, CircularProgressIndicator yang berada di tengah meyakinkan pengguna bahwa proses sedang berlangsung. ⏳

is UiState.Loading -> CircularProgressIndicator()

Tampilkan Data Saat Berhasil

Cabang keberhasilan membaca daftar dan menggambarnya, biasanya dalam LazyColumn agar hasil yang panjang dapat digulir dengan lancar.

is UiState.Success -> UserList(s.users)

Tawarkan Percobaan Lagi Saat Terjadi Kesalahan

Cabang kesalahan sebaiknya menampilkan pesan beserta tombol Coba lagi yang menjalankan ulang fungsi pemuatan Anda. Kegagalan tidak boleh menjadi jalan buntu.

is UiState.Error -> RetryView(s.message, ::loadUsers)

Tangani Kondisi Kosong

Keberhasilan tidak selalu berarti ada item. Saat daftar kosong, tampilkan kondisi kosong yang tenang, bukan layar kosong.

Satu Status Mengendalikan Seluruh Layar

Karena satu objek status menentukan semuanya, UI Anda tidak akan pernah menampilkan pemutar dan data secara bersamaan. Tampilan tetap mudah diprediksi.

Pemeriksaan Singkat

Mengapa pemuatan, keberhasilan, dan kesalahan dimodelkan sebagai kelas tersegel?

Jawab di pelajaran interaktif

Rangkuman: Menampilkan Setiap Hasil

Anda memodelkan status sebagai kelas tersegel, membuat percabangan dengan when, lalu menampilkan pemuatan, data, kesalahan, dan kondisi kosong. Kini Anda dapat merilis layar jaringan yang tangguh.

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “UI Memuat, Berhasil & Error” gratis?

Ya — teks lengkap “UI Memuat, Berhasil & Error” 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 “UI Memuat, Berhasil & Error”?

Tampilkan setiap hasil jaringan dengan rapi. 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 4 dari 4.

Berapa lama pelajaran “UI Memuat, Berhasil & Error” 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