Pemrograman Perangkat Beregerak - Tugas Pertemuan 3 - Timothy Hosia

PEMROGRAMAN PERANGKAT BERGERAK: APLIKASI UCAPAN ULANG TAHUN DENGAN JETPACK COMPOSE

Nama: Timothy Hosia Budianto

NRP: 5025211098

Kelas: PPB - A

Pembahasan

Dalam tugas ini, saya mengembangkan aplikasi ucapan ulang tahun sederhana menggunakan Jetpack Compose. Berikut adalah penjelasan tentang apa yang saya kerjakan:

Pembuatan Proyek

Saya membuat proyek baru di Android Studio menggunakan template Empty Activity dengan nama "Happy Birthday" dan level API minimum 24 (Nougat). Pemilihan template ini memberikan struktur dasar yang diperlukan untuk memulai pengembangan aplikasi Compose. 

📱 Persiapan Awal

Untuk memulai, kita perlu menyiapkan proyek baru di Android Studio menggunakan template Empty Activity:

• Pada dialog Welcome to Android Studio, pilih New Project
• Pada dialog New Project, pilih Empty Activity, lalu klik Next
• Isi kolom Name dengan Happy Birthday
• Pilih level API minimum 24 (Nougat) di kolom Minimum SDK
• Klik Finish
• Android Studio akan membuat proyek dengan struktur dasar yang diperlukan untuk aplikasi Jetpack Compose.

🧩 Memahami Konsep Dasar Jetpack Compose

Jetpack Compose adalah toolkit UI modern untuk Android yang menggunakan pendekatan deklaratif. Dalam Compose, kita menggunakan:

• Fungsi Composable - Fungsi yang diberi anotasi @Composable dan mendeskripsikan bagian dari UI
• Elemen Tata Letak - Seperti Column, Row, dan Box untuk mengatur komponen UI
• Modifier - Untuk menerapkan konfigurasi dan perilaku pada komponen UI
• Keuntungan menggunakan Compose adalah kode yang lebih ringkas, lebih mudah dikelola, dan mudah diperbarui.
  

🎨 Membuat Tampilan Ucapan Ulang Tahun

• Langkah pertama adalah mengubah kode di file MainActivity.kt untuk menampilkan ucapan ulang tahun. Berikut adalah tahapan yang dilakukan:
• Membuat Fungsi GreetingText: Fungsi ini akan menampilkan pesan ucapan ulang tahun dan nama pengirim.
• Menentukan Tata Letak: Menggunakan Column untuk menyusun elemen teks secara vertikal.
• Kustomisasi Tampilan: Menerapkan ukuran font, warna, perataan teks, dan padding untuk tampilan yang menarik.
• Menambahkan Preview: Membuat fungsi dengan anotasi @Preview untuk melihat pratinjau di Android Studio.
  
  

SOURCE CODE :

 github

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    BirthdayCardWithImage()
                }
            }
        }
    }
}

@Composable
fun BirthdayCardWithImage() {
    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.androidparty),
            contentDescription = "Background Image",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        PersonalGreetingText(
            name = "Timothy Hosia Budianto",
            from = "NRP: 5025211098, Kelas: PPB - A",
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
        )
    }
}

@Composable
fun PersonalGreetingText(name: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = "Selamat Ulang Tahun!",
            fontSize = 48.sp,
            lineHeight = 58.sp,
            textAlign = TextAlign.Center,
            color = Color.White,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .padding(bottom = 16.dp)
                .align(alignment = Alignment.CenterHorizontally)
        )
        
        Text(
            text = name,
            fontSize = 36.sp,
            textAlign = TextAlign.Center,
            color = Color.White,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .padding(bottom = 24.dp)
                .align(alignment = Alignment.CenterHorizontally)
        )
        
        Text(
            text = "Semoga sukses selalu dalam perkuliahan dan karir di bidang pemrograman!",
            fontSize = 24.sp,
            textAlign = TextAlign.Center,
            color = Color.White,
            modifier = Modifier
                .padding(bottom = 24.dp)
                .align(alignment = Alignment.CenterHorizontally)
        )
        
        Text(
            text = from,
            fontSize = 20.sp,
            color = Color.White,
            fontWeight = FontWeight.SemiBold,
            modifier = Modifier
                .padding(top = 16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayCardWithImage()
    }
}