Senin, 28 April 2025

ETS PPB G - 5025221156

ETS PPB G

Rakha Fathin Izzan Consetta & Muhammad Aqil Farrukh

5025221156 & 5025221158

Berikut adalah link video presentasi 

https://drive.google.com/file/d/1nXqJ9KhjN2vqtd7MxmPZVSpQPc8DZis8/view?usp=sharing


Berikut adalah link pdf

https://drive.google.com/file/d/1mTkJW9ut_x9xRpMcDc_Av8Q0JdnJmEE0/view?usp=sharing


Berikut adalah link source code

https://github.com/qiqioberon/ETS-PPB


Berikut adalah link aplikasi

https://drive.google.com/file/d/1mTkJW9ut_x9xRpMcDc_Av8Q0JdnJmEE0/view?usp=sharing

di Tidak ada komentar:

Jumat, 18 April 2025

Tugas 7 - Pemrograman Perangkat Bergerak G - Membuat UI Login Page Sederhana

Membuat Tampilan UI Login Page Sederhana dengan Android Studio dan Jetpack Compose

Dalam tugas ini, saya Rakha Fathin Izzan Consetta (5025221156) membuat sebuah UI login page sederhana menggunakan Android Studio dan Jetpack Compose. Aplikasi ini bertujuan menampilkan antarmuka login yang modern, responsif, dan mudah dipahami. Fokus utamanya adalah pada tampilan dan interaksi, tanpa koneksi ke backend atau autentikasi yang sesungguhnya.

1. Struktur Umum Aplikasi

Proyek ini terdiri dari dua file utama:

  • MainActivity.kt – sebagai entry point aplikasi

  • LoginScreen.kt – berisi seluruh desain tampilan login

2. Penjelasan File MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LoginScreen()
        }
    }
}

Penjelasan:

  • MainActivity adalah activity utama.

  • Fungsi setContent {} digunakan untuk menetapkan tampilan UI menggunakan Compose.

  • LoginScreen() adalah fungsi composable yang menampilkan halaman login.

3. Penjelasan File LoginScreen.kt

File ini memuat seluruh desain UI halaman login. Tampilan dibuat dengan struktur vertikal menggunakan Column.

a. Inisialisasi State

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

Penjelasan:

  • Dua buah state digunakan untuk menyimpan nilai input dari pengguna, yaitu email dan password.

  • remember digunakan agar nilai tetap tersimpan selama composable aktif.

b. Struktur Kolom dan Elemen UI

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
)

Penjelasan:

  • Menggunakan Column untuk menata elemen UI secara vertikal.

  • Arrangement.Center dan Alignment.CenterHorizontally membuat elemen berada di tengah layar.

c. Gambar dan Judul

Image(
    painter = painterResource(id = R.drawable.img_login),
    contentDescription = "Login Image",
    modifier = Modifier.size(200.dp)
)
Text("Welcome Back", fontSize = 28.sp, fontWeight = FontWeight.Bold)
Text("Login to your account")

Penjelasan:

  • Menampilkan gambar login sebagai hiasan.

  • Menambahkan teks sambutan dengan ukuran dan gaya huruf tertentu.

d. Input Email dan Password

OutlinedTextField(value = email, onValueChange = { email = it }, label = { Text("Email address") })
OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    visualTransformation = PasswordVisualTransformation()
)

Penjelasan:

  • Menggunakan OutlinedTextField untuk input yang memiliki label dan border.

  • PasswordVisualTransformation() digunakan untuk menyembunyikan karakter password.

e. Tombol Login

Button(onClick = {
    Log.i("Credential", "Email : $email Password : $password")
}) {
    Text("Login")
}

Penjelasan:

  • Ketika tombol ditekan, informasi email dan password dicetak di logcat (untuk keperluan pengujian/debug).

f. Fitur Tambahan (Lupa Password & Login Sosial Media)

Text(text = "Forgot password?", modifier = Modifier.clickable {})
Text(text = "Or sign in with")
Row(...) {
    Image(...) // Facebook
    Image(...) // Google
    Image(...) // X/Twitter
}

Penjelasan:

  • Memberikan opsi "Lupa Password?" meskipun belum dihubungkan dengan logika apapun.

  • Menyediakan ikon media sosial sebagai alternatif login (dekoratif saja untuk saat ini).

4. Tampilan UI yang Dihasilkan





Akan muncul credential pada Logcat setelah diklik tombol login:


Tampilan akhir terdiri dari:

  • Gambar ilustrasi login

  • Judul dan subjudul

  • Input untuk email dan password

  • Tombol login

  • Teks "Forgot password?"

  • Ikon login via Facebook, Google, dan X.

5. Full Code

di file MainActivity.kt
package com.example.mylogin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.mylogin.ui.theme.MyLoginTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LoginScreen()
        }
    }
}
di file LoginScreen.kt
package com.example.mylogin

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.runtime.Composable
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun LoginScreen(){

    var email by remember{
        mutableStateOf("")
    }

    var password by remember{
        mutableStateOf("")
    }

    Column (
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,

    ){
        Image(
            painter = painterResource(id = R.drawable.img_login),
            contentDescription = "Login Image",
            modifier = Modifier.size(200.dp)
        )
        Text(
            text = "Welcome Back",
            fontSize = 28.sp,
            fontWeight = FontWeight.Bold
        )
        Spacer(modifier = Modifier.height(4.dp))
        Text(
            text = "Login to your account"
        )
        OutlinedTextField(value = email, onValueChange = {
            email = it
        }, label = {
            Text(text = "Email address")
        })

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

        OutlinedTextField(value = password, onValueChange = {
            password = it
        }, label = {
            Text(text = "Password")
        }, visualTransformation = PasswordVisualTransformation())

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

        Button(onClick = {
            Log.i("Credential", "Email : $email Password : $password")
        }){
            Text(text = "Login")
        }

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

        Text(text = "Forgot password?", modifier = Modifier.clickable {

        })

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

        Text(text = "Or sign in with")

        Row (
            modifier = Modifier.fillMaxWidth().padding(40.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ){
            Image(
                painter = painterResource(id = R.drawable.fb),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        // Facebook clicked
                    }
            )

            Image(
                painter = painterResource(id = R.drawable.gg),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        // Facebook clicked
                    }
            )

            Image(
                painter = painterResource(id = R.drawable.x),
                contentDescription = "Facebook",
                modifier = Modifier
                    .size(60.dp)
                    .clickable {
                        // Facebook clicked
                    }
            )
        }
    }

}

6. Kesimpulan

Aplikasi ini berhasil membangun tampilan UI login yang sederhana namun fungsional dengan menggunakan Jetpack Compose. Komponen seperti TextField, Button, Image, dan Row memberikan kontrol penuh atas desain dan interaktivitas antarmuka.

Dengan pendekatan deklaratif dari Jetpack Compose, pembuatan UI menjadi lebih efisien dan modern dibandingkan metode XML tradisional.








 

di Tidak ada komentar:

Rabu, 16 April 2025

Tugas 6 - Pemrograman Perangkat Bergerak G - Membuat Konversi USD to IDR


Membuat Aplikasi Konversi USD ke IDR dengan Android Studio dan Jetpack Compose

Pada tugas kali ini, saya Rakha Fathin Izzan Consetta (5025221156) membuat sebuah aplikasi Android sederhana dengan fungsi utama mengkonversi mata uang dari USD (Dollar Amerika) ke IDR (Rupiah Indonesia). Aplikasi ini dibangun menggunakan Android Studio dengan memanfaatkan Jetpack Compose, yaitu toolkit modern untuk membangun UI native di Android.

1. Deskripsi Program

Program ini memiliki tampilan yang minimalis namun fungsional. Pengguna cukup memasukkan nominal dalam USD, kemudian menekan tombol "Konversi" untuk mendapatkan hasil konversi ke Rupiah. Nilai tukar yang digunakan adalah kurs tetap yaitu 1 USD = 16.000 IDR.

2. Struktur Kode

a. MainActivity.kt

package com.example.usdtoidr

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
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.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.usdtoidr.ui.theme.USDToIDRTheme

Pada bagian awal, saya mengimpor beberapa library yang dibutuhkan untuk membangun UI menggunakan Jetpack Compose, termasuk layout, tombol, input, dan tema.

b. MainActivity dan Fungsi onCreate

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            USDToIDRTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CurrencyConverter()
                }
            }
        }
    }
}

Fungsi onCreate() adalah titik awal eksekusi aplikasi. Saya menggunakan setContent untuk menentukan isi UI menggunakan komponen Compose. Di dalamnya, saya memanggil fungsi CurrencyConverter() yang saya buat untuk menampilkan antarmuka utama aplikasi.

c. Fungsi CurrencyConverter()

@Composable
fun CurrencyConverter() {
    var usdInput by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }
    val exchangeRate = 16000.0

Dalam fungsi ini, saya mendefinisikan dua state: usdInput untuk menyimpan input pengguna dan result untuk menyimpan hasil konversi. Saya juga menetapkan kurs tetap exchangeRate sebesar 16.000.

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Konversi USD ke IDR", fontSize = 24.sp, color = Color(0xFF1B5E20))

Layout utama menggunakan Column agar elemen ditampilkan secara vertikal. Saya menambahkan judul aplikasi dengan Text.

        OutlinedTextField(
            value = usdInput,
            onValueChange = { usdInput = it },
            label = { Text("Masukkan jumlah USD") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            singleLine = true
        )

Di sini pengguna memasukkan nilai USD. Saya menggunakan OutlinedTextField agar tampilannya modern dan mudah digunakan.

        Button(
            onClick = {
                val usd = usdInput.toDoubleOrNull()
                result = if (usd != null) {
                    val idr = usd * exchangeRate
                    "Hasil: Rp ${"%,.0f".format(idr)}"
                } else {
                    "Masukkan angka yang valid"
                }
            }
        ) {
            Text("Konversi")
        }

Tombol "Konversi" menjalankan perhitungan jika input valid. Jika input tidak valid (misalnya kosong atau bukan angka), maka akan muncul pesan kesalahan.

        Text(result, fontSize = 20.sp, color = Color.DarkGray)
    }
}

Bagian terakhir dari fungsi ini menampilkan hasil konversi.

3. Program Full

package com.example.usdtoidr

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
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.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.usdtoidr.ui.theme.USDToIDRTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            USDToIDRTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CurrencyConverter()
                }
            }
        }
    }
}

@Composable
fun CurrencyConverter() {
    var usdInput by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }
    val exchangeRate = 16000.0

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Konversi USD ke IDR", fontSize = 24.sp, color = Color(0xFF1B5E20))

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

        OutlinedTextField(
            value = usdInput,
            onValueChange = { usdInput = it },
            label = { Text("Masukkan jumlah USD") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            singleLine = true
        )

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

        Button(
            onClick = {
                val usd = usdInput.toDoubleOrNull()
                result = if (usd != null) {
                    val idr = usd * exchangeRate
                    "Hasil: Rp ${"%,.0f".format(idr)}"
                } else {
                    "Masukkan angka yang valid"
                }
            }
        ) {
            Text("Konversi")
        }

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

        Text(result, fontSize = 20.sp, color = Color.DarkGray)
    }
}

4. Hasil Output

Berikut tampilan yang dihasilkan saat aplikasi dijalankan:




  • Input field untuk memasukkan jumlah dalam USD.

  • Tombol untuk melakukan konversi.

  • Hasil konversi ditampilkan dalam format mata uang Rupiah.


di Tidak ada komentar:

Rabu, 09 April 2025

Tugas 5 - Pemrograman Perangkat Bergerak G - Membuat Aplikasi Calculator

🔢Membuat Aplikasi Kalkulator Sederhana di Android dengan Jetpack Compose

Di postingan kali ini, saya membuat aplikasi kalkulator sederhana menggunakan Jetpack Compose di Android Studio. Aplikasi ini memungkinkan pengguna untuk memasukkan dua angka dan melakukan operasi dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian.

Langkah Awal

Saya memulai dari template Empty Activity di Android Studio yang sudah menggunakan Jetpack Compose. Setelah itu, saya menambahkan tampilan kalkulator dengan menggunakan fungsi @Composable.

Komponen Utama

1. Pengaturan MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            SimpleCalculatorTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    CalculatorScreen(Modifier.padding(innerPadding))
                }
            }
        }
    }
}

✅ Di sini saya menggunakan Scaffold untuk membungkus UI, lalu menampilkan tampilan kalkulator lewat CalculatorScreen().

Tampilan Kalkulator dengan Compose

@Composable
fun CalculatorScreen(modifier: Modifier = Modifier) {
    var input1 by remember { mutableStateOf(TextFieldValue("")) }
    var input2 by remember { mutableStateOf(TextFieldValue("")) }
    var result by remember { mutableStateOf("") }

  • input1 dan input2 adalah variabel untuk menyimpan angka yang saya masukkan.

  • result digunakan untuk menampilkan hasil perhitungan.

2. Input Angka

TextField(
    value = input1,
    onValueChange = { input1 = it },
    label = { Text("Input 1") },
    modifier = Modifier.fillMaxWidth()
)

Saya menggunakan TextField agar pengguna bisa mengetikkan angka secara langsung.

3. Tombol Operasi

Row(
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    modifier = Modifier.fillMaxWidth()
) {
    Button(onClick = {
        result = calculate(input1.text, input2.text, "+")
    }, modifier = Modifier.weight(1f)) {
        Text("+")
    }

    // Tombol untuk "-", "*", "/"
}

➕ ➖ ✖️ ➗ Setiap tombol akan memanggil fungsi calculate() dengan operasi yang sesuai.

 Fungsi Perhitungan

fun calculate(num1: String, num2: String, op: String): String {
    return try {
        val a = num1.toDouble()
        val b = num2.toDouble()
        when (op) {
            "+" -> (a + b).toString()
            "-" -> (a - b).toString()
            "*" -> (a * b).toString()
            "/" -> if (b != 0.0) (a / b).toString() else "Tidak bisa bagi 0"
            else -> "Operator tidak valid"
        }
    } catch (e: NumberFormatException) {
        "Input tidak valid"
    }
}

⚙️ Fungsi ini melakukan parsing angka dan menghitung berdasarkan operator yang dipilih. Saya juga menambahkan validasi jika input tidak bisa diubah menjadi angka atau jika terjadi pembagian dengan nol.

Preview di Android Studio

@Preview(showBackground = true)
@Composable
fun CalculatorPreview() {
    SimpleCalculatorTheme {
        CalculatorScreen()
    }
}

📱 Dengan @Preview, saya bisa melihat tampilan kalkulator langsung dari tampilan Design di Android Studio.

Hasil Akhir

Dengan langkah-langkah di atas, saya berhasil membuat aplikasi kalkulator sederhana menggunakan Jetpack Compose. UI-nya responsif dan mudah dikembangkan lebih lanjut.

Hasil Screenshot

Di sini, saya mengalikan 34 dan 78











di Tidak ada komentar:
Langganan: Komentar (Atom)

EAS PPB - Aplikasi Edukasi dan Penjemputan Sampah dengan AI Deteksi Jenis Sampah

Laporan Proyek Akhir PPB: Membangun Aplik asi "Cemungut" dengan Flutter dan Firebase Halo semua! Selamat datang di laporan akhir p...