Tugas Week 3 - PPB G - 5025221040

 

Tugas 3: Membuat Aplikasi Selamat Ulang Tahun

Nama    : Genta Putra Prayoga

NRP      : 5025221040

Kelas     : G

Link Github: raymrichigat/ppb-g-tugas3

Memahami Jetpack Compose: Revolusi UI Pemrograman Android

Jetpack Compose adalah framework UI modern untuk pengembangan aplikasi Android yang diperkenalkan oleh Google. Berbeda dengan pendekatan tradisional yang mengandalkan file XML untuk definisi UI, Jetpack Compose menggunakan pendekatan deklaratif dengan Kotlin sebagai bahasa pemrogramannya. Dalam blog post ini, kita akan membahas komponen-komponen penting dari Jetpack Compose seperti annotation, Composable, Preview, dan Text element berdasarkan kode contoh aplikasi ucapan ulang tahun sederhana.

Pengenalan Jetpack Compose

Jetpack Compose memungkinkan pengembang untuk membangun UI dengan lebih intuitif dan efisien. Framework ini mengurangi boilerplate code dan menyederhanakan pembuatan UI yang kompleks dengan pendekatan yang lebih modern. Mari kita lihat beberapa komponen utama dari Jetpack Compose berdasarkan kode contoh di atas.

Annotation dalam Jetpack Compose

Annotation adalah cara untuk memberikan metadata tambahan pada kode. Dalam konteks Jetpack Compose, annotation memainkan peran penting untuk menandai fungsi dan parameter dengan informasi khusus. Beberapa annotation penting dalam kode contoh kita:

1. @Composable

@Composable adalah annotation yang paling fundamental dalam Jetpack Compose. Annotation ini menandai bahwa fungsi tersebut adalah komponen UI yang dapat di-compose.

kotlin
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier){
    // isi fungsi
}

Fungsi dengan annotation @Composable:

• Tidak mengembalikan nilai (selalu Unit)
• Dapat dipanggil oleh fungsi Composable lainnya
• Dapat menerima parameter untuk mengkonfigurasi tampilan
• Mendeskripsikan UI secara deklaratif

2. @Preview

@Preview adalah annotation yang memungkinkan kita untuk melihat pratinjau komponen UI tanpa harus menjalankan aplikasi di emulator atau perangkat fisik.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Haikal!", from = "From Gavi")
    }
}

Parameter annotation @Preview:

• showBackground = true: Menampilkan latar belakang putih di pratinjau
• Parameter lain (tidak ditampilkan dalam contoh) seperti widthDp, heightDp, name, dll.

3. @SuppressLint

Meskipun bukan khusus Jetpack Compose, annotation @SuppressLint digunakan dalam kode untuk menekan peringatan linter tertentu.

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")

Parameter annotation menentukan peringatan mana yang akan diabaikan, dalam hal ini peringatan tentang parameter padding Scaffold yang tidak digunakan.

Composable Functions

Fungsi Composable adalah blok pembangun dasar dalam Jetpack Compose. Mari kita analisis fungsi Composable dalam kode contoh:

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier){
    Column (
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

Fungsi ini:

• Menerima parameter message dan from untuk konten teks
• Menerima parameter modifier dengan nilai default untuk konfigurasi tata letak
• Menggunakan Column sebagai container untuk menampilkan elemen secara vertikal
• Berisi dua elemen Text dengan konfigurasi berbeda

Text Element dalam Jetpack Compose

Text adalah komponen dasar untuk menampilkan teks dalam Jetpack Compose. Dalam contoh kita, terdapat dua implementasi Text:

Text(
    text = message,
    fontSize = 100.sp,
    lineHeight = 116.sp,
    textAlign = TextAlign.Center
)

Text(
    text = from,
    fontSize = 36.sp,
    modifier = Modifier
        .padding(16.dp)
        .align(alignment = Alignment.End)
)

Parameter penting pada elemen Text:

• text: Konten teks yang akan ditampilkan
• fontSize: Ukuran font (dalam sp - scale-independent pixels)
• lineHeight: Tinggi baris teks
• textAlign: Perataan teks
• modifier: Konfigurasi tambahan seperti padding dan alignment

Modifier dalam Jetpack Compose

Modifier adalah komponen penting yang memungkinkan konfigurasi tata letak, tampilan, dan perilaku elemen UI. Dalam kode contoh, kita melihat beberapa penggunaan Modifier:

modifier = Modifier.padding(8.dp)

modifier = Modifier
    .padding(16.dp)
    .align(alignment = Alignment.End)

Modifier dapat dirantai untuk menerapkan beberapa konfigurasi sekaligus. Contoh ini menunjukkan:

• Penambahan padding
• Pengaturan alignment
• Penggunaan fillMaxSize() untuk mengisi seluruh layar

Implementasi dalam MainActivity

Sebuah aplikasi Android yang menggunakan Jetpack Compose memiliki struktur berbeda dari aplikasi tradisional. Mari lihat implementasi di MainActivity:

class MainActivity : ComponentActivity() {
    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthdayTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) {
                    GreetingText(
                        message = "Happy Birthday Haikal!",
                        from = "From Gavi.",
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

Perhatikan bagian penting:

• setContent {}: Mendefinisikan konten UI menggunakan Jetpack Compose
• HappyBirthdayTheme {}: Menerapkan tema aplikasi
• Scaffold: Komponen layout dasar Material Design yang menyediakan struktur layar standar
• Pemanggilan fungsi Composable GreetingText dengan parameter

Kesimpulan

Jetpack Compose menawarkan pendekatan yang lebih modern, intuitif, dan efisien untuk pengembangan UI Android. Dengan komponen-komponen seperti annotation, Composable functions, dan Modifier, pengembang dapat membuat UI yang kompleks dengan kode yang lebih sederhana dan mudah dipelihara.

Kode contoh di atas mendemonstrasikan aplikasi sederhana untuk menampilkan ucapan ulang tahun, namun konsep-konsep yang sama dapat digunakan untuk membangun UI yang jauh lebih kompleks. Dengan memahami dasar-dasar ini, Anda dapat mulai menjelajahi fitur-fitur lebih lanjut dari Jetpack Compose untuk pengembangan aplikasi Android modern