ETS - Pemrograman Perangkat Bergerak

-

ETS - Pemrograman Perangkat Bergerak

Nama: Rayhan Almer Kusumah

NRP: 5025211115

Kelas: Pemrograman Perangkat Bergerak (A)

Tahun: 2025

PesanLapang - Aplikasi Booking Tempat Olahraga



Source Code (GitHub)    : Go to code!
Download APK                : Download here!

PesanLapang adalah aplikasi pemesanan lapangan olahraga secara online yang memudahkan pengguna untuk menemukan, melihat ketersediaan, dan membooking fasilitas olahraga seperti lapangan tenis, basket, atau mini soccer secara real-time.

Video Presentasi

PPT

User Interface

    

Design

Berikut adalah struktur utama aplikasi:
  • HomeScreen.kt: Tampilan awal aplikasi yang menampilkan daftar olahraga yang tersedia. Pengguna dapat memilih olahraga yang diinginkan untuk melihat detail lebih lanjut melalui navigasi ke DetailScreen.
  • DetailScreen.kt: Halaman yang menampilkan detail dari olahraga yang dipilih, termasuk gambar, informasi seperti harga, rating, deskripsi, lokasi, dan jam buka. Terdapat tombol "Book Now" yang mengarahkan pengguna untuk memilih lapangan di halaman CourtSelectorScreen.
  • CourtSelectorScreen.kt: Layar yang memungkinkan pengguna memilih lapangan, tanggal, dan waktu untuk pemesanan. Pengguna dapat memilih lapangan yang tersedia, tanggal yang diinginkan, dan waktu yang tersedia. Total harga dihitung berdasarkan lapangan yang dipilih, dan tombol "Continue" memungkinkan pengguna melanjutkan ke langkah berikutnya.

HomeScreen

Kode HomeScreen.kt adalah tampilan utama aplikasi pemesanan lapangan olahraga dengan Jetpack Compose. Fungsi HomeScreen menampilkan sambutan, banner yang bergulir otomatis, kategori olahraga dengan scroll horizontal, dan daftar lapangan populer terdekat yang dapat diklik untuk menuju halaman detail. Komponen PopularNearYouSport menggunakan HorizontalPager untuk efek scroll horizontal dengan animasi skala dinamis. Banner juga memiliki auto-scroll setiap 10 detik, sementara kategori olahraga ditampilkan dalam bentuk kartu klikabel. Struktur tampilan menggunakan Scaffold dan Column dengan scroll vertikal.

DetailScreen

Kode DetailScreen.kt ini menggambarkan tampilan detail dari sebuah lapangan olahraga dalam aplikasi menggunakan Jetpack Compose. Fungsi DetailScreen menampilkan informasi lengkap tentang lapangan, termasuk gambar, harga, rating, deskripsi, lokasi, dan jam buka. Pada bagian atas, terdapat tombol kembali yang mengarah ke layar sebelumnya. Di bagian utama, gambar lapangan ditampilkan di sebelah kiri, sementara informasi seperti jenis olahraga, harga, dan rating ditampilkan di sebelah kanan menggunakan komponen SportInfo. Di bawahnya, terdapat teks deskripsi, lokasi, dan jam buka lapangan. Di bagian bawah layar, ada tombol "Book Now" yang mengarahkan pengguna ke halaman pemilihan lapangan. Tampilan menggunakan Scaffold untuk menata konten dan mengatur posisi tombol aksi mengapung. Selain itu, penggunaan Column dan Row memungkinkan penataan elemen secara vertikal dan horizontal dengan padding yang sesuai. Komponen SportInfo digunakan untuk menampilkan informasi terkait lapangan dengan ikon dan teks.

CourtSelectorScreen

Kode CourtSelectorScreen.kt menggambarkan tampilan layar pemilihan lapangan di aplikasi, di mana pengguna dapat memilih lapangan, tanggal, dan waktu untuk pemesanan. Tampilan mencakup bagian header dengan tombol kembali, daftar lapangan yang dapat dipilih dengan status berbeda (Reserved, Selected, Available), serta pilihan tanggal dan waktu yang dapat digulir. Total harga ditampilkan berdasarkan jumlah lapangan yang dipilih, dan ada tombol "Continue" untuk melanjutkan. Pemilihan lapangan, tanggal, dan waktu dikelola menggunakan state lokal, dan interaksi pengguna ditangani dengan komponen UI seperti Surface, Text, dan Button.

Comments

Post a Comment

Popular posts from this blog

Aplikasi Dice Roller

-
Image
Pertemuan 4 Nama: Rayhan Almer Kusumah NRP: 5025211115 Kelas: Pemrograman Perangkat Bergerak (A) Tahun: 2025 Aplikasi Dice Roller Dokumentasi Source Code GitHub:   Go to code! package com.example.dice_roller_android_app import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.material3.Button import androidx.compose.material3.Text import androidx.compose.runtime. Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui....
Read more

Aplikasi Kalkulator

-
Image
Pertemuan 5 Nama: Rayhan Almer Kusumah NRP: 5025211115 Kelas: Pemrograman Perangkat Bergerak (A) Tahun: 2025 Aplikasi Kalkulator Dokumentasi Source Code GitHub:   Go to code! package com.example.calculator_android_app import android.os.Bundle import android.widget.Space import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge 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.width import androidx.compose.material3.Button import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TextFi...
Read more

Aplikasi Hello Android

-
Image
Pertemuan 2 Nama: Rayhan Almer Kusumah NRP: 5025211115 Kelas: Pemrograman Perangkat Bergerak (A) Tahun: 2025 Aplikasi Hello Android Dokumentasi Source Code GitHub:   Go to code! package com.example.hello_world_android_app import android.content.res.Configuration. UI_MODE_NIGHT_YES import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.animation.animateContentSize import androidx.compose.animation.core.Spring import androidx.compose.animation.core.spring import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material.icons.Icons.Filled import androidx.compose.material.icons.filled. Exp...
Read more