Tugas 6 PPB

April 08, 2024

TUGAS 6 PPB

SIMPLE CALCULATOR

Nama: Muhammad Lintang Panjerino

NRP: 5025201045

Kelas: PPB I

Tahun: 2024

Link Github: Tugas 6 - Simple Calculator

Pada Tugas 6 PPB kali ini, diberikan tugas untuk membuat proyek berupa aplikasi kalkulator sederhana dengan menggunakan Jetpack Compose pada Android Studio. Aplikasi kalkulator sederhana ini memiliki 4 operasi yang bisa dijalankan, yaitu operasi tambah (addition), kurang (subtraction), kali (multiplication), dan bagi (division). Proyek ini bertujuan untuk mempelajari lebih dalam tentang konsep Composable, Text Field, Button, Text, Row, Column, dan Toast pada Jetpack Compose. Selain itu, proyek ini juga mencakup implementasi tentang materi Modifier, Spacer, remember, Context, dan Arrangement.

Untuk memulai pengerjaan proyek, langkah awal yang dilakukan adalah membuat proyek baru. Pada Android Studio, pilih "New Project" > pilih "Phone and Tablet" > pilih "Empty Activity" > pilih "Next". Kemudian pada window Empty Activity isi nama aplikasi yang akan dibuat, contohnya pada proyek ini judul aplikasi adalah "Simple Calculator" dengan Minimum SDK berupa API 24 (Nougat).

Pada file MainActivity.kt, hapus fungsi Greeting, pemanggilan fungsi Greeting, dan preview fungsi Greeting sehingga hanya menyisakan fungsi onCreate dengan lambda setContent yang kosong. Selain itu, hapus juga komponen import yang tidak dibutuhkan. Kemudian, buat fungsi baru bernama SimpleCalculator yang diberi anotasi Composable. Kemudian panggil fungsi tersebut di dalam lambda setContent yang ada pada fungsi onCreate.

Secara keseluruhan, aplikasi kalkulator sederhana ini dibagi menjadi 2 bagian besar, yaitu text field untuk tempat mengisi operand dan empat tombol untuk operasi matematika (tambah, kurang, kali, dan bagi). Semua bagian ini berada di dalam fungsi SimpleCalculator.

Pada bagian pertama, membuat dua operand yang akan dioperasikan menggunakan operasi dasar matematika. Caranya adalah dengan membuat dua variabel dengan nama variabel num1 dan num2. Kedua variabel tersebut masing-masing menggunakan by remember yang berisi mutableStateOf dengan value string "0". Setelah itu, membuat sebuah kolom dengan memanggil fungsi Column yang kemudian di dalamnya diisi dengan dua text field untuk operand 1 dan operand 2. Pembuatan text field untuk operand 1 dan operand 2 memerlukan pemanggilan fungsi TextField yang di dalamnya terdapat properti value dan onValueChane. Pada text field operand 1, nilai value diisi oleh variabel num1 dan nilai onValueChange diisi dengan nilai composable num1 = it. Sedangkan pada text field operand 2, nilai value diisi oleh variabel num2 dan nilai onValueChange diisi dengan nilai composable num2 = it.
Pada bagian kedua, buat sebuah baris dengan menggunakan fungsi Row yang digunakan sebagai kontainer dari keempat tombol operator. Untuk membuat tombol operasi penjumlahan, panggil fungsi Button di mana isi dari button tersebut diisi oleh fungsi Text dengan isi teks yang disesuaikan dengan operasi matematika yang akan digunakan -> "Add" untuk penjumlahan, "Sub" untuk pengurangan, "Mul" untuk perkalian, dan "Div" untuk pembagian. Di fungsi Button, terdapat properti fungsi onClick yang dapat melakukan serangkaian perintah ketika tombol tersebut diklik. Di dalam fungsi onClick tersebut diisi oleh variabel result untuk operasi matematika dan Toast sebagai hasil operasi matematika yang akan ditampilkan. Variabel result diisi oleh operasi matematika yang dapat ditulis sebagai berikut num1.toInt() [tanda_baca] num2.toInt(). Fungsi toInt() digunakan untuk mengubah tipe data dari operand yang sebelumnya string menjadi tipe data integer, sedangkan isi tanda_baca disesuaikan dengan operasi matematika terkait -> (+) untuk penjumlahan, (-) untuk pengurangan, (*) untuk perkalian, dan (/) untuk pembagian. Untuk memberikan jarak di antara tombol operator, maka perlu memanggil fungsi Spacer dengan ukuran 20 dp.

Bagian 1

Bagian 2

Supaya tampilan maupun tata letak dari text field operand dan tombol operator terlihat lebih baik, ada beberapa hal yang perlu ditambahkan. Pada fungsi TextField, tambahkan modifier dengan nilai Modifier.fillMaxWidth() agar text field operand dapat mengisi dan memenuhi lebar layar. Selain itu, pada properti fungsi Row, tambahkan modifier dan horizontalArrangement. Penambahan modifier dengan nilai Modifier.fillMaxWidth() digunakan agar text field operand dapat mengisi dan memenuhi lebar layar, sedangkan penambahan horizontalArrangement dengan nilai Arrangement.SpaceBetween digunakan untuk mengatur jarak antar tombol menjadi sama rata.