TUGAS 2 : Jettpack compose : Hello, World!

 

Mengenal Jetpack Compose: Membuat Aplikasi "Hello World" di Android

Halo, teman-teman developer! 🚀

Hari ini, kita akan membahas bagaimana cara membuat aplikasi Android sederhana menggunakan Jetpack Compose. Jika sebelumnya kita menggunakan XML untuk membangun UI, sekarang kita bisa menulis UI langsung dengan kode Kotlin yang lebih deklaratif dan modern.

Kita akan membedah kode dari aplikasi "Hello World" sederhana yang dibuat dengan Jetpack Compose.

---

1. Memahami MainActivity - Pintu Masuk Aplikasi

Seperti biasa, dalam pengembangan aplikasi Android, kita membutuhkan sebuah activity utama yang akan menampilkan UI pertama kali saat aplikasi dijalankan. Di Jetpack Compose, kita menggunakan ComponentActivity sebagai superclass untuk MainActivity.

Berikut kode MainActivity:

🔹 Penjelasan Kode

• onCreate()
  Fungsi ini dipanggil ketika aplikasi pertama kali dijalankan. Ini adalah titik masuk utama aplikasi.
• enableEdgeToEdge()
  Fungsi ini digunakan untuk memastikan tampilan aplikasi bisa memanfaatkan seluruh layar, tanpa batas tepi.
• setContent { ... }
  Di sinilah kita mendeklarasikan UI menggunakan Jetpack Compose. Kita membungkus UI dalam tema HelloworldTheme.
• Scaffold(...)
Scaffold adalah kerangka kerja tata letak yang memudahkan kita dalam mengatur struktur UI.
  • modifier = Modifier.fillMaxSize() membuat UI mengisi seluruh layar.
  • innerPadding memastikan elemen UI tidak tertutup oleh elemen lain seperti AppBar atau BottomNavigation.
• Greeting(name = "Android", modifier = Modifier.padding(innerPadding))
  Fungsi ini dipanggil untuk menampilkan teks "Hello Android!" di layar.

---

2. Membuat Fungsi Greeting() - Menampilkan Teks Dinamis

Sekarang, kita lihat bagaimana cara menampilkan teks menggunakan Jetpack Compose dengan membuat fungsi Greeting().

🔹 Penjelasan Kode

• @Composable
  Anotasi ini menunjukkan bahwa fungsi ini adalah fungsi komposisi, yang berarti fungsi ini dapat digunakan untuk membangun UI dengan Jetpack Compose.
• Greeting(name: String, modifier: Modifier = Modifier)
  Fungsi ini menerima parameter name, sehingga kita bisa menampilkan nama yang berbeda sesuai keinginan.
• Text(...)
Text adalah komponen bawaan Jetpack Compose untuk menampilkan teks di layar.

Jika kita memanggil fungsi ini dengan Greeting("Android"), maka teks yang ditampilkan adalah:

Hello Android!

---

3. Menampilkan Pratinjau dengan GreetingPreview()

Untuk melihat tampilan tanpa harus menjalankan aplikasi di emulator, kita bisa menggunakan Preview di Android Studio.

🔹 Penjelasan Kode

• @Preview(showBackground = true)
  Anotasi ini memungkinkan kita untuk melihat tampilan UI di Android Studio tanpa menjalankan emulator.
• Greeting("World")
  Di pratinjau ini, teks yang akan muncul adalah "Hello World!".

---

Hasil

---

Kesimpulan

Dengan Jetpack Compose, kita bisa membuat aplikasi Android yang lebih deklaratif, ringkas, dan mudah dipahami dibandingkan dengan pendekatan berbasis XML.

Ringkasan Kode yang Kita Buat:

✅ MainActivity sebagai entry point aplikasi.
✅ Greeting() untuk menampilkan teks dengan nama yang bisa dikustomisasi.
✅ GreetingPreview() untuk melihat pratinjau UI di Android Studio.

Dengan pendekatan ini, kita bisa lebih cepat dan fleksibel dalam mengembangkan aplikasi Android.