EAS PPB
EAS PPB
Github:
https://github.com/ilomimo/ppb-eas-membership
Demo:
Project ini dikembangkan berdasarkan arahan Pak Fajar untuk membuat aplikasi yang relevan digunakan sehari-hari dengan fokus pada membership point dan dompet digital. Beliau memberikan beberapa contoh aplikasi seperti membership point pelanggan Starbucks, aplikasi mobile news, keanggotaan club olahraga, hingga aplikasi digital bank yang menggabungkan sistem membership dengan dompet digital untuk menunjukkan balance pengguna.
TC Cell Membership App dipilih sebagai project karena konsepnya mirip dengan aplikasi digital bank yang menggabungkan sistem membership, pengelolaan balance, dan layanan digital dalam satu platform. Aplikasi ini mensimulasikan layanan operator seluler dengan fitur membership point, dompet digital untuk balance pulsa, dan berbagai layanan digital lainnya yang relevan dengan kebutuhan sehari-hari masyarakat Indonesia.
Aplikasi dikembangkan menggunakan Jetpack Compose sebagai framework UI modern untuk menggantikan pendekatan XML tradisional. Pemilihan teknologi ini sejalan dengan perkembangan terbaru dalam pengembangan Android yang menekankan pada declarative UI dan state management yang lebih efisien.
A. Tujuan Pengembangan
Tujuan utama pengembangan aplikasi ini adalah mengimplementasikan konsep membership point dan dompet digital dalam konteks layanan telekomunikasi. Aplikasi dirancang untuk memberikan pengalaman pengguna yang komprehensif dalam mengelola balance pulsa, menukar poin rewards, dan mengakses berbagai layanan digital.
Secara teknis, project ini bertujuan untuk mendemonstrasikan kemampuan Jetpack Compose dalam membangun aplikasi Android yang kompleks, mengimplementasikan state management yang efektif untuk real-time updates, mengembangkan sistem navigasi yang robust, dan menerapkan design system yang konsisten dan modern.
B. Ruang Lingkup
Ruang lingkup pengembangan mencakup sistem autentikasi dengan login dan verifikasi OTP, dashboard utama yang menampilkan balance dan membership status, sistem pengelolaan poin rewards dengan fitur tukar poin yang fungsional, modul pembelian paket dengan flow pembayaran lengkap, serta berbagai layanan pendukung seperti transfer dan top-up.
Aplikasi dikembangkan khusus untuk platform Android dengan target minimum SDK API Level 24 untuk memastikan kompatibilitas yang luas, namun memanfaatkan fitur-fitur terbaru hingga API Level 34.
C. Pemilihan Teknologi pada Android Studio
Aplikasi dikembangkan menggunakan Kotlin sebagai bahasa pemrograman utama karena telah menjadi bahasa resmi untuk pengembangan Android dengan keunggulan null safety dan sintaks yang lebih efisien. Jetpack Compose dipilih sebagai toolkit UI karena menawarkan pendekatan declarative yang memungkinkan pengembang mendeskripsikan UI berdasarkan state aplikasi.
Navigation Compose digunakan untuk mengelola perpindahan antar halaman dengan type-safe navigation yang mengurangi kemungkinan runtime error. Material Design 3 diimplementasikan sebagai design system untuk memastikan konsistensi visual dan mengikuti panduan desain terbaru dari Google.
D. Metodologi Pengembangan
Pengembangan dilakukan dengan pendekatan modular dimana setiap fitur dikembangkan sebagai komponen independent yang dapat diintegrasikan. Proses dimulai dengan pembuatan design system yang komprehensif, dilanjutkan dengan pengembangan komponen-komponen dasar hingga implementasi fitur-fitur kompleks.
State management diterapkan menggunakan built-in state management dari Jetpack Compose dengan prinsip state hoisting untuk komponen yang memerlukan sharing data antar komponen.
E. Arsitektur Kode
Aplikasi menggunakan metodologi atomic design dengan total 45+ custom composable functions yang terbagi menjadi atoms untuk komponen dasar, molecules untuk komponen gabungan, organisms untuk komponen kompleks, dan pages untuk layar lengkap.
Project terdiri dari total sekitar 2.500 baris kode yang terorganisir dalam struktur modular menggunakan composable functions. Implementation mencakup 45+ custom composable functions yang terbagi menjadi screen-level composables (8 layar utama), component-level composables (25+ komponen reusable), dan utility composables (12+ helper functions).
State variables yang digunakan mencapai 15+ reactive states untuk mengelola berbagai aspek aplikasi mulai dari authentication state, balance poin, form inputs, visibility dialog, hingga parameter navigasi. Data classes implementation mencakup lima custom models untuk organisasi data yang proper dan type safety.
Optimisasi performance diterapkan melalui berbagai teknik termasuk penggunaan LazyColumn dan LazyRow untuk efficient scrolling performance, proper state hoisting untuk meminimalkan scope recomposition, stable parameters dalam composable functions untuk menghindari unnecessary recompositions, dan optimal image loading dengan pengaturan ContentScale yang sesuai. Compatibility testing dilakukan untuk memastikan fungsionalitas yang proper di berbagai ukuran layar dan versi Android dari minimum SDK 24 hingga target SDK 34.
IMPLEMENTASI FITUR UTAMA
A. Sistem Autentikasi
Sistem autentikasi diimplementasikan dengan dua tahap yaitu login dan verifikasi OTP. Login screen menggunakan desain modern dengan gradient background dan input nomor HP sebagai identifier utama. Fitur quick fill demo buttons ditambahkan untuk memudahkan pengujian dengan nomor yang telah ditentukan sebelumnya.
Halaman verifikasi OTP menggunakan custom composable yang menampilkan enam input box terpisah untuk memberikan pengalaman visual yang menarik. Auto-fill simulation diimplementasikan menggunakan LaunchedEffect dengan delay dua detik untuk mensimulasikan proses deteksi SMS OTP. Sistem ini dilengkapi dengan countdown timer untuk fungsi resend dan proper error handling.
B. Dashboard dan Dompet Digital
Dashboard merupakan inti dari aplikasi yang menampilkan informasi balance dan membership dalam layout yang terorganisir. Header section menggunakan gradient background dengan dua card terpisah untuk informasi pulsa dan poin, memberikan visual separation yang jelas antara dompet digital dan sistem membership.
Card pulsa menampilkan balance sebesar Rp 88.800 dengan periode validitas dan tombol quick top-up, mencerminkan fungsi dompet digital untuk pengelolaan balance. Card poin menampilkan 1.250 poin dengan status Gold Member dan tombol exchange yang prominent, menunjukkan implementasi sistem membership point sesuai dengan arahan project.
Quick actions section dirancang dengan modern card layout yang menampilkan empat aksi utama dalam bentuk icon dengan label yang jelas. Usage statistics menampilkan informasi penggunaan kuota, menit telepon, dan SMS dengan color coding yang memudahkan interpretasi data.
C. Sistem Membership Point
Fitur membership point merupakan implementasi utama dari konsep yang diberikan. Sistem poin rewards diimplementasikan dengan real-time state management yang memungkinkan pengguna menukar poin dengan berbagai rewards. Poin card di dashboard menggunakan background yang menarik dengan typography yang prominent untuk menampilkan balance 1.250 poin dan status membership.
Exchange system diimplementasikan sebagai dialog popup yang menampilkan lima pilihan rewards dengan persyaratan poin yang berbeda. Rewards yang tersedia mencakup Diskon ShopeePay 50% (500 poin), Voucher Grab Rp 20.000 (750 poin), OVO Points 10.000 (900 poin), Token Listrik 50.000 (1.200 poin), dan Netflix Premium (1.500 poin).
Sistem secara otomatis melakukan pengecekan ketersediaan berdasarkan current points dan menampilkan indikasi visual untuk rewards yang tidak dapat ditukar. Real-time calculation diimplementasikan menggunakan mutableStateOf yang secara otomatis memicu recomposition ketika balance poin berubah. Proses exchange dilengkapi dengan success animation dan automatic point deduction yang memberikan feedback langsung kepada pengguna.
D. Sistem Belanja dan Pembayaran
Halaman belanja dirancang dengan interface modern yang mencakup fungsi pencarian dan tab kategori untuk Internet, Telepon, SMS, dan Roaming. Dynamic content loading diimplementasikan berdasarkan kategori yang dipilih dengan menggunakan helper functions yang mengembalikan daftar paket sesuai kategori.
Featured packages ditampilkan dalam modern card design dengan badge "POPULER" untuk paket unggulan. Package selection mencakup berbagai pilihan mulai dari Paket Super 25 GB seharga Rp 55.000, Paket Unlimited dengan kuota tak terbatas seharga Rp 99.000, hingga Paket Hemat 10 GB seharga Rp 25.000.
Sistem pembayaran diimplementasikan dengan multiple payment methods yang mencakup Pulsa TC Cell dan berbagai e-wallet seperti Gopay, OVO, dan LinkAja. Interface payment method menggunakan radio button selection dengan visual feedback yang jelas untuk metode yang dipilih. Payment flow dirancang sebagai proses multi-step yang seamless dari package selection hingga success page.
E. Layanan Digital Pendukung
Transfer credit feature memungkinkan pengguna mentransfer pulsa ke nomor lain dengan contact picker interface yang user-friendly. Grid layout digunakan untuk menampilkan pilihan nominal dengan information cards yang menunjukkan perpanjangan masa aktif untuk setiap nominal.
Pulsa management mencakup fungsi top-up dengan multiple denominasi dari Rp 5.000 hingga Rp 100.000. Setiap pilihan dilengkapi dengan informasi perpanjangan masa aktif dan tampilan harga yang jelas. Usage monitoring memberikan statistik real-time untuk tracking konsumsi dengan indikator visual yang intuitif.
IMPLEMENTASI TEKNIS
1. State Management dan Reactive UI
State management diimplementasikan menggunakan built-in state management Jetpack Compose dengan remember dan mutableStateOf untuk local state, serta state hoisting pattern untuk state yang perlu dibagikan antar komponen. Real-time poin tracking menggunakan reactive state yang secara otomatis memicu recomposition ketika nilai berubah.
Auto-fill OTP functionality diimplementasikan menggunakan LaunchedEffect dengan logika kondisional berdasarkan input nomor telepon. Sistem menunggu dua detik untuk mensimulasikan delay SMS, kemudian mengisi kode OTP sesuai dengan mapping yang telah ditentukan.
2. Navigation dan Parameter Passing
Arsitektur navigasi menggunakan Navigation Compose dengan delapan route utama yang mencakup authentication flow, fitur utama, dan proses pembayaran. Type-safe navigation diimplementasikan dengan proper parameter passing menggunakan URL encoding untuk data kompleks.
Back stack management diterapkan dengan penggunaan strategis parameter popUpTo untuk memastikan alur navigasi yang proper, khususnya setelah autentikasi berhasil dan penyelesaian pembayaran.
3. Asset Integration dan Resource Management
Asset integration menggunakan drawable resources untuk gambar promo dengan sistem mapping yang proper. Implementation mencakup R.drawable.promo_a hingga promo_d untuk featured promotions, spotify_premium, netflix_mobile, youtube_tanpa_iklan untuk layanan subscription, dan asuransi_digital, pulsa_darurat, kuota_family untuk layanan tambahan.
Resource management diterapkan dengan konvensi penamaan yang konsisten dan organisasi yang proper dalam folder drawable. Image loading menggunakan painterResource dengan ContentScale.Crop yang optimal untuk mempertahankan aspect ratio.
Pembelajaran dan Tantangan
Proses development memberikan pengalaman dalam menggunakan Jetpack Compose untuk pengembangan aplikasi yang kompleks. Pemahaman tentang declarative UI paradigm dan reactive state management menjadi key takeaways yang applicable untuk future Android development projects.
Tantangan yang dihadapi mencakup learning curve untuk Jetpack Compose yang cukup steep dibanding pendekatan XML tradisional, kompleksitas state management untuk fitur real-time seperti sistem tukar poin, navigasi parameter passing dengan proper encoding untuk tipe data yang kompleks, dan integrasi antara komponen Compose modern dengan Android resources tradisional.
Comments
Post a Comment