Pengumpulan Tugas Pemrograman Perangkat Bergerak G - Pertemuan 3

 Link github: https://github.com/RayyanFv/ppb-3-greetings-card

Dokumentasi Aplikasi "Happy Birthday"

Deskripsi Aplikasi

Aplikasi "Happy Birthday" adalah aplikasi Android sederhana yang dibuat menggunakan Jetpack Compose. Aplikasi ini menampilkan kartu ucapan ulang tahun yang dapat dipersonalisasi dengan nama penerima dan pengirim. Aplikasi ini dirancang sebagai contoh implementasi dasar Jetpack Compose untuk membuat antarmuka pengguna yang menarik dan interaktif.

Komponen Teknis

Teknologi yang Digunakan

• Bahasa Pemrograman: Kotlin
• Framework UI: Jetpack Compose
• Material Design: Material 3
• Minimum SDK: 24 (Android 7.0 Nougat)
• Target SDK: 34 (Android 14)

Struktur Kode

1. MainActivity.kt
   • Kelas utama yang menginisialisasi aplikasi
   • Mengatur tema aplikasi menggunakan MyApplicationTheme
   • Menampilkan komponen BirthdayGreeting
2. BirthdayGreeting.kt
   • Fungsi @Composable yang menampilkan kartu ucapan ulang tahun
   • Menerima parameter nama dan pengirim
   • Menggunakan Card, Column, dan Text untuk menyusun layout
3. build.gradle
   • Konfigurasi build aplikasi
   • Dependency untuk Jetpack Compose dan Material 3

Fitur Aplikasi

• Tampilan kartu ucapan ulang tahun dengan desain menarik
• Kartu dengan sudut melengkung dan bayangan elevasi
• Background kartu berwarna kuning cerah (0xFFFFF176)
• Teks ucapan yang dapat dikustomisasi dengan nama penerima
• Teks pengirim yang dapat dikustomisasi

Implementasi Komponen UI

1. Card

Komponen Card digunakan untuk membuat container utama kartu ucapan dengan:

• Sudut melengkung (16dp radius)
• Elevasi 8dp untuk efek bayangan
• Warna latar kuning cerah
• Padding 16dp untuk konten di dalamnya

2. Text

Dua komponen Text digunakan:

• Text ucapan utama: Ukuran font 28sp, tebal, dan teks tengah
• Text pengirim: Ukuran font 18sp, normal, dan teks tengah

3. Layout

Menggunakan nested layout dengan:

• Column sebagai container utama, mengatur konten secara vertikal dan tengah
• Spacer untuk memberi jarak antara teks ucapan dan pengirim

Preview

Aplikasi menyediakan fungsi preview yang memungkinkan pengembang untuk melihat tampilan kartu ucapan tanpa harus menjalankan aplikasi pada perangkat atau emulator. Preview ini menampilkan kartu ucapan dengan nama "James" dan pengirim "Dari: Alex".

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
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.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.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
BirthdayGreeting(name = "James", sender = "Dari: Alex")
}
}
}
}
}

@Composable
fun BirthdayGreeting(name: String, sender: String) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(
containerColor = Color(0xFFFFF176) // Light yellow color
),
elevation = CardDefaults.cardElevation(
defaultElevation = 8.dp
)
) {
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "🎉 Selamat Ulang Tahun, $name! 🎂",
fontSize = 28.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = sender,
fontSize = 18.sp,
fontWeight = FontWeight.Normal,
textAlign = TextAlign.Center
)
}
}
}
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
MyApplicationTheme {
BirthdayGreeting(name = "James", sender = "Dari: Alex")
}
}