ETS Pemrograman Perangkat Bergerak

Mei 15, 2024

ETS Pemrograman Perangkat Bergerak

Nama : Helsa Nesta Dhaifullah

NRP : 5025201005

Kelas : PPB I - 2024

Redesign Aplikasi Tiket

Dalam aplikasi KAI Access, fitur utama yang sering saya gunakan adalah pencarian tiket kereta untuk melihat jadwal keberangkatan dan jadwal tiba dari kereta. Seringkali ketika saya berencana untuk bepergian ke luar kota, saya selalu mengecek estimasi waktu dan harga kereta dari fitur tersebut. Saya tidak pernah membeli tiket kereta melalui aplikasi tersebut karena memang saya gunakan hanya untuk melihat hal-hal yang saya sebutkan sebelumnya.

Berikut adalah hasil redesign dari KAI Access:

Redesign Halaman Login

Redesign Halaman Cari Tiket Kereta

Redesign Halaman Hasil Pencarian Tiket Kereta

Implementasi Android Apps

Dari desain yang telah dibuat, selanjutnya akan diimplementasikan menjadi bentuk aplikasi Android sederhana. Berikut adalah pratinjau dari aplikasi yang telah berhasil diimplementasikan.

Halaman-Halaman Aplikasi

Splash Screen
SplashScreen adalah layar pertama yang muncul saat sebuah aplikasi Android dibuka. Tujuannya adalah untuk memberikan pengguna pengalaman awal yang menarik sambil menampilkan merek atau logo aplikasi. Biasanya, Splash Screen hanya ditampilkan dalam waktu singkat sebelum aplikasi memuat tampilan utama. Ini memberikan kesan profesional dan menyenangkan kepada pengguna saat mereka menunggu aplikasi untuk siap digunakan.

Untuk mengimplementasikan splash screen, tambahkan libary berikut ke dalam file build.gradle.kts
```
implementation("androidx.core:core-splashscreen:1.0.1")
```
Lalu untuk logo KAI yang akan ditampilkan dalam Splash Screen, dibuat melalui langkah-lagkah berikut.
1️⃣ Buat frame persegi sebesar 288 x 288 di figma
2️⃣ Tambahkan di atas frame tersebut, bentuk persegi berukuran 192 x 192
3️⃣ Buat lingkaran berukuran 192 x 192 dan tempatkan diatas persegi di no 2
4️⃣ Tempatkan logo KAI di lingkaran, atur ukuran logo hingga tidak melebihi sisi lingkaran
5️⃣ Setelah itu hapus bentuk lingkaran dan persegi ukuran 192 x 192, menyisakan persegi no 1
6️⃣ Export sebagai svg, lalu import file svg ke website Shape Shifter (tempatkan path dalam grup layer)
7️⃣ Atur animasi yang akan dibuat melalui grup layer
8️⃣ Export sebagai file Animated Vector Drawable

Setelah itu import file logo KAI yang telah dianimasikan ke dalam folder res/drawable. Buat file splash.xml di folder res/values dan salin kode berikut.
```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.ETSPPB.MySplash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/avd_kai</item>
        <item name="windowSplashScreenAnimationDuration">3000</item>
        <item name="postSplashScreenTheme">@style/Theme.ETSPPB</item>
    </style>
</resources>
```
Ubah android:theme pada file AndroidManifest.xml dengan nama dari style resource splash screen
```
<activity
   android:name=".MainActivity"
   android:exported="true"
   android:label="@string/app_name"
   android:theme="@style/Theme.ETSPPB.MySplash">
```
Terakhir, install Splash Screen di halaman Main Activity tepat sebelum setContent.
```
installSplashScreen().apply {
   setKeepOnScreenCondition{
      !viewModel.isReady.value
   }
}
```
Tampilan Splash Screen
Login Page

Berdasarkan desain halaman login yang telah dibuat, halaman akan terdiri dari gambar logo PT KAI, gambar Traveller, Teks Login, formulir login berisi username dan password, dan tombol Login yang akan menavigasikan pengguna ke halaman berikutnya.

Implementasi Halaman Login Page

Berikut adalah kode program untuk implementasi Login Page.
Search Train Schedule Page
Halaman ini merupakan implementasi dari desain halaman cari tiket kereta. Konten halaman ini diapit oleh TopAppBar dan BottomAppBar.

Implementasi Halaman Cari Tiket Kereta

📌 TopAppBar berisi Title dari halaman "Pilih Kereta" dan juga ada icon arrow back, yang akan menavigasikan pengguna untuk kembali ke halaman login.
📌 BottomAppBar berisi tiga menu utama dari aplikasi yaitu Home, Ticket, dan Account. Menu Ticket Aktif karena saat ini pengguna berada di halaman Pencarian Tiket Kereta, ditandai dengan warna orange.
📌 Konten Halaman untuk pencarian tiket kereta terdiri dari beberapa field yang harus diisi yaitu pilih stasiun keberangkatan, stasiun tujuan, pilih tanggal keberangkatan, jumlah penumpang dewasa, dan jumlah penumpang anak-anak. Berikutnya terdapat button submit yang akan membawa pengguna ke halaman berikutnya, tentu dengan mengirimkan data dari formulir pencarian.

Berikut adalah kode program untuk implementasi halaman ini.
Schedule of Trains Page
Halaman ini merupakan implementasi dari desain halaman hasil pencarian tiket kereta. Konten halaman ini diapit oleh TopAppBar dan BottomAppBar.

Implementasi Halaman Hasil Pencarian Kereta

📌 TopAppBar berisi judul dari halaman, dimana yang ditampilkan pada judul adalah stasiun keberangkatan dan tujuan dari data formulir pencarian tiket kereta. Selanjutnya di bawah judul juga tertulis jumlah penumpang, mengambil data dari jumlah penumpang dewasa dan anak-anak. Di bawahnya lagi terdapat tanggal keberangkatan, mengambil data dari tanggal yang dipilih oleh pengguna. Selain itu di samping kiri judul, terdapat icon arrow back, yang akan menavigasikan pengguna untuk kembali ke halaman cari tiket kereta.
📌 BottomAppBar berisi dua menu yaitu urutkan dan filter. Namun keduanya belum tersedia fungsionalitasnya.
📌 Konten Halaman hasil pencarian tiket kereta terdiri dari beberapa kartu. Setiap kartu memiliki nama Kereta, tipe kelas kereta, estimasi waktu tempuh, estimasi harga, serta jika kapasitas total dari kereta terisi 80% maka akan muncul jumlah sisa kursi yang tersedia.

Berikut adalah kode program untuk implementasi halaman ini.

Untuk menunjang agar aplikasi berjalan dengan lancar, ada beberapa hal yang perlu ditambahkan yaitu navigasi untuk berpindah halaman serta object data berisi data dummy dari kereta api.

Navigasi
Langkah pertama untuk implementasi navigasi adalah dengan menambahkan libary berikut ke dalam file libs.version.toml. Lalu klik sync now.

[versions]
...
composeNavigation = "2.8.0-alpha08"
serialization = "1.6.3"

[libraries]
...
navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "composeNavigation" }
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "serialization"}

[plugins]
...
kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }

Setelah berhasil di build, tambahkan library tersebut ke dalam build.gradle.kts. Lakukan sync now kembali.

plugins {
    ...
    alias(libs.plugins.kotlin.serialization)
}

dependencies {
    ...
    implementation(libs.navigation.compose)
    implementation(libs.kotlinx.serialization.json)
}

Selanjutnya install navController di MainActivity.kt dan definisikan Route nya dengan annotation @serializable.

class MainActivity : ComponentActivity() {
    private val viewModel by viewModels<MainViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        installSplashScreen().apply {
            setKeepOnScreenCondition{
                !viewModel.isReady.value
            }
        }
        setContent {
            ETSPPBTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val navController = rememberNavController()
                    NavHost(
                        navController = navController,
                        startDestination = ScreenA
                    ) {
                        composable<ScreenA> {
                            //GreetingA(navController, "Android")
                            LoginScreen(navController)
                        }
                        composable<ScreenB> {
                            val args = it.toRoute<ScreenB>()
                            SearchTrainSchedule(navController, args)
                        }
                        composable<ScreenC>{
                            val args = it.toRoute<ScreenC>()
                            ScheduleOfTrains(navController, args)
                        }
                    }
                }
            }
        }
    }
}

@Serializable
object ScreenA

@Serializable
data class ScreenB(
    val name: String,
)

@Serializable
data class ScreenC(
    val departureStation: String,
    val arrivalStation: String,
    val totalPassangers: Int,
    val dateDeparture: String
)

Terakhir, terapkan navController.navigate di setiap fungsi onClick button/icon yang akan digunakan untuk navigasi

Object Data
📌 Data untuk nama statsiun

object StationsData {
    val stations = listOf(
        "Gambir (GMR)",
        "Bandung (BD)",
        "Yogyakarta (YK)",
        "Surabaya (SBY)",
        "Jakarta (JKT)",
        "Semarang (SMG)",
    )
}

📌 Data nama kereta dan tipe kelasnya

object TrainsData {
    val famousTrainNames = listOf(
        "Argo Bromo Anggrek",
        "Argo Dwipangga",
        "Argo Parahyangan",
        "Taksaka Pagi",
        "Gajayana",
        "Bima",
        "Turangga",
        "Lodaya",
        "Mutiara Selatan",
        "Matarmaja",
        "Senja Utama Solo",
        "Senja Utama Yogyakarta",
    )

    val trainClasses = listOf(
        "Eksekutif",
        "Bisnis",
        "Ekonomi AC",
        "Ekonomi Non-AC",
        "Premium"
    )
}

Kode Solusi

Untuk mendapatkan kode solusi dari implementasi aplikasi Android tersebut, dapat mengunjungi url berikut.
Github Url: https://github.com/helsanesta/ETS-PPB

Cari Blog Ini

Catatan Kuliah