Project: Aplikasi Dogglers

1. Sebelum memulai

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

Codelab ini berbeda dari yang lain di kursus ini. Tidak seperti codelab sebelumnya, tujuan codelab ini bukan untuk menyediakan tutorial langkah demi langkah tentang cara membangun aplikasi. Codelab ini dimaksudkan untuk menyiapkan project yang akan Anda selesaikan secara independen, yang memberi Anda petunjuk cara menyelesaikan aplikasi dan memeriksa sendiri aplikasi Anda.

Kami menyediakan paket pengujian sebagai bagian dari aplikasi yang akan Anda download, bukan kode solusi. Anda akan menjalankan pengujian ini di Android Studio (kami akan menunjukkan cara melakukannya nanti dalam codelab ini) dan melihat apakah kode Anda lulus. Mungkin diperlukan beberapa kali percobaan—bahkan developer profesional jarang sekali lulus pengujian pada percobaan pertama. Setelah kode Anda lulus semua pengujian, Anda dapat menganggap project ini selesai.

Kami memahami bahwa Anda mungkin hanya ingin solusi untuk memeriksanya. Kami sengaja tidak menyediakan kode solusi karena ingin Anda mempraktikkan bagaimana rasanya menjadi developer profesional. Hal ini mungkin mengharuskan Anda menggunakan berbagai keterampilan yang belum Anda pelajari, seperti:

• Menelusuri Google untuk istilah-istilah, pesan error, dan bit kode dalam aplikasi yang tidak Anda kenali;
• Menguji kode, membaca error, lalu melakukan perubahan pada kode dan mengujinya lagi;
• Kembali ke konten sebelumnya di Dasar-Dasar Android untuk mengingat kembali apa yang telah Anda pelajari;
• Membandingkan kode yang Anda ketahui berfungsi (yaitu, kode yang diberikan dalam project, atau kode solusi sebelumnya dari aplikasi lain dalam Unit 2) dengan kode yang Anda tulis.

Pada awalnya mungkin tampak sulit, tetapi kami 100 persen yakin Anda siap untuk project ini jika bisa menyelesaikan Unit 2. Jangan terburu-buru, dan jangan menyerah. Anda pasti bisa melakukannya.

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.

2. Ringkasan aplikasi

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 mem-build 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.

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

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

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

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

3. Memulai

Mendownload kode project

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

1. Buka halaman repositori GitHub yang disediakan untuk project.
2. Pastikan nama cabang cocok dengan nama cabang yang ditentukan dalam codelab. Misalnya, dalam screenshot berikut, nama cabang adalah main (utama).

3. Di halaman GitHub project, klik tombol Code yang akan menampilkan pop-up.

4. Pada pop-up, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
5. Temukan file di komputer Anda (mungkin di folder Downloads).
6. 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.

Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > Open.

3. Di file browser, 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 mem-build dan menjalankan aplikasi. Pastikan aplikasi di-build seperti yang diharapkan.

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.

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: vertical_horizontal_list_item.xml untuk tata letak horizontal dan vertikal, dan grid_list_item.xml untuk tata letak petak.

1. Build tata letak untuk daftar vertikal dan horizontal.

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

2. Build tata letak petak.

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

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.

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.

2. Implementasikan DogCardViewHolder. Holder tampilan harus mengikat empat tampilan yang perlu ditetapkan untuk setiap kartu tampilan recycler. Holder 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.
3. 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 vertical_horizontal_list_item. Metode ini akan menampilkan instance DogCardViewHolder yang merepresentasikan tata letak yang di-inflate.

4. Implementasikan getItemCount() untuk menampilkan panjang daftar anjing.
5. 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.

4. Menguji aplikasi

Project Dogglers berisi target "androidTest" dengan beberapa kasus 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.

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 string yang berisi kata "Nox" ditampilkan. Namun, pengujian tersebut gagal. Teks tidak dapat ditemukan, yang berarti kemungkinan belum ditampilkan.