Evaluasi Tengah Semester - mtix

Aplikasi mtix Tiket Bioskop XXI

Nama: Surya Abdillah

NRP: 5025201229

Kelas: PPB I 2024

Pada Evaluasi Tengah Semester, kami diminta untuk melakukan redesign pada aplikasi tiket yang kami gunakan. Saya memilih aplikasi mtix. Alasan saya memilih aplikasi ini karena sangat membantu untuk memilih film apa yang kira-kira ingin saya nonton. Dan kebetulan memang saya lagi ingin sekali menonton film How To Make Millions before Grandma Dies. Oke tanpa panjang lebar kita akan masuk ke tahapan redesign dan implementasi.

Redesign

Dalam melakukan redesign akan menjadi lebih enak apabila terdapat referensi dari aplikasi yang asli, berikut tampilan aplikasi yang asli:

Fitur yang sering saya gunakan adalah lihat detail bioskop, jadi fitur ini dan tamabahan login adalah fitur yang saya implementasikan. Setelah melewati masa berpikir di kelas, terpikirkan untuk redesign menjadi seperti ini:

Anda juga dapat melihat prototype pada link berikut:

Prototype Redesign mtix

Implementasi Kotlin

Pada ETS saya memilih menggunakan Kotlin yang memang biasa digunakan dengan memanfaatkan Compose utamanya. Saya membuat projek baru dengan tipe Empty Activity dengan Oreo API 26 Android 8.0. Terdapat 4 screen pada aplikasi ini, yaitu:

• Load Screen
• Login Screen
• Home Screen
• Detail Movie Screen

Implementasi dari masing-masing screen dijelaskan di bawah ini.

GENERAL

Untuk keseluruhan screen, saya melakukan perubahan warna pada navbar dan statusbar android. hal ini dapat dilakukan dengan merubah atribut window menjadi seperti ini:

Selain itu saya juga menonaktifkan darktheme, sehingga akan digunakan lightmodel, tetapi saya juga mengaktifkan icon pada status bar dengan kondisi darktheme, sehingga warna icon menjadi putih. File Theme.kt menjadi berikut:

Saya juga memanfaatkan file yang ada pada folder res dan ui.theme untuk menyimpan nilai-nilai yang sering digunakan, seperti tipografi, warna, string, ukuran-ukuran. Penyesuaian item-item ini dapat dilihat pada file Color.kt dan Type.kt pada folder ui.theme, serta file colors.xml, dimens.xml, dan strings.xml pada folder res values. Selain itu, Font yang saya gunakan adalah Poppins, dimana sudah saya download dari Google Fonts dan letakkan pada folder font di res. 

Dalam beberapa bagian saya menggunakan efek shadow. Efek bawaan shadow pada Compose masih kurang baik, sehingga saya mencari referensi lain yang sekiranya lebih bagus. Saya mendapatkan referensi yang bagus dari https://www.youtube.com/watch?v=LqvaiNmVIaI. 

LOAD SCREEN

Load screen merupakan tampilan awal saat membuka aplikasi, tampilan hanya berupa logo XXI sebagai inti dan latar belakang berwarna hijau elegan. Untuk membentuk load screen hanya diperlukan komponen Surface dan Image saja, sebagai berikut:

Animasi pada load screen hanya berupa delay selama 300 ms atau 3 detik saja, lalu akan masuk pada login screen.

LOGIN SCREEN

serupa dengan tugas sebelumnya, kali ini juga memerlukan login screen. Komponen yang digunakan adalah gambar, outlinedtextfield, text, dan button. Ukuran gambar disesuaikan dengan screenwidth dengan mengambil nilai melalui configuration. komponen yang digunakan dalam screen ini adalah surface, column, image, spacer, text, outlinedtextfield,  dan button. Untuk melakukan perubahan warna pada item button dan outlinedtextfield, kita perlu meng override nilai warna defaults. Sumber kode sebagai berikut:

Ketika user sudah memasukkan email dan password, maka akan diarahkan ke home screen. Implementasi ini ada pada bagian onClick pada komponen button dengan mengarahkan pada onLoginSuccess().

HOME SCREEN

Pada bagian ini bisa dipisah menjadi topbar dan cards film. topbar dibentuk menggunkan komponen row dan image sebagai berikut:

Sedangkan, untuk membentuk cards saya menggunakan LazyVerticalStraggredGrid karena saya ingin membuat 2 kolom yang dapat discroll bersamaan. Data yang saya gunakan memang saya, tetapi saya sudah mengimplementasikan data class dengan membentuk folder data dengan file Movie.kt seperti ini:

Animasi yang ada pada screen ini adalah ketika user mengklik card, maka akan diarahkan ke halaman detail. Pada kesempatan ini saya hanya membuat satu halaman detail saja, dalam artian keseluruhan card akan mengarah ke satu halaman detail yang sama. Implementasi fitur ini dapat dilakukan dengan mmemberikan clickable pada modifier card dan menavigasikan ke halaman detail.

DETAIL SCREEN

Halaman detail ini berisi informasi terkait dengan film. Sebenarnya terdapat banyak informasi yang bisa ditambahkan, tetapi saya hanya memasukkan poster, judul, sinopsis, dan pemain sebagai contohnya. Selain itu, saya juga ingin mennampilkan daftar bioskop yang menampilkan film tersebut, tetapi untuk implementasinya cukup rumit dibanding apa yang sudah dipelajari, sehingga tidak dilakukan. 

Pada halaman ini animasi hanya ada pada back button di top bar, berbeda dengan topbar pada halaman home. implementasi ini dilakukan dengan memberikan clickable dan melakukan navigasi pada home screen. Sumber kode sebagai berikut:

NAVIGASI

navigasi dilakukan dengan mendefinisikan screen yang ada, lalu membuat animasi yang sesuai. Implementasi load screen dengan effect delay pada LaunchedEffect. untuk navigasi lain ada pada komponen CrossFade dengan mengarahkan ke screen yang sesuai.

VIDEO DEMO

Mohon maaf dalam demo terjadi banyak kelasahan pengucapan, sebagai klarifikasi dalam pengerjaan ini saya mengerjakan secara individu. Sekiranya terjadi kekhawatiran dan memerlukan saya untuk menjelaskan ulang, maka saya bersedia. Terima kasih 

HASIL IMPLEMENTASI

SUMBER KODE

https://github.com/SuryaAbdillah/mtix_redesign_app