NRP : 5025201244
Kelas : PPB - I
Dunia teknologi terus menghadirkan inovasi yang mengubah cara kita membangun aplikasi. Salah satu konsep terkini yang sedang mencuri perhatian adalah Composable dalam bahasa Kotlin. Composable memberikan pendekatan yang lebih modular dan fleksibel dalam merancang antarmuka pengguna (UI). Dalam artikel ini, kita akan memulai perjalanan menarik melalui tutorial yang tersedia di link Tutorial Membangun Aplikasi Sederhana dengan Composable Teks. Melalui langkah-langkah yang akan dijelajahi, kita akan menemukan kekuatan sebenarnya dari Composable dan bagaimana hal itu dapat mengubah cara kita membangun aplikasi Android.
1️⃣ Sebelum memulai
Sebelum memulai, kita perlu memahami beberapa prasyarat dasar. Kita akan menggunakan Jetpack Compose untuk membuat aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar. Kita akan belajar menulis fungsi composable seperti Text, Column, dan Row, serta cara menampilkan dan memformat teks dalam tata letak aplikasi. Tujuan akhirnya adalah membangun aplikasi Android yang menampilkan ucapan ulang tahun dalam format teks yang diinginkan. Kita hanya memerlukan komputer dengan Android Studio untuk memulai.
2️⃣ Menyiapkan aplikasi Happy Birthday
Dalam tugas ini, kita mempersiapkan proyek di Android Studio dengan template Empty Activity, kemudian mengubah pesan teks menjadi ucapan ulang tahun yang dipersonalisasi.
Beri nama aplikasi atau lakukan pengaturan lain lalu klik finish
Setelah membuat proyek Empty Activity dengan langkah-langkah yang diberikan, Android Studio akan menyediakan resource dasar, termasuk pesan "Hello Android!" di layar. Kita akan mempelajari cara mengubah pesan tersebut menjadi ucapan ulang tahun, serta cara menambah dan memformat pesan tambahan. Kita akan menggunakan elemen UI seperti tombol yang dapat diklik, pesan teks di dalam kartu, dan kolom input teks untuk membangun aplikasi. Ini akan memberikan pemahaman dasar tentang antarmuka pengguna (UI) aplikasi dan cara elemen-elemen tersebut berinteraksi dengan pengguna.
3️⃣ Apa itu Jetpack Compose?
Jetpack Compose merupakan toolkit modern untuk membangun UI Android yang mempermudah dan mempercepat proses pengembangan. Dengan Compose, pengembang dapat membuat UI dengan lebih sedikit kode, alat yang canggih, dan menggunakan kemampuan Kotlin yang intuitif. Konsep dasar dalam Compose adalah fungsi composable, yang merupakan elemen penyusun UI. Fungsi ini menjelaskan bagian-bagian dari UI, tidak menampilkan apa pun secara langsung, dan mengambil input untuk menghasilkan elemen yang ditampilkan di layar. Selain itu, Compose juga menggunakan anotasi untuk memberikan informasi tambahan ke kode, yang membantu alat seperti compiler Compose dan pengembang lain dalam memahami kode aplikasi. Dengan memahami konsep dasar ini, pengembang dapat membuat UI yang fleksibel dan mudah dikelola dalam aplikasi Android menggunakan Jetpack Compose.
4️⃣ Panel desain di Android Studio
Panel desain di Android Studio memungkinkan pengembang untuk melihat pratinjau fungsi composable langsung di dalam IDE, tanpa perlu menginstal aplikasi ke perangkat Android atau emulator. Dengan memanfaatkan panel Design, pengembang dapat dengan cepat melihat tampilan aplikasi yang sedang dibangun.
Penting untuk diingat bahwa fungsi composable harus menyediakan nilai default untuk setiap parameter agar dapat dipratinjau. Oleh karena itu, disarankan untuk tidak melihat pratinjau fungsi Greeting() secara langsung. Sebagai gantinya, pengembang perlu menambahkan fungsi lain, seperti fungsi BirthdayCardPreview() yang memanggil fungsi Greeting() dengan parameter yang sesuai.
Penting untuk dicatat bahwa kode yang ditambahkan ke fungsi BirthdayCardPreview() dengan anotasi @Preview hanya berfungsi sebagai pratinjau di panel Design di Android Studio. Perubahan ini tidak akan diterapkan pada aplikasi yang sebenarnya.
5️⃣ Menambahkan elemen teks baru
Dalam tugas ini, langkah pertama adalah menghapus salam "Hello $name!" dari fungsi Greeting() dan menambahkan ucapan ulang tahun yang diinginkan. Penghapusan dilakukan dengan menghapus definisi fungsi Greeting() dari file MainActivity.kt, dan kemudian menambahkan fungsi baru yang disebut GreetingText(). Fungsi ini diberi anotasi @Composable dan menerima parameter pesan teks yang akan ditampilkan. Setelah itu, di dalam fungsi BirthdayCardPreview(), kita memanggil fungsi GreetingText() dan meneruskan pesan ucapan ulang tahun kepada teman kita sebagai argumen. Pratinjau fungsi GreetingText() dapat dilihat langsung di panel Design di Android Studio, sehingga memudahkan kita untuk melihat perubahan yang telah dilakukan.
6️⃣ Mengubah ukuran font
Dalam langkah sebelumnya, kita telah menambahkan teks ke antarmuka pengguna, tetapi belum mencapai tampilan yang diinginkan untuk aplikasi final. Dalam tugas ini, kita mempelajari cara mengubah ukuran, warna teks, dan atribut lain yang memengaruhi tampilan elemen teks. Misalnya, kita menggunakan piksel skalabel (SP) sebagai satuan ukuran untuk ukuran font, yang memungkinkan penyesuaian ukuran teks berdasarkan preferensi pengguna. Setelah menambahkan ukuran font menggunakan SP, kita dapat melihat pratinjau langsung di panel Design di Android Studio. Dengan demikian, kita dapat bereksperimen dengan berbagai ukuran font untuk mencapai tampilan yang diinginkan.
Tambahkan jarak horizontal dengan lineHeight
7️⃣ Menambahkan elemen teks lainnya
Pada tugas sebelumnya, kita telah menambahkan pesan ucapan ulang tahun kepada teman. Dalam tugas ini, langkah selanjutnya adalah menandatangani kartu dengan nama kita sendiri. Dalam file MainActivity.kt, kita menambahkan parameter "from" yang merupakan nama pengirim ke dalam fungsi GreetingText(). Kemudian, setelah composable pesan ulang tahun Text, kita menambahkan composable Text lain yang menampilkan nama pengirim. Argumen untuk ukuran font juga ditambahkan untuk menyesuaikan tampilan. Namun, perlu diingat bahwa fungsi composable dapat menyebabkan tumpang tindih elemen UI jika tidak diatur dengan baik. Hal ini akan kita pelajari lebih lanjut dalam tugas berikutnya tentang pengaturan composable dalam baris dan kolom.
8️⃣ Mengatur elemen teks dalam baris dan kolom
Hierarki UI merupakan konsep dasar dalam pengembangan antarmuka pengguna (UI) di Compose, yang berfokus pada struktur containment, di mana satu komponen dapat berisi satu atau beberapa komponen lainnya. Dalam hierarki ini, elemen UI induk dapat memuat elemen UI turunan, yang pada gilirannya dapat berisi elemen UI lainnya. Pada tahap ini, kita memperkenalkan composable Column, Row, dan Box, yang bertindak sebagai elemen UI induk yang memungkinkan penataan komponen UI dalam struktur hierarkis. Ketiga elemen tata letak ini memungkinkan penempatan elemen UI di dalamnya, seperti elemen teks, dengan cara yang sesuai dengan kebutuhan desain. Kami juga memperkenalkan sintaksis lambda akhir, di mana kita menggunakan tanda kurung kurawal sebagai pengganti tanda kurung dalam fungsi composable, seperti Row, untuk memberikan instruksi pada Compose dalam penataan elemen UI. Langkah selanjutnya adalah menyesuaikan penempatan elemen teks, misalnya, dengan menempatkannya dalam baris atau kolom, untuk memastikan tampilan yang sesuai tanpa tumpang tindih.
9️⃣ Menambahkan ucapan ke aplikasi
Setelah menyelesaikan pratinjau, langkah selanjutnya adalah menambahkan composable ke dalam aplikasi di perangkat atau emulator. Dalam fungsi onCreate() di dalam file MainActivity.kt, panggil fungsi GreetingText() dari blok Surface dan teruskan pesan ucapan ulang tahun serta nama pengirim. Setelah itu, Anda dapat membangun dan menjalankan aplikasi di emulator untuk melihat hasilnya. Untuk menyempurnakan tampilan, Anda juga dapat menambahkan parameter untuk menyejajarkan ucapan ulang tahun ke tengah layar, menambahkan padding di sekitar kolom, serta menambahkan textAlign untuk menyempurnakan penataan teks. Langkah-langkah tersebut meningkatkan estetika aplikasi dan memberikan pengalaman yang lebih menyenangkan bagi pengguna. Terakhir, pastikan untuk menerapkan praktik yang baik dengan terus meneruskan atribut pengubah beserta pengubah dari composable induk untuk memastikan konsistensi dan kejelasan dalam kode. Setelah itu, bangun dan jalankan kembali aplikasi di emulator untuk melihat hasil akhirnya.
🔟 Mendapatkan kode solusi
Kita telah berhasil membuat aplikasi untuk menampilkan Happy Birthday menggunakan Jetpack Compose, sebuah toolkit modern untuk membangun UI Android yang mempermudah pengembangan dengan kode yang lebih sedikit, alat canggih, dan API Kotlin yang intuitif. Dalam pembuatan aplikasi ini, kita mempelajari konsep dasar Jetpack Compose, seperti fungsi composable yang merupakan elemen penyusun dasar UI, dan menggunakan elemen tata letak standar seperti Column, Row, dan Box untuk menata elemen-elemen UI secara hierarkis.
Tidak ada komentar:
Posting Komentar