Tugas 2 Membuat Aplikasi Sederhana dengan Jetpack Compose

Nama : Yusuf Hasan Nazila 

NRP : 5025211225 

Tugas Membuat Aplikasi Sederhana dengan Jetpack Compose

Penjelasan Per fungsi

• MainActivity

  • Fungsi utama yang pertama kali dijalankan Android.
  • Menggunakan setContent {} untuk mengatur tampilan menggunakan Jetpack Compose.
  • Membungkus semua UI dengan BasicsCodelabTheme.
  • Menjalankan fungsi NewApp().

• NewApp

  • Fungsi utama Compose untuk menampilkan tampilan aplikasi.
  • Menggunakan showIntroScreen (state boolean) untuk menentukan tampilan:
    • Jika true ➔ tampilkan IntroScreen.
    • Jika false ➔ tampilkan PeopleList.
  • Membungkus tampilan dalam Surface agar mendapat warna latar dari tema.

• IntroScreen

  • Fungsi untuk menampilkan halaman sambutan (Welcome Page).
  • Menampilkan:
    • Teks “🚀 Ayo Bro!”.
    • Tombol “Get Started”.
  • Jika tombol ditekan ➔ memanggil onGetStarted() ➔ pindah ke daftar halaman.

• PeopleList

  • Fungsi untuk menampilkan daftar 50 item (“Halaman ke #1” sampai “Halaman ke #50”).
  • Menggunakan LazyColumn untuk membuat list scrollable secara efisien.
  • Setiap item dalam list ➔ memanggil PersonCard(name).

• PersonCard

  • Fungsi untuk menampilkan satu buah kartu (Card) dalam daftar.
  • Card berisi:
    • Teks “Hey there,”.
    • Nama halaman (“Halaman ke #X”).
    • Tombol expand/collapse (ikon panah atas/bawah).
  • Saat tombol expand ditekan:
    • Jika terbuka ➔ menampilkan teks tambahan “Mantap Bro 🚀”.
    • Animasinya menggunakan AnimatedVisibility (expand/shrink dengan tween animation).

• NewAppPreview

  • Fungsi untuk menampilkan preview tampilan aplikasi di Android Studio.
  • Membungkus NewApp() dalam tema BasicsCodelabTheme.
  • Klik “Preview”.

Perubahan Kode Android Studio

• 1. Menambahkan Pemutar Video (YouTube) di Jetpack Compose
• Dulu aplikasi hanya menampilkan list teks dan card biasa.
• Sekarang aplikasi bisa menampilkan video YouTube yang bisa di-Play langsung di dalam aplikasi.
• 2. Kode Baru yang Ditambahkan:

import android.annotation.SuppressLint
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.AndroidView

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun YouTubePlayer(videoId: String) {
    AndroidView(factory = { context ->
        WebView(context).apply {
            webViewClient = WebViewClient()
            settings.javaScriptEnabled = true
            settings.pluginState = WebSettings.PluginState.ON
            loadUrl("https://www.youtube.com/embed/$videoId")
        }
    })
}

• 3. Cara Memanggil Video di Compose:

@Composable
fun PeopleList(
    modifier: Modifier = Modifier,
    names: List<String> = List(50) { "Halaman ke #${it + 1}" }
) {
    Column(modifier = modifier.padding(8.dp)) {
        LazyColumn {
            items(names) { name ->
                PersonCard(name = name)
            }
        }
        
        Spacer(modifier = Modifier.height(16.dp))
        
        Text(text = "Video Demo:", style = MaterialTheme.typography.titleMedium)
        YouTubePlayer(videoId = "XX7TJNx52Ec")
    }
}

Video Demo

Reference:
https://github.com/hnazila71/Membuat-Aplikasi-Sederhana-dengan-Jetpack-Compose-.git