Tugas 7 - Membuat Aplikasi Water Bottle

Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      :  MainActivity.kt & WaterBottle.kt

Tugas 7 - Membuat Aplikasi Water Bottle

Pada tugas ini, dibuat aplikasi water bottle yaitu aplikasi botol air dengan animasi sehingga isinya dapat bertambah ketika user menekan tombol "Drink", pembuatan tugas menggunakan referensi Draw an Animated Water Bottle:

1. Inisiasi Proyek

Pertama-tama buka aplikasi Android Studio lalu pilih New Project -> Empty Activity. Kemudian ubah nama activity menjadi "WaterBottle" 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 hanya berisi WaterBottleTheme.

3. Buat File WaterBottle.kt

Selanjutnya, buat file WaterBottle.kt. File ini akan berfungsi untuk menyimpan fungsi utama dari botol yang akan dibuat.

4. Buat Fungsi WaterBottle

Selanjutnya isi WaterBottle.kt dengan fungsi WaterBottle. Fungsi akan berisi modifier meliputi warna dan variabel dari botol yang akan dibuat. Kemudian buat juga composable Box yang akan digunakan untuk membuat botol.

5. Buat Canvas Pada WaterBottle

Selanjutnya, buat composable Canvas yang akan berisi garis maupun lengkungan yang akan menyusun botol yang dibuat menggunakan moveTo untuk menentukan posisi x dan y awal, lineTo untuk membuat garis lurus dari posisi saat ini ke titik (x,y), dan quadraticBezierTo untuk membuat kurva dari posisi saat ini ke (x2, y2) dengan control point (x1, x2).

6. Panggil Fungsi WaterBottle Pada MainActivity.kt

Selanjutnya kembali ke MainActivity.kt untuk memanggil fungsi WaterBottle yang telah dibuat. Karena nantinya isi dari botol akan bertambah, maka digunakan variabel usedWaterAmount sebagai indikator jumlah air dalam botol saat ini dan totalWaterAmount sebagai ukuran maksimal botol. Kemudian tambahkan button yang berfungsi untuk menambah jumlah air pada botol.

7. Tambahkan clipPath() Pada WaterBottle.kt

Gunakan clipPath() yang akan menggunakan bottleBodyPath yang telah dibuat, kemudian drawRect() akan digunakan untuk menggambar frame botol. Lalu run ulang App, maka terlihat pada tampilan kerangka botol telah berhasil dibuat.

8. Buat Air Pada WaterBottle.kt

Selanjutnya tambahkan value yang menyimpan persentase air dalam botol yaitu waterPercentage. Kemudian gambarkan air di dalam botol pada clipPath() dengan cara yang sama seperti pembuatan botol yaitu drawPath().

Berikut adalah tampilan setelah air berhasil ditambahkan pada botol. Dengan menggunakan tombol yang telah dibuat sebelumnya pada MainActivity.kt, jumlah air pada botol dapat ditambahkan.

9. Tambahkan Tutup Botol

Selanjutnya, buat tampilan tutup botol dengan drawRoundRect menggunakan width dan height yang diinginkan, sehingga hasil akan terlihat seperti gambar di atas.

10. Menampilkan Jumlah Air Dalam Botol

Selanjutnya, gunakan usedWaterAmountAnimation untuk melakukan tracking terhadap jumlah ml yang terisi pada botol. Lalu tambahkan composable box yang akan menyimpan teks jumlah air saat ini pada tengah layar.

Tambahkan pengecekan corner case pada button sehingga isi botol tidak melebihi totalWaterAmount.

11. Hasil Implementasi

Berikut adalah tampilan ketika button Drink dipencet, maka jumlah ml dan isi air dalam botol akan bertambah dan terdapat animasi sehingga tidak terkesan kaku.

Berikut adalah isi code MainActivity.kt & WaterBottle.kt:

MainActivity.kt

WaterBottle.kt

Referensi

https://kuliahppb.blogspot.com/2024/04/material-design.html

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

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