Tugas 3 PPB G - Membuat Aplikasi Ucapan Happy Birthday Sederhana Menggunakan Jetpack Compose

Tugas Pertemuan 3 PPB G 2025

oleh : Arfi Raushani Fikra (5025211084)

Pada pertemuan ke-3 ini, kami diminta untuk membuat sebuah aplikasi sederhana. Aplikasi ini merupakan contoh sederhana penggunaan Jetpack Compose untuk membuat UI di Android. Aplikasi ini menampilkan ucapan selamat ulang tahun beserta pengirim pesannya, dimana tulisan yang tampil ini menerapkan hierarki UI yang memisahkan antara pesan dan pengirim ucapan.

Source Code dapat dilihat disini

Kode ini terdiri dari beberapa bagian utama:

• MainActivity: Kelas utama yang menampilkan UI.

• HappyGreeting: Fungsi yang bertanggung jawab untuk menampilkan teks ucapan ulang tahun.

• BirthdayCardPreview: Fungsi yang memungkinkan pratinjau UI di Android Studio.

Berikut penjelasan kodenya

Kelas MainActivity

====================================Kode=================================

      class MainActivity : ComponentActivity() {
            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                enableEdgeToEdge()
                setContent {
                    HappyBirthdayTheme {
                        Surface(
                            modifier = Modifier.fillMaxSize(),
                            color = MaterialTheme.colorScheme.background
                        ){
                            HappyGreeting(
                                message = "Selamat Ulang Tahun Temanku!",
                                from = "dari Temanmu"
                            )
                        }
                    }
                }
            }
        }
      

=========================================================================

• enableEdgeToEdge(): Mengaktifkan mode layar penuh.

• setContent {}: Menetapkan UI menggunakan tema aplikasi.

• Surface: Membungkus konten dalam latar belakang aplikasi.

• HappyGreeting(...): Memanggil fungsi untuk menampilkan teks ucapan ulang tahun.

Fungsi HappyGreeting

====================================Kode=================================

      @Composable
      fun HappyGreeting(message: String, from: String, modifier: Modifier = Modifier){
          Column(
              modifier = modifier
                  .fillMaxSize()
                  .padding(16.dp),
              verticalArrangement = Arrangement.Center,
              horizontalAlignment = Alignment.CenterHorizontally
          ) {
              Text(
                  text = "Hai, " + message,
                  fontSize = 40.sp,
                  lineHeight = 48.sp,
                  textAlign = TextAlign.Center,
                  modifier = Modifier.fillMaxWidth()
              )
              Spacer(modifier = Modifier.height(30.dp))
              Text(
                  text = "~ " + from + " \ud83d\udc96~",
                  fontSize = 24.sp,
                  textAlign = TextAlign.Center,
                  modifier = Modifier.fillMaxWidth()
              )
          }
      }
      

=========================================================================

• Menggunakan Column agar teks tersusun secara vertikal.

• Arrangement.Center dan Alignment.CenterHorizontally untuk memusatkan teks.

• TextAlign.Center dan fillMaxWidth() agar teks rata tengah.

• Spacer(modifier = Modifier.height(30.dp)) untuk memberi jarak antara teks utama dan teks pengirim.

Fungsi BirthdayCardPreview

====================================Kode=================================

      @Preview(showBackground = true, name = "Ini versi preview")
      @Composable
      fun BirthdayCardPreview() {
          HappyBirthdayTheme {
              HappyGreeting(message="Habede Sobat Preview!", from="dari preview")
          }
      }
      

=========================================================================

• Fungsi ini digunakan untuk menampilkan pratinjau UI di Android Studio tanpa perlu menjalankan emulator.

• @Preview(showBackground = true, name = "Ini versi preview") memberikan nama untuk pratinjau dan menampilkan latar belakang putih.

Setelah dijalankan, aplikasi akan menampilkan teks "Hai, Selamat Ulang Tahun Temanku!" di tengah layar, diikuti oleh teks "~ dari Temanmu 💖~" di bawahnya dengan jarak. Berikut hasilnya.

 ~ Terima Kasih ~