Pendahuluan
Pada pertemuan minggu ke-6 mata kuliah Pemrograman Perangkat Bergerak kali ini, kita telah belajar tentang bahasa pemrograman Kotlin yang banyak digunakan sebagai bahasa pemrograman pengembangan aplikasi perangkat lunak Android. Setelah memahami terkait bahasa pemrograman Kotlin, sebagai latihan pada pertamuan kali ini kita diminta untuk membuat sebuah aplikasi kalkulator sederhana. Pada aplikasi ini akan menggunakan beberapa composable yang digunakan, seperti TextField(), Text(), dan Button().
Membuat Aplikasi Kalkulator Tip
Dalam membuat aplikasi kalkulator tip, kali ini kita akan tetap menggunakan Android Studio dalam pembuatannya. Kita akan menggunakan template Empty Activity yang sudah disediakan. Hal pertama yang akan dilakukan akan mirip dengan proyek sebelumnya, yaitu kita akan melakukan pengaturan awal pada template yang sudah ada.
- Membuka Android Studio dan memilih template "Empty Activity".
- Memilih level API minimum untuk aplikasi, disini kita akan memilih API 24 (Nougat).
- Setelah kode template dimuat kita akan mengubah struktur kode awal.
Disini kita akan menghapus beberapa bagian kode composable pada template yang sudah disediakan dan menyisakan bagian class MainActivity nya saja. Kita juga akan menghapus isi dari setContent pada class MainActivity, seperti berikut.
- Membuat variabel num1 dan num2 untuk menampung nilai bilangan yang diinputkan
Setelah melakukan pengaturan pada file proyek ini, hal pertama yang akan kita lakukan adalah membuat dua buah variabel untuk menampung bilangan pertama dan bilangan kedua yang nantinya akan digunakan untuk melakukan beberapa operasi matematika. Disini kita akan membuat variabel num1 untuk menampung bilangan pertama dan num2 untuk menampung bilangan kedua. Disini kita akan mendeklarasikan variabel tersebut dengan menggunakan var, kemudian dengan 'remember', dan mutableStateOf(). Pendeklarasian seperti itu akan membuat num1 dan num2 sebagai string kosong yang dapat berubah nilainya [mutableStateOf("")] yang memungkinkan variabel tersebut diingat nilainya diantara pembaruan UI oleh Composable ('by remember').
- Membuat tampilan form input menggunakan TextField().
Setelah membuat variabel untuk input pada aplikasi ini, selanjutnya kita akan membuat form input untuk kedua variabel tersebut. Disini kita akan menggunakan TextField() untuk membuat form tersebut. Kita akan membuat dua form input yang parameternya akan diisi sesuai dengan kode dibawah.
Berikut adalah penjelasan singkat untuk beberapa parameter pada TextField() :
- value : nilai yang akan ditampilkan dalam komponen tersebut.
- onValueChange : ketika nilai dalam komponen tersebut berubah karena interaksi, nilai dari variabel akan diperbarui dengan nilai baru ('it').
- modifier : menentukan bagaimana komponen tersebut akan ditata dalam tata letak.
- label : label yang akan ditampilkan di samping komponen, memberikan konteks untuk input yang diharapkan
- placeholder : teks yang akan ditampilkan sebagai petunjuk ketika komponen kosong.
- keyboardIOptions : menentukan opsi papan ketika yang akan ditampilkan ketika komponen mendapatkan interaksi yang kali ini jenis papan ketiknya adalah numerik.
- Membuat tombol operasi matematika dengan menggunakan Button().
Setelah membuat form input untuk bilangan, sekarang kita akan membuat empat buah tombol yang akan digunakan untuk melakukan operasi matematika, seperti tambah, kurang, kali, dan bagi. Disini kita akan menggunakan Button() untuk membuat tombolnya, kemudian untuk membuat tombol-tombol ini sejajar secara horizontal maka kita akan membuatnya di dalam lambda Row().
- Menambahkan logika sederhana pada tombol operasi matematika.
Lalu setelah tampilannya sudah terbentuk, kita akan menambahkan logika sederhana untuk operasi matematika pada aplikasi ini. Kita akan menambahkan logika sederhana tersebut pada tiap-tiap tombol yang sudah dibuat. Disini kita akan membuat val result yang nantinya akan digunakan sebagai variabel hasil untuk tiap-tiap operasi matematika. Karna bilangan yang diinputkan merupakan sebuah string, maka disini kita akan mengubah string tersebut ke tipe data double dengan menggunakan fungsi toDoubleOrNull() yang akan mengonversi nilai bilangan menjadi double namun jika gagal akan menjadi nilai null.
Pada variabel result untuk tiap-tiap tombol, akan kita sesuaikan operasi matematikanya misal pada tombol tambah, kurang, dan kali kita akan langsung melakukan operasi matematika antara bilangan pertama dan bilangan kedua. Namun untuk operasi bagi di sini ada sedikit pengecualian, disini kita akan membuat variabel baru dengan nama num2Value untuk mengonversi nilai dari num2 menjadi double. Hal ini dilakukan untuk memastikan kita tidak akan melakukan pembagian dengan nilai nol.
Berikut adalah Hasil dari aplikasi CalculatorTip :
Kode Sumber dari proyek CalculatorTip :
Selengkapnya kode sumber dapat diakses di Github
Comments
Post a Comment