EAS - PPB G - 5025221005

📚 Laporan EAS

ResIF - Sistem Reservasi Ruangan Informatika ITS

📱 View on GitHub 📱 Download Mobile App

Nama: Nabilah Atika Rahma

NRP: 5025221005

Mata Kuliah: Pemrograman Perangkat Bergerak G

Tahun: 2025

Android Studio Kotlin Jetpack Compose Material Design 3 State Management

💻 View on PPT 📽️ View on YouTube 📃 View on Laporan

📱Pendahuluan

ResIF adalah aplikasi mobile untuk reservasi ruangan di Departemen Teknik Informatika ITS. Aplikasi ini dibangun menggunakan Kotlin dan Jetpack Compose dengan implementasi modern Android development practices untuk menyederhanakan proses peminjaman ruangan.

🎯 Tujuan Pengembangan: Menciptakan sistem reservasi ruangan yang efisien dengan UI/UX yang intuitif, manajemen state yang efektif, dan arsitektur yang terstruktur untuk civitas akademika Informatika ITS.

✨Fitur Utama & Screenshots

ResIF terdiri dari screen utama dengan berbagai fitur untuk memudahkan proses reservasi:

Welcome Screen

Login Screen

Register Screen

Home Screen

Booking Screen

History Screen

Profile Screen

🔐 Authentication

→

🏠 Home Dashboard

→

📅 Room Booking

→

📜 Booking History

→

👤 User Profile

🔐 Authentication System

• Login/Register: Sistem autentikasi untuk civitas akademika
• Form Validation: Validasi input dengan feedback visual
• Password Security: Toggle visibility untuk password
• Error Handling: Pesan error yang informatif

🏠 Home Dashboard

• Personal Greeting: Sambutan dengan nama pengguna
• Quick Navigation: Akses cepat ke fitur utama
• Ketentuan Peminjaman: Expandable sections untuk informasi
• Bottom Navigation: Navigasi antar fitur utama

📅 Room Booking System

• Room Catalog: Daftar ruangan dengan detail lengkap
• Booking Form: Formulir peminjaman dengan date/time picker
• Technician Info: Informasi penanggung jawab ruangan
• Validation: Pengecekan ketersediaan ruangan

📜 Booking History

• Status Tracking: Approval status (Pending/Approved/Rejected)
• Detailed Records: Riwayat peminjaman lengkap
• Filtering: Penyaringan berdasarkan status
• Empty State: UI untuk data kosong

👤 User Profile

• Account Details: Informasi akun pengguna
• Notification: Icon notifikasi
• Logout: Fungsi keluar dari sistem
• Responsive Design: Tampilan yang adaptif

🎨Design System & Branding

🌈 Brand Color Palette

Primary Blue: #20469B

Dark Navy: #0B1835

Accent Blue: #59A7FF

Secondary Blue: #1E3A8A

🔤 Typography Hierarchy

• Headlines: Bold fonts untuk judul utama
• Body Text: Medium weight untuk konten
• Button Text: Bold dengan letter spacing
• Captions: Light gray untuk informasi sekunder

🎯 Component Design Principles

• Rounded Corners: 12-16dp untuk modern look
• Card Elevations: Shadow untuk depth perception
• Gradient Backgrounds: Untuk header dan aksen
• Consistent Spacing: 8dp grid system

💻Implementasi Kode & Arsitektur

🏗️ Data Structure

Struktur data untuk manajemen ruangan dan reservasi:

// Model data ruangan data class RoomDetail( val code: String, val name: String, val technician: String = "Junaidy Abdillah", val phone: String = "087855224496" ) // Model data history peminjaman data class BookingHistory( val date: String, val time: String, val room: String, val status: String // "Pending", "Approved", "Rejected" ) // Daftar ruangan val rooms = listOf( RoomDetail("AJK", "Laboratorium Arsitektur Jaringan Komputer"), RoomDetail("AULA", "Aula"), RoomDetail("GIGa", "Laboratorium Grafika, Interaksi dan Game"), // ... ruangan lainnya )

🔄 State Management

Manajemen state untuk navigasi dan data:

@Composable fun ResIFApp() { var currentScreen by remember { mutableStateOf("welcome") } var selectedBottomNavItem by remember { mutableStateOf("home") } when (currentScreen) { "welcome" -> WelcomeScreen( onLoginClick = { currentScreen = "login" }, onRegisterClick = { currentScreen = "register" } ) "login" -> LoginScreen( onLoginSuccess = { currentScreen = "main" selectedBottomNavItem = "home" }, onRegisterClick = { currentScreen = "register" } ) "main" -> { when (selectedBottomNavItem) { "home" -> HomeScreen(onLogoutClick = { currentScreen = "welcome" }) "booking" -> BookingScreen(onLogoutClick = { currentScreen = "welcome" }) // ... screen lainnya } } } }

📅 Booking System Logic

Implementasi logika peminjaman ruangan:

@Composable fun BookingScreen(onLogoutClick: () -> Unit) { var selectedRoom by remember { mutableStateOf(null) } var bookingDate by remember { mutableStateOf("") } var startTime by remember { mutableStateOf("") } var endTime by remember { mutable