Mega Smart Mobile
Pengembangan aplikasi mobile banking Bank Mega dengan fokus pada fitur transaksi digital, QRIS, biller payment, konsistensi UI, reusable utility, dan optimasi QR scanner.
Ringkasan
Mega Smart Mobile adalah aplikasi mobile banking Bank Mega yang mendukung berbagai kebutuhan transaksi finansial nasabah, termasuk pembayaran QRIS, transfer, tarik tunai, setor tunai, biller payment, top up, dan transaksi digital lainnya.
Dalam project ini, saya terlibat sebagai Mobile Apps Developer pada sisi frontend mobile apps. Fokus kontribusi saya mencakup pengembangan fitur transaksi digital, peningkatan konsistensi UI antar fitur, pembuatan reusable utility, perbaikan workflow release, serta optimasi performa QR scanner untuk meningkatkan pengalaman pengguna.
Tantangan
Salah satu tantangan utama dalam pengembangan Mega Smart Mobile adalah inkonsistensi UI dan code style antar fitur. Pada saat itu, penggunaan Angular component sebagai reusable UI component belum diterapkan secara konsisten, sehingga beberapa tampilan memiliki perbedaan kecil seperti spacing, padding, dan pola komponen yang berbeda antar fitur.
Selain itu, beberapa pola implementasi frontend sulit dirawat karena belum ada reusable pattern yang cukup kuat. Tim membutuhkan standardisasi dan reusable utility agar proses development bisa berjalan lebih konsisten dan lebih cepat.
Tantangan lain muncul pada proses release management, ketika perubahan fitur dan hotfix perlu dipromosikan secara selektif antar environment tanpa mengganggu stabilitas aplikasi. Di sisi fitur QRIS, performa QR scanner juga menjadi perhatian karena plugin yang tersedia saat itu belum cukup optimal untuk membaca QR code yang padat.
Solusi Teknis
Solusi teknis dilakukan dengan mengembangkan fitur mobile banking menggunakan Ionic, Angular, JavaScript, dan TypeScript. Saya ikut mengembangkan beberapa fitur transaksi digital seperti QRIS payment MPM, QRIS payment CPM, Tuntas, crossborder, biller payment, dan berbagai fitur top up.
Untuk meningkatkan konsistensi UI, saya menginisiasi penggunaan Angular component sebagai reusable UI component. Komponen seperti button, input, modal, list item, transaction card, dan dialog error dibuat agar tampilan antar fitur menjadi lebih konsisten dan lebih mudah dirawat.
Saya juga menginisiasi beberapa reusable utility untuk mendukung pengembangan fitur, termasuk QRIS parsing, secure data handling, error handling, dan cache management untuk response backend. Untuk membantu release di kondisi branch yang sudah tidak sinkron, saya memberikan solusi workflow berbasis cherry-pick yang kemudian digunakan tim dalam proses release.
Pada sisi QR scanner, saya membuat custom QR scanner plugin untuk Android menggunakan Vision Camera sebagai alternatif dari plugin resmi Ionic yang performanya kurang optimal pada beberapa kasus QR code padat.
Kontribusi Utama
- Custom QR Scanner Plugin: Membuat custom QR scanner plugin untuk Android pada Ionic menggunakan Vision Camera agar proses scan QR lebih cepat dan stabil, terutama untuk QR code yang padat.
- QRIS Frontend Integration: Membangun integrasi frontend untuk scan QR, parsing QRIS tag, komunikasi ke API backend, dan error handling pada flow pembayaran QRIS.
- Digital Transaction Features: Mengembangkan fitur mobile frontend untuk QRIS payment MPM, QRIS payment CPM, Tuntas, crossborder, biller payment, dan flow top up pada aplikasi Mega Smart Mobile.
- Reusable UI Components & Utilities: Menginisiasi reusable Angular component seperti button, input, modal, list item, transaction card, dan dialog error, serta reusable utility untuk QRIS parsing, secure data handling, error handling, dan cache management.
- Release Workflow Improvement: Memperkenalkan Git workflow berbasis cherry-pick untuk membantu proses release fitur dan hotfix agar lebih terkontrol antar environment.
Output
Custom QR scanner membuat proses scan QR lebih cepat dan lebih reliable, terutama untuk QR code yang padat. Mega Smart Mobile juga menjadi salah satu aplikasi mobile banking awal yang mendukung rangkaian fitur QRIS lengkap, termasuk payment MPM, payment CPM, transfer, tarik tunai, setor tunai, dan crossborder. Reusable UI components, shared utilities, dan release workflow yang lebih terkontrol membantu meningkatkan konsistensi frontend dan maintainability development.