Latar Belakang

Implementasi logika NFC dalam aplikasi mobile merupakan salah satu tantangan teknis paling kompleks dalam pengembangan NexusPay. Berbeda dengan fitur-fitur lain yang sepenuhnya dikendalikan oleh kode JavaScript, NFC melibatkan interaksi langsung dengan hardware perangkat melalui lapisan native yang memerlukan pemahaman tentang cara kerja bridge antara JavaScript dan kode native iOS atau Android.
Selain tantangan teknis, implementasi logika NFC juga harus disertai dengan antarmuka yang responsif yang memberikan umpan balik real-time kepada pengguna tentang status proses NFC, mulai dari menunggu deteksi, proses autentikasi, hingga konfirmasi hasil.

Pengertian dan Konsep

React Native NFC Manager adalah library yang menyediakan antarmuka JavaScript untuk mengakses fungsi NFC perangkat. Library ini berfungsi sebagai jembatan antara kode React Native dan implementasi NFC native di iOS dan Android.
Pada Android, NFC diakses melalui Android NFC API yang tersedia di paket android.nfc. Host Card Emulation (HCE) memungkinkan Android bertindak sebagai kartu NFC yang dapat dibaca oleh reader eksternal seperti terminal pembayaran.
Pada iOS, NFC diakses melalui Core NFC framework. Mulai dari iOS 13, iPhone mendukung pembacaan tag NFC dan kemampuan terbatas untuk bertindak sebagai kartu NFC melalui Secure Element.
Promise dan async/await adalah konsep JavaScript yang digunakan untuk menangani operasi asinkron seperti komunikasi NFC yang memerlukan waktu dan dapat gagal. Penanganan error yang baik menggunakan try/catch memastikan semua kondisi kegagalan ditangani dengan graceful.
State management dalam konteks NFC mencakup pengelolaan berbagai status yang mungkin terjadi selama sesi NFC, seperti idle, scanning, connecting, authenticating, processing, success, dan error.

Pembahasan

Implementasi logika NFC dimulai dengan inisialisasi NFC Manager saat aplikasi pertama kali dijalankan. Library NfcManager perlu diinisialisasi sekali dan status ketersediaan NFC di perangkat perlu diperiksa. Jika NFC tidak tersedia, fitur pembayaran NFC diganti dengan alternatif seperti pembayaran QR code.
Custom hook useNfcPayment dibuat untuk mengenkapsulasi semua logika NFC dalam satu unit yang dapat digunakan oleh komponen layar. Hook ini mengelola state, memulai sesi NFC, menangani tag yang terdeteksi, dan membersihkan sumber daya setelah sesi selesai.
Saat sesi NFC dimulai, aplikasi masuk ke state scanning dan antarmuka menampilkan animasi gelombang NFC. Ketika tag NFC terdeteksi, state berubah menjadi connecting dan animasi berubah menjadi indikator progres berputar.
Proses autentikasi melibatkan pertukaran APDU atau Application Protocol Data Unit commands antara aplikasi dan terminal. APDU commands dikirim melalui NFC Manager dan respons diterima secara asinkron. Setiap langkah autentikasi memperbarui state dan antarmuka secara real-time.
Penanganan timeout diimplementasikan menggunakan kombinasi Promise.race dan timeout Promise. Jika sesi NFC tidak mendeteksi terminal dalam waktu yang ditentukan, sesi otomatis dibatalkan dan pengguna diberi tahu.
Penanganan error dibagi berdasarkan jenis kegagalan. Kegagalan koneksi NFC ditangani dengan pesan yang menyarankan pengguna untuk mendekatkan kembali perangkat. Kegagalan autentikasi ditangani dengan pesan yang menyarankan pengguna untuk menghubungi bank. Kegagalan jaringan ditangani dengan pesan yang meminta pengguna memeriksa koneksi internet.
Animasi dan visual feedback diimplementasikan menggunakan React Native Animated API dan library Lottie untuk animasi yang lebih kompleks. State perubahan memicu pembaruan animasi melalui Animated.timing dan Animated.spring untuk menciptakan transisi yang halus.

Dokumentasi Pembelajaran

Pembelajaran pada tahap ini melibatkan studi mendalam tentang spesifikasi NFC, khususnya ISO/IEC 14443 yang mendefinisikan komunikasi antara proximity cards dan reader. Dipelajari pula struktur APDU commands dan cara membaca respons APDU.
Konsep threading di React Native juga dipelajari, karena operasi NFC berjalan di thread terpisah dari thread JavaScript utama. Pemahaman tentang cara React Native menjembatani komunikasi antar thread penting untuk menangani pembaruan UI yang dipicu oleh event dari thread native.
Debugging NFC memerlukan perangkat fisik karena emulator tidak mendukung hardware NFC. Penggunaan React Native Debugger dan console logging yang strategis menjadi teknik debugging utama.

Dokumentasi Pengerjaan Desain

Komponen NfcPaymentScreen diimplementasikan dengan menggunakan useNfcPayment hook yang mengabstraksi semua kompleksitas logika NFC. Komponen ini hanya bertanggung jawab untuk merender UI yang sesuai berdasarkan state yang dikembalikan hook.
State machine diagram dibuat untuk mendokumentasikan semua kemungkinan state dalam sesi NFC dan transisi antar state. Diagram ini memastikan semua kondisi edge case telah dipertimbangkan dan ditangani dalam implementasi.
Testing dilakukan dengan terminal pembayaran fisik untuk memverifikasi bahwa alur komunikasi NFC berjalan dengan benar. Skenario yang diuji mencakup tap berhasil, tap gagal karena autentikasi, tap dengan koneksi terputus di tengah proses, dan tap setelah timeout.

Kesimpulan

Implementasi logika antarmuka NFC pada NexusPay berhasil menjembatani kompleksitas teknis protokol NFC dengan antarmuka pengguna yang sederhana dan responsif. Custom hook useNfcPayment memisahkan logika bisnis dari presentasi, menghasilkan kode yang bersih dan mudah diuji. Penanganan semua skenario error dan state yang mungkin terjadi memastikan pengalaman pengguna yang konsisten bahkan dalam kondisi yang tidak ideal.

Daftar Pustaka

React Native NFC Manager. (2023). react-native-nfc-manager Documentation. https://github.com/revtel/react-native-nfc-manager
Android Developers. (2023). NFC Overview. https://developer.android.com/guide/topics/connectivity/nfc
Apple Developer. (2023). Core NFC Framework. https://developer.apple.com/documentation/corenfc
ISO/IEC. (2020). ISO/IEC 14443: Identification cards - Contactless integrated circuit cards. International Organization for Standardization.
React Native. (2023). Animations. https://reactnative.dev/docs/animations
Airbnb Engineering. (2023). Lottie for React Native. https://github.com/lottie-react-native/lottie-react-native