Pertemuan 3 - Membuat Aplikasi Ulang Tahun

 Nama: Kadek Fajar Pramartha Yasodana

NRP: 5025231185

Kelas: PPB (C)

Pertemuan 3 - Membuat Aplikasi Ulang Tahun

Dalam tugas ini, kita diminta untuk membuat aplikasi ucapan ulang tahun guna melatih keterampilan kita dalam mengertikan apa itu compose. Terdapat beberapa langkah yang saya lakukan pada project ini yaitu:

1. Membuat Bagian Composable

@Composable
fun Greeting(message: String, from: String, modifier: Modifier = Modifier) {
    Column (
        modifier = modifier.fillMaxSize().padding(32.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = message,
            fontSize = 80.sp,
            lineHeight = 80.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier.align(Alignment.End).padding(
                top = 16.dp
            )
        )
    }
}

Pada bagian composable ini merupakan bagian yang akan mendapatkan input berupa ucapan (message) dan dari siapa (from). Composable dalam hal ini berguna untuk mendefinisikan seperti apa layout dari section User Interface yang akan dibuat. Setelah definisi dibuat, nanti fungsi ini bisa dipanggil dengan memberi argument pada message, from, dan modifier.

Dalam layout/composable yang saya buat, disini pertama saya menggunakan Column agar children dari node tersebut bisa menurun kebawah. Selain itu untuk modifier juga dimaksimalkan agar penuh sesuai parent dari Column. Terdapat 2 text pada Column yang pertama adalah text ucapan dan yang kedua adalah text dari siapa. Anggapannya membuat composable ini mirip seperti html dengan struktur

<div>

    <p> </p>

    <p> </p>

</div>

dengan modifier mirip seperti styles pada css.

2. Membuat Bagian Preview

@Preview(
    showBackground = true,
    showSystemUi = true,
    name = "My Preview"
)
@Composable
fun GreetingPreview() {
    BirthdayApplicationTheme {
        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
            Greeting(
                message = "Happy Birthday Sam!",
                from = "From Fajar",
                modifier = Modifier.padding(innerPadding)
            )
        }
    }
}

Dalam preview ini sangat berguna untuk kita agar kita bisa melihat secara langsung dan tanpa proses compiling untuk melihat perubahan yang kita lakukan berdasarkan layout yang sudah kita definisikan pada fungsi Greeting(). Di preview ini hanya berisi pengaturan berupa tunjukkan background, systemui, dan lainnya. Selain itu, terdapat juga Scaffold yang berguna sebagai parent dari Greeting, dengan Scaffold berfungsi agar layout yang kita gunakan tidak bertimpa dengan system ui dan ui bawaan lainnya (seperti tombol back/navigasi).

3. Membuat Bagian MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            BirthdayApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        message = "Happy Birthday Sam!",
                        from = "From Fajar",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

Pada bagian MainActivity sebenarnya cukup sama dengan fungsi preview, hanya saja bagian inilah yang nantinya akan digunakan pada aplikasi yang sudah dicompile. Fungsi ini hanya memanggil fungsi layout kita yaitu Greeting dan memberikan beberapa argument padanya, sama seperti preview.

Jika dijalankan, maka aplikasi yang dicompile menjadi seperti berikut