Unggulan

Tugas 6 - Membuat Halaman Login

Nama : Christoforus Indra Bagus Pratama

NRP : 5025231124

Mata Kuliah : Pemrograman Perangkat Bergerak (C)

Tanggal : 8 April 2026

Pertemuan : 7

Link : Github

Membuat Halaman Login

Pengembangan antarmuka pengguna (User Interface) pada ekosistem Android modern telah beralih menuju pendekatan deklaratif melalui framework Jetpack Compose. Pada tugas mata kuliah Pemrograman Perangkat Bergerak kali ini, objektif utama adalah mengimplementasikan halaman login secara terprogram menggunakan bahasa Kotlin, tanpa bergantung pada sistem tata letak XML tradisional. Pendekatan ini memungkinkan penulisan kode yang lebih ringkas, modular, dan reaktif terhadap perubahan status (state).

Laporan ini mendokumentasikan keseluruhan proses pengembangan, mulai dari inisialisasi lingkungan kerja di Android Studio, pengelolaan aset statis (*drawable*), hingga analisis teknis dari setiap komponen antarmuka yang dideklarasikan. Berikut adalah pemaparan mendetail dari arsitektur kode yang digunakan untuk membangun antarmuka halaman login tersebut.

A. Tahapan Pengembangan Resolusi Layar

  1. Inisialisasi Proyek: Membuat instance proyek baru di Android Studio menggunakan *Empty Activity* berbasis Jetpack Compose. Konfigurasi penamaan diatur menjadi "Pertemuan 7" dengan skrip *build* memanfaatkan Kotlin DSL.
  2. Pengelolaan Direktori Lokal: Menentukan lokasi penyimpanan *root* proyek. Sangat krusial untuk memastikan tidak adanya spasi (whitespace) pada *path* direktori guna mencegah terjadinya anomali pada integrasi modul NDK (Native Development Kit).
  3. Integrasi Aset Visual: Mengumpulkan komponen grafis yang terdiri dari satu vektor ilustrasi dan tiga ikon media sosial (*Facebook, Google, X/Twitter*). Seluruh aset diimpor secara langsung ke dalam direktori res/drawable dengan konvensi penamaan lowercase untuk mencegah kompilasi eror.
  4. Konstruksi Komponen Deklaratif: Menerapkan arsitektur UI deklaratif dengan mengabaikan boilerplate code bawaan pada MainActivity.kt, lalu menstruktur ulang tata letak logika *login* dari fungsi dasar ke komponen yang lebih kompleks.
  5. Kompilasi dan Pengujian Pratinjau: Memanfaatkan fitur pemuatan langsung (*live preview*) dari anotasi Jetpack Compose untuk memvalidasi presisi piksel dan struktur dimensi (*padding, margin, modifier*) tanpa harus memuat subsistem Android Emulator secara penuh.

B. Analisis Teknis Struktur Kode

1. Deklarasi Package dan Ketergantungan (Imports)

package com.example.pertemuan7

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.pertemuan7.ui.theme.Pertemuan7Theme

Deklarasi package pada baris pertama bertindak sebagai pengenal unik (namespace) dari aplikasi ini. Penentuan namespace ini sangat penting dalam ekosistem Android untuk membedakan identitas aplikasi saat dieksekusi oleh runtime seluler maupun saat didistribusikan melalui platform publikasi. Blok ini memastikan kode kita berada di dalam cakupan memori yang terisolasi dari aplikasi lain.

Adapun blok import memuat referensi dari pustaka (library) eksternal yang diperlukan. Jetpack Compose merupakan arsitektur yang sangat terpisah, di mana setiap elemen *user interface* seperti tata letak (layout), interaksi (clickable), komponen material (material3), dan utilitas tipografi dipanggil secara modular. Ini mencegah pembengkakan kode (*code bloat*) karena sistem hanya mengompilasi instrumen antarmuka yang secara spesifik digunakan di dalam skrip.

2. Kelas Inisialisasi Utama (MainActivity)

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

Kelas MainActivity yang mewarisi ComponentActivity merupakan titik masuk (*entry point*) utama dari siklus hidup aplikasi Android modern. Saat kerangka kerja Android memicu eksekusi program, fungsi primitif onCreate akan dipanggil terlebih dahulu untuk menginisialisasi keadaan *bundle* sistem. Kelas ini tidak lagi memuat hierarki berbasis XML seperti metode lawas, melainkan langsung mendelegasikan proses rendering visual ke dalam sistem Compose.

Di dalam onCreate, ekstensi blok setContent menjembatani mesin Android dengan dunia antarmuka deklaratif. Komponen Surface dialokasikan sebagai kontainer kanvas grafis pertama. Atribut Modifier.fillMaxSize() memerintahkan kontainer ini untuk mengekspansi skalanya agar menutupi matriks resolusi layar sepenuhnya. Sementara itu, parameter color menyuntikkan skema palet latar belakang yang direferensikan secara otomatis dari pengaturan bawaan MaterialTheme perangkat.

3. Kerangka Susunan Vertikal (Column Layout)

@Composable
fun LoginScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

Anotasi @Composable menginstruksikan kompiler Kotlin bahwa fungsi LoginScreen bukanlah fungsi kalkulasi logika konvensional, melainkan representasi struktur hierarki UI. Fungsi berlapis ini mematuhi paradigma pemrograman deklaratif di mana pengembang mendeskripsikan "apa" yang akan dirender oleh antarmuka tanpa harus mendefinisikan langkah imperatif perubahan layar komponen DOM (Document Object Model).

Penggunaan struktur Column bertujuan mengelola susunan *layout* secara satu dimensi vertikal. Dalam konteks layar *login*, formulir masukan perlu dibariskan dari titik teratas hingga ke bawah. Atribut verticalArrangement = Arrangement.Center bekerja bersama dengan horizontalAlignment = Alignment.CenterHorizontally untuk mendistribusikan semua elemen internal (*children components*) presisi di poros tengah (X dan Y) layar, mengakomodasi stabilitas desain terlepas dari rasio *aspect* piranti yang digunakan.

4. Representasi Aset Visual dan Tipografi

        Image(
            painter = painterResource(id = R.drawable.a), 
            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")
        
        Spacer(modifier = Modifier.height(16.dp))

Komponen Image mengeksekusi proses rasterisasi grafik dari penyimpanan lokal. Pemanggilan painterResource(id = R.drawable.a) secara dinamis akan mengekstrak biner gambar ilustrasi berdasarkan indeks kompilasi resource Android. Parameter contentDescription merupakan properti krusial untuk memenuhi standar aksesibilitas UI (Accessibility Service) guna membantu utilitas tangkap layar (*screen reader*) mengidentifikasi konteks visual objek, dibarengi dengan modifikator penetapan dimensi statis sebesar *200 density-independent pixels* (dp).

Komponen berjenis Text dimanfaatkan guna mencetak *string* statis secara representatif. Manipulasi konfigurasi huruf dilakukan menggunakan ekstensi properti pembentuk desain material—seperti fontSize = 28.sp untuk merubah rasio besaran font (*scale-independent pixels*) dan spesifikasi *bold* via fontWeight. Elemen Spacer secara algoritmik diinjeksikan antar baris objek guna memberikan isolasi vertikal (margin), sehingga *white-space* atau ruang negatif dapat dipertahankan demi estetika UI yang ergonomis.

5. Elemen Interaksi Formulir Kredensial

        OutlinedTextField(
            value = "", 
            onValueChange = {}, 
            label = { Text(text = "Email address") }
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        OutlinedTextField(
            value = "", 
            onValueChange = {}, 
            label = { Text(text = "Password") }
        )
        
        Spacer(modifier = Modifier.height(16.dp))

Fungsi antarmuka OutlinedTextField menyediakan kerangka input bagi entri alfa-numerik dari user. Varian ini merender kotak dengan batas keliling (*outlined boundary*) yang akan merespons transisi fokus saat ditekan oleh pengguna. Di dalam arsitektur Jetpack Compose yang *stateless*, field ini bergantung pada parameter pengikat keadaan. Variabel value merepresentasikan nilai literal saat ini, sedangkan ekspresi parameter onValueChange bertanggung jawab mengakomodasi callback atau delegasi mutasi variabel (walaupun masih dikosongkan dalam tahap *mockup* visual ini).

Properti label disuplai menggunakan format lambda composable yang menampilkan komponen antarmuka Text sekunder. Ini mengimplementasikan efek animasi *floating label* yang melekat pada prinsip standar Google Material Design. Secara fungsi ergonomis, parameter ini jauh lebih superior ketimbang implementasi hint tradisional karena teks klasifikasi pengisi (misalnya "Email" dan "Password") akan mengecil ke sisi atas pinggir bingkai kotak ketika pengguna mulai memasukkan kredensial *string* miliknya.

6. Komponen Pemicu Aksi Lanjutan

        Button(onClick = {  }) {
            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")

Delegasi dari komponen penyelesaian antarmuka dipercayakan pada konstruksi dasar Button. Fungsi deklaratif ini merangkum *event listener* utama yaitu argumen onClick. Secara operasional, prosedur sinkron maupun *asynchronous* (*coroutines*) seperti panggilan *networking REST API* ke peladen *backend* untuk validasi sesi *OAuth* akan diletakkan tepat di dalam blok kurung kurawal fungsi lambda atribut *click listener* ini. Komponen Button otomatis memuat *ripple effect* pada subsistem grafis dasar OS Android.

Pendekatan alternatif untuk memicu peristiwa (events) interaktif juga diterapkan pada entitas Text. Daripada menggunakan implementasi Button sekunder yang berisiko mengganggu komposisi hirarki warna *layout*, utilitas Modifier.clickable dirantai (chained) langsung ke dalam komponen teks. Strategi modifikator berlapis ini memberikan keleluasaan akses *tap listener* murni ke teks statis, sehingga skrip pemulihan kredensial atau lari lintas fragmen (*fragment routing*) layar dapat dipanggil saat entri "Forgot Password?" diintervensi oleh proksimitas jari pengguna.

7. Eksekusi Tata Letak Horisontal Baris (Row)

        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 { }
            )
            Image(
                painter = painterResource(id = R.drawable.google),
                contentDescription = "Google",
                modifier = Modifier.size(60.dp).clickable { }
            )
            Image(
                painter = painterResource(id = R.drawable.twitter),
                contentDescription = "Twitter",
                modifier = Modifier.size(60.dp).clickable { }
            )
        }
    } 
}

Mengatur opsi modul otentikasi eksternal atau penyedia pihak ketiga memerlukan inversi rotasi komponen UI. Transformasi orientasi dari urutan memanjang secara Y ke penyebaran memanjang secara X ditangani secara efisien oleh instansi parameter pengelompokan komposisi Row. Pada entri deklaratif ini, pemanggilan manipulasi ukuran komparatif Modifier.fillMaxWidth() mensyaratkan agar alokasi baris horisontal menduduki *viewport* secara parsial sampai batas *margin* ekstrim layar lunak Android, dibatasi hanya oleh padding offset sebesar 40 dp.

Fitur kunci yang menjustifikasi keseimbangan vektor estetika dalam *Row container* ini terletak di konfigurasi variabel konstanta Arrangement.SpaceEvenly. Kerangka kerja secara dinamis menghitung *bounding box* dari representasi statis *Facebook*, *Google*, dan vektor *Twitter* di memori RAM, lalu mereservasi ruang kanvas netral terukur yang memiliki kuantifikasi identik secara berulang. Strategi *layouting* matematika otomatis ini mencegah pergeseran resolusi tampilan patah (layout breaking) ketika aplikasi dikompilasi ke ukuran densitas DPI seluler yang bervariasi.

8. Isolasi Utilitas Simulasi Kompilator Pratinjau

@Preview(showBackground = true)
@Composable
fun LoginScreenPreview() {
    Pertemuan7Theme {
        LoginScreen()
    }
}

Deklarasi lapisan *mocking environment* dilakukan oleh eksistensi anotasi kompiler spesifik bernomenklatur @Preview. Modul independen bawaan Jetpack Compose Studio ini berperan vital mempercepat siklus rekayasa perangkat lunak. Ia bertugas merender fungsi pohon hierarki komponen yang bersarang secara asinkron di dalam engine renderer native memori sistem PC *host*, mengeksekusi visualisasi tanpa memerlukan inisialisasi berkas aplikasi berekstensi *Android Package* (APK) maupun peluncuran simulator perangkat keras Android (AVD).

Terdapat variabel showBackground = true yang menjadi landasan validasi kontras. Parameter tersebut menciptakan tiruan papan alas putih (opacity 100%) di belakang fragmen kontainer fiktif. Evaluasi penyesuaian fungsional LoginScreen() dimuat sembari mengaplikasikan pemetaan warna Pertemuan7Theme lokal—menjamin representasi kromatik saat simulasi berjalan pada tampilan *IDE Canvas Viewer* akan identik sepenuhnya (*pixel perfect*) dengan implementasi ketika skrip terinstal di framework user-space unit piranti asli di masa mendatang.

Komentar

Posting Komentar

Postingan Populer