Tugas Week 5 - PPB G - 5025221040

 

Tugas 5: Membuat Kalkulator Sederhana

Nama    : Genta Putra Prayoga

NRP      : 5025221040

Kelas     : G

Link Github: https://github.com/raymrichigat/ppb-g-tugas5

Pengenalan Jetpack Compose dan Kotlin untuk Pengembangan Aplikasi Android Modern

Halo para pengembang! Pada kesempatan kali ini, kita akan membahas tentang Jetpack Compose dan bahasa pemrograman Kotlin yang saat ini menjadi pilihan utama dalam pengembangan aplikasi Android. Mari kita bahas melalui contoh aplikasi kalkulator sederhana.

Apa itu Kotlin?

Kotlin adalah bahasa pemrograman modern yang dikembangkan oleh JetBrains dan saat ini menjadi bahasa resmi untuk pengembangan Android. Kotlin memiliki beberapa keunggulan dibandingkan Java, yaitu:

1. Sintaks yang lebih ringkas
2. Fitur keamanan null (null safety)
3. Fungsi ekstensi
4. Coroutines untuk pemrograman asinkronus
5. Interoperabilitas penuh dengan Java

Dalam contoh kode di atas, kita dapat melihat beberapa fitur Kotlin yang digunakan:

var num1 by remember {
    mutableStateOf("0")
}

Di sini kita menggunakan delegate property (by) yang merupakan fitur Kotlin untuk mendelegasikan implementasi properti ke objek lain. Kita juga melihat penggunaan lambda dan type inference yang membuat kode lebih singkat dan mudah dibaca.

Mengenal Jetpack Compose

Jetpack Compose adalah toolkit UI modern untuk Android yang mengadopsi pendekatan deklaratif. Berbeda dengan pendekatan tradisional yang menggunakan XML, Compose memungkinkan kita membangun UI menggunakan Kotlin saja.

Keunggulan Jetpack Compose:

1. Deklaratif: UI dibuat dengan mendeskripsikan bagaimana tampilan seharusnya, bukan mengatur setiap langkah untuk membuatnya.
2. Komposabel: UI dibuat dari fungsi-fungsi yang disebut Composable.
3. Reaktif: UI secara otomatis diperbarui ketika data berubah.
4. Intuitif: Mengurangi boilerplate code dan lebih mudah dipahami.

Analisis Kode Kalkulator

Mari kita bahas beberapa komponen utama dalam kode kalkulator di atas:

1. Struktur Proyek

package com.example.mycalculator

import android.os.Bundle
import android.widget.Toast
// ... imports lainnya

Kode dimulai dengan deklarasi package dan import library yang diperlukan. Kotlin menggunakan sistem import yang mirip dengan Java.

2. Komponen Activity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            // Composable functions here
        }
    }
}

MainActivity adalah activity utama yang mewarisi ComponentActivity. Method onCreate() dipanggil saat activity dibuat, dan di sinilah kita menyiapkan UI dengan Compose melalui fungsi setContent.

3. State Management

var num1 by remember {
    mutableStateOf("0")
}

var num2 by remember {
    mutableStateOf("0")
}

Compose menggunakan konsep State untuk mengelola data yang dapat berubah. Ketika state berubah, Compose akan secara otomatis memperbarui UI. Fungsi remember digunakan untuk menyimpan state antar rekomposisi, dan mutableStateOf membuat state yang dapat diubah.

4. Composable Functions

Dalam Jetpack Compose, UI dibangun menggunakan fungsi yang diberi anotasi @Composable. Meskipun dalam contoh ini tidak ada anotasi eksplisit, fungsi-fungsi seperti TextField, Button, Column, dan Row adalah composable.

Column {
    TextField(value = num1, onValueChange = { num1 = it })
    TextField(value = num2, onValueChange = { num2 = it })
    
    Row {
        Button(onClick = { /* kode kalkulasi */ }) {
            Text(text = "Add")
        }
        // Button lainnya
    }
}

Column dan Row adalah layout container yang mengatur elemen secara vertikal dan horizontal. TextField adalah komponen input, dan Button adalah komponen tombol.

5. Event Handling

Button(onClick = {
    var result = num1.toInt() + num2.toInt()
    Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT).show()
}) {
    Text(text = "Add")
}

Event handling dalam Compose dilakukan melalui parameter seperti onClick. Ini menerima lambda yang berisi kode yang akan dijalankan ketika tombol diklik. Perhatikan juga string interpolation Kotlin dengan $result.

Implementasi Kalkulator

Kalkulator ini memiliki fitur sederhana:

1. Dua field input untuk angka
2. Empat tombol operasi: penambahan, pengurangan, perkalian, dan pembagian
3. Hasil ditampilkan menggunakan Toast

Untuk setiap operasi, aplikasi:

1. Mengambil nilai dari kedua TextField
2. Mengkonversi string menjadi integer dengan toInt()
3. Melakukan operasi matematika
4. Menampilkan hasil menggunakan Toast

Kesimpulan

Jetpack Compose dan Kotlin memberikan cara yang lebih modern dan efisien untuk mengembangkan aplikasi Android. Dengan pendekatan deklaratif dan reaktif, kita dapat menulis kode yang lebih ringkas, mudah dibaca, dan mudah dipelihara.

Contoh kalkulator sederhana ini hanya menunjukkan dasar-dasar Compose dan Kotlin. Ada banyak fitur canggih lainnya seperti animasi, navigasi, dan integrasi dengan arsitektur app yang tidak dapat dibahas dalam satu artikel.

Untuk pengembang yang baru memulai, contoh ini bisa menjadi titik awal yang baik untuk memahami bagaimana Jetpack Compose dan Kotlin bekerja bersama untuk membuat UI Android yang menarik dan fungsional.