Project: Aplikasi Lemonade

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 Lemonade yang akan Anda bangun sendiri. Codelab ini memandu Anda melakukan langkah-langkah untuk menyelesaikan project, termasuk penyiapan dan pengujian 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 Unit 1 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 1) dengan kode yang Anda tulis.

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

Prasyarat

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

Yang akan Anda bangun

• Anda akan membangun aplikasi Lemonade sederhana menggunakan keterampilan yang telah dipelajari di Unit 1.

Yang Anda butuhkan

• Komputer yang dilengkapi Android Studio.

2. Ringkasan aplikasi

Selamat datang di Project: Aplikasi Lemonade!

Kami telah merekrut Anda ke tim kami untuk membantu mewujudkan visi kami dalam membuat limun digital. Tujuannya adalah membuat aplikasi seluler sederhana dan interaktif yang memungkinkan Anda memeras lemon sampai Anda mendapatkan segelas limun. Anggaplah ini sebagai metafor, atau mungkin cara yang menyenangkan untuk menghabiskan waktu!

Aplikasi Lemonade yang sudah selesai akan terdiri dari satu layar. Saat pengguna pertama kali meluncurkan aplikasi, mereka akan diminta untuk memilih buah lemon dengan mengetuk gambar pohon lemon.

Dengan mengetuk pohon lemon, pengguna akan diberi buah lemon yang dapat diketuk untuk "diperas" selama jumlah frekuensi yang tidak ditentukan (jumlah persis perasan yang diperlukan dihasilkan secara acak) sebelum berpindah ke layar berikutnya.

Setelah pengguna mengetuk untuk memeras lemon dalam jumlah yang benar, mereka akan melihat gambar gelas untuk "meminum" limun.

Setelah mengklik untuk meminum limun, gelas akan terlihat kosong, dan pengguna dapat mengetuk gambar lagi untuk kembali ke layar pertama, dan memilih buah lemon lain dari pohon.

Aplikasi ini dibuat berdasarkan kesederhanaan, dan diatur dalam satu aktivitas. Status aplikasi yang berbeda-beda (apakah pengguna memilih buah lemon, memeras buah lemon, meminum limun, dan terakhir, mengosongkan gelas) diwakili oleh sesuatu yang disebut mesin status. Ini terdengar seperti istilah teoretis yang canggih, tetapi semua ini berarti bahwa status aplikasi (yaitu teks dan gambar yang ditampilkan kepada pengguna) ditentukan oleh variabel yang berisi status aplikasi (select, squeeze, dll.). Status aplikasi diperbarui, bersama dengan variabel lain yang diperlukan, kemudian UI dikonfigurasikan (menyetel gambar dan teks) secara terpisah setelah semua update dilakukan.

Semua variabel untuk status aplikasi telah ditetapkan untuk Anda. Tugas Anda adalah membangun tata letak aplikasi dan menerapkan logika sehingga transisi UI antara tiap-tiap status seperti yang diharapkan.

Menguji kode Anda

Untuk aplikasi Lemonade (dan project mendatang), Anda akan diberi beberapa pengujian otomatis yang dapat digunakan untuk memverifikasi bahwa kode Anda berfungsi seperti yang diharapkan.

Apa yang dimaksud dengan pengujian otomatis? Dalam pengembangan software, Anda dapat menganggap "pengujian" sebagai kode yang memverifikasi bahwa kode lain berfungsi. Hal ini dilakukan dengan memeriksa output (seperti konten elemen UI pada layar) untuk melihat apakah output tersebut relevan berdasarkan input, yang dikenal sebagai "kasus pengujian". Project awal untuk aplikasi Lemonade mencakup beberapa pengujian yang dapat Anda jalankan untuk memastikan bahwa Anda telah menerapkan logika dengan benar. Kita akan membahas pengujian secara lebih mendetail nanti. Sekarang saatnya mendownload kode awal dan mulai membangun aplikasi Lemonade.

3. Memulai

Mendownload kode project

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

URL Kode Awal:

https://github.com/google-developer-training/android-basics-kotlin-lemonade-app

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. Periksa dan konfirmasi nama cabang yang 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 membangun dan menjalankan aplikasi. Pastikan aplikasi dibangun seperti yang diharapkan.

Luangkan waktu untuk membiasakan diri dengan project awal. Berikan perhatian khusus pada file MainActivity.kt.

Dalam MainActivity.kt, Anda akan menemukan beberapa variabel yang digunakan untuk mewakili status aplikasi saat ini. Anda akan menggunakannya pada langkah selanjutnya untuk membuat aplikasi interaktif. Meskipun jumlah kode di sini mungkin tampak berlebihan, Anda tidak perlu mengubah kode yang tidak ditandai dengan TODO. Petunjuk khusus diberikan di halaman berikutnya.

Anda juga akan melihat bahwa project tersebut menyertakan paket lain, com.example.lemonade (androidTest).

Hal ini mencakup pengujian otomatis yang akan Anda gunakan untuk memverifikasi bahwa fungsi yang diterapkan di MainActivity.kt sudah benar. Sekali lagi, kita akan membahasnya nanti. Untuk saat ini, Anda siap untuk mulai membangun aplikasi, dimulai dengan antarmuka pengguna.

4. Membangun antarmuka pengguna

Aplikasi Lemonade hanya memerlukan tata letak dasar; Anda hanya memerlukan dua tampilan untuk menerapkan semua fungsinya.

1. TextView yang memberikan petunjuk kepada pengguna.
2. ImageView yang menampilkan grafik berdasarkan status aplikasi saat ini (misalnya, lemon yang akan diperas).

Anda akan membangun tata letak ini dalam activity_main.xml.

Dengan menggunakan pengetahuan Anda tentang layout editor, sasaran Anda adalah membangun tata letak yang terlihat seperti di bawah, dengan tampilan yang berpusat di layar dan TextView di atas ImageView.

Tips: Anda sudah menggunakan ConstraintLayout saat menggunakan layout editor Android Studio. Tata letak batasan berfungsi baik untuk membuat tata letak tampilan bertumpuk seperti dalam aplikasi Lemonade. Jika Anda perlu mengingat kembali tentang ConstraintLayout, lihat kembali codelab Membuat Aplikasi Kartu Ulang Tahun.

5. Membuat aplikasi menjadi interaktif

Setelah tata letak selesai, buka MainActivity.kt. Di sinilah Anda akan mengimplementasikan semua logika aplikasi. Anda akan melihat sudah ada cukup banyak kode. Ada juga banyak komentar yang ditandai sebagai // TODO: (contoh di bawah). Ini adalah tugas yang harus Anda selesaikan.

Ada tiga hal dasar yang perlu Anda terapkan agar aplikasi lemonade bekerja.

1. Konfigurasikan lemonImage ImageView untuk merespons input pengguna.
2. Terapkan clickLemonImage() untuk memperbarui status aplikasi.
3. Implementasikan setViewElements() untuk mengupdate UI berdasarkan status aplikasi saat ini.

Mari kita lihat setiap tugas satu per satu.

Langkah 1: Konfigurasikan ImageView

Mengetuk tampilan gambar akan memindahkan aplikasi dari satu status ke status lainnya. Di akhir onCreate(), perhatikan bahwa ada dua pemroses yang perlu disetel.

1. setOnClickListener() harus memperbarui status aplikasi. Metode untuk melakukannya adalah clickLemonImage().
2. setOnLongClickListener() merespons peristiwa saat pengguna menekan lama pada gambar (misalnya pengguna mengetuk gambar dan tidak langsung melepaskan jari mereka). Untuk peristiwa tekan lama, widget, yang disebut snackbar, muncul di bagian bawah layar dan memberi tahu pengguna berapa kali mereka memeras lemon secara bersamaan. Untuk melakukannya, gunakan metode showSnackbar().

Catatan: Anda TIDAK BOLEH mengubah nama metode apa pun yang ada. Jika tidak, pengujian mungkin tidak dapat dijalankan.

Pada langkah berikutnya, Anda akan mengimplementasikan logika untuk mengubah status aplikasi.

Langkah 2: Terapkan clickLemonImage()

Setelah menyelesaikan langkah sebelumnya, metode clickLemonImage() kini dipanggil setiap kali pengguna mengetuk gambar. Metode ini bertanggung jawab untuk memindahkan aplikasi dari status saat ini ke status berikutnya dan memperbarui variabel yang diperlukan. Ada empat kemungkinan status: SELECT, SQUEEZE, DRINK, dan, RESTART; status saat ini diwakili oleh variabel lemonadeState. Metode ini perlu melakukan sesuatu yang berbeda untuk setiap status.

1. SELECT: Transisi ke status SQUEEZE, setel lemonSize (jumlah perasan yang diperlukan) dengan memanggil metode pick(), dan menyetel squeezeCount (frekuensi perasan pengguna untuk buah lemon) ke 0.
2. SQUEEZE: Menambah squeezeCount sebesar 1 dan menurunkan lemonSize sebesar 1. Ingat bahwa lemon akan memerlukan jumlah perasan yang bervariasi sebelum aplikasi dapat mentransisikan statusnya. Transisi ke status DRINK hanya jika lemonSize baru sama dengan 0. Jika tidak, aplikasi harus tetap dalam status SQUEEZE.
3. DRINK: Transisi ke status RESTART dan menyetel lemonSize ke -1.
4. RESTART: Transisi kembali ke status SELECT.

Setelah Anda menangani semua update dan transisi antarstatus, pastikan untuk memanggil setViewElements() guna mengupdate UI berdasarkan status baru.

Tips: Pernyataan when adalah cara yang tepat untuk memeriksa beberapa kemungkinan kondisi dari satu nilai, misalnya lemonadeState.

Langkah 3: Implementasikan setViewElements()

Metode setViewElements() bertanggung jawab untuk mengupdate UI berdasarkan status aplikasi. Teks dan gambar harus diperbarui dengan nilai yang ditampilkan di bawah agar sesuai dengan lemonadeState.

SELECT:

• Teks: Click to select a lemon!
• Gambar: R.drawable.lemon_tree

SQUEEZE:

• Teks: Click to juice the lemon!
• Gambar: R.drawable.lemon_squeeze

DRINK:

• Teks: Click to drink your lemonade!
• Gambar: R.drawable.lemon_drink

RESTART:

• Teks: Click to start again!
• Gambar: R.drawable.lemon_restart

Tips: Kode awal sudah memiliki variabel untuk lemonImage saat Anda menetapkan pemroses di onCreate().

Kredit tambahan: Daripada membuat string hardcode di kode Kotlin, sebaiknya buat resource string nilai ini dalam strings.xml.

Cara menggunakan resource string

Di Android, hampir semuanya adalah resource. Menetapkan resource yang kemudian dapat Anda akses di aplikasi adalah bagian penting dari pengembangan Android.

Resource digunakan untuk apa pun mulai dari menentukan warna, gambar, tata letak, menu, dan nilai string. Manfaat dari resource ini adalah tidak ada yang di-hardcode. Semuanya ditetapkan dalam file resource ini, lalu bisa direferensikan di dalam kode aplikasi Anda. Cara paling sederhana dari resource ini (dan yang paling umum) adalah menggunakan resource string untuk memungkinkan teks yang dilokalkan dan fleksibel.

String atau teks statis bisa disimpan dalam file terpisah bernama strings.xml di subfolder values dari folder res.

Untuk setiap bagian teks yang ingin Anda tampilkan dalam aplikasi (yaitu, label tombol, atau teks di dalam TextView), Anda harus terlebih dahulu menentukan teks dalam file res/values/strings.xml. Setiap entri merupakan kunci (yang mewakili ID teks) dan nilai (teks itu sendiri). Misalnya, jika Anda ingin tombol menampilkan "Submit", tambahkan resource string berikut ke res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello!</string>
    <string name="submit_label">Submit</string>
</resources>

Untuk mengakses resource secara langsung dalam kode Anda, cukup gunakan metode getResources.getString() atau getString() untuk mengakses nilai berdasarkan ID resource, R.string.submit_label:

val submitText = getResources().getString(R.string.submit_label)

Untuk menetapkan teks secara langsung dari resource string ke TextView, Anda dapat memanggil setText() pada objek TextView, dan meneruskan ID resource.

val infoTextView: TextView = findViewById(R.id.info_textview)

infoTextView.setText(R.string.info_text)

Resource string juga dapat berisi karakter khusus untuk memformat teks. Misalnya, Anda mungkin memiliki resource string yang memungkinkan Anda menyisipkan bagian teks lainnya ke dalam string.

<string name="ingredient_tablespoon">%1$d tbsp of %2$s</string>

Dalam kode, Anda akan mengakses dan memformat resource string dengan meneruskan argumen.

getResources().getString(R.string.ingredient_tablespoon, 2, "cocoa powder")

Saat mendeklarasikan resource string, setiap argumen diberi nomor sesuai urutannya (1, 2, dll.) dan memiliki huruf untuk mengidentifikasi jenis (d untuk angka desimal, s untuk string, dll.). Argumen jenis yang benar dapat diteruskan ke panggilan ke getString().

2 tbsp of cocoa powder

Untuk mempelajari lebih lanjut, baca dokumentasi tentang resource string.

Catatan: Anda dapat melihat contoh resource string menggunakan argumen di aplikasi Lemonade dengan resource squeeze_count, yang diakses dalam metode showSnackbar() di MainActivity.

6. Menjalankan aplikasi

Setelah Anda membangun UI aplikasi dan menerapkan aktivitas utama, sekarang saatnya melihat hasil kerja keras Anda. Jalankan aplikasi menggunakan menu Run > Run ‘app' dan emulator akan diluncurkan.

Sekarang aplikasi seharusnya interaktif secara penuh dan Anda dapat mengetuk tampilan gambar untuk melakukan transisi antarstatus.

Saat lemon ditampilkan di layar, Anda juga dapat mencoba menekan lama (tekan dan tahan) ImageView untuk melihat snackbar di bagian bawah yang menunjukkan jumlah total perasan lemon. Luangkan waktu untuk menjalankan aplikasi melalui semua status beberapa kali. Kemudian, luangkan waktu untuk mengucapkan selamat atas kerja keras Anda!

Tips: Jika tidak memiliki perangkat virtual, Anda dapat membuatnya dengan mengikuti petunjuk ini di Membuat dan menjalankan aplikasi Android pertama Anda.

7. Petunjuk pengujian

Menguji aplikasi

Anda telah selesai menerapkan aplikasi Lemonade, tetapi dalam pengembangan software profesional, menulis kode jarang sekali menjadi langkah terakhir. Selain kode aplikasi, aplikasi berkualitas profesional juga menyertakan kode pengujian yang dijalankan untuk memverifikasi bahwa kode berfungsi seperti yang diharapkan dan bahwa perubahan kode tidak menyebabkan bug baru, suatu proses yang disebut pengujian otomatis. Meskipun mengajarkan pengujian otomatis di luar cakupan project ini, aplikasi Lemonade dipaketkan dengan beberapa pengujian untuk membantu Anda memverifikasi bahwa Anda menerapkan project dengan benar. Anda dapat menggunakan ini sebagai bentuk penilaian mandiri untuk melihat apakah Anda telah lulus semua persyaratan project dan apakah ada perubahan yang diperlukan untuk aplikasi Anda.

Apa sebenarnya yang dimaksud dengan "pengujian"? Pengujian hanyalah bagian dari kode yang disertakan dalam project Android Studio yang menjalankan bagian dari kode aplikasi Anda, dan bisa berupa "lulus" atau "gagal", bergantung pada apakah kode aplikasi Anda berperilaku seperti yang diharapkan.

Tips: Biasanya, pesan kegagalan uji akan bersifat khusus untuk fungsi pengujian. Dalam contoh di bawah ini, pengujian yang gagal akan memeriksa konten tampilan teks. Namun, jika Anda tidak yakin dengan arti pesan kegagalan uji, Anda dapat menempelkan sebagian error tersebut ke Google kapan saja. Kemungkinan, orang lain pernah mengajukan pertanyaan yang sama sebelumnya.

Jadi, di mana Anda dapat menemukan dan menjalankan pengujian aplikasi? Pengujian untuk aplikasi Lemonade dapat ditemukan di target pengujian. Target hanyalah istilah pengembangan software untuk koleksi class yang dipaketkan menjadi satu. Misalnya, aplikasi Lemonade ada di target yang disebut "app" sementara pengujian ada di target yang disebut "LemonadeTests". Meskipun target LemonadeTests dapat mengakses kode dari target aplikasi, keduanya benar-benar terpisah dan kode aplikasi tidak berisi kode pengujian apa pun.

Saat melihat file dalam tampilan "Android", target pengujian akan muncul dengan nama paket yang sama dengan aplikasi, tetapi dengan (androidTest) dalam tanda kurung.

Ada juga beberapa istilah kunci yang perlu diketahui saat merujuk pada kode pengujian.

• Test Suite - target yang mencakup semua kasus pengujian.
• Test Case - class yang terdiri dari masing-masing pengujian untuk fungsi terkait (aplikasi Lemonade hanya memiliki satu kasus pengujian tetapi aplikasi yang lebih besar sering kali memiliki lebih banyak pengujian).
• Test - Fungsi yang menguji satu hal tertentu.

Sebuah kasus pengujian (test case) dapat memiliki beberapa pengujian (test), dan rangkaian pengujian (test suite) project Anda dapat memiliki beberapa kasus pengujian (test case).

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.

8. Opsional: Bagikan aplikasi Anda

Setelah selesai menikmati bergelas-gelas Lemonade, ambil screenshot layar favorit Anda, dan bagikan di Twitter untuk menunjukkan hal-hal yang telah Anda pelajari. Tag @AndroidDev dan tambahkan hashtag #AndroidBasics.