Tugas 3

Nama : Robby Ulung Pambudi
NR     : 5025211042

Kelas  : PPB A 

Link Github : https://github.com/robbypambudi/ppb-a/tree/main/HappyBirthday 

Panduan Pengembangan Aplikasi Ucapan Selamat Ulang Tahun

Tugas 3: Membuat Aplikasi Greetings Birthday

Dalam tugas ini, saya mengembangkan aplikasi untuk memberikan ucapan selamat ulang tahun. Berikut adalah tahapan yang telah dilakukan:

1. Persiapan Awal

Pengembangan aplikasi akan menggunakan Jetpack Compose untuk membangun aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar. Prasyarat yang diperlukan adalah pemahaman tentang cara membuat aplikasi di Android Studio dan cara menjalankan aplikasi di emulator atau perangkat Android. Oleh karena itu, diperlukan aplikasi Android Studio yang dapat diinstall jika belum tersedia.

2. Inisialisasi Project Happy Birthday

Mempersiapkan project baru di Android Studio dengan template Empty Activity dan mengmodifikasi pesan teks menjadi ucapan ulang tahun yang dipersonalisasi dengan cara:

• Dalam dialog sambutan Android Studio, pilih New Project.
• Dalam dialog New Project, pilih Empty Activity, kemudian klik Next.
• Di kolom Name, masukkan Happy Birthday, lalu pilih level API minimum 24 (Nougat) di kolom Minimum SDK dan klik Finish.

3. Pengenalan Jetpack Compose

Jetpack Compose merupakan toolkit modern untuk membangun UI Android. Compose menyederhanakan dan mempercepat pengembangan UI di Android dengan lebih sedikit kode, tool yang canggih, dan kemampuan Kotlin yang intuitif. Fungsi composable adalah elemen dasar penyusun UI di Compose. Anotasi merupakan cara untuk melampirkan informasi tambahan ke kode.

4. Panel Desain di Android Studio

Android Studio memungkinkan untuk melihat pratinjau fungsi composable dalam IDE, tanpa perlu menginstal aplikasi ke perangkat Android atau emulator. Seperti yang telah dipelajari di pembelajaran sebelumnya, kita dapat melihat pratinjau tampilan aplikasi di panel Design di Android Studio. Fungsi composable harus menyediakan nilai default untuk setiap parameter agar dapat dipratinjau. Oleh karena itu, sebaiknya jangan lihat pratinjau fungsi Greeting() secara langsung. Sebagai gantinya, perlu menambahkan fungsi lain, fungsi BirthdayCardPreview() dalam kasus ini, yang akan memanggil fungsi Greeting() dengan parameter yang sesuai.

Untuk melihat pratinjau:

• Di fungsi BirthdayCardPreview(), ubah argumen "Android" di fungsi Greeting() menjadi nama.
• Pratinjau akan otomatis diperbarui.

5. Menambahkan Elemen Teks Baru

Akan dihapus salam Hello $name! dan menambahkan ucapan ulang tahun:

• Dalam file MainActivity.kt, hapus definisi fungsi Greeting(). Tambahkan fungsi sendiri untuk menampilkan ucapan di codelab nanti. Hapus kode Greeting().
• Praktik terbaiknya adalah membuat Composable yang menerima parameter Modifier, dan meneruskan modifier tersebut ke turunan pertamanya. Tambahkan parameter Modifier ke fungsi GreetingText().
• Tambahkan parameter message jenis String ke fungsi composable GreetingText().
• Di fungsi GreetingText(), tambahkan composable Text yang meneruskan pesan teks sebagai argumen yang telah diberi nama.
• Di dalam fungsi onCreate(), perhatikan bahwa panggilan fungsi Greeting() sekarang berwarna merah. Warna merah ini menunjukkan error. Arahkan kursor ke panggilan fungsi ini dan Android Studio akan menampilkan informasi terkait error tersebut.
• Hapus panggilan fungsi Greeting() beserta argumennya dari fungsi onCreate() dan BirthdayCardPreview(). File MainActivity.kt
• Sebelum fungsi BirthdayCardPreview(), tambahkan terlebih dahulu fungsi baru bernama GreetingText(). Jangan lupa untuk menambahkan anotasi @Composable sebelum fungsi karena anotasi ini akan menjadi fungsi Compose yang menjelaskan composable Text.

6. Penyesuaian Ukuran Font

Telah ditambahkan teks ke antarmuka pengguna, tetapi belum terlihat seperti aplikasi final. Dalam tugas ini, kita akan mempelajari cara mengubah ukuran, warna teks, dan atribut lain yang memengaruhi tampilan elemen teks. Kita juga dapat bereksperimen dengan berbagai ukuran dan warna font.

• Di file MainActivity.kt, scroll ke composable Text() di fungsi GreetingText().
• Teruskan argumen fontSize ke fungsi Text() sebagai argumen kedua yang telah diberi nama dan tetapkan ke nilai 100.sp.
• Klik .sp yang ditandai oleh Android Studio.
• Klik Import di pop-up untuk mengimpor androidx.compose.ui.unit.sp agar dapat menggunakan properti ekstensi .sp.
• Scroll ke bagian atas file dan perhatikan pernyataan import yang seharusnya terdapat pernyataan import androidx.compose.ui.unit.sp. Hal ini berarti Android Studio menambahkan paket ke file.
• Perhatikan pratinjau ukuran font yang telah diperbarui. Penyebab pesan yang tumpang-tindih adalah harus menentukan tinggi baris.
• Perbarui composable Text untuk menyertakan tinggi baris.

7. Penambahan Elemen Teks Lainnya

Kartu akan ditandatangani dengan nama kita:

• Di dalam file MainActivity.kt, scroll ke fungsi GreetingText().
• Teruskan parameter from jenis String ke fungsi untuk nama pengirim.
• Setelah composable pesan ulang tahun Text, tambahkan composable Text lain yang menerima argumen text yang ditetapkan ke nilai from.
• Tambahkan argumen yang telah diberi nama fontSize yang ditetapkan ke nilai 36.sp.
• Scroll ke fungsi BirthdayCardPreview().
• Tambahkan argumen String lain untuk menandatangani kartu, seperti "From Emma".
• Perhatikan pratinjau.

8. Pengaturan Elemen Teks dalam Baris dan Kolom

Atur elemen teks di aplikasi dalam satu baris untuk menghindari tumpang-tindih:

• Di dalam file MainActivity.kt, scroll ke fungsi GreetingText().
• Tambahkan composable Row di sekitar elemen teks agar baris dengan dua elemen teks dapat ditampilkan. Pilih dua composable Text, klik bohlam. Pilih Surround with widget > Surround with Row.
• Android Studio otomatis mengimpor fungsi Row. Scroll ke atas, lalu perhatikan bagian impor. import androidx.compose.foundation.layout.Row seharusnya telah ditambahkan.
• Amati pratinjau yang telah diperbarui di panel Design. Ubah ukuran font pesan ulang tahun menjadi 30.sp untuk sementara.
• Atur elemen teks dalam kolom.

9. Implementasi Ucapan ke Aplikasi

Tambahkan composable ke aplikasi di perangkat atau emulator.

• Di dalam file MainActivity.kt, scroll ke fungsi onCreate().
• Panggil fungsi GreetingText() dari blok Surface.
• Teruskan fungsi GreetingText(), ucapan ulang tahun, dan nama pengirim.
• Bangun dan jalankan aplikasi di emulator.

Menyejajarkan ucapan ke tengah:

• Untuk menyejajarkan ucapan di tengah layar, tambahkan parameter yang disebut verticalArrangement, tetapkan ke Arrangement.Center. Akan mempelajari verticalArrangement lebih lanjut di codelab berikutnya.
• Tambahkan padding 8.dp di sekitar kolom. Sebaiknya gunakan nilai padding dengan penambahan 4.dp.
• Untuk mempercantik aplikasi, sejajarkan teks ucapan ke tengah menggunakan textAlign.
• Tambahkan padding ke tanda tangan dan sejajarkan di sebelah kanan.

10. Penyelesaian

Setelah mengikuti semua langkah-langkah tersebut, maka jadilah sebuah aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar.