Project: Aplikasi Amphibians

1. Sebelum memulai

Perhatian: Codelab ini sudah tidak berlaku dan tidak lagi dikelola. Sebagai gantinya, lihat kursus Dasar-Dasar Android dengan Compose untuk praktik terbaru yang direkomendasikan.

Codelab ini memperkenalkan aplikasi baru bernama Amphibians yang akan Anda bangun sendiri. Codelab ini memandu Anda melakukan langkah-langkah untuk menyelesaikan project aplikasi Amphibians, seperti penyiapan dan pengujian project dalam Android Studio.

Prasyarat

• Project ini ditujukan bagi pengguna yang telah menyelesaikan Unit 4 kursus Dasar-Dasar Android di Kotlin.

Yang akan Anda bangun

• Implementasikan jaringan di aplikasi menggunakan Retrofit dan Moshi serta penanganan error yang sesuai.

Yang akan Anda butuhkan

• Komputer yang dilengkapi Android Studio.

2. Ringkasan aplikasi yang sudah selesai

Selamat datang di Project: Amphibians!

Hingga saat ini, semua aplikasi yang telah Anda bangun mengandalkan data yang disimpan secara lokal. Kali ini, Anda akan menggunakan aplikasi yang menampilkan informasi tentang berbagai spesies amfibi, dan memanfaatkan pengetahuan Anda tentang jaringan, penguraian JSON, dan model tampilan agar aplikasi dapat menggunakan data dari jaringan. Data aplikasi akan diperoleh dari API kustom untuk project ini dan menampilkannya dalam tampilan daftar.

Di aplikasi akhir, layar pertama yang akan dilihat pengguna menampilkan nama setiap spesies dalam tampilan recycler.

Mengetuk item daftar akan membuka layar detail yang juga menampilkan nama spesies beserta deskripsi detail.

Meskipun bagian UI dari aplikasi ini sudah dibuat untuk Anda, menjalankan project awal tidak akan menampilkan data apa pun. Anda harus menerapkan bagian jaringan pada aplikasi, lalu menampilkan data yang didownload di tata letak.

3. Memulai

Mendownload kode project

Perhatikan bahwa nama folder adalah android-basics-kotlin-amphibians-app. Pilih folder ini saat Anda membuka project di Android Studio.

URL Kode Awal:

https://github.com/google-developer-training/android-basics-kotlin-amphibians-app/tree/main

Nama cabang dengan kode awal: main

Untuk mendapatkan kode codelab ini dan membukanya di Android Studio, lakukan hal berikut.

Mendapatkan kode

1. Klik URL yang diberikan. Tindakan ini akan membuka halaman GitHub project di browser.
2. Di halaman GitHub project, klik tombol Code yang akan menampilkan dialog.

3. Di dialog, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
4. Temukan file di komputer Anda (mungkin di folder Downloads).
5. Klik dua kali pada file ZIP untuk mengekstraknya. Tindakan ini akan membuat folder baru yang berisi file project.

Membuka project di Android Studio

1. Mulai Android Studio.
2. Di jendela Welcome to Android Studio, klik Open an existing Android Studio project.

Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > New > Import Project.

3. Di dialog Import Project, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
4. Klik dua kali pada folder project tersebut.
5. Tunggu Android Studio membuka project.
6. Klik tombol Run untuk membangun dan menjalankan aplikasi. Pastikan aplikasi dibangun seperti yang diharapkan.
7. Cari file project di jendela alat Project untuk melihat cara aplikasi disiapkan.

Mengimplementasikan layanan API

Seperti di project sebelumnya, sebagian besar aplikasi sudah diterapkan untuk Anda. Anda hanya perlu menerapkan bagian jaringan menggunakan materi yang telah Anda pelajari di Unit 4. Jangan ragu untuk mempelajari kode awal. Sebagian besar konsep seharusnya sudah tidak asing lagi dari Unit 1 hingga 3. Langkah-langkah berikut akan memanggil bagian tertentu kode jika diperlukan untuk menyelesaikan setiap langkah.

Aplikasi menampilkan daftar data amfibi dari jaringan. Data amfibi berasal dari objek JSON yang ditampilkan oleh API. Lihat file Amphibian.kt dalam paket jaringan. Class ini membuat satu model objek amfibi yang merupakan daftar yang akan ditampilkan dari API. Setiap amfibi memiliki tiga properti: nama, jenis, dan deskripsi.

data class Amphibian(
    val name: String,
    val type: String,
    val description: String
)

Backend untuk API ini cukup sederhana. Ada dua informasi penting yang diperlukan untuk mengakses data amfibi: URL dasar dan endpoint untuk mendapatkan daftar amfibi.

1. URL Dasar: https://developer.android.com/courses/pathways/android-basics-kotlin-unit-4-pathway-2/
2. MENDAPATKAN daftar amfibi: android-basics-kotlin-unit-4-pathway-2-project-api.json

Tips: Anda dapat melihat JSON mentah di browser.

Project ini sudah memiliki dependensi Retrofit dan Moshi. Dalam paket jaringan, Anda akan menemukan file AmphibianApiService.kt. File ini berisi beberapa komentar TODO. Lakukan lima tugas berikut untuk menerapkan aplikasi amfibi:

1. Buat variabel untuk menyimpan URL dasar API.
2. Bangun objek Moshi dengan factory adaptor Kotlin yang akan digunakan Retrofit untuk mengurai JSON.
3. Bangun instance Retrofit menggunakan pengonversi Moshi.
4. Implementasikan antarmuka AmphibianApiService dengan fungsi suspend untuk setiap metode API (untuk aplikasi ini, hanya ada satu metode untuk MENDAPATKAN daftar amfibi).
5. Buat objek AmphibianApi untuk mengekspos layanan Retrofit yang diinisialisasi dengan lambat menggunakan antarmuka AmphibianApiService.

Tips: Untuk pengingat, lihat konten di Menghubungkan ke Internet.

Mengimplementasikan ViewModel

Setelah API diterapkan, Anda akan membuat permintaan ke API amfibi dan menyimpan nilai apa pun yang perlu ditampilkan. Anda akan melakukannya di class AmphibianViewModel.kt yang ditemukan dalam paket ui.

Anda akan melihat bahwa di atas deklarasi class terdapat enum yang disebut AmphibianApiStatus.

enum class AmphibianApiStatus {LOADING, ERROR, DONE}

Tiga kemungkinan nilai, LOADING, ERROR, dan DONE, digunakan untuk menampilkan status permintaan kepada pengguna.

Di class AmphibianViewModel.kt itu sendiri, Anda harus menerapkan beberapa variabel LiveData, fungsi untuk berinteraksi dengan API, dan fungsi untuk menangani penyetelan amfibi di layar detail.

1. Tambahkan variabel MutableLiveData pribadi yang dapat menyimpan enum AmphibianApiStatus dan properti pendukung status untuk status ke _status.
2. Tambahkan variabel amphibians dan properti pendukung pribadi _amphibians untuk daftar amfibi, jenis List<Amphibian>.
3. Tambahkan variabel _amphibian dari jenis MutableLiveData<Amphibian> dan properti pendukung amphibian untuk objek amfibi yang dipilih dari jenis LiveData<Amphibian>. Variabel ini akan digunakan untuk menyimpan amfibi yang dipilih dan ditampilkan di layar detail.
4. Tentukan fungsi yang disebut getAmphibianList(). Luncurkan coroutine menggunakan ViewModelScope, di dalam coroutine, jalankan permintaan GET untuk mendownload data amfibi dengan memanggil metode getAmphibians() dari layanan Retrofit. Anda harus menggunakan try dan catch untuk menangani error dengan tepat. Sebelum membuat permintaan, tetapkan nilai _status ke AmphibianApiStatus.LOADING. Permintaan yang berhasil harus menetapkan _amphibians ke daftar amfibi dari server dan menetapkan _status ke AmphibianApiStatus.DONE. Jika terjadi error, _amphibians harus disetel ke daftar kosong dan _status disetel ke AmphibianApiStatus.ERROR.
5. Terapkan metode onAmphibianClicked() untuk menetapkan properti _amphibian yang Anda tentukan ke argumen amfibi yang diteruskan ke fungsi. Metode ini sudah dipanggil ketika amfibi dipilih sehingga akan ditampilkan di layar detail.

Tips: Seperti halnya class ViewModel lain yang telah ditentukan, Anda harus menggunakan jenis LiveData dan MutableLiveData dengan tepat.

Mengupdate UI dari ViewModel

Setelah menerapkan ViewModel, Anda hanya perlu mengedit class fragmen dan file tata letak untuk dapat menggunakan data binding.

1. ViewModel sudah direferensikan di AmphibianListFragment. Di metode onCreateView(), setelah tata letak di-inflate, cukup panggil metode getAmphibianList() dari ViewModel.
2. Di fragment_amphibian_list.xml, tag <data> untuk variabel data binding telah ditambahkan ke file tata letak. Anda hanya perlu mengimplementasikan TODO untuk UI yang akan diupdate berdasarkan model tampilan. Tetapkan binding yang sesuai untuk listData dan apiStatus.
3. Di fragment_amphibian_detail.xml, terapkan TODO untuk menetapkan properti teks yang sesuai untuk nama dan deskripsi amfibi.

4. Petunjuk pengujian

Menjalankan pengujian

Untuk menjalankan pengujian, Anda dapat melakukan salah satu dari hal berikut.

Untuk satu kasus pengujian, buka class kasus pengujian dan klik panah hijau di sebelah kiri deklarasi class. Kemudian Anda dapat memilih opsi Run dari menu. Tindakan ini akan menjalankan semua pengujian dalam kasus pengujian.

Sering kali Anda hanya ingin menjalankan satu pengujian, misalnya, jika hanya ada satu pengujian yang gagal dan yang lainnya lulus pengujian. Anda dapat menjalankan satu pengujian seperti halnya seluruh kasus pengujian. Gunakan panah hijau dan pilih opsi Run.

Jika memiliki beberapa kasus pengujian, Anda juga dapat menjalankan seluruh rangkaian pengujian. Sama seperti menjalankan aplikasi, Anda dapat menemukan opsi ini pada menu Run.

Perhatikan bahwa Android Studio akan menetapkan secara default ke target terakhir yang Anda jalankan (aplikasi, target pengujian, dll.), jadi jika menu masih menampilkan Run > Run ‘app', Anda dapat menjalankan target pengujian, dengan memilih Run > Run.

Kemudian, pilih target pengujian dari menu pop-up.

Hasil menjalankan pengujian ditampilkan di tab Run. Pada panel di sebelah kiri, Anda akan melihat daftar pengujian yang gagal, jika ada. Pengujian yang gagal ditandai dengan tanda seru berwarna merah di samping nama fungsi. Pengujian yang lulus ditandai dengan tanda centang hijau.

Tips: Untuk menampilkan pengujian yang lulus, gagal, atau lulus dan gagal di panel kiri, Anda dapat menggunakan dua tombol di kiri atas. Memilih tanda centang akan menampilkan pengujian yang lulus, memilih ikon lingkaran dengan garis melintang akan mencantumkan pengujian yang gagal. Secara default, hanya pengujian yang gagal yang akan dicantumkan.

Jika pengujian gagal, output teks memberikan informasi untuk membantu Anda memperbaiki masalah yang menyebabkan pengujian gagal.

Misalnya, dalam pesan error di atas, pengujian dilakukan untuk memeriksa apakah TextView menggunakan resource string tertentu. Namun, pengujian tersebut gagal. Teks setelah "Expected" dan "Got" tidak cocok, artinya nilai yang diharapkan untuk pengujian tidak cocok dengan nilai dari aplikasi yang sedang berjalan. Dalam contoh ini, string yang digunakan dalam TextView bukan squeeze_count, seperti yang diharapkan oleh pengujian.