ETS - Pemrograman Perangkat Bergerak

    Nama   : Theresia Nawangsih
    NRP       : 5025201144
    Kelas    : PPB - I

Evaluasi Tengah Semester

Pada pertemuan kali ini, kelas kami telah melakukan Evaluasi dengan "Redesign dan Implementasi sebuah aplikasi tiket yang sering digunakan". Saya memiilih aplikasi 'Tiket.com" dan ada 2 fitur yang sering saya gunakan

Redesign

Dari hasil redesign, saya mengimplementasikan nya sehingga hasilnya seperti dokumentasi dibawah ini

Hasil Dokumentasi Implementasi Gambar

Login

Beranda

List

Hasil Dokumentasi Implementasi Video

Source Code

LoginActivity.kt

package com.example.ets_pweb

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.ClickableText
//import androidx.compose.material.*
//import androidx.compose.material.icons.Icons
////import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.shape.RoundedCornerShape

@Composable
fun LoginActivity() {

    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 16.dp, vertical = 32.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.pesawat),
            contentDescription = "Login Image",
            modifier = Modifier.size(300.dp)
        )

        Spacer(modifier = Modifier.height(32.dp))

        Text(
            text = "Masuk",
            fontWeight = FontWeight.Bold,
            fontSize = 24.sp,
            modifier = Modifier.align(Alignment.Start)
        )

        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text(text = "Email / Nomor Telepon") },
            placeholder = { Text(text = "Contoh: johndoe@gmail.com") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text(text = "Password") },
            placeholder = { Text(text = "Masukkan password") },
            visualTransformation = PasswordVisualTransformation(),
            trailingIcon = {
                IconButton(onClick = { /* Handle visibility toggle */ }) {
//                    Icon(imageVector = Icons.Default.Visibility, contentDescription = "Toggle password visibility")
                }
            },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(8.dp))

        ClickableText(
            text = AnnotatedString("Lupa Kata Sandi"),
            onClick = { /* Handle forgot password click */ },
            modifier = Modifier.align(Alignment.End),
            style = androidx.compose.ui.text.TextStyle(color = Color(0xFFB4A460))
        )

        Spacer(modifier = Modifier.height(24.dp))

        Button(
            onClick = { Log.i("Credential", "Email : $email Password : $password") },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFD4AF37)),
            shape = RoundedCornerShape(24.dp),
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            Text(
                text = "Masuk",
                fontWeight = FontWeight.Bold,
                color = Color.Black,
                fontSize = 16.sp
            )
        }

        Spacer(modifier = Modifier.height(32.dp))

        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Belum punya akun?")
            Spacer(modifier = Modifier.width(4.dp))
            ClickableText(
                text = AnnotatedString("Daftar di sini"),
                onClick = { /* Handle sign up click */ },
                style = androidx.compose.ui.text.TextStyle(color = Color(0xFFD4AF37))
            )
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun LoginActivityPreview() {
    LoginActivity()
}

FlightSearchScreen.kt

package com.example.flightsearch

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun FlightSearchScreen() {
    Scaffold(
        bottomBar = { BottomNavigationBar() }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
                .padding(16.dp)
        ) {
            Text(
                text = "Hei, Mau kemana?",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold
            )
            Spacer(modifier = Modifier.height(16.dp))
            FlightSearchForm()
            Spacer(modifier = Modifier.height(16.dp))
            Text(
                text = "Destinasi Favorit",
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
            Spacer(modifier = Modifier.height(8.dp))
            FavoriteDestinations()
        }
    }
}

@Composable
fun FlightSearchForm() {
    Column(
        modifier = Modifier
            .background(Color(0x50E4D388), RoundedCornerShape(8.dp))
            .padding(16.dp)
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            TextField(
                value = "Jakarta (JKTA)",
                onValueChange = {},
                label = { Text("From") },
                modifier = Modifier
                    .weight(1f)
            )
            IconButton(onClick = {}) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_swap),
                    contentDescription = null
                )
            }

            TextField(
                value = "Melbourne (MLB)",
                onValueChange = {},
                label = { Text("To") },
                modifier = Modifier.weight(1f)
            )
        }
        Spacer(modifier = Modifier.height(8.dp))
        Row(verticalAlignment = Alignment.CenterVertically) {
            Checkbox(
                checked = false,
                onCheckedChange = {}
            )
            Text(text = "Pulang-Pergi?")
        }
        Spacer(modifier = Modifier.height(8.dp))
        TextField(
            value = "2024-01-11",
            onValueChange = {},
            label = { Text("Keberangkatan") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        Row {
            TextField(
                value = "2 Penumpang",
                onValueChange = {},
                label = { Text("Penumpang") },
                modifier = Modifier.weight(1f)
            )
            Spacer(modifier = Modifier.width(8.dp))
            TextField(
                value = "Business",
                onValueChange = {},
                label = { Text("Kelas Kursi") },
                modifier = Modifier.weight(1f)
            )
        }
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = {},
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFD4AF37)),
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Cari Penerbangan", color = Color.Black)

        }
    }
}

@Composable
fun FavoriteDestinations() {
    Column(
        modifier = Modifier
            .background(Color(0x50E4D388), RoundedCornerShape(8.dp))
            .padding(16.dp)
    ) {
        DestinationCard(
            destination = "Jakarta -> Bangkok",
            airline = "AirAsia",
            dates = "20 - 30 Maret 2023",
            price = "Mulai dari IDR 950.000",
            imageRes = R.drawable.bangkok

        )
        Spacer(modifier = Modifier
            .height(8.dp)
        )
        DestinationCard(
            destination = "Jakarta -> Sydney",
            airline = "AirAsia",
            dates = "5 - 25 Maret 2023",
            price = "Mulai dari IDR 3.650.000",
            imageRes = R.drawable.sydney
        )

    }
}

@Composable
fun DestinationCard(destination: String, airline: String, dates: String, price: String, imageRes: Int) {
    Card(
        shape = RoundedCornerShape(8.dp),
        modifier = Modifier
            .fillMaxWidth()
            .background(Color(0x50E4D388))
    ) {
        Column {
            Image(painter = painterResource(id = imageRes), contentDescription = null, modifier = Modifier.height(150.dp).fillMaxWidth())
            Spacer(modifier = Modifier.height(8.dp))
            Column(modifier = Modifier.padding(8.dp)) {
                Text(text = destination, fontWeight = FontWeight.Bold)
                Text(text = airline)
                Text(text = dates)
                Text(text = price, color = Color.Red, fontWeight = FontWeight.Bold)
            }
        }
    }
}

@Composable
fun BottomNavigationBar() {
    NavigationBar(
        containerColor = Color(0xFFE0E0E0)
    ) {
        NavigationBarItem(
            icon = { Icon(Icons.Filled.Home, contentDescription = null) },
            selected = true,
            onClick = {}
        )
        NavigationBarItem(
            icon = { Icon(Icons.Filled.Search, contentDescription = null) },
            selected = false,
            onClick = {}
        )
        NavigationBarItem(
            icon = { Icon(Icons.Filled.Notifications, contentDescription = null) },
            selected = false,
            onClick = {}
        )
        NavigationBarItem(
            icon = { Icon(Icons.Filled.AccountCircle, contentDescription = null) },
            selected = false,
            onClick = {}
        )
    }
}

FlightApp.kt

package com.example.flightapp

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun FlightApp() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .verticalScroll(rememberScrollState())
            .padding(16.dp)
    ) {
        FlightDateSelector()
        Spacer(modifier = Modifier.height(16.dp))
        FlightList()
    }
}

@Composable
fun FlightDateSelector() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color(0xFFFAEBD7))
            .padding(8.dp),
        horizontalArrangement = Arrangement.SpaceAround
    ) {
        Text(text = "Selasa\n01/03/2023")
        Text(text = "Rabu\n02/03/2023", fontWeight = FontWeight.Bold, color = Color(0xFFDAA520))
        Text(text = "Kamis\n03/03/2023")
        Text(text = "Jumat\n04/03/2023")
    }
}

@Composable
fun FlightList() {
    Column {
        FlightItem(time = "07:00", price = "IDR 4.950.000", isSpecialOffer = false)
        FlightItem(time = "07:20", price = "IDR 5.950.000", isSpecialOffer = true)
        FlightItem(time = "09:10", price = "IDR 6.950.000", isSpecialOffer = false)
        FlightItem(time = "13:15", price = "IDR 7.000.000", isSpecialOffer = false)
    }
}

@Composable
fun FlightItem(time: String, price: String, isSpecialOffer: Boolean) {
    val backgroundColor = if (isSpecialOffer) Color(0xFFFDEBD0) else Color.White
    val priceColor = if (isSpecialOffer) Color.Red else Color.Black

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(backgroundColor)
            .padding(8.dp)
            .padding(vertical = 16.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Column {
            Text(text = time, fontSize = 18.sp, fontWeight = FontWeight.Bold)
            Text(text = "Direct")
            Text(text = "Jet Air - Economy")
        }
        Column(horizontalAlignment = androidx.compose.ui.Alignment.End) {
            if (isSpecialOffer) {
                Box(modifier = Modifier.background(Color.Yellow).padding(4.dp)) {
                    Text(text = "Today Only!", fontWeight = FontWeight.Bold)
                }
            }
            Text(text = price, fontSize = 20.sp, color = priceColor, fontWeight = FontWeight.Bold)
        }
    }
}