MEMBUAT HALAMAN SIMPLE LOGIN

Nama : Naily Khairiya

NRP : 5025201244

Kelas : PPB-I

Dalam tugas ini, kita akan menjelajahi proses pembuatan halaman login sederhana menggunakan Kotlin. Meskipun Kotlin biasanya digunakan untuk pengembangan aplikasi Android. Mari kita mulai dengan langkah-langkah dasar untuk membuat halaman login menggunakan Kotlin.

Desain yang akan dibuat adalah seperti ini,

Hasil dari tugas ini sebagai berikut,

Untuk menghasilkan hasil demikian, mula-mula buat project baru 

Buat file baru LoginScreen.kt dengan isi sebagai berikut,

 

Dalam contoh kode ini, kita menggunakan Jetpack Compose untuk membuat layar login yang responsif dalam aplikasi Android. Fungsi LoginScreen yang diimplementasikan sebagai @Composable function menampilkan UI dengan berbagai elemen seperti gambar logo, teks sambutan, dan input fields untuk email dan password. Kita menggunakan remember dan mutableStateOf untuk mengelola state dari email dan password agar dapat diubah dan disinkronkan dengan UI. Ketika pengguna menekan tombol login, informasi email dan password dicatat menggunakan Log. Selain itu, terdapat opsi untuk lupa password dan tautan untuk masuk menggunakan akun media sosial seperti Facebook, Google, dan GitHub. Ini adalah contoh penggunaan Jetpack Compose untuk membuat UI yang interaktif dan menarik bagi pengguna aplikasi Android.

Pada MainActivity modifikasi sebagai berikut.

Dalam file MainActivity.kt, kita mendefinisikan kelas MainActivity yang merupakan turunan dari ComponentActivity. Pada metode onCreate(), kita memanggil metode setContent() untuk menentukan tata letak UI utama aplikasi. Kita menggunakan MyLoginTheme untuk menerapkan tema aplikasi yang telah ditentukan. Di dalam Surface, yang mengisi seluruh ruang yang tersedia dengan warna putih (Color.White), kita memanggil LoginScreen(), yang merupakan komponen komposabel yang bertanggung jawab untuk menampilkan tata letak halaman login.

Di sisi lain, kita juga memiliki fungsi komposabel GreetingPreview yang digunakan untuk menampilkan preview UI saat merancang tata letak dengan menggunakan Preview annotation. Preview ini membantu pengembang melihat tampilan UI dalam waktu nyata saat merancang tanpa perlu mengeksekusi aplikasi secara penuh di emulator atau perangkat fisik.

MEMBUAT APLIKASI DICE ROLLER INTERAKTIF

Nama : Naily Khairiya
NRP : 5025201244
Kelas : PBB - I

Dalam blog ini, kita akan membuat aplikasi Dice Roller yang interaktif. Pengguna dapat melakukan lemparan dadu dengan mengetuk tombol yang tersedia. Hasil lemparan akan ditampilkan menggunakan gambar di layar. Kita akan menggunakan Jetpack Compose dengan Kotlin untuk merancang tata letak aplikasi. Selain itu, kita akan menulis logika bisnis untuk mengatasi kejadian yang terjadi saat tombol ditekan. 

1️⃣ Membuat Project Baru
Buka Android Studio dan navigasikan ke menu File > New > New Project.
Pilih opsi Empty Activity dari dialog New Project, lalu lanjutkan dengan mengklik Next.
Pada kolom Name, ketikkan Dice Roller untuk memberi nama proyek baru.

2️⃣  Membuat infrastruktur tata letak 

Untuk melihat pratinjau project, kita dapat mengklik Build & Refresh di panel Split atau Design.

Untuk mengubah struktur kode contoh, langkah-langkah yang diperlukan meliputi menghapus fungsi DefaultPreview(), membuat fungsi DiceWithButtonAndImage() dengan anotasi @Composable, serta membuat dan memanggil fungsi DiceRollerApp() dengan anotasi @Preview dan @Composable.

Panggilan ke fungsi Greeting("Android") dalam isi lambda DiceRollerTheme() disorot dengan warna merah karena fungsi tersebut telah dihapus, dan perlu dihapus semua kode di dalam lambda setContent{} yang terdapat dalam metode onCreate(). Selanjutnya, di dalam lambda setContent{}, panggil lambda DiceRollerTheme(), lalu di dalam lambda DiceRollerTheme{}, panggil fungsi DiceRollerApp(). Untuk menambahkan pengubah, ubah fungsi DiceWithButtonAndImage() untuk menerima argumen modifier dari jenis Modifier dan tetapkan nilai default Modifier. Kemudian, buat rantai metode fillMaxSize() ke objek Modifier sehingga tata letak mengisi seluruh layar. Terakhir, buat rantai metode wrapContentSize() ke objek Modifier, lalu teruskan Alignment.Center sebagai argumen untuk memusatkan komponen.

3️⃣  Membuat tata letak vertikal

Dalam Jetpack Compose, tata letak vertikal dapat dibuat menggunakan fungsi Column(). Fungsi Column() adalah tata letak composable yang menempatkan turunannya dalam urutan vertikal. Untuk membuat tata letak vertikal dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column(). Teruskan argumen modifier dari tanda tangan metode DiceWithImageAndButton() ke argumen pengubah Column(). Argumen modifier memastikan bahwa composable dalam fungsi Column() mematuhi batasan yang dipanggil pada instance modifier. Teruskan argumen horizontalAlignment ke fungsi Column(), lalu tetapkan ke nilai Alignment.CenterHorizontally. Ini memastikan bahwa turunan dalam kolom dipusatkan pada layar perangkat sesuai dengan lebarnya.

4️⃣  Menambahkan Tombol

Di file strings.xml, tambahkan string dengan nama "roll" dan tetapkan nilainya ke "Roll". 

Dalam isi lambda Column(), tambahkan fungsi Button() untuk menampilkan tombol. Di dalam fungsi Button() dalam file MainActivity.kt, tambahkan fungsi Text() yang menampilkan teks "Roll". Gunakan stringResource() dengan ID resource string yang sesuai dari "roll" yang telah ditambahkan sebelumnya.

5️⃣   Menambahkan gambar

Untuk menambahkan gambar dadu ke aplikasi, kita perlu mendownload gambar dadu terlebih dahulu dan mengimpornya ke dalam proyek menggunakan Resource Manager.

Setelah gambar-gambar dadu tersedia dalam proyek, kita dapat menambahkan komposable Image ke dalam fungsi Column() di MainActivity.kt. Pastikan untuk memberikan deskripsi konten kepada setiap gambar yang ditambahkan untuk meningkatkan aksesibilitas aplikasi kita. Untuk memperbaiki tata letak yang saling bersinggungan antara Button dan Image, kita dapat menambahkan komposable Spacer dengan tinggi tertentu di antara keduanya menggunakan Modifier.height().

6️⃣  Membuat Logika Pelemparan Dadu

Untuk membuat tombol menjadi interaktif, kita perlu menetapkan fungsi onClick pada komposable Button. Dalam fungsi Button, hapus komentar dari nilai lambda onClick dan tetapkan variabel result ke nilai acak antara 1 hingga 6 menggunakan metode random() pada rentang tersebut. Untuk memastikan bahwa nilai result tetap terjaga selama siklus hidup komponen, kita dapat menggunakan composable remember dengan fungsi mutableStateOf untuk menyimpan nilai result.

Kemudian, kita dapat menggunakan nilai result untuk menentukan gambar dadu yang akan ditampilkan. Ubah drawable yang digunakan oleh komposable Image berdasarkan nilai result yang dihasilkan. Pastikan untuk memberikan deskripsi konten yang sesuai kepada gambar dengan menggunakan nilai result sebagai contentDescription.

7️⃣   Hasil 

8️⃣   Source Code

EXPLORING THE POWER OF COMPOSABLE: A HANDS-ON JOURNEY THROUGH TUTORIALS

Nama : Naily Khairiya

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. 

MEMULAI PEMROGRAMAN ANDROID DENGAN KOTLIN

Nama : Naily Khairiya

NRP : 5025201244

Kelas : PBB - I

Selamat datang di blog Memulai Pemrograman Android dengan Kotlin ini! Dalam artikel ini, akan dibahas langkah-langkah awal untuk memulai perjalanan dalam pemrograman Android.  Mari kita mulai dengan langkah-langkah mengunduh dan menginstal alat yang diperlukan, serta memulai proyek pertama Anda.

Langkah 1: Persiapan Awal

Sebelum memulai perjalanan dalam pemrograman Android, pastikan telah menyiapkan beberapa hal. Pastikan memiliki koneksi internet yang stabil dan komputer yang dapat menjalankan Android Studio, alat pengembangan resmi untuk Android. Selain itu, pengetahuan dasar tentang pemrograman akan sangat membantu meskipun tidak wajib.

Langkah 2: Mengunduh Android Studio

Langkah pertama yang harus dilakukan adalah mengunduh Android Studio ke komputer. Android Studio merupakan alat pengembangan yang kuat yang menyediakan lingkungan terpadu untuk mengembangkan aplikasi Android. Android Studio dapat diunduh secara gratis dari situs web resminya di https://developer.android.com/studio. Ikuti panduan instalasi yang disediakan untuk sistem operasi yang digunakan.

 

Langkah 3: Memulai Proyek Pertama 

Setelah berhasil menginstal Android Studio, saatnya untuk memulai proyek pertama. Buka Android Studio dan ikuti langkah-langkah untuk membuat proyek baru. Pertama-tama akan diminta untuk memberikan nama proyek, memilih jenis perangkat yang akan ditargetkan, dan memilih versi Android yang akan digunakan atau Android Studio juga menyediakan template yang dapat membantu untuk memulai.

Langkah 4: Belajar dan Eksplorasi

Sekarang kita telah memiliki proyek pertama dalam Android Studio, mulailah belajar dan bereksperimen. Berikut adalah contoh eksperimen yang dapat dilakukan.

1️⃣ Menambahkan parameter pada greetings

Pada fungsi Greeting:

• Tambahkan dua parameter baru: name yang mewakili nama pengguna dan nrp.
• Ubah teks pesan untuk mencakup nama pengguna dan NRP dalam kalimat salam.

Pada MainActivity:

• Saat memanggil fungsi Greeting, berikan nilai untuk semua parameter yang diperlukan, yaitu platform (dalam hal ini "Android"), name, dan nrp.

2️⃣   Mengubah warna background 

Untuk menambahkan latar belakang pada Surface dalam UI Compose, dapat menggunakan parameter background dari komponen Surface. 

Pada kode yang diberikan, color digunakan untuk menentukan warna latar belakang dari Surface. Warna yang dipilih adalah kuning (Color.Yellow). Dalam komposisi antarmuka pengguna menggunakan Compose, pengaturan warna menggunakan tipe data Color. Color menyediakan berbagai opsi untuk menentukan warna, baik itu warna prapenanganan seperti Color.Red, Color.Blue, Color.Green, atau menggunakan nilai RGB seperti Color(255, 255, 0) untuk warna kuning.

Dengan mengatur color pada Surface, seluruh latar belakang area yang ditutupi oleh Surface akan diisi dengan warna kuning. Penyesuaian warna ini dapat memberikan estetika yang konsisten dalam antarmuka pengguna aplikasi, sesuai dengan tema atau branding yang diinginkan.

3️⃣ Menambahkan style pada text

Pada bagian ini, sebuah teks ditampilkan di layar dengan beberapa penyesuaian gaya tertentu.

• text: Ini adalah teks yang akan ditampilkan. Teks ini berisi variabel yang diambil dari argumen fungsi Greeting, seperti $name, $platform, dan $nrp. Variabel-variabel ini akan diganti dengan nilai yang sesuai saat fungsi dipanggil.
• modifier: Modifier digunakan untuk mengatur tata letak dan perilaku dari elemen UI. Dalam contoh ini, modifier digunakan untuk menerapkan penyesuaian yang diberikan pada teks, seperti padding atau layout.
• style: Ini adalah gaya teks yang akan diterapkan. Dalam contoh ini, gaya teks didefinisikan menggunakan TextStyle. Beberapa penyesuaian gaya yang diterapkan termasuk:
• fontSize: Ukuran font teks diatur menjadi 30.sp.
• fontWeight: Bobot font teks diatur menjadi normal (FontWeight.Normal).
• color: Warna teks diatur menjadi merah (Color.Red).
• fontFamily: Font yang digunakan adalah sans-serif (FontFamily.SansSerif).
• textAlign: Teks diatur untuk berada di tengah (TextAlign.Center).

Jadi, dengan menggunakan kode tersebut, akan ditampilkan teks yang memiliki ukuran font 30sp, bobot normal, berwarna merah, menggunakan font sans-serif, dan terletak di tengah layar. Isi dari teks ini disesuaikan dengan variabel yang diterima dari fungsi Greeting.

4️⃣ Menambahkan box pada text

Pada potongan kode tersebut, Box digunakan sebagai wadah untuk mengelompokkan elemen-elemen UI dan mengatur tata letak mereka di dalamnya.

• modifier: Modifier digunakan untuk mengatur tata letak dan perilaku dari elemen UI. Dalam kasus ini, modifier.padding(40.dp) digunakan untuk memberikan jarak antara batas-batas konten dan tepi Box.
• contentAlignment: Parameter ini menentukan cara menata elemen-elemen di dalam Box. Dalam contoh ini, Alignment.Center digunakan, yang berarti elemen-elemen diatur secara horizontal dan vertikal di tengah Box.

Setelah mendefinisikan Box, sebuah Surface ditempatkan di dalamnya.

• color: Parameter ini menentukan warna latar belakang dari Surface. Di sini, warna yang dipilih adalah putih (Color.White).

Dengan menggunakan Box dan Surface ini, elemen-elemen UI diatur dalam wadah dengan latar belakang putih. Jarak sekitar 40dp juga diberikan dari tepi Box ke konten di dalamnya. Ini dapat memberikan tampilan yang teratur dan mudah dibaca bagi pengguna.

5️⃣ Langkah 5 : Melihat Hasil Akhir

Dari rangkaian proses di atas, berikut merupakan hasil akhir dari program yang telah dibuat.

Dengan demikian, kita telah menyelesaikan langkah-langkah awal dalam memulai perjalanan pemrograman Android. Melalui artikel ini, telah dipelajari persiapan awal yang diperlukan sebelum mulai membuat proyek Android, termasuk langkah-langkah unduh dan instalasi Android Studio, serta memulai proyek pertama. 

🧑‍💻 Berikut merupakan kode lengkap ❗❗❗