PPB - Pertemuan 11 - Tugas 01

Nama: Hammuda Arsyad

NRP: 5025211146

Kelas: PPB G

Sourcecode: https://github.com/H-mD/kohi-app

KOHI: Revolusi Digital dalam Dunia Kopi

Dalam era digitalisasi yang terus berkembang, industri Food & Beverage tidak ketinggalan dalam mengadopsi teknologi mobile untuk meningkatkan pengalaman pelanggan. Salah satu inovasi terbaru dalam dunia aplikasi kopi adalah KOHI, sebuah aplikasi mobile berbasis Android yang dikembangkan menggunakan Kotlin dan Jetpack Compose.

Tentang Aplikasi KOHI

KOHI adalah aplikasi coffee shop yang dirancang untuk memberikan pengalaman digital yang seamless bagi para pecinta kopi. Dengan antarmuka yang modern dan user-friendly, aplikasi ini memungkinkan pengguna untuk menjelajahi menu kopi, melakukan pemesanan, dan memanfaatkan sistem reward yang menarik.

Teknologi yang Digunakan

Aplikasi KOHI dibangun menggunakan teknologi modern Android development:

  • Bahasa Pemrograman: Kotlin
  • UI Framework: Jetpack Compose
  • Architecture: MVVM (Model-View-ViewModel)
  • Navigation: Navigation Compose
  • State Management: Compose State & ViewModel

Fitur Utama Aplikasi

1. Home Screen - Menu Eksplorasi

Halaman utama menampilkan koleksi menu kopi yang lengkap dengan tampilan grid yang menarik. Setiap item menu dilengkapi dengan:

  • Gambar produk berkualitas tinggi
  • Nama produk yang jelas
  • Harga yang transparan
  • Tombol "Tambah" untuk kemudahan pemesanan

Menu yang tersedia meliputi berbagai varian kopi premium seperti:

  • Vanilla Latte (Rp 21.000)
  • Espresso (Rp 20.000)
  • Caramel Macchiato (Rp 23.000)
  • Java Chip Frappuccino (Rp 35.000)
  • Dan masih banyak lagi!

2. Order Screen - Manajemen Pesanan

Fitur pemesanan yang intuitif memungkinkan pengguna untuk:

  • Melihat semua item yang telah ditambahkan ke keranjang
  • Memonitor kuantitas setiap item
  • Menghitung total harga secara real-time
  • Mengelola pesanan dengan mudah

3. Reward Screen - Program Loyalitas

Sistem reward yang inovatif dengan "Star Points" yang dapat dikumpulkan dan ditukarkan dengan berbagai hadiah menarik:

  • Free Tall Latte (50 Star Points)
  • Free Muffin (70 Star Points)
  • Exclusive Tumbler (150 Star Points)

4. Profile Screen - Informasi Personal

Halaman profil yang sederhana namun informatif, menampilkan:

  • Foto profil pengguna
  • Informasi kontak lengkap
  • Detail personal account

Arsitektur dan Design Pattern

MVVM Architecture

Aplikasi KOHI mengimplementasikan arsitektur MVVM yang memberikan beberapa keuntungan:

Model Layer: Mendefinisikan struktur data aplikasi

  • MenuItem: Representasi item menu dengan ID, nama, gambar, dan harga
  • OrderItem: Model pesanan dengan referensi menu dan kuantitas
  • RewardItem: Model reward dengan poin yang diperlukan

View Layer: UI components yang dibangun dengan Jetpack Compose

  • Screen components yang reactive dan modern
  • Reusable UI components seperti MenuCard, OrderCard, dan RewardCard

ViewModel Layer: Business logic dan state management

  • OrderViewModel: Mengelola state pesanan, reward points, dan business logic

Navigation System

Implementasi Navigation Compose dengan bottom navigation yang memberikan akses mudah ke empat screen utama:

  • Home (Eksplorasi Menu)
  • Reward (Program Loyalitas)
  • Order (Manajemen Pesanan)
  • Profile (Informasi Personal)

Design System dan UI/UX

Color Scheme

Aplikasi menggunakan skema warna yang terinspirasi dari brand kopi premium:

  • Primary Color: Red accent (#E60202) untuk brand identity yang kuat
  • Secondary Color: Orange accent (#E63702) untuk highlight
  • Background: Cream white (#FFFDF7) untuk kesan warm dan cozy
  • Text: Dark brown (#382F2D) untuk readability yang optimal

Material Design 3

Implementasi Material Design 3 memberikan:

  • Konsistensi visual yang modern
  • Accessibility yang baik
  • Responsive design untuk berbagai ukuran layar
  • Smooth animations dan transitions

Keunggulan Teknis

1. State Management yang Efisien

Penggunaan Compose State dan ViewModel memastikan:

  • Reactive UI yang selalu sinkron dengan data
  • Efficient recomposition
  • Lifecycle-aware state management

2. Modular Architecture

Struktur kode yang terorganisir dengan separation of concerns:

  • Model classes yang well-defined
  • Reusable UI components
  • Centralized business logic dalam ViewModel

3. Modern Android Development

Adopsi teknologi terbaru Android:

  • 100% Kotlin untuk type safety dan conciseness
  • Jetpack Compose untuk declarative UI
  • Navigation Compose untuk seamless navigation

Potensi Pengembangan Masa Depan

Aplikasi KOHI memiliki foundation yang kuat untuk pengembangan fitur-fitur advanced:

  1. Payment Integration: Integrasi dengan payment gateway untuk transaksi real
  2. Location Services: Fitur store locator dan delivery tracking
  3. Push Notifications: Notifikasi untuk promo dan order status
  4. Social Features: Review system dan social sharing
  5. Analytics: User behavior tracking untuk business insights
  6. Offline Capability: Local storage untuk offline browsing

Dokumentasi






Comments

Post a Comment

Popular posts from this blog

PPB - Pertemuan 04 - Tugas 01

Image
Nama: Hammuda Arsyad NRP: 5025211146 Kelas: PPB G Membuat aplikasi Dice Roller interaktif onCreate(): Fungsi OnCreate() adalah fungsi utama dari project kotlin yang akan di eksekusi ketika palikasi dibuka. Fungsi ini akan memanggil Modifier.DiceRollerApp() untuk menginisiasi pengacakan dadu. DiceRollerApp(): Fungsi DiceRollerApp() merupakan fungsi penghubung antara onCreate() dan DiceWithButtonAndImage() dengan anotasi Preview agar dapat digunakan untuk mendesain tampilan pada tahap development. DiceWithButtonAndImage(): Fungsi DiceWithButtonAndImage() merupakan logic utama dari aplikasi ini. Fungsi ini akan menampilkan secara acak gambar-gambar dadu dari 1 sampai 6 yang sudah di import ke resource project. Pemilihan angka di buat menggunakan random() dan dihubungkan ke dalam kelas Button(). Kelas Image() dan Button() dihubungkan dengan variable imageResource yang berisi pilihan image berdasarkan variable resource yang dihasilkan oleh randomizer di dalam Button. strings.xml: Ditamb...
Read more

PPB - Pertemuan 07 - Tugas 01

Image
Nama: Hammuda Arsyad NRP: 5025211146 Kelas: PPB G Membuat Halaman Simple Login      Kode LoginScreen ini menampilkan implementasi layout antarmuka login menggunakan Jetpack Compose dengan penekanan pada penyusunan komponen UI secara vertikal menggunakan Column. Komponen disusun dengan Arrangement.Center dan Alignment.CenterHorizontally, membuat semua elemen terletak di tengah layar. Gambar (Image) ditampilkan di atas sebagai header visual, diikuti oleh dua teks (Text) untuk sambutan. Input field untuk email dan password dibuat menggunakan OutlinedTextField, dengan PasswordVisualTransformation untuk menyembunyikan teks password. Spasi antar komponen diatur menggunakan Spacer dengan nilai dp berbeda untuk menjaga keteraturan tata letak. Tombol login (Button) menampilkan teks dan melakukan logging saat diklik. Setelah itu terdapat teks klikabel "Forgot Password", lalu bagian login alternatif menggunakan teks dan tiga ikon media sosial (Facebook, Google, Twitter) yang di...
Read more

PPB - ETS

Image
Nama: Hammuda Arsyad NRP: 5025211146 Kelas: PPB G Sourcecode: https://github.com/H-mD/mobile-gallery-app Laporan: https://docs.google.com/document/d/1xiQumbZvv441DQkz9CcVOLxPb_S-jYANpGDNTJvxCRA/edit?usp=drivesdk PPT: https://www.canva.com/design/DAGmAal9yo8/dJ2OFqUjJIazxp6RO0G94w/view?utm_content=DAGmAal9yo8&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h6e3c58f793 Video Demo: https://youtube.com/shorts/osA-PM-Ehbo?si=cVloKV_XkU-dR0zR App Release: https://github.com/H-mD/mobile-gallery-app7/releases/tag/v1.0 MyGallery           "MyGallery" adalah aplikasi front-end galeri foto pribadi yang dirancang untuk menampilkan koleksi gambar lokal dari perangkat atau dari URL dummy. Aplikasi ini memiliki fitur utama berupa tampilan galeri menggunakan GridView atau RecyclerView, halaman detail untuk melihat gambar secara penuh, serta simulasi upload gambar secara dummy. MyGallery mengutamakan tampilan yang estetis, respon...
Read more