Membuat Aplikasi Kalkulator Interaktif dengan Kotlin dan Jetpack Compose

Nama     : Iftala Zahri Sukmana
NRP       : 5025221002
Kelas     : H
Link GitHub    : https://github.com/ifzahri/ppb/tree/main/Calculator

Persiapan

Sebelum mulai, pastikan kamu sudah menginstal Android Studio versi terbaru dan telah membuat proyek Android baru dengan dukungan Jetpack Compose. Selanjutnya, kita siap untuk memulai coding!

Struktur Aplikasi

Kalkulator kita akan memiliki komponen-komponen berikut:

  • Dua TextField untuk input nilai A dan B
  • Empat tombol untuk operasi: Tambah, Kurang, Kali, dan Bagi
  • Area untuk menampilkan hasil perhitungan

Implementasi Kode

MainActivity.kt

Pertama, mari kita buat file MainActivity.kt yang akan menjadi pusat aplikasi kita:

package com.example.simplecalculator

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CalculatorApp()
        }
    }
}

Komponen Utama Aplikasi Kalkulator

Selanjutnya, kita buat fungsi CalculatorApp() yang akan menampilkan UI utama aplikasi:

@Composable
fun CalculatorApp() {
    var valueA by remember { mutableStateOf("") }
    var valueB by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text(
                text = "Kalkulator Sederhana",
                fontSize = 24.sp,
                modifier = Modifier.padding(bottom = 24.dp)
            )

            TextField(
                value = valueA,
                onValueChange = { valueA = it },
                label = { Text("Nilai A") },
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                modifier = Modifier.fillMaxWidth()
            )

            TextField(
                value = valueB,
                onValueChange = { valueB = it },
                label = { Text("Nilai B") },
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                modifier = Modifier.fillMaxWidth()
            )

            Text(
                text = "Hasil: $result",
                fontSize = 20.sp,
                modifier = Modifier.padding(vertical = 16.dp)
            )

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                AddButton(valueA, valueB) { result = it }
                SubButton(valueA, valueB) { result = it }
            }

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                MulButton(valueA, valueB) { result = it }
                DivButton(valueA, valueB) { result = it }
            }
        }
    }
}

Implementasi Tombol Operasi

Sekarang kita buat empat fungsi Composable untuk setiap tombol operasi:

@Composable
fun AddButton(valueA: String, valueB: String, onResult: (String) -> Unit) {
    Button(
        onClick = {
            try {
                val a = valueA.toDouble()
                val b = valueB.toDouble()
                onResult((a + b).toString())
            } catch (e: NumberFormatException) {
                onResult("Input tidak valid")
            }
        },
        modifier = Modifier.padding(8.dp)
    ) {
        Text(text = "+")
    }
}

@Composable
fun SubButton(valueA: String, valueB: String, onResult: (String) -> Unit) {
    Button(
        onClick = {
            try {
                val a = valueA.toDouble()
                val b = valueB.toDouble()
                onResult((a - b).toString())
            } catch (e: NumberFormatException) {
                onResult("Input tidak valid")
            }
        },
        modifier = Modifier.padding(8.dp)
    ) {
        Text(text = "-")
    }
}

@Composable
fun MulButton(valueA: String, valueB: String, onResult: (String) -> Unit) {
    Button(
        onClick = {
            try {
                val a = valueA.toDouble()
                val b = valueB.toDouble()
                onResult((a * b).toString())
            } catch (e: NumberFormatException) {
                onResult("Input tidak valid")
            }
        },
        modifier = Modifier.padding(8.dp)
    ) {
        Text(text = "×")
    }
}

@Composable
fun DivButton(valueA: String, valueB: String, onResult: (String) -> Unit) {
    Button(
        onClick = {
            try {
                val a = valueA.toDouble()
                val b = valueB.toDouble()
                if (b == 0.0) {
                    onResult("Tidak bisa dibagi dengan nol")
                } else {
                    onResult((a / b).toString())
                }
            } catch (e: NumberFormatException) {
                onResult("Input tidak valid")
            }
        },
        modifier = Modifier.padding(8.dp)
    ) {
        Text(text = "÷")
    }
}

Penjelasan Kode

State Management

Dalam Jetpack Compose, kita menggunakan mutableStateOf untuk mengelola state aplikasi. Kita membuat tiga state:

  • valueA: untuk menyimpan input pertama
  • valueB: untuk menyimpan input kedua
  • result: untuk menyimpan hasil perhitungan
var valueA by remember { mutableStateOf("") }
var valueB by remember { mutableStateOf("") }
var result by remember { mutableStateOf("") }

Penanganan Input

Setiap TextField terhubung ke state terkait melalui parameter value dan onValueChange:

TextField(
    value = valueA,
    onValueChange = { valueA = it },
    label = { Text("Nilai A") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    modifier = Modifier.fillMaxWidth()
)

Kita juga mengatur keyboardType ke KeyboardType.Number agar keyboard numerik ditampilkan saat pengguna menekan TextField.

Operasi Matematika

Setiap tombol operasi memiliki logika yang serupa:

  1. Mengambil nilai dari valueA dan valueB
  2. Mengkonversi string ke double
  3. Melakukan operasi matematika
  4. Mengembalikan hasil ke state result
  5. Menangani kesalahan (seperti input tidak valid atau pembagian dengan nol)

Contoh untuk tombol tambah:

@Composable
fun AddButton(valueA: String, valueB: String, onResult: (String) -> Unit) {
    Button(
        onClick = {
            try {
                val a = valueA.toDouble()
                val b = valueB.toDouble()
                onResult((a + b).toString())
            } catch (e: NumberFormatException) {
                onResult("Input tidak valid")
            }
        },
        modifier = Modifier.padding(8.dp)
    ) {
        Text(text = "+")
    }
}

Konfigurasi Gradle

Jangan lupa untuk mengatur build.gradle agar mendukung Jetpack Compose:

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.example.simplecalculator'
    compileSdk 34

    defaultConfig {
        applicationId "com.example.simplecalculator"
        minSdk 24
        targetSdk 34
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.4.3'
    }
    packaging {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.10.1'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
    implementation 'androidx.activity:activity-compose:1.7.2'
    implementation platform('androidx.compose:compose-bom:2023.03.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
    // ... dependencies lainnya
}


Hasil Akhir

Setelah mengimplementasikan semua kode di atas, kamu akan memiliki aplikasi kalkulator interaktif yang berfungsi penuh dengan tampilan bersih dan modern. Aplikasi ini memungkinkan pengguna untuk:

  1. Memasukkan dua angka (A dan B)
  2. Melakukan operasi penjumlahan, pengurangan, perkalian, dan pembagian
  3. Melihat hasil perhitungan dengan cepat
  4. Mendapatkan pesan kesalahan jika input tidak valid atau mencoba membagi dengan no



Komentar

Posting Komentar

Postingan populer dari blog ini

Aplikasi Starbucks Clone dengan Android Studio

Gambar
Nama     : Iftala Zahri Sukmana NRP       : 5025221002 Kelas     : G Link GitHub  :  https://github.com/ifzahri/ppb/tree/main/starbucks Aplikasi ini akan memiliki fitur lengkap mulai dari menu pemesanan, keranjang belanja, hingga profil pengguna. 🎯 Fitur Utama Aplikasi Aplikasi Starbucks Clone yang kita buat memiliki empat halaman utama dengan berbagai fitur menarik: 1. Halaman Beranda (Home) Banner selamat datang dengan gradient warna khas Starbucks Bagian "Quick Order" untuk pemesanan cepat Daftar produk unggulan dengan tombol "Add to Cart" Desain card modern dengan elevation yang tepat 2. Halaman Menu Filter kategori produk (All, Coffee, Tea, Frappuccino, Food) Daftar lengkap menu dengan deskripsi dan harga Tombol "Add" untuk menambahkan item ke keranjang UI yang responsif dan mudah digunakan 3. Halaman Keranjang (Cart) Daftar semua item yang dipilih dengan jumlahnya Fitur tambah/kurang jumlah item Penghitungan total ...
Baca selengkapnya

Membuat Login Form Elegan dengan Jetpack Compose di Android Studio

Nama     : Iftala Zahri Sukmana NRP       : 5025221002 Kelas      : G Kode GitHub :   https://github.com/ifzahri/ppb/tree/main/loginform Selamat datang di blog teknis hari ini! Dalam artikel ini, saya akan membahas cara membuat form login yang modern dan fungsional menggunakan Jetpack Compose, library UI terbaru untuk pengembangan aplikasi Android. Mari kita pelajari cara membuat form login dengan field email, password, tombol login, dan opsi "Lupa Password" yang profesional. Pendahuluan Jetpack Compose telah mengubah cara kita membangun antarmuka pengguna di Android. Dengan pendekatan deklaratif dan reaktif, Compose memungkinkan pengembang untuk membuat UI yang kompleks dengan kode yang lebih sedikit dan lebih mudah dipahami. Dalam tutorial ini, kita akan fokus pada pembuatan komponen login yang sering menjadi pintu gerbang utama untuk aplikasi. Kita akan mengimplementasikan: Field input untuk email dengan validasi Field input unt...
Baca selengkapnya

Tutorial Pembuatan Aplikasi Dice Roller Interaktif dengan Jetpack Compose

Gambar
Nama     : Iftala Zahri Sukmana NRP        : 5025221002 Kelas     : G Link GitHub : https://github.com/ifzahri/ppb/tree/main/DiceRoller Pada kesempatan kali ini, kita akan mempelajari cara membuat aplikasi Dice Roller (Pelempar Dadu) yang interaktif menggunakan Jetpack Compose dan Kotlin. Aplikasi ini tidak hanya menampilkan animasi pelemparan dadu, tetapi juga menyimpan riwayat lemparan terakhir untuk pengalaman pengguna yang lebih menarik. Persiapan Awal Sebelum memulai, pastikan Anda telah menginstal Android Studio versi terbaru. Untuk tutorial ini, kita akan menggunakan Jetpack Compose - UI toolkit modern untuk Android yang ditulis dalam bahasa Kotlin. Langkah 1: Membuat Proyek Baru Buka Android Studio Pilih "New Project" Pilih "Empty Compose Activity" Beri nama proyek "Dice Roller" Atur package name menjadi "com.example.diceroller" Pilih Kotlin sebagai bahasa pemrograman Klik "Finish" Membuat Aset Gambar Dadu Untuk ap...
Baca selengkapnya