Latar Belakang

Memulai sebuah proyek pengembangan aplikasi mobile dengan fondasi yang tepat adalah langkah yang menentukan skalabilitas dan kemudahan pemeliharaan aplikasi di masa depan. Struktur folder yang terorganisir dengan baik memungkinkan tim pengembang untuk bekerja secara efisien, mengurangi kebingungan saat mencari file tertentu, dan memudahkan onboarding anggota tim baru.
Pada pengembangan aplikasi NexusPay berbasis mobile, pemilihan framework, inisialisasi proyek yang benar, dan perancangan arsitektur folder menjadi tahap pertama yang harus dikerjakan dengan cermat sebelum satu baris kode fitur pun ditulis. Kesalahan pada tahap ini dapat mengakibatkan hutang teknis yang mahal untuk dibayar di kemudian hari.

Pengertian dan Konsep

React Native adalah framework JavaScript open-source yang dikembangkan oleh Meta untuk membangun aplikasi mobile lintas platform menggunakan komponen React. Dengan React Native, satu basis kode dapat dikompilasi menjadi aplikasi native yang berjalan di iOS dan Android, mengurangi waktu dan biaya pengembangan secara signifikan.
Expo adalah platform dan framework di atas React Native yang menyederhanakan proses inisialisasi dan pengembangan. Expo menyediakan seperangkat tools, library, dan layanan yang memungkinkan pengembang memulai proyek React Native tanpa harus mengonfigurasi native build tools secara manual.
Arsitektur folder dalam pengembangan aplikasi mengacu pada cara file dan direktori diorganisir dalam struktur hierarkis yang logis. Arsitektur yang baik mengikuti prinsip separation of concerns yaitu pemisahan tanggung jawab, di mana setiap folder memiliki tujuan yang jelas dan tidak tumpang tindih.
Beberapa pola arsitektur folder yang umum digunakan adalah Feature-based Structure yang mengorganisir file berdasarkan fitur aplikasi, Layer-based Structure yang mengorganisir file berdasarkan lapisan teknis seperti komponen, layanan, dan store, serta Atomic Design Structure yang mengorganisir file berdasarkan hierarki atom, molekul, dan organisme.

Pembahasan

NexusPay dikembangkan menggunakan React Native dengan Expo sebagai platform pengembangan. Inisialisasi proyek dilakukan menggunakan perintah berikut di terminal.
npx create-expo-app NexusPay --template blank-typescript
Perintah ini membuat proyek React Native baru dengan TypeScript sebagai bahasa pemrograman utama. Penggunaan TypeScript dipilih karena memberikan keamanan tipe data yang membantu mencegah bug dan meningkatkan keterbacaan kode.
Setelah proyek diinisialisasi, struktur folder diorganisir sebagai berikut. Direktori src adalah direktori utama yang berisi semua kode sumber aplikasi. Di dalamnya terdapat direktori components yang berisi komponen UI yang dapat digunakan kembali, screens yang berisi komponen layar utama aplikasi, navigation yang berisi konfigurasi navigasi, services yang berisi logika untuk berkomunikasi dengan API eksternal, store yang berisi manajemen state global menggunakan Redux atau Zustand, hooks yang berisi custom React hooks, utils yang berisi fungsi utilitas yang dapat digunakan di mana saja, types yang berisi definisi tipe TypeScript, dan constants yang berisi nilai konstanta seperti warna dan ukuran.
Di tingkat root proyek, terdapat direktori assets untuk menyimpan gambar, ikon, dan font. Direktori tests menyimpan file pengujian, sementara file konfigurasi seperti app.json, tsconfig.json, dan babel.config.js berada langsung di root.
Manajemen dependensi menggunakan package.json dengan beberapa library utama yang diinstal. Library react-navigation digunakan untuk navigasi. Library axios digunakan untuk HTTP requests. Library zustand digunakan untuk state management yang ringan. Library react-native-nfc-manager digunakan untuk integrasi NFC. Library expo-local-authentication digunakan untuk biometrik.
Konfigurasi TypeScript melalui tsconfig.json dikustomisasi dengan path alias untuk menghindari import path yang panjang dan tidak rapi. Dengan konfigurasi ini, import dari direktori manapun dapat menggunakan alias yang bersih.

Dokumentasi Pembelajaran

Pembelajaran pada tahap ini mencakup pemahaman tentang ekosistem React Native dan perbedaan antara Expo Go, Expo Managed Workflow, dan Expo Bare Workflow. Dipelajari kapan menggunakan setiap pendekatan berdasarkan kebutuhan proyek.
Konsep Clean Architecture juga dipelajari sebagai referensi dalam merancang arsitektur folder. Clean Architecture memisahkan kode menjadi lapisan-lapisan dengan dependensi yang mengalir hanya ke satu arah, membuat kode lebih mudah diuji dan dipelihara.
Pemahaman tentang TypeScript generics, interface, dan type alias menjadi dasar penting untuk menulis kode yang tipe-aman dan mudah dibaca oleh pengembang lain.

Dokumentasi Pengerjaan Desain

Pada tahap ini, dokumentasi pengerjaan berfokus pada setup lingkungan pengembangan. Instalasi Node.js versi LTS dilakukan terlebih dahulu, diikuti instalasi Expo CLI secara global. Android Studio dan Xcode dikonfigurasi untuk emulator testing.
File README.md dibuat dengan dokumentasi lengkap tentang cara menjalankan proyek, deskripsi arsitektur folder, dan panduan kontribusi untuk anggota tim. Ini merupakan praktik penting dalam pengembangan tim untuk memastikan semua orang dapat memulai dengan cepat.
Git repository diinisialisasi dengan file .gitignore yang dikonfigurasi untuk mengecualikan direktori node_modules, direktori build, dan file yang berisi informasi sensitif seperti kunci API.

Kesimpulan

Inisialisasi proyek dan perancangan arsitektur folder NexusPay dengan tepat menggunakan React Native, Expo, dan TypeScript memberikan fondasi yang kokoh untuk pengembangan selanjutnya. Struktur folder yang terorganisir berdasarkan prinsip separation of concerns memastikan kode dapat berkembang secara scalable dan mudah dipelihara seiring bertambahnya fitur dan anggota tim pengembang.

Daftar Pustaka

Facebook Inc. (2023). React Native Documentation. https://reactnative.dev/docs/getting-started
Expo Inc. (2023). Expo Documentation. https://docs.expo.dev/
Martin, R. C. (2017). Clean Architecture: A Craftsman's Guide to Software Structure and Design. Prentice Hall.
TypeScript. (2023). TypeScript Handbook. https://www.typescriptlang.org/docs/handbook/
Wieruch, R. (2023). React Native with Hooks. https://www.robinwieruch.de/
Microsoft. (2023). TypeScript Documentation. https://www.typescriptlang.org/