Latar Belakang

Tahap integrasi API adalah momen di mana aplikasi NexusPay bertransisi dari prototipe yang hanya berfungsi di layar menjadi aplikasi pembayaran yang sesungguhnya, terhubung ke sistem backend dan payment gateway yang nyata. Ini adalah tahap finalisasi pengembangan frontend yang memerlukan koordinasi erat antara tim frontend dan tim backend.
Integrasi API yang baik tidak hanya tentang memanggil endpoint dan menampilkan data, tetapi juga tentang menangani berbagai kondisi jaringan, loading state yang informatif, error handling yang empatik, caching untuk performa optimal, dan keamanan dalam transmisi data.

Pengertian dan Konsep

REST API adalah arsitektur komunikasi berbasis HTTP yang menggunakan method seperti GET, POST, PUT, dan DELETE untuk melakukan operasi pada sumber daya yang direpresentasikan sebagai URL. Data umumnya dipertukarkan dalam format JSON.
Axios adalah library HTTP client berbasis Promise yang populer digunakan dalam ekosistem JavaScript untuk membuat request HTTP. Axios menyediakan fitur interceptors, transformation request dan response, cancellation, dan handling error yang lebih baik dibanding fetch API bawaan.
Interceptor adalah middleware dalam Axios yang memungkinkan transformasi request sebelum dikirim atau response sebelum diterima oleh kode aplikasi. Interceptor sangat berguna untuk menambahkan Authorization header secara otomatis, menangani refresh token, dan logging.
React Query atau TanStack Query adalah library untuk manajemen state server di React dan React Native. Library ini menyederhanakan fetching, caching, synchronizing, dan updating data dari server dengan fitur seperti automatic background refetching, optimistic updates, dan pagination.
JWT atau JSON Web Token adalah standar terbuka untuk transmisi informasi antar pihak sebagai objek JSON yang ditandatangani secara digital. JWT digunakan sebagai token autentikasi yang dikirimkan dalam setiap request API untuk membuktikan identitas pengguna.

Pembahasan

Layer service dibuat sebagai abstraksi antara komponen React Native dan Axios HTTP client. Setiap fitur memiliki file service-nya sendiri, misalnya paymentService.ts untuk semua operasi yang berkaitan dengan pembayaran, authService.ts untuk autentikasi, dan transactionService.ts untuk riwayat transaksi.
Konfigurasi Axios dibuat dalam file api/client.ts yang mendefinisikan base URL, timeout, dan default headers. Dua interceptors dikonfigurasi. Request interceptor menambahkan Authorization header dengan token JWT dari secure storage sebelum setiap request dikirim. Response interceptor menangani error 401 Unauthorized dengan melakukan refresh token otomatis dan mengulang request yang gagal.
Penggunaan React Query memungkinkan manajemen state server yang deklaratif. Setiap komponen yang membutuhkan data menggunakan hook useQuery dengan query key yang unik. React Query secara otomatis mengelola loading state, error state, caching, dan background refetching.
Untuk operasi mutasi seperti melakukan pembayaran, hook useMutation dari React Query digunakan. Setelah mutasi berhasil, cache yang relevan di-invalidate agar data terbaru diambil ulang dari server.
Penanganan kondisi offline diimplementasikan menggunakan NetInfo library untuk mendeteksi koneksi jaringan. Saat offline, operasi yang memerlukan jaringan menampilkan pesan informatif dan menyediakan opsi untuk mengantri operasi hingga koneksi kembali.
Finalisasi aplikasi mencakup optimasi performa. Lazy loading diimplementasikan untuk komponen dan layar yang tidak digunakan segera, menggunakan React.lazy dan Suspense. FlatList digunakan untuk daftar transaksi yang panjang dengan properti windowSize dan initialNumToRender yang dikonfigurasi untuk meminimalkan penggunaan memori.
Pengujian integrasi dilakukan menggunakan Mock Service Worker atau MSW yang memungkinkan simulasi respons API dalam lingkungan pengujian tanpa bergantung pada server sebenarnya. Unit test ditulis menggunakan Jest dan React Native Testing Library untuk setiap service dan hook.
Sebelum aplikasi siap dirilis, proses code review menyeluruh dilakukan untuk memastikan tidak ada informasi sensitif yang tertinggal di kode, semua TODO diselesaikan, dan semua edge case ditangani. Build konfigurasi untuk staging dan production disiapkan dengan environment variables yang berbeda.

Dokumentasi Pembelajaran

Pembelajaran pada tahap finalisasi mencakup pendalaman tentang React Query dan manfaatnya dibanding pendekatan manual menggunakan useState dan useEffect untuk manajemen state server. Dipelajari pula konsep optimistic updates yang memperbarui UI sebelum konfirmasi dari server untuk memberikan pengalaman yang lebih responsif.
Konsep CI/CD atau Continuous Integration dan Continuous Delivery dipelajari sebagai praktik pengembangan modern yang mengotomatisasi proses pengujian dan deployment. Pipeline CI/CD dikonfigurasi menggunakan GitHub Actions untuk secara otomatis menjalankan test setiap kali kode baru di-push ke repository.

Dokumentasi Pengerjaan Desain

Dokumentasi akhir proyek dibuat mencakup API documentation yang menggambarkan semua endpoint yang digunakan beserta format request dan response. Dokumentasi ini menggunakan format yang konsisten dan dapat dengan mudah dipahami oleh pengembang baru.
Proses user acceptance testing dilakukan dengan melibatkan pengguna nyata untuk mencoba alur pembayaran end-to-end. Feedback dari sesi testing ini digunakan untuk penyesuaian terakhir pada antarmuka sebelum aplikasi dianggap siap untuk production build.
Changelog dipersiapkan untuk mendokumentasikan semua perubahan yang dilakukan selama proses pengembangan, termasuk fitur baru, perbaikan bug, dan perubahan breaking. Dokumen ini menjadi referensi penting untuk komunikasi dengan stakeholder.

Kesimpulan

Integrasi API dan finalisasi NexusPay menandai selesainya perjalanan panjang dari desain di Figma hingga aplikasi mobile yang terhubung penuh ke payment gateway. Penggunaan Axios dengan interceptor, React Query untuk manajemen state server, dan penanganan kondisi jaringan yang komprehensif menghasilkan aplikasi yang tidak hanya fungsional tetapi juga andal dalam berbagai kondisi penggunaan. Pengujian menyeluruh dan dokumentasi yang baik memastikan kualitas dan keberlanjutan proyek di masa depan.

Daftar Pustaka

TanStack. (2023). TanStack Query Documentation. https://tanstack.com/query/latest
Axios. (2023). Axios Documentation. https://axios-http.com/docs/intro
React Native. (2023). Network. https://reactnative.dev/docs/network
Mock Service Worker. (2023). MSW Documentation. https://mswjs.io/
GitHub. (2023). GitHub Actions Documentation. https://docs.github.com/en/actions
Midtrans. (2023). Snap API Documentation. https://docs.midtrans.com/reference/javascript-library
Fain, Y., & Moiseev, A. (2019). Angular Development with TypeScript. Manning Publications.