Praktik: Membangun aplikasi Amphibians

1. Sebelum memulai

Pengantar

Di unit ini, Anda telah mempelajari cara meningkatkan aplikasi dengan mengambil data dari internet. Aplikasi Anda kini dapat menampilkan data terbaru yang tersedia dari server dan tidak terbatas pada data yang tersedia secara statis saat Anda membuka aplikasi. Fungsi ini sangat penting di sebagian besar aplikasi dunia nyata.

Dalam set latihan ini, Anda akan mengambil konsep yang telah Anda pelajari dan membuat aplikasi Amphibians. Aplikasi ini akan mengambil data amfibi dari internet dan menampilkannya dalam daftar scroll.

Kode solusi tersedia di akhir. Untuk mendapatkan hasil maksimal dari pengalaman belajar ini, cobalah untuk mengimplementasikan dan memecahkan masalah sebanyak mungkin sebelum melihat kode solusi yang diberikan. Di waktu inilah Anda akan belajar paling banyak.

Prasyarat

Yang Anda butuhkan

  • Komputer yang dilengkapi akses internet dan Android Studio.

Yang akan Anda buat

Dalam set latihan ini, Anda akan membangun aplikasi untuk menampilkan daftar amfibi, beserta detail dan gambarnya. Data diambil dari internet dengan membuat permintaan jaringan dan berisi nama, jenis, deskripsi, dan URL gambar amfibi.

Data JSON amfibi dihosting di https://android-kotlin-fun-mars-server.appspot.com/amphibians.

Kode solusi yang disediakan menampilkan desain UI berikut:

b0e225571b16ffb.png

Bagian berikut memberikan langkah-langkah umum untuk membuat aplikasi. Anda tidak harus mematuhinya, tetapi langkah-langkah tersebut disediakan untuk membantu memandu Anda.

2. Merencanakan aplikasi

Sebelum Anda mulai melakukan coding, luangkan waktu untuk membuat sketsa elemen yang berbeda untuk aplikasi Anda dan cara elemen tersebut terhubung bersama.

Melakukan tugas persiapan ini membantu mengidentifikasi apa yang harus Anda lakukan, dapat menunjukkan tempat Anda mengalami masalah, dan membantu Anda memikirkan cara untuk menyelesaikan masalah.

3. Membuat project baru

Mulai dengan project baru di Android Studio:

  1. Buka Android Studio dan pilih New Project.
  2. Di bagian Templates, pilih Phone and Tablet.
  3. Pilih Empty Activity, lalu klik Next.
  4. Ubah nama menjadi Amphibians.
  5. Klik Finish.

Kini Anda siap untuk memulai coding.

4. Menyiapkan dependensi

Aplikasi ini menggunakan Retrofit untuk permintaan jaringan, Coil untuk pemuatan gambar, dan library kotlinx.serialization untuk menguraikan JSON yang ditampilkan oleh Amphibians API.

Tambahkan dependensinya ke app/build.gradle.kts.

5. Membuat lapisan UI

Sebaiknya ikuti praktik terbaik arsitektur aplikasi Android dan buat lapisan UI untuk aplikasi ini.

Lapisan ini berisi ViewModel dan fungsi composable yang menampilkan UiState yang berasal dari ViewModel di layar. ViewModel bertanggung jawab mengekspos status UI layar, menangani logika bisnis di lapisan UI dan memanggil logika bisnis dari lapisan hierarki lainnya.

Lapisan UI juga berisi elemen visual yang dilihat dan berinteraksi dengan pengguna Anda. Lapisan ini adalah tempat Anda memutuskan bagaimana berbagai elemen bekerja sama untuk membuat UI yang Anda bayangkan. Anda menentukan warna, font, dan cara menampilkan gambar.

6. Membuat lapisan data

Lapisan data bertanggung jawab untuk mengambil data amfibi dari API.

Anda mungkin ingin menyertakan class data untuk data amfibi, repositori untuk mengelola data, dan class sumber data untuk mengambil data dari jaringan.

Jika memerlukan bantuan untuk melakukan panggilan jaringan, Anda dapat melihat Layanan web dan Retrofit dari codelab Mendapatkan data dari internet.

Untuk membantu menguraikan respons jaringan, lihat Mengurai respons JSON dengan kotlinx.serialization.

Untuk memuat gambar dengan Coil, Anda dapat melihat dokumentasi resmi atau melihat kembali bagian Menampilkan gambar yang didownload dari codelab Memuat dan menampilkan gambar dari Internet.

7. Mengimplementasikan Injeksi Dependensi

Anda harus menggunakan Injeksi Dependensi (DI) untuk membuat aplikasi Anda tetap fleksibel, andal, dan siap untuk diskalakan.

DI membuat komponen aplikasi tetap dikaitkan secara longgar dan lebih mudah diuji.

Saat menerapkan DI, Anda perlu membuat penampung aplikasi, yang digunakan untuk mendapatkan dependensi yang diperlukan aplikasi.

Penampung aplikasi harus dapat diakses oleh seluruh aplikasi. Anda dapat melakukannya dengan menyimpan penampung dependensi di class Application kustom. Class ini kemudian mewarisi dari class Application.

Jika Anda memerlukan bantuan untuk menerapkan fungsi ini:

8. Kode solusi