Tugas 3: Membuat Aplikasi Selamat Ulang Tahun (PPB - A)

 

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

Tugas 3:
Membuat Aplikasi Selamat Ulang Tahun

  
 Pada tugas kali ini, Saya membuat aplikasi ulang tahun. Berikut adalah langkah-langkah yang dilakukan:

1. Sebelum Memulai

    Akan digunakan Jetpack Compose untuk membangun aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar. Prasyaratnya, yaitu mengetahui cara membuat aplikasi di Android Studio dan cara menjalankan aplikasi di emulator atau perangkat Android. Jadi, dibutuhkan aplikasi Android Studio (dapat diinstall jika belum).


2. Menyiapkan aplikasi Happy Birthday

    Siapkan  project di Android Studio dengan template Empty Activity dan mengubah pesan teks menjadi ucapan ulang tahun yang dipersonalisasi dengan cara : 
- Dalam dialog Welcome to Android Studio, pilih New Project.
- Dalam dialog New Project, pilih Empty Activity, lalu klik Next.
- Di kolom Name, masukkan Happy Birthday, lalu pilih level API minimum 24 (Nougat) di kolom Minimum SDK dan klik Finish.


3. Apa itu Jetpack Compose?

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


4. Panel desain di Android Studio

    Android Studio memungkinkan untul melihat pratinjau fungsi composable dalam IDE, bukan 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 Amenerima 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. Mengubah 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. Menambahkan 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. Mengatur 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. Menambahkan 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. Selesai

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


Comments

Post a Comment

Popular posts from this blog

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

Image
  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. ...
Read more

Tugas 1: Review Perkembangan Teknologi Perangkat Bergerak (PPB - A)

Image
  Nama  : Fathin Muhashibi Putra NRP    : 5025211229 Kelas  : PPB - A Tugas 1: Review Perkembangan Teknologi Perangkat Bergerak      Perkembangan perangkat bergerak, telah mengubah cara kita berkomunikasi, bekerja, dan bahkan berinteraksi dengan dunia sekitar. Teknologi perangkat bergerak tidak hanya berkembang dalam hal desain fisik, tetapi juga mencakup chipset, sistem operasi, aplikasi, dan user interface (UI), yang semua mengalami peningkatan signifikan dari tahun ke tahun. Berikut merupakan perkembangan teknologi perangkat bergerak : 1. Era Awal: Dari Telepon Mobil (Car Phone) ke Ponsel Genggam (1947 - 1973) 1947 : Sebelum ponsel seluler, terdapat car phone atau telepon mobil yang pertama kali diperkenalkan oleh insinyur di Bell Labs. Telepon ini memiliki bobot sekitar 80 kilogram dan hanya digunakan di dalam mobil, dengan jaringan yang sangat terbatas dan mahal. 1973: Motorola DynaTAC 8000X menjadi ponsel genggam pertama yang diperkenalkan...
Read more

ETS - Evaluasi Tengah Semester: Proyek - Mobile Front End

Image
  Anggota Kelompok: Nama: Fathin Muhashibi Putra NRP: 5025211229 Kelas: PPB - A ETS - Evaluasi Tengah Semester: Proyek - Mobile Front End A. Deskripsi Aplikasi JejakUang JejakUang adalah aplikasi mobile untuk mencatat dan mengelola keuangan pribadi. Aplikasi ini membantu pengguna mencatat pemasukan dan pengeluaran sehari-hari dengan antarmuka yang sederhana, navigasi yang mudah, serta visualisasi data keuangan dalam bentuk grafik. Dengan JejakUang, pengguna dapat lebih sadar dan teratur dalam mengelola keuangan pribadi. B. Fitur Aplikasi JejakUang      Berikut fitur-fitur yang ada pada aplikasi JejakUang Ringkasan Keuangan: Tampilan saldo terkini (pemasukan - pengeluaran) Total pemasukan dan pengeluaran Daftar transaksi terbaru pada halaman utama Pencatatan Transaksi: Input transaksi pemasukan dan pengeluaran ...
Read more