ETS PPB I - Aplikasi Tiket

Nama: Aaliyah Farah Adibah

NRP: 5025201070

Kelas: PPB I

Dokumentasi Aplikasi Pemesanan Tiket Kereta dengan Jetpack Compose

Untuk Evaluasi Tengah Semester kali ini, diminta untuk meredesign aplikasi pemesanan tiket. Saya meredesign aplikasi Traveloka bagian pemesanan tiket kereta. Berikut hasil redesign yang telah dilakukan berdasarkan halaman.

1.    Splash Screen

Splash screen adalah gambar atau layar pendahuluan yang muncul saat sebuah aplikasi atau program sedang dimuat atau dibuka. Pada bagian ini saya mengganti logo android dengan logo aplikasi saya. Berikut tampilannya.

2.    Login Page (LoginActivity.kt)

Login Page pada aplikasi ini memiliki 3 fitur utama, yaitu pada 2 field input untuk memasukkan email dan password, serta tombol button yang akan menuju activity lain. Tombol button ini akan membuat LoginActivity.kt() menjadi mode finish() dan akan start() activity baru, yaitu MainActivity.kt (menuju Homepage).  

3.    MainActivity.kt

MainActivity dibuat untuk mengarahkan fragment-fragment yang ada. Saya menggunakan NavHostFragment yang bertanggung jawab untuk menampilkan fragment yang sesuai berdasarkan navigasi yang ditentukan. Dalam pengaturan navigasi, MainActivity bekerja dengan beberapa file, yaitu NavigationItem.kt dan Screen.kt. 

File NavigationItem.kt berisi sebuah data class yang merepresentasikan item navigasi dalam aplikasi.

File Screen.kt bertujuan untuk mengidentifikasi tujuan navigasi dalam aplikasi.

Objek tersebut akan membuat Navigation button menuju HomeScreen.kt , PromoScreen.kt , ProfileScreen.kt . Berikut tampilan navigasinya.

4.    Homepage (HomeScreen.kt)

Homepage ini berupa form stasiun asal, stasiun tujuan, tanggal, dan jumlah kursi. Untuk stasiun asal, stasiun tujuan, dan jumlah kursi menggunakan dropdown yang memanggil file DropdownStasiun.kt pada packgae components. Digunakannya sebagai component terpisah karena 1 komponen yang sama dapat dapat digunakan berkali-kali sehingga menghemat kode. Berikut code dari component DropdownStasiun.kt .

Lalu, ada tanggal yang akan menampilkan widget kalender dengan memanggil fungsi TimePickerScreen.kt .

Selanjutnya, ada tombol Cari Tiket yang akan mengarah pada activity lain, yaitu SearchResultActivity.kt

5.    Halaman Hasil Pencarian (SearchResultActivity.kt) 

SearchResultActivity.kt menggunakan list yang berisi card untuk memuat data. Berikut tampilan dari halaman Hasil Pencarian.

Halaman ini memiliki tombol pesan yang ketika di klik akan mengarahkan ke halaman Pilih Kursi (SeatActivity.kt).

6.    Halaman Pilih Kursi (SeatActivity.kt)

Pada halaman ini pengguna dapat memilih kursi yang tersedia (berwarna putih). Halaman ini berkaitan dengan SeatObject.kt yang bertujuan untuk menggambar layout kursi.

Selanjutnya, ada Button yang apabila di klik akan meuju Halaman Pembayaran (BookingActivity.kt)  

7.    Halaman Pembayaran (BookingActivity.kt)

Pada halaman ini pengguna dapat melihat detail pemesanan dan berapa jumlah pemesanan yang perlu dibayar.

Pada halaman ini, juga terdapat Button "Konfirmasi Pembayaran" yang akan mengarahkan pengguna menuju Halaman Transaksi Sukses (FinalActivity.kt)

8.    Halaman Transaksi Sukses (FinalActivity.kt)

Pada halaman ini pengguna dapat melihat detail pemesanan dan bisa kembali ke halaman utama.

 9.    Halaman Promo (PromoScreen.kt)

Halaman Promo merupakan sebuah fragment yang berisi promo berbentuk card. Terdapat juga tombol "COPY" untuk menyalin kode promo.

  9.    Halaman Profile (ProfileScreen.kt)

Halaman Profile merupakan sebuah fragment yang berisi data profile. 

Berikut hasil dokumentasi dari Aplikasi Pemeasanan Tiket Kereta Api. Berikut link-link tambahan dokumentasi lainnya.

Demo Aplikasi (Youtube): https://youtu.be/Xx-BViVZuqM

Demo Kode Aplikasi (Youtube): https://youtu.be/V6CNYUSTbB4

Github: https://github.com/aaliyahfarah/Aplikasi-Pemesanan-Tiket-Kereta