Project: Aplikasi Dogglers

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

Prasyarat

  • Project ini ditujukan untuk pengguna yang telah menyelesaikan Unit 2 kursus Dasar-dasar Android di Kotlin.

Yang akan Anda build

  • Anda akan mem-build aplikasi bernama Dogglers yang menampilkan informasi di RecyclerView menggunakan keterampilan yang dipelajari di Unit 2.

Yang akan Anda butuhkan

  • Komputer yang dilengkapi Android Studio.

Selamat datang di Project: Aplikasi Dogglers!

Di Google, kami memanggil rekan kerja kami, Googler. Dengan banyaknya Googler yang memiliki anjing sebagai hewan peliharaan, kami rasa akan menyenangkan membuat aplikasi untuk anjing peliharaan kami, yang disebut Dogglers. Tugas Anda adalah mengimplementasikan Dogglers, yang menampilkan daftar yang dapat di-scroll berisi sedikit informasi tentang anjing peliharaan Googler, seperti nama, usia, hobi, dan fotonya. Dalam project ini, Anda akan membuat tata letak untuk item RecyclerView di aplikasi Dogglers, dan mengimplementasikan adaptor sehingga daftar anjing tersebut dapat ditampilkan dengan tiga cara: dengan scroll horizontal, scroll vertikal, dan tata letak petak yang di-scroll secara vertikal.

Saat meluncurkan aplikasi, Anda akan diberi opsi untuk tata letak horizontal, vertikal, dan petak.

adf6ec8cce8cc655.png

Opsi pertama adalah tampilan recycler scroll vertikal dengan item yang memenuhi seluruh lebar layar.

51045288de047217.png

Opsi kedua menampilkan daftar anjing dalam tampilan recycler yang di-scroll secara horizontal.

ce534bc07ecba432.png

Opsi ketiga menampilkan anjing dalam tata letak bergaya petak yang di-scroll secara vertikal, menampilkan dua anjing pada setiap baris.

6dac0c59577f6fbb.png

Semua tata letak ini didukung oleh class adaptor yang sama. Tugas Anda adalah membuat tata letak untuk kartu tampilan recycler, lalu mengimplementasikan adaptor agar setiap item diisi dengan informasi tentang setiap anjing.

Mendownload kode project

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

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.

5b0a76c50478a73f.png

  1. Di dialog, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
  2. Temukan file di komputer Anda (mungkin di folder Downloads).
  3. 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.

36cc44fcf0f89a1d.png

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

21f3eec988dcfbe9.png

  1. Di dialog Import Project, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
  2. Klik dua kali pada folder project tersebut.
  3. Tunggu Android Studio membuka project.
  4. Klik tombol Run 11c34fc5e516fb1c.png untuk mem-build dan menjalankan aplikasi. Pastikan aplikasi di-build seperti yang diharapkan.
  5. Cari file project di jendela alat Project untuk melihat cara aplikasi disiapkan.

Project ini diatur ke dalam beberapa paket terpisah. Meskipun sebagian besar fungsi sudah diimplementasikan, Anda harus mengimplementasikan DogCardAdapter. Ada juga dua file tata letak yang perlu Anda ubah. File lainnya akan dibahas sesuai kebutuhan dalam petunjuk berikut.

93c2c1fee50a493b.png

Mengimplementasikan tata letak

Tata letak vertikal dan horizontal identik, sehingga Anda hanya perlu mengimplementasikan satu file tata letak untuk keduanya. Tata letak petak menampilkan semua informasi yang sama, tetapi nama, usia, dan hobi anjing ditumpuk secara vertikal, sehingga Anda perlu tata letak terpisah untuk kasus ini. Kedua tata letak memerlukan empat tampilan yang berbeda untuk menampilkan informasi tentang setiap anjing.

  1. ImageView dengan gambar anjing
  2. TextView dengan nama anjing
  3. TextView dengan usia anjing
  4. TextView dengan hobi anjing

Anda juga akan melihat beberapa gaya pada setiap kartu untuk menampilkan batas dan bayangan. Ini ditangani oleh MaterialCardView, yang sudah ditambahkan ke file tata letak dalam project awal. Dalam setiap MaterialCardView terdapat ConstraintLayout, tempat Anda harus menambahkan tampilan yang tersisa.

Ada dua file XML yang harus Anda kerjakan untuk mengimplementasikan tata letak: horizontal_vertical_list_item.xml untuk tata letak horizontal dan vertikal, dan grid_list_item.xml untuk tata letak petak.

  1. Mem-build tata letak untuk daftar vertikal dan horizontal.

Buka vertical_horizontal_list_item.xml, dan di ConstraintLayout bagian dalam, buat tata letak agar cocok dengan gambar.

73a663ae61811a4b.png

  1. Mem-build tata letak petak.

Buka grid_list_item.xml, dan di ConstraintLayout bagian dalam, buat tata letak agar cocok dengan gambar.

50dd020683b63b1a.png

Mengimplementasikan adaptor

Setelah Anda menentukan tata letak, tugas berikutnya adalah mengimplementasikan adaptor RecyclerView. Buka DogCardAdapter.kt di paket adapter. Anda akan melihat banyak komentar TODO yang membantu menjelaskan hal yang perlu diimplementasikan.

3192d25f55b403bc.png

Ada lima langkah yang Anda perlukan untuk mengimplementasikan adaptor.

  1. Tentukan variabel atau konstanta untuk daftar data anjing. Daftar tersebut dapat ditemukan di paket data dalam objek bernama DataSource, dan terlihat seperti berikut:
object DataSource {

   val dogs: List<Dog> = listOf( ...

}

Properti dogs adalah dari jenis List<Dog>. Class Dog ada dalam paket model, dan menentukan empat properti: gambar (ditunjukkan dengan ID resource), dan tiga properti String.

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

Tetapkan variabel yang Anda tentukan di DogCardAdapter ke daftar dogs di objek DataSource.

  1. Implementasikan DogCardViewHolder. Pemegang tampilan harus mengikat empat tampilan yang perlu ditetapkan untuk setiap kartu tampilan recycler. Pemegang tampilan yang sama akan dibagikan untuk tata letak grid_list_item dan vertical_horizontal_list_item, karena semua tampilan digunakan bersama oleh kedua tata letak. DogCardViewHolder harus menyertakan properti untuk ID tampilan berikut: dog_image, dog_name, dog_age, dan dog_hobbies.
  2. Di onCreateViewHolder(), Anda akan meng-inflate tata letak grid_list_item atau vertical_horizontal_list_item. Bagaimana cara mengetahui tata letak mana yang harus digunakan? Dalam definisi adaptor, Anda dapat melihat bahwa nilai yang disebut tata letak jenis Int diteruskan saat membuat instance adaptor.
class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

Ini sama dengan nilai yang ditentukan dalam objek Layout, yang berada dalam paket const.

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

Nilai tata letak akan berupa 1, 2, atau 3, tetapi Anda dapat memeriksanya terhadap ID VERTICAL, HORIZONTAL, dan GRID, dari objek Layout.

Untuk tata letak GRID, inflate tata letak grid_list_item, dan untuk tata letak HORIZONTAL dan VERTICAL, inflate tata letak horizontal_vertical_list_item. Metode ini akan menampilkan instance DogCardViewHolder yang merepresentasikan tata letak yang di-inflate.

  1. Implementasikan getItemCount() untuk menampilkan panjang daftar anjing.
  2. Terakhir, Anda harus mengimplementasikan onBindViewHolder() untuk menetapkan data di setiap kartu tampilan recycler. Gunakan position untuk mengakses data anjing yang benar dari daftar, lalu tetapkan gambar dan nama anjing. Gunakan resource string, dog_age, dan dog_hobbies untuk memformat usia dan hobi dengan tepat.

Setelah selesai mengimplementasikan adaptor, jalankan aplikasi Anda di emulator untuk memastikan bahwa semuanya telah diimplementasikan dengan benar.

Project Dogglers berisi target "androidTest" dengan beberapa kasus pengujian.

583b42ccd1e5b22.png

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.

a32317d35c77142b.png

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.

ac6244434cfafb60.png

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

7a925c5e196725bb.png

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.

ee1e227446c536fe.png

Kemudian, pilih target pengujian dari menu pop-up.

d570c947769db65c.png

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.

6d68f2bf589501ae.png

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

63f37b6428781c02.png

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.

Kami ingin mendengar pendapat Anda tentang project ini. Ikuti survei singkat ini untuk memberikan masukan kepada kami - masukan Anda akan membantu memandu project mendatang dalam kursus ini.