TUGAS 2 PPB F : Aplikasi Profil Diri dengan Modal Sambutan (Smartphone, Dekstop, Tablet, Smartwatch, SmartTV)

March 13, 2024

TUGAS 2

Membuat Aplikasi Profil Diri + Modal Sambutan dengan Jetpack Compose

5025201003 - Rahmat Faris Akbar

PPB (F)

Dalam tugas pertama, saya telah menggunakan Jetpack Compose untuk membuat aplikasi My Profile. Sebagai kelanjutan dari tugas pertama kemarin, saya hanya akan memberikan sedikit tambahan fitur pada aplikasi yang sudah ada. Kali ini, fokus kita adalah menambahkan sebuah fitur sederhana namun berkesan yaitu sebuah modal sambutan yang menyapa pengguna saat mereka pertama kali membuka aplikasi. Tujuan dari penambahan ini tidak hanya untuk meningkatkan interaksi pengguna dengan aplikasi tetapi juga untuk memperkenalkan cara baru dalam memanfaatkan Jetpack Compose untuk menciptakan pengalaman pengguna yang menarik dan hangat.

Langkah-Langkah Seperti Tugas Pertama:

Persiapan:

Sebelum memulai, pastikan Anda telah menginstal Android Studio dan setup lingkungan pengembangan Android Anda dengan benar. Juga, pastikan bahwa Anda menggunakan versi Android Studio dan Gradle yang mendukung Jetpack Compose.

Langkah 1: Setup Proyek

Buat proyek baru di Android Studio dan pilih template "Empty Compose Activity". Beri nama aplikasi Anda dan pastikan Anda memilih bahasa pemrograman Kotlin.

Langkah 2: Definisi Data

Pertama, kita perlu mendefinisikan data yang akan ditampilkan. Untuk aplikasi profil, kita mungkin ingin menampilkan nama, judul pekerjaan, lokasi, email, nomor telepon, tentang saya, dan daftar keterampilan. Kita bisa mendefinisikan sebuah data class `ProfileData` dan `Project` untuk menyimpan informasi ini:

Langkah 3: Membangun UI

Kita akan menggunakan beberapa komponen Jetpack Compose untuk membangun UI aplikasi profil kita:

1. TopProfileSection:

Bagian ini menampilkan foto, nama, judul pekerjaan, dan lokasi. Kita menggunakan `Card` untuk memberikan tampilan yang menarik.

2. AboutSection:

Menampilkan informasi "tentang saya".

3. SkillsSection:

Menampilkan daftar keterampilan dalam grid dua kolom.

4. ProjectsSection:

Menampilkan proyek-proyek yang telah dikerjakan.

Langkah 4: Menampilkan Data

Setelah mendefinisikan komponen UI, kita perlu menampilkan data konkret:

Langkah 5: Penyusunan Layout Utama

Di `MainActivity`, gunakan `setContent` untuk menyusun komponen-komponen yang telah kita definisikan:

Langkah Baru yang Perlu Dilakukan:

Langkah 1: Menampilkan Dialog pada ProfileScreen

Pertama-tama, kita memodifikasi ProfileScreen untuk memasukkan mekanisme dialog. Di sini, kita menggunakan state showDialog dengan nilai awal true. Hal ini menandakan bahwa dialog sambutan akan ditampilkan pada saat aplikasi pertama kali dijalankan. LazyColumn digunakan untuk menampilkan isi utama aplikasi, termasuk bagian profil, keterampilan, dan proyek.

Mekanisme ini memastikan bahwa dialog hanya akan muncul satu kali, yaitu ketika aplikasi dibuka untuk pertama kalinya. Setelah dialog ditutup, showDialog akan diatur menjadi false, sehingga dialog tidak akan muncul lagi sampai aplikasi dijalankan ulang.

Langkah 2: Desain dan Fungsionalitas HelloWorldDialog

Dialog disusun menggunakan AlertDialog dari Jetpack Compose, yang di dalamnya terdapat animasi, judul, teks, dan tombol konfirmasi. AnimatedVisibility digunakan untuk menambahkan animasi fade-in dan fade-out pada dialog, memberikan transisi yang halus saat dialog muncul dan ditutup.

Di dalam dialog, onDismissRequest didefinisikan sebagai lambda function yang dipanggil ketika tombol konfirmasi diklik. Fungsi ini mengubah state showDialog menjadi false, yang mengakibatkan dialog ditutup. Judul "Welcome" disertai dengan pesan "Hello World! This is My Profile Apps" yang menampilkan pesan sambutan hangat kepada pengguna. Tombol "Read My Profile ⟫" berfungsi sebagai ajakan untuk mengeksplorasi lebih lanjut isi dari My Profile Apps ini.

Tampilan Aplikasi: