Tugas 6 - Membuat Kalkulator Sederhana

Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      :  Link Github

Tugas 6 - Membuat Kalkulator Sederhana

Pada tugas ini, dibuat aplikasi kalkulator yang memungkinkan penjumlahan, pengurangan, perkalian, dan pembagian dua angka yang ditentukan oleh user. Aplikasi kalkulator akan memanfaatkan composable state untuk membuat variabel yang persisten dan melakukan perubahan nilai variabel. Implementasi menggunakan referensi Basic Calculator App:

1. Inisiasi Proyek

Pertama-tama buka aplikasi Android Studio lalu pilih New Project -> Empty Activity. Kemudian ubah nama activity menjadi "MyCalculator" dan menggunakan level API minimum 24, lalu pilih Finish. Lalu tunggu beberapa saat sampai Android Studio selesai loading proyek. Untuk kemudahan maka digunakan virtual device Pixel 7 Pro yang telah dibuat sebelumnya.

2. Ubah Template Default

Pertama-tama, hapus fungsi Greeting pada template. Kemudian ubah isi setContent sehingga memanggil CalculatorScreen(). CalculatorScreen() merupakan fungsi utama yang akan dibuat selanjutnya.

3. Buat Fungsi CalculatorScreen()

Pada fungsi CalculatorScreen(), buat variabel num1 dan num2 yang akan digunakan sebagai placeholder angka untuk operasi aritmatika. Kemudian tambahkan TextField pada composable Column sehingga dapat ditampilkan di layar.

4. Tambahkan Context

Karena akan digunakan Toast message untuk menampilkan hasil operasi aritmatika, maka perlu ditentukan context yang digunakan yaitu LocalContext.current.

5. Tambahkan Button Operasi Aritmatika

Selanjutnya, buat composable Row yang akan berisi 4 button dengan teks Add, Sub, Mul, dan Div yang masing-masing akan berfungsi untuk melakukan operasi penjumlahan, pengurangan, perkalian, dan pembagian dari kedua input angka. Ketika tiap button diklik, maka hasil operasi aritmatika dari kedua angka input akan disimpan pada variabel result kemudian ditampilkan menggunakan pesan Toast.

6. Cek Hasil Implementasi

Run ulang app sehingga program terload ulang, maka tampilan kalkulator yang telah dibuat akan terlihat pada device yang dipilih. Berikut adalah contoh hasil untuk masing-masing operasi aritmatika:

A. Penjumlahan

B. Pengurangan

C. Perkalian

D. Pembagian

Berikut adalah isi code MainActivity.kt:

MainActivity.kt

Referensi

https://www.youtube.com/watch?v=U_MCQNI7EYg
https://www.youtube.com/watch?v=HlE8MEtKBr0

Tugas 5 - Membuat Halaman Log In

 Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      :  Link Github Tugas 5

Tugas 5 - Membuat Halaman Log In

Pada tugas ini, dibuat halaman log in menggunakan composable image, textfield, dan button yang berfungsi sebagai tampilan antarmuka awal dari suatu aplikasi. Tampilan antarmuka tersebut memungkinkan pengembang software untuk kemudian menambahkan implementasi database dan logika backend. Implementasi menggunakan referensi dari Studi Kasus Membuat Halaman Login:

1. Inisiasi Proyek

Pertama-tama buka aplikasi Android Studio lalu pilih New Project -> Empty Activity. Kemudian ubah nama activity menjadi "MyLogin" dan menggunakan level API minimum 26 sesuai tutorial, lalu pilih Finish. Lalu tunggu beberapa saat sampai Android Studio selesai loading proyek. Untuk kemudahan maka digunakan virtual device Pixel 7 Pro yang telah dibuat sebelumnya.

2. Ubah Template Default

Hapus composable Greeting preview default yang terbuat ketika project diinisiasi, kemudian hapus juga isi setContent dari onCreate dan ganti dengan LoginScreen(). LoginScreen() merupakan fungsi utama yang akan dibuat selanjutnya.

3. Import Resource

Kemudian, import resource image icon yang diperlukan melalui View -> Tool Windows -> Resource Manager.

Jika sudah ter-import maka akan terlihat resource-resource gambar tersebut akan tersedia pada app/res/drawable.

4. Buat LoginScreen.kt

Selanjutnya, akan dibuat LoginScreen.kt pada app/java/com.example.mylogin yang akan berisi LoginScreen() yaitu fungsi composable utama yang akan dipanggil pada MainActivity.kt. Pada LoginScreen() akan ditampilkan image icon login, teks "Welcome Back", dan teks "Login to your account" dalam composable column. Sesuaikan spacing menggunakan spacer dan posisikan juga menggunakan alignment center sehingga posisi composable column tersebut terletak di tengah layar. Kemudian run aplikasi menggunakan device yang diinginkan, maka tampilannya akan terlihat seperti pada gambar.

5. Tambahkan Textfield

Selanjutnya, tambahkan textfield untuk input email dan password user menggunakan composable OutlinedTextField. Kemudian tambahkan juga spacer sesuai keperluan.

6. Tambahkan Button Login dan Forgot Password

Tambahkan button Login di bawah textfield menggunakan composable button, Forgot Password menggunakan composable text dengan modifier clickable sehingga dapat ditekan, dan tambahkan teks bagian bawah untuk login menggunakan third-party app tertentu.

7. Tambahkan Image Third-Party App

Image-image seperti Facebook, Github, dan Twitter dapat dimasukkan pada program menggunakan composable Image. Kemudian, agar gambar-gambar tersebut dapat diklik maka composable image dapat diberi modifier clickable seperti teks forgot password pada poin sebelumnya. Lokasi dapat dirapikan dengan cara memasukkan image-image tersebut pada composable Row. Hasil akhir dapat terlihat seperti gambar di atas.

8. Cek Hasil & Modifikasi

Selanjutnya, untuk memastikan bahwa tombol sudah berfungsi dengan benar maka dapat digunakan variabel email dan password yang akan menyimpan input user.

Tambahkan pada onValueChange untuk textfield email dan password sehingga variabel email dan password akan terupdate ketika user memasukkan input teks. Tambahkan juga PasswordVisualTransformation() sehingga password tidak terlihat secara plaintext.

Selanjutnya, tambahkan logging info sehingga ketika user mencoba login maupun klik forgot password, logging akan terlihat di console

Tambahkan juga logging info ketika user klik tombol untuk login melalui Facebook, Github, dan Twitter.

Untuk mengecek log, klik View -> Tool Windows -> Logcat. Maka pada bagian bawah terminal untuk output logging akan terlihat

Kemudian run ulang app, dan masukkan beberapa value pada textfield email dan password maupun klik forgot password dan third-party apps. Maka terlihat bahwa tombol-tombol tersebut sudah fungsional.

Berikut adalah isi code MainActivity.kt dan LoginScreen.kt:

MainActivity.kt

LoginScreen.kt

Referensi

https://www.youtube.com/watch?v=-Kj9T1sa6zk

https://www.youtube.com/watch?v=OlO58LDfN14

https://kuliahppb.blogspot.com/2024/03/studi-kasus-membuat-halaman-login.html

Tugas 4 - Aplikasi Dice Roller Menggunakan Interaksi Button

 Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      :  MainActivity.kt & strings.xml

Tugas 4 - Aplikasi Dice Roller Menggunakan Interaksi Button

Pada tugas ini, dibuat aplikasi Dice Roller yaitu aplikasi yang memungkinkan user melempar dadu dengan menggunakan composable Button. Berikut adalah tahapan pembuatannya menggunakan referensi dari tutorial Codelab Android - Membuat Aplikasi Dice Roller Interaktif:

1. Inisiasi Proyek

Pertama-tama buka aplikasi Android Studio lalu pilih New Project -> Empty Activity. Kemudian ubah nama activity menjadi "Dice Roller" dan menggunakan level API minimum 24 sesuai tutorial, lalu pilih Finish. Lalu tunggu beberapa saat sampai Android Studio selesai loading proyek. Untuk kemudahan maka digunakan virtual device Pixel 7 Pro yang telah dibuat sebelumnya.

2. Ubah Template Default

Hapus composable Greeting yang merupakan composable default ketika project diinisiasi, kemudian tambahkan composable DiceRollerApp() dan DiceWithButtonAndImage() dan ubah isi fungsi onCreate sehingga memanggil DiceRollerApp(). Kemudian panggil DiceWithButtonAndImage() di dalam fungsi composable DiceRollerApp(). Kemudian tambahkan juga Modifier untuk menyesuaikan posisi pada sizenya.

3. Menambahkan Composable Column

Karena pada hasil akhir aplikasi akan memiliki dadu dan button, maka perlu digunakan fungsi composable Column agar dadu dan button dapat diposisikan secara vertikal. Selain itu jangan lupa untuk mengimport package-package yang diperlukan.

4. Menambahkan Button

Selanjutnya, tambahkan resource string pada path app/res/values/strings.xml yang nantinya akan digunakan untuk teks pada button yang dibuat.

Lalu buat objek Button pada DiceWithButtonAndImage dan gunakan resource string yang didefinisikan sebelumnya, sehingga terlihat preview telah menampilkan buttonnya.

5. Menambahkan Image Dadu

Untuk menambahkan gambar dadu, maka dapat digunakan Composable Image. Caranya adalah dengan mengimport dari dice_images.zip yang berisi gambar 6 sisi dadu. Kemudian pilih View -> Tool Windows -> Resource Manager untuk mengimport gambar-gambar tersebut.

Selanjutnya, pilih Import Drawables, lalu pilih folder yang berisi gambar dadu tersebut.

Terlihat bahwa gambar-gambar tersebut telah terimport dan berada pada path app/res/drawable. Gambar-gambar tersebut dapat dipanggil menggunakan R.drawable.<nama>.

Karena nantinya sisi dadu yang ditampilkan harus sesuai dengan hasil yang didapat user, maka dibuat variabel result untuk menyimpan hasil user (diberi nilai default 1), Kemudian buat variabel ImageResource yang akan menentukan resource gambar dadu yang akan di-import dengan mengecek nilai variabel result untuk menentukan gambar mana yang akan digunakan.

Selanjutnya tambahkan composable Image untuk menampilkan resource gambar dan gunakan painterResource untuk mengimport dari ID gambar sesuai dengan variabel imageResources. (best practice) Tambahkan juga contentDescription yang menjelaskan UI element untuk mempermudah orang lain memahami maksud code yang dibuat. Kemudian tambahkan composable Spacer untuk memberi jarak antara gambar dadu dengan button sesuai kebutuhan.

6. Tambahkan Logika Pelemparan Dadu

Selanjutnya, untuk membuat fungsi pelemparan dadu maka dapat dilakukan dengan cara generate nilai variabel result secara random dari 1 sampai 6 ketika button "Lempar" ditekan user, sehingga dapat digunakan fungsi random() yang akan dipanggil untuk mengubah nilai result ketika Button "Lempar" ditekan.

Kemudian, agar nilai variabel result dapat secara aktif disesuaikan, maka perlu menggunakan remember dan mutableStateOf (dengan nilai default 1 juga).

Lalu import juga `import androidx.compose.runtime.getValue` dan `import androidx.compose.runtime.setValue` secara manual.

7. Jalankan Aplikasi

Selanjutnya, Run App untuk menjalankan aplikasi pada device virtual/fisik yang dipilih, berikut adalah tampilan awalnya:

Ketika button "Lempar" ditekan, maka gambar dadu yang ditampilkan akan berubah sesuai dengan nilai random yang didapat.

Berikut adalah code programnya:

MainActivity.kt:

app/res/values/strings.xml:

Referensi

https://developer.android.com/codelabs/basic-android-kotlin-compose-build-a-dice-roller-app?hl=id

Tugas 3 - Aplikasi Selamat Ulang Tahun

Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      : Link Github

Tugas 3 - Aplikasi Selamat Ulang Tahun

Pada tugas ini, dibuat aplikasi sederhana yang dapat menampilkan ucapan selamat ulang tahun di layar. Hal ini dapat dilakukan dengan Jetpack Compose menggunakan fungsi composable seperti Text, Column, dan Row. Berikut adalah tahapan pembuatannya menggunakan referensi dari tutorial Codelab Android - Membangun Aplikasi Sederhana Dengan Composable Teks:

1. Inisiasi Proyek

Pertama-tama buka aplikasi Android Studio lalu pilih New Project -> Empty Activity. Kemudian ubah nama activity menjadi "Happy Birthday" dan menggunakan level API minimum 24 sesuai tutorial, lalu pilih Finish. Lalu tunggu beberapa saat sampai Android Studio selesai loading proyek. Untuk kemudahan maka digunakan virtual device Pixel 7 Pro yang sama dengan minggu lalu.

2. Menampilkan Desain/Preview

Kemudian, ubah nama fungsi pada line 42 kode default menjadi "BirthdayCardPreview", yaitu menyesuaikan dengan aturan penamaan Fungsi Compose (berupa kata benda dan sesuai kegunaan).

Lalu pilih split pada bagian kanan atas MainActivity.kt sehingga dapat menampilkan kode program sekaligus preview desainnya.

Ketika variabel "Android" pada kode program diubah, maka tab design akan terupdate dengan sendirinya. Perlu diingat bahwa karena hanya berupa fungsi @Preview, maka hasil hanya dapat ditampilkan pada tab desain.

Selanjutnya, ubah fungsi bawaan Greeting (line 32) menjadi fungsi GreetingText, lalu comment juga pemanggilan fungsi Greeting di fungsi onCreate dan sesuaikan pemanggilan nama dan isi fungsi GreetingText pada fungsi preview BirthdayCardPreview.

3. Ubah Ukuran dan Alignment Teks

Ukuran teks juga dapat diubah, cara adalah dengan menambahkan import androidx.compose.ui.unit.sp pada bagian atas untuk dapat menggunakan satuan ukuran sp (Scalable Pixel) yang digunakan untuk mengatur ukuran teks. Sedangkan alignment teks diubah dengan mengimport import androidx.compose.ui.text.style.TextAlign . Library-library yang diperlukan dapat diimport secara otomatis dengan menghover pada teks berwarna merah (tidak dapat digunakan karena library belum di-import) lalu klik import.

Sehingga ketika composable Text ditambahkan atribut seperti fontSize, lineHeight, dan textAlign, programmer dapat menentukan karakteristik teks yang ingin digunakan pada UI aplikasinya.

4. Ubah Hierarki UI dan Menambahkan Elemen Teks

Fungsi composable dapat memiliki struktur yang terdiri dari banyak composable elemen Text, beberapa diantaranya adalah Row dan Column. Karena aplikasi akan dibuat untuk membuat ucapan selamat ulang tahun, maka dapat digunakan Column sehingga elemen-elemen Text yang berada di dalamnya akan memiliki bentuk seperti kolom.

Kemudian, ubah fungsi GreetingText agar menerima parameter tambahan yaitu from, yang akan digunakan untuk nama pengirim ucapan selamat ulang tahun. Tambahkan juga argumen nama pemberi ucapan pada BirthdayCardPreview.

5. Panggil Fungsi Composable Pada onCreate

Selanjutnya, panggil fungsi GreetingText pada onCreate beserta argumen yang diperlukan, kemudian run app menggunakan device yang diinginkan. Maka akan terlihat hasil akhir pada Android di sebelah kanan.

6. Modifikasi Tambahan

Lakukan modifikasi terhadap posisi Column, warna teks dan background sesuai dengan kebutuhan menggunakan modifier maupun attribut tambahan. Berikut adalah tampilan hasil akhir dan codenya: 

MainActivity.kt:

Referensi

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#0

https://developer.android.com/jetpack/compose/text/style-text

https://developer.android.com/jetpack/compose/text/style-paragraph