Tugas 2: Membuat Aplikasi Hello World menggunakan Jetpack Compose (PPB - A)

 

Nama  : Fathin Muhashibi Putra
NRP   : 5025211229
Kelas  : PPB - A

Tugas 2:

Membuat Aplikasi Hello World menggunakan Jetpack Compose

   Pada tugas kali ini, Saya membuat aplikasi Hello World menggunakan implementasi Jetpack Compose. Berikut adalah langkah-langkah yang dilakukan:

1. Sebelum Memulai

Sebelum memulai dengan Jetpack Compose, pastikan sudah dikuasai sintaks Kotlin, terutama konsep lambda dan fungsi. Selain itu, Android Studio perlu diinstal sebagai IDE untuk mengembangkan aplikasi dengan Compose. Jetpack Compose adalah toolkit UI deklaratif yang memungkinkan pembuatan UI menggunakan fungsi @Composable, yang secara otomatis memperbarui UI saat data berubah, tanpa perlu memanipulasi elemen UI secara manual.

2. Memulai Project Compose Baru

Proyek baru dibuat di Android Studio dengan template Empty Activity. Pastikan memilih minimumSdkVersion API level 21. Android Studio akan mengonfigurasi proyek untuk menggunakan Compose secara otomatis.

        
          class MainActivity : ComponentActivity() {
              override fun onCreate(savedInstanceState: Bundle?) {
                  super.onCreate(savedInstanceState)
                  setContent {
                      BasicsCodelabTheme {
                          MyApp(modifier = Modifier.fillMaxSize())
                      }
                  }
              }
          }
        
      

3. Memulai Compose

Fungsi composable dibuat untuk mendeskripsikan UI. Contoh penggunaan fungsi Greeting dengan anotasi @Composable:

        
          @Composable
          fun Greeting(name: String, modifier: Modifier = Modifier) {
              Text(text = "Hello $name!", modifier = modifier)
          }
        
      

4. Menyesuaikan UI

Untuk menyesuaikan UI, komponen Surface dan MaterialTheme digunakan untuk menentukan latar belakang dan tema.

        
          @Composable
          fun Greeting(name: String, modifier: Modifier = Modifier) {
              Surface(color = MaterialTheme.colorScheme.primary) {
                  Text(text = "Hello $name!", modifier = modifier)
              }
          }
        
      

5. Menggunakan Kembali Composable

Fungsi composable bisa digunakan kembali untuk meningkatkan keterbacaan dan mengurangi duplikasi kode.

        
          @Composable
          fun MyApp(modifier: Modifier = Modifier) {
              Surface(modifier = modifier, color = MaterialTheme.colorScheme.background) {
                  Greeting("Android")
              }
          }
        
      

6. Membuat Kolom dan Baris

Elemen tata letak seperti Column dan Row digunakan untuk mengatur elemen secara vertikal atau horizontal.

        
          @Composable
          fun Greeting(name: String, modifier: Modifier = Modifier) {
              Column(modifier = modifier) {
                  Text(text = "Hello")
                  Text(text = name)
              }
          }
        
      

7. Status dalam Compose

Status digunakan untuk menyimpan data yang mempengaruhi tampilan UI. Berikut adalah contoh penggunaan status untuk memperbarui teks tombol saat diklik:

        
          @Composable
          fun Greeting() {
              val expanded = remember { mutableStateOf(false) }

              ElevatedButton(onClick = { expanded.value = !expanded.value }) {
                  Text(if (expanded.value) "Show less" else "Show more")
              }
          }
        
      

8. Pengangkatan Status

Status yang dibaca atau diubah oleh beberapa composable diangkat ke level induk untuk menghindari duplikasi status.

        
          @Composable
          fun MyApp(modifier: Modifier = Modifier) {
              var shouldShowOnboarding by remember { mutableStateOf(true) }

              Surface(modifier) {
                  if (shouldShowOnboarding) {
                      OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false })
                  } else {
                      Greetings()
                  }
              }
          }
        
      

9. Membuat Daftar Lambat Berperforma Tinggi

Untuk menangani daftar besar, LazyColumn digunakan untuk hanya merender item yang terlihat di layar.

        
          @Composable
          private fun Greetings(names: List = List(1000) { "$it" }) {
              LazyColumn {
                  items(names) { name ->
                      Greeting(name)
                  }
              }
          }
        
      

10. Mempertahankan Status

Gunakan rememberSaveable untuk mempertahankan status saat aplikasi mengalami perubahan konfigurasi.

        
          var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }
        
      

11. Menganimasikan Daftar Anda

Animasi ditambahkan menggunakan animateDpAsState untuk perubahan ukuran elemen UI.

        
          val extraPadding by animateDpAsState(if (expanded) 48.dp else 0.dp)
        
      

12. Menata Gaya dan Tema Aplikasi

MaterialTheme digunakan untuk menetapkan tema, termasuk warna, tipografi, dan bentuk UI.

        
          Text(text = name, style = MaterialTheme.typography.headlineMedium)
        
      

13. Sentuhan Akhir

Tombol diganti dengan ikon menggunakan IconButton, dan elemen aksesibilitas ditambahkan.

        
          IconButton(onClick = { expanded = !expanded }) {
              Icon(imageVector = if (expanded) Filled.ExpandLess else Filled.ExpandMore)
          }
        
      

14. Selesai

Setelah mengikuti semua langkah-langkah ini, dasar-dasar Jetpack Compose telah dipelajari, mulai dari membuat tampilan UI hingga menambahkan interaksi, animasi, dan penataan gaya aplikasi.

• Screenshot Hasil :  

• Kode Lengkap (Github Code):  

https://github.com/fathinmputra/PPB_Tugas2_HelloWorld_JetpackCompose.git

• Video Demo Compile/Run Application Hello World:  

Referensi : 

https://kuliahppb.blogspot.com/2024/03/android-1-jetpack-compose.html

https://developer.android.com/codelabs/jetpack-compose-basics?hl=id#0