Membuat aplikasi Dice Roller interaktif

1. Sebelum memulai

Dalam codelab ini, Anda akan membuat aplikasi Android Dice Roller tempat pengguna dapat mengklik Button di aplikasi tersebut untuk melempar dadu. Hasil lemparan dadu akan ditampilkan dalam TextView di layar.

Anda akan menggunakan Layout Editor di Android Studio untuk membuat tata letak aplikasi, lalu menulis kode Kotlin untuk peristiwa yang terjadi saat Button diklik.

Prasyarat

• Cara membuat dan menjalankan aplikasi "Hello, World!" (Halo, Dunia!) di Android Studio.
• Pemahaman tentang penggunaan TextViews dalam aplikasi.
• Cara mengubah atribut TextView di Layout Editor.
• Cara mengekstrak teks ke resource string untuk memudahkan penerjemahan aplikasi dan menggunakan kembali string tersebut.
• Dasar-dasar pemrograman Kotlin

Yang akan Anda pelajari

• Cara menambahkan Button ke aplikasi Android.
• Cara menambahkan perilaku saat Button diketuk di aplikasi.
• Cara membuka dan mengubah kode Activity untuk aplikasi.
• Cara menampilkan pesan Toast.
• Cara mengupdate konten TextView saat aplikasi sedang berjalan.

Yang akan Anda bangun

• Aplikasi Android Dice Roller yang memiliki Button untuk melempar dan mengupdate teks di layar menggunakan hasil lemparan dadu.

Yang Anda perlukan

• Komputer yang dilengkapi Android Studio.

Berikut ini tampilan aplikasi saat Anda menyelesaikan codelab ini.

2. Menyiapkan aplikasi

Membuat project Empty Activity

1. Jika sudah membuka project di Android Studio, buka File > New > New Project... untuk membuka layar Create New Project.
2. Di Create New Project, buat project Kotlin baru menggunakan template Empty Activity.
3. Panggil aplikasi "Dice Roller" dengan API level minimum 19 (KitKat).

4. Jalankan aplikasi baru dan seharusnya akan terlihat seperti ini.

3. Membuat tata letak aplikasi

Membuka Layout Editor

1. Di jendela Project, klik dua kali activity_main.xml (app > res > layout > activity_main.xml) untuk membukanya. Anda akan melihat Layout Editor hanya dengan TextView "Hello World" (Halo Dunia) di bagian tengah aplikasi.

Selanjutnya, Anda akan menambahkan Button ke aplikasi. Button adalah elemen antarmuka pengguna (UI) di Android yang dapat diketuk oleh pengguna untuk melakukan suatu tindakan.

Dalam tugas ini, tambahkan Button di bawah TextView "Hello World" (Halo Dunia). TextView dan Button akan berada di dalam ConstraintLayout yang merupakan jenis ViewGroup.

Jika ada Views dalam ViewGroup, Views dianggap sebagai turunan dari indukViewGroup. Dalam kasus aplikasi Anda, TextView dan Button akan dianggap sebagai turunan dari induk ConstraintLayout.

Tambahkan Button sebagai turunan dari ConstraintLayout yang ada di aplikasi Anda.

Menambahkan Tombol ke tata letak

1. Tarik Button dari Palette ke tampilan Design, sesuaikan posisi di bawah TextView "Hello World" (Halo Dunia).

2. Di bawah Palette di Component Tree, pastikan bahwa Button dan TextView sudah tercantum di bawah ConstraintLayout (sebagai turunan dari ConstraintLayout).
3. Perhatikan error bahwa Button tidak dibatasi. Karena Button berada di dalam ConstraintLayout, Anda harus menetapkan batasan vertikal dan horizontal untuk menyesuaikan posisinya.

Memosisikan Tombol

Pada langkah ini, Anda akan menambahkan batasan vertikal dari bagian atas Button ke bagian bawah TextView. Langkah ini akan menyesuaikan posisi Button di bawah TextView.

1. Pada tampilan Desain, di tepi atas Button, tekan dan tahan lingkaran putih yang memiliki batas biru. Tarik pointer, dan panah akan mengikuti pointer. Lepaskan pointer saat panah mencapai tepi bawah TextView "Hello World" (Halo Dunia). Cara ini menetapkan batasan tata letak, dan Button akan bergeser ke atas tepat di bawah TextView.

2. Lihat Attributes di sisi kanan Layout Editor.
3. Di Constraint Widget, perhatikan batasan tata letak baru yang ditetapkan di bagian bawah TextView, Atas → BottomOf textView (0dp). (0dp) berarti ada margin 0. Anda juga mengalami error karena ada batasan horizontal yang hilang.

4. Tambahkan batasan horizontal dari sisi kiri Button ke sisi kiri induk ConstraintLayout.
5. Ulangi di sisi kanan, hubungkan tepi kanan Button ke tepi kanan ConstraintLayout. Hasilnya akan terlihat seperti ini:

6. Dengan Button yang masih dipilih, Constraint Widget akan terlihat seperti ini. Perhatikan dua batasan tambahan yang telah ditambahkan: Start → StartOf parent (0dp) dan End → EndOf parent (0dp). Ini artinya Button dipusatkan secara horizontal di induknya, ConstraintLayout.

7. Jalankan aplikasi. Seharusnya aplikasi akan terlihat seperti screenshot di bawah. Anda dapat mengeklik Button, dan belum akan ada yang berubah. Mari kita lanjutkan!

Mengubah teks Tombol

Anda akan membuat beberapa perubahan UI lagi di Layout Editor.

Alih-alih memerintahkan label Button untuk menampilkan "Button", ubah label menjadi sesuatu yang menunjukkan tindakan yang akan dilakukan tombol tersebut: "Roll".

1. Di Layout Editor, dengan memilih Button, buka Attributes, ubah text menjadi Roll, lalu tekan tombol Enter (Return pada Mac).

2. Di Component Tree, segitiga peringatan berwarna oranye akan muncul di sebelah Button. Sebuah pesan akan muncul saat Anda mengarahkan pointer ke atas segitiga. Android Studio telah mendeteksi string hardcode ("Roll") di kode aplikasi dan menyarankan Anda untuk menggunakan resource string.

String hardcode akan membuat aplikasi menjadi lebih sulit untuk diterjemahkan ke bahasa lain dan lebih sulit untuk menggunakan kembali string di berbagai bagian aplikasi Anda. Untungnya, Android Studio menyediakan perbaikan otomatis untuk Anda.

3. Di Component Tree, klik segitiga berwarna oranye.

Pesan peringatan lengkap akan terbuka.

4. Di bagian bawah pesan, pada bagian Suggested Fix, klik tombol Fix. (Anda mungkin perlu men-scroll ke bawah.)
5. Dialog Extract Resource akan terbuka. Mengekstrak string berarti mengambil teks "Roll" dan membuat resource string yang disebut roll di strings.xml (app > res > values > strings.xml). Nilai default sudah benar. Jadi, Anda dapat mengklik OK.

6. Perhatikan bahwa pada Attributes, atribut text untuk Button sekarang menyatakan @string/roll yang mengacu ke resource yang baru saja Anda buat.

Dalam tampilan Design, Button harus tetap bertuliskan Roll di atasnya.

Menata gaya TextView

Ukuran font teks "Hello World!" (Halo Dunia!) sangat kecil, dan pesannya tidak sesuai dengan aplikasi Anda. Pada langkah ini, Anda akan mengganti pesan ukuran font teks "Hello, World!" (Halo, Dunia!) yang kecil menjadi angka yang menampilkan nilai yang dilempar, dan memperbesar font sehingga lebih mudah dilihat.

1. Di Design Editor, pilih TextView sehingga atributnya muncul di jendela Attributes.
2. Ubah textSize dari TextView menjadi 36sp sehingga ukuran font menjadi besar dan mudah dibaca. Anda mungkin perlu men-scroll untuk menemukan textSize.

3. Hapus atribut text dari TextView. Anda tidak perlu menampilkan apa pun di TextView sampai pengguna melempar dadu.

Namun, sebaiknya lihat beberapa teks di TextView saat Anda mengedit tata letak dan kode aplikasi. Untuk tujuan ini, Anda bisa menambahkan teks ke TextView yang hanya akan terlihat saat melakukan pratinjau tata letak, dan tidak akan terlihat saat aplikasi berjalan.

4. Pilih TextView di Component Tree.
5. Di bagian Common Attributes, cari atribut text, dan di bawahnya terdapat atribut text lain dengan ikon alat. Atribut text adalah atribut yang akan ditampilkan kepada pengguna saat aplikasi berjalan. Atribut text dengan ikon alat adalah atribut "tools text" yang disediakan bagi Anda sebagai developer.
6. Setel teks alat di TextView ke angka "1" (seolah-olah Anda mendapatkan lemparan dadu 1). Angka "1" hanya akan muncul di Design Editor dalam Android Studio, dan tidak akan muncul saat Anda menjalankan aplikasi di perangkat atau emulator yang sebenarnya.

Jika aplikasi sudah mengikuti praktik terbaik untuk meminta izin pada runtime, Anda tidak perlu melakukan perubahan apa pun pada aplikasi.

7. Lihat aplikasi Anda di pratinjau. Angka "1" ditampilkan.

8. Jalankan aplikasi Anda. Seperti inilah tampilan aplikasi saat dijalankan di emulator. Angka "1" tidak ditampilkan. Ini adalah perilaku yang benar.

Bagus, Anda sudah menyelesaikan perubahan tata letak!

Anda memiliki aplikasi yang dilengkapi dengan tombol. Namun, tidak akan terjadi apa-apa jika Anda mengetuk tombol itu. Untuk mengubahnya, Anda harus menulis beberapa kode Kotlin yang akan melempar dadu dan mengupdate layar saat tombol diketuk.

Untuk melakukan perubahan ini, Anda perlu sedikit lebih memahami pembuatan struktur aplikasi Android.

4. Pengantar Aktivitas

Activity menyediakan jendela tempat aplikasi Anda menggambar UI-nya. Biasanya, Activity menggunakan seluruh layar aplikasi yang sedang berjalan. Setiap aplikasi memiliki satu atau beberapa aktivitas. Aktivitas level atas atau pertama sering disebut MainActivity dan disediakan oleh template project. Misalnya, saat pengguna men-scroll daftar aplikasi di perangkat mereka dan mengetuk ikon aplikasi "Dice Roller", Sistem Android akan memulai MainActivity dari aplikasi.

Dalam kode MainActivity, Anda harus memberikan detail tata letak Activity dan cara pengguna berinteraksi dengannya.

• Di aplikasi Kartu Ulang Tahun, ada satu Activity yang menampilkan pesan dan gambar ulang tahun.
• Di aplikasi Dice Roller, ada satu Activity yang menampilkan tata letak TextView dan Button yang baru Anda buat.

Untuk aplikasi yang lebih rumit, mungkin akan ada beberapa layar dan lebih dari satu Activity. Setiap Activity memiliki tujuan tertentu.

Misalnya, di aplikasi galeri foto, Anda dapat memiliki Activity untuk menampilkan petak foto, Activity kedua untuk melihat foto individual, dan Activity ketiga untuk mengedit foto individual.

Membuka file MainActivity.kt

Anda akan menambahkan kode untuk merespons ketuk tombol di MainActivity. Untuk melakukannya dengan benar, Anda harus memahami lebih lanjut kode MainActivity yang sudah ada di aplikasi.

1. Pilih dan buka file MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt). Anda akan melihat dialog berikut ini. Jika Anda melihat import..., klik ... untuk meluaskan impor.

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

Anda tidak perlu memahami setiap kata dari kode di atas, tetapi Anda harus memiliki gambaran umum mengenai fungsi kode tersebut. Semakin sering Anda mengotak-atik kode Android, Anda akan semakin terbiasa dan semakin memahaminya.

2. Lihat kode Kotlin untuk class MainActivity yang diidentifikasi dengan kata kunci class, lalu namanya.

class MainActivity : AppCompatActivity() {
    ...
}

3. Perhatikan bahwa tidak ada fungsi main() di MainActivity Anda.

Sebelumnya, Anda telah mengetahui bahwa setiap program Kotlin harus memiliki fungsi main(). Aplikasi Android beroperasi dengan cara yang berbeda-beda. Saat aplikasi dibuka untuk pertama kalinya, sistem Android akan memanggil metode onCreate() dari MainActivity, bukan fungsi main().

4. Cari metode onCreate() yang terlihat seperti kode di bawah ini.

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

Anda akan mempelajari override di codelab selanjutnya (jadi, untuk saat ini Anda tidak perlu khawatir). Metode onCreate() lainnya menyiapkan MainActivity menggunakan kode dari impor dan dengan menyetel tata letak awal dengan setContentView().

5. Perhatikan baris yang diawali dengan import.

Android menyediakan framework dari berbagai class untuk mempermudah penulisan aplikasi Android, tetapi framework tetap perlu mengetahui dengan tepat class yang Anda maksud. Anda dapat menentukan class mana saja dalam framework yang akan digunakan dalam kode Anda menggunakan pernyataan import. Misalnya, class Button ditetapkan dalam android.widget.Button.

Mengaktifkan impor otomatis

Saat Anda menggunakan lebih banyak class, maka akan ada banyak pekerjaan yang harus diingat untuk menambahkan pernyataan import. Untungnya, Android Studio membantu Anda memilih impor yang benar saat menggunakan class yang disediakan oleh orang lain. Di langkah ini Anda akan mengonfigurasi Android Studio untuk menambahkan impor secara otomatis jika bisa, dan secara otomatis menghapus impor yang tidak terpakai dari kode Anda.

Di macOS, buka setelan dengan membuka File > New Project Settings > Preferences for New Projects... Bentangkan Other Settings > Auto Import. Di bagian Java dan Kotlin, pastikan opsi Add unambiguous imports on the fly dan Optimize imports on the fly (for current project) dicentang. Perhatikan bahwa ada dua kotak centang di setiap bagian. Simpan perubahan dan tutup setelan dengan menekan OK.

Di Windows, buka setelan dengan membuka File > Settings > Editor > General > Auto Import. Di bagian Java dan Kotlin, pastikan opsi Add unambiguous imports on the fly dan Optimize imports on the fly (for current project) dicentang. Perhatikan bahwa ada dua kotak centang di setiap bagian. Simpan perubahan dan tutup setelan dengan menekan OK.

Setelan unambiguous imports memberi tahu Android Studio untuk menambahkan pernyataan impor secara otomatis, selama dapat menentukan opsi mana yang akan digunakan. Setelan optimize imports memberi tahu Android Studio untuk menghapus impor yang tidak digunakan oleh kode Anda.

5. Membuat Tombol menjadi interaktif

Setelah mengetahui MainActivity lebih lanjut, Anda akan memodifikasi aplikasi sehingga mengklik Button akan memunculkan sesuatu di layar.

Tampilkan pesan saat Tombol diklik

Pada langkah ini, Anda akan menentukan bahwa saat tombol diklik, pesan singkat akan muncul di bagian bawah layar.

1. Tambahkan kode berikut ke metode onCreate() setelah panggilan setContentView(). Metode findViewById() menemukan Button dalam tata letak. R.id.button adalah ID resource untuk Button yang merupakan ID unik untuknya.

val rollButton: Button = findViewById(R.id.button)

Kode menyimpan referensi ke objek Button dalam variabel yang disebut rollButton, bukan objek Button itu sendiri.

Metode onCreate() sekarang akan terlihat seperti ini:

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}

2. Pastikan Android Studio menambahkan pernyataan import untuk Button secara otomatis. Perhatikan bahwa sekarang ada 3 pernyataan impor.

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

Selanjutnya, Anda perlu mengaitkan kode dengan Button sehingga kode dapat dijalankan saat Button diketuk. click listener adalah beberapa kode untuk tindakan yang harus dilakukan jika terjadi ketukan atau klik. Anda dapat menganggapnya sebagai kode yang hanya berdiam diri, "mendengarkan" agar pengguna mengklik, dalam hal ini, pada Button.

3. Gunakan objek rollButton dan setel click listener pada objek tersebut dengan memanggil metode setOnClickListener(). Anda sebenarnya akan menggunakan tanda kurung kurawal setelah nama metode, bukan tanda kurung. Ini adalah sintaks khusus untuk mendeklarasikan Lambda yang akan Anda pelajari lebih lanjut di codelab selanjutnya.

Informasi yang perlu Anda ketahui sekarang adalah informasi yang ada dalam kurung kurawal, Anda memberikan petunjuk untuk tindakan yang akan muncul bila tombol diketuk. Anda akan meminta aplikasi menampilkan Toast yang merupakan pesan singkat pada langkah berikutnya.

rollButton.setOnClickListener {
}

Saat Anda mengetik, Android Studio dapat menampilkan beberapa saran. Untuk kasus ini, pilih opsi setOnClickListener {...}.

Dalam kurung kurawal, masukkan petunjuk untuk tindakan yang akan muncul saat tombol diketuk. Untuk saat ini, aplikasi Anda akan menampilkan Toast yang merupakan pesan singkat yang akan dilihat oleh pengguna.

4. Buat Toast dengan teks "Dice Rolled!" dengan memanggil Toast.makeText().

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. Lalu, beri tahu Toast untuk menampilkan dirinya dengan memanggil metode show().

toast.show()

Seperti inilah tampilan class MainActivity yang telah diupdate; pernyataan package dan import masih berada di bagian atas file:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

Anda dapat menggabungkan dua baris di click listener menjadi satu baris tanpa variabel. Ini adalah pola umum yang juga mungkin Anda temukan di kode lain.

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. Jalankan aplikasi dan klik tombol Roll. Balon pesan akan muncul di bagian bawah layar dan menghilang setelah beberapa saat.

Hore! Pesan akan muncul saat tombol diklik. Ini adalah pertama kalinya Anda menulis kode Kotlin untuk Android!

Mengupdate TextView saat Tombol diklik

Alih-alih menampilkan pesan Toast sementara, Anda akan menulis kode untuk mengupdate TextView di layar saat tombol Roll diklik.

1. Kembali ke activity_main.xml (app > res > layout >activity_main.xml)
2. Klik TextView.
3. Perhatikan id adalah textView.

4. Buka MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)
5. Hapus baris kode yang membuat dan menampilkan Toast.

rollButton.setOnClickListener {

}

6. Di tempat itu juga, buat variabel baru bernama resultTextView untuk menyimpan TextView.
7. Gunakan findViewById() untuk menemukan textView di tata letak menggunakan ID-nya, dan simpan referensi ke tata letak tersebut.

val resultTextView: TextView = findViewById(R.id.textView)

8. Setel teks pada resultTextView menjadi "6" dalam tanda petik.

resultTextView.text = "6"

Cara ini mirip dengan cara yang Anda lakukan dengan menyetel text di Attributes, tetapi sekarang ada di kode Anda sehingga teks harus berada di dalam tanda kutip ganda. Menyetel teks ini secara eksplisit berarti bahwa saat ini TextView akan selalu menampilkan angka 6. Anda akan menambahkan kode untuk melempar dadu dan menampilkan nilai yang berbeda di tugas berikutnya.

Berikut adalah tampilan class MainActivity:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. Jalankan aplikasi. Klik tombol. TextView akan diupdate menjadi "6".

6. Menambahkan logika pelemparan dadu

Satu-satunya yang tidak ada sebenarnya adalah pelemparan dadu. Anda dapat menggunakan kembali class Dice dari codelab sebelumnya yang menangani logika untuk melempar dadu.

Menambahkan class Dadu

1. Setelah kurung kurawal terakhir di class MainActivity, buat class Dice dengan metode roll().

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. Perhatikan bahwa Android Studio dapat menggarisbawahi numSides dengan garis abu-abu bergelombang. (Mungkin perlu beberapa saat untuk muncul.)
3. Arahkan pointer ke numSides dan jendela pop-up yang menampilkan Property ‘numSides' could be private.

Menandai numSides sebagai private akan membuatnya hanya dapat diakses dalam class Dice. Karena satu-satunya kode yang akan menggunakan numSides ada di dalam class Dice, tidak masalah untuk membuat argumen ini private untuk class Dice. Anda akan mempelajari private lebih lanjut versus variabel public di unit berikutnya.

4. Lanjutkan dan buat perbaikan yang disarankan dari Android Studio dengan mengeklik Jadikan 'numSides' bersifat 'private'.

Membuat metode rollDice()

Setelah menambahkan class Dice ke aplikasi, Anda akan mengupdate MainActivity agar dapat menggunakannya. Untuk mengatur kode Anda dengan lebih baik, letakkan semua logika pelemparan dadu ke dalam satu fungsi.

1. Ganti kode di click listener yang menyetel teks ke angka "6" dengan panggilan ke rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. Karena rollDice() belum ditetapkan, Android Studio menandai kesalahan dan menampilkan rollDice() dalam warna merah.
3. Jika Anda mengarahkan pointer ke rollDice(), Android Studio akan menampilkan masalah dan beberapa kemungkinan solusi.

4. Klik More actions... yang menampilkan menu. Android Studio menawarkan lebih banyak opsi untuk membantu pekerjaan Anda

5. Pilih Create function ‘rollDice'. Android Studio membuat definisi kosong untuk fungsi di dalam MainActivity.

private fun rollDice() {
    TODO("Not yet implemented")
}

Membuat instance objek Dadu baru

Pada langkah ini, Anda akan membuat metode rollDice() untuk membuat dan menjalankan pelemparan, lalu menampilkan hasilnya di TextView.

1. Di dalam rollDice(), hapus panggilan TODO().
2. Tambahkan kode untuk membuat dadu dengan 6 sisi.

val dice = Dice(6)

3. Lempar dadu dengan memanggil metode roll(), lalu simpan hasilnya di variabel yang disebut diceRoll.

val diceRoll = dice.roll()

4. Cari TextView dengan memanggil findViewById().

val resultTextView: TextView = findViewById(R.id.textView)

Variabel diceRoll berupa angka, tetapi TextView menggunakan teks. Anda dapat menggunakan metode toString() di diceRoll untuk mengonversinya menjadi string.

5. Konversikan diceRoll ke string dan gunakan untuk mengupdate teks resultTextView.

resultTextView.text = diceRoll.toString()

Seperti inilah tampilan metode rollDice():

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

6. Jalankan aplikasi Anda. Hasil pencariannya seharusnya berubah ke nilai lain selain 6! Karena merupakan bilangan acak dari 1 hingga 6, nilai 6 mungkin juga terkadang muncul.

Hore, Anda keren!

7. Menerapkan praktik coding yang baik

Wajar saja kalau kodenya terlihat sedikit berantakan setelah Anda mengubah bagian di sana-sini agar aplikasi berfungsi. Namun, sebelum Anda berhenti menulis kode, ada baiknya kalau Anda merapikan kodenya terlebih dahulu. Kemudian aplikasi akan berada dalam kondisi yang baik dan lebih mudah untuk dikelola di masa mendatang.

Ini adalah kebiasaan yang dipraktikkan oleh para developer Android profesional saat menulis kodenya.

Panduan Gaya Android

Saat Anda bekerja dalam tim, sebaiknya anggota tim menulis kode dengan cara yang sama sehingga penulisan kodenya lebih konsisten. Itulah sebabnya Android memiliki Panduan Gaya tentang cara menulis kode Android — konvensi penamaan, pemformatan, dan praktik baik lainnya untuk diikuti. Sesuai dengan panduan ini, saat Anda menulis kode Android: Panduan Gaya Kotlin untuk Developer Android.

Di bawah ini adalah beberapa cara untuk mematuhi panduan gaya.

Membersihkan kode

Memadatkan kode

Anda dapat meringkas kode dengan memadatkannya ke baris yang lebih pendek. Misalnya, berikut ini kode yang menetapkan click listener pada Button.

rollButton.setOnClickListener {
    rollDice()
}

Karena petunjuk untuk click listener hanya sepanjang 1 baris, Anda dapat meringkas panggilan metode rollDice() dan kurung kurawal menjadi hanya satu baris. Seperti inilah tampilannya. Satu baris, bukan tiga baris.

rollButton.setOnClickListener { rollDice() }

Memformat ulang kode

Sekarang Anda akan memformat ulang kode untuk memastikannya mengikuti konvensi pemformatan kode yang disarankan untuk Android.

1. Di class MainActivity.kt, pilih semua teks dalam file dengan pintasan keyboard Control+A di Windows (atau Command+A di Mac). Atau, Anda dapat membuka menu di Android Studio Edit > Select All.
2. Dengan semua teks dalam file yang dipilih, buka menu Android Studio Kode > Reformat Code atau gunakan pintasan keyboard Ctrl+Alt+L (atau Command+Option+L di Mac).

Tindakan tersebut akan mengupdate pemformatan kode Anda, seperti spasi kosong, indentasi, dan lainnya. Anda mungkin tidak melihat perubahan apa pun, dan ini hal yang bagus. Kode Anda sudah diformat dengan benar!

Memberikan komentar pada kode Anda

Tambahkan beberapa komentar pada kode untuk menjelaskan peristiwa yang terjadi dalam kode yang Anda tulis. Karena kode semakin rumit, penting juga untuk memperhatikan alasan Anda menulis kode agar berfungsi seperti yang Anda lakukan. Jika Anda kembali ke kode tersebut nanti untuk melakukan perubahan, apa yang dilakukan oleh kode tersebut mungkin masih jelas, tetapi Anda mungkin tidak ingat mengapa Anda menulis seperti itu.

Menambahkan komentar untuk setiap class (MainActivity dan Dice adalah satu-satunya class yang Anda miliki di aplikasi) dan setiap metode yang Anda tulis. Gunakan simbol /** dan */ di awal dan akhir komentar untuk memberi tahu sistem bahwa ini bukan kode. Baris ini akan diabaikan saat sistem menjalankan kode.

Contoh komentar pada class:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

Contoh komentar pada metode:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

Dalam metode, Anda bebas menambahkan komentar jika akan membantu pembaca kode. Ingatlah bahwa Anda dapat menggunakan simbol // di awal komentar. Semuanya setelah simbol // pada baris akan dianggap sebagai komentar.

Contoh 2 komentar dalam metode:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

1. Lanjutkan dan luangkan waktu untuk menambahkan komentar ke kode Anda.
2. Dengan semua perubahan pada komentar dan pemformatan ini, sebaiknya jalankan lagi aplikasi Anda untuk memastikan bahwa aplikasi masih berfungsi sesuai harapan.

Lihat kode solusi satu cara yang dapat Anda lakukan untuk memberi komentar pada kode.

8. Kode solusi

Kode solusi untuk codelab ini berada dalam project dan modul yang ditampilkan di bawah ini.

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 mem-build dan menjalankan aplikasi. Pastikan aplikasi di-build seperti yang diharapkan.

9. Ringkasan

• Tambahkan Button di aplikasi Android menggunakan Layout Editor.
• Ubah class MainActivity.kt untuk menambahkan perilaku interaktif ke aplikasi.
• Munculkan pesan Toast sebagai solusi sementara untuk memverifikasi bahwa Anda berada di jalur yang benar.
• Setel on-click listener untuk Button yang menggunakan setOnClickListener() guna menambahkan perilaku saat Button diklik.
• Saat aplikasi berjalan, Anda dapat mengupdate layar dengan memanggil metode pada TextView, Button, atau elemen UI lainnya dalam tata letak.
• Beri komentar pada kode Anda untuk membantu orang lain yang membaca kode tersebut memahami pendekatan Anda.
• Format ulang kode dan bersihkan kode.

10. Mempelajari lebih lanjut

• Kosakata Dasar-Dasar Android di Kotlin
• Class Button
• Class Toast
• Class TextView
• Panduan Gaya Kotlin untuk Developer Android

11. Berlatih sendiri

Lakukan hal berikut:

1. Tambahkan dadu lain ke aplikasi. Mengeklik tombol Lempar akan melemparkan 2 dadu. Hasilnya akan ditampilkan dalam 2 TextViews yang berbeda di layar.

Periksa hasil kerja Anda:

Aplikasi yang sudah selesai harus berjalan tanpa error dan menampilkan dua dadu di aplikasi.