Tugas Pertemuan 4 PPB - Membuat aplikasi Dice Roller interaktif

Nama	Akmal Sulthon Fathulloh
NRP	5025211047
Kelas	PPB - D

Pada pertemuan kali ini, kita diminta untuk membuat aplikasi Dice Roller interaktif menggunakan Jetpack Compose. Dalam mengerjakan ini, saya mengacu pada dokumentasi Codelabs Membuat aplikasi Dice Roller interaktif. Berikut adalah dokumentasi dan hasil pekerjaan yang telah dibuat.

Restrukturisasi sample code

Kita perlu mengubah beberapa sintaks dari sample code untuk membuat tampilan gambar dadu dan tombol untuk melemparnya. Kita akan menyusun fungsi composable untuk mencerminkan arsitektur ini. Hapus fungsi GreetingPreview() dan buat fungsi DiceWithButtonAndImage() dengan anotasi @Composable. Fungsi composable ini mewakili komponen UI tata letak dan juga menampung logika klik tombol dan tampilan gambar. Kemudian, hapus fungsi Greeting(name: String, modifier: Modifier = Modifier), dan buat fungsi DiceRollerApp() dengan anotasi @Preview dan @Composable. Aplikasi ini hanya terdiri dari tombol dan gambar. Jadi, anggap fungsi composable ini sebagai aplikasi itu sendiri. Itulah alasannya fungsi ini disebut fungsi DiceRollerApp().

	@Preview
	@Composable
	fun DiceRollerApp() {
	}
	@Composable
	fun DiceWithButtonAndImage() {
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Karena fungsi Greeting() dihilangkan, kita perlu menghapus kode dalam lambda setContent{} dalam fungsi onCreate(). Gantikan dengan DiceRollerTheme{}, dan di dalamnya panggil lagi fungsi DiceRollerApp().

	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContent {
	DiceRollerTheme {
	DiceRollerApp()
	}
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Dalam fungsi DiceRollerApp(), kita akan menambahkan fungsi DiceWithButtonAndImage().

	@Preview
	@Composable
	fun DiceRollerApp() {
	DiceWithButtonAndImage()
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Sekarang, dalam fungsi DiceWithButtonAndImage(), kita akan menambahkan modifier untuk menata tata letak komponen sebagai berikut.

	DiceWithButtonAndImage(modifier = Modifier
	.fillMaxSize()
	.wrapContentSize(Alignment.Center)
	)

view raw MainActivity.kt hosted with ❤ by GitHub

Membuat layout vertikal

Dalam Compose, layout vertikal dapat dibuat dengan menggunakan fungsi Column(). Fungsi ini menerima parameter modifier untuk menata tata letak komponen.

	fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
	Column (
	modifier = modifier,
	horizontalAlignment = Alignment.CenterHorizontally
	) {}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Menambahkan tombol dan gambar

Dalam file res/values/strings.xml, tambahkan string dan atur value-nya menjadi Roll.

<string name="roll">Roll</string>

view raw strings.xml hosted with ❤ by GitHub

Di badan lambda Column(), tambahkan fungsi Button(), dan tambah fungsi Text() di dalamnya.

	Column(
	modifier = modifier,
	horizontalAlignment = Alignment.CenterHorizontally
	) {
	Button(onClick = { /*TODO*/ }) {
	Text(stringResource(R.string.roll))
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Untuk menambahkan aset gambar, pada Android Studio, klik View > Tool Windows > Resource Manager. Klik + > Import Drawables untuk membuka file browser. Pilih gambar yang ingin diimpor dan upload. Kemudian, klik Next dan Import. Tambahkan composable Image sebagai berikut.

	Image(
	painter = painterResource(R.drawable.dice_1),
	contentDescription = "1"
	)

view raw MainActivity.kt hosted with ❤ by GitHub

Membuat logic kode

Lemparan dadu bersifat acak. Untuk menunjukkan hal itu dalam kode, kita perlu menggunakan sintaksis yang benar untuk menghasilkan angka acak. Di Kotlin, kita dapat menggunakan metode random() pada rentang nomor. Dalam isi lambda onClick, tetapkan variabel result ke rentang antara 1 hingga 6, lalu panggil metode random() pada rentang tersebut. Ingat bahwa dalam Kotlin, rentang ditentukan oleh dua titik antara angka pertama dalam rentang dan angka terakhir dalam rentang.

	fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
	var result = 1
	Column(
	modifier = modifier,
	horizontalAlignment = Alignment.CenterHorizontally
	) {
	Image(
	painter = painterResource(R.drawable.dice_1),
	contentDescription = "1"
	)
	Spacer(modifier = Modifier.height(16.dp))
	Button(onClick = { result = (1..6).random() }) {
	Text(stringResource(R.string.roll))
	}
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Berikut adalah hasil running aplikasi pada Android Virtual Device.

Modifikasi

Saya melakukan beberapa modifikasi dan penyesuaian pada kode sebelumnya. Berikut adalah perubahan yang saya lakukan.

• Mengubah warna drawable dadu menjadi putih dengan mengedit file XML-nya
• Mengubah warna latar belakang aplikasi
• Mengubah warna button
• Menambahkan transisi ketika dadu di-roll
• Menambahkan teks deskripsi hasil rolling dadu

Berikut adalah hasil running aplikasi dari kode yang telah saya modifikasi.

Video Presentasi

Berikut adalah video presentasi demonstrasi aplikasi yang telah saya buat.

Kode Sumber

Kode sumber dapat dilihat pada repositori GitHub berikut.

Referensi

https://kuliahppb.blogspot.com/2024/03/komponen-button.html
https://developer.android.com/codelabs/basic-android-kotlin-compose-build-a-dice-roller-app