Aplikasi mobile biiproject dibangun dengan React Native (Expo SDK 54+). Dokumentasi ini mencakup arsitektur, tech stack, panduan pengembangan, dan integrasi dengan backend Laravel.

Tech Stack Mobile

Teknologi	Kegunaan
React Native	Framework aplikasi cross-platform
Expo SDK 54+	Managed workflow — EAS Build, updates, native modules
Expo Router	File-based navigation (seperti Next.js untuk mobile)
React Native Reanimated 3	Animasi performa tinggi (native thread)
Expo Image	Image loading dengan cache cepat & lazy load
expo-haptics	Feedback getaran taktil pada interaksi tombol
BlurView	Efek glassmorphism pada header & navigasi
Axios	HTTP client untuk komunikasi dengan API Laravel

Fitur & Teknologi UI

Performance Engine

FlatList dioptimalkan dengan initialNumToRender, windowSize, removeClippedSubviews
Scrolling tetap 60 FPS meskipun ribuan item dimuat

Animasi Cinematic

Staggered Entry: konten muncul bertahap menggunakan react-native-reanimated
Spring Physics: animasi pegas organik — tidak kaku/linear

Modern Aesthetics

Glassmorphism: BlurView pada header dan navigasi
Dynamic Theming: warna sinkron otomatis dengan konfigurasi dari Laravel Admin Panel via /api/v1/mobile/sync
Edge-to-Edge Design: memaksimalkan seluruh area layar termasuk notch dan bottom bar

Interactive Feedback

Haptic Engine: expo-haptics pada setiap tap & aksi sukses
Adaptive Layout: responsif terhadap orientasi layar dan ukuran font sistem (aksesibilitas)

API Endpoints (Backend Laravel)

Base URL: https://domain.com/api

Public Endpoints

Method	URL	Keterangan
GET	`/health`	Health check server
GET	`/v1/app-config`	Konfigurasi publik aplikasi
GET	`/v1/mobile/sync`	Sinkronisasi konfigurasi mobile dari admin panel
POST	`/v1/login`	Login (rate limit: 10/menit)
POST	`/v1/register`	Registrasi akun baru (rate limit: 5/menit)
POST	`/v1/forgot-password`	Kirim link reset password (rate limit: 5/menit)
POST	`/v1/otp/send`	Kirim OTP ke email (rate limit: 5/menit)
POST	`/v1/otp/verify`	Verifikasi OTP (rate limit: 10/menit)

Authenticated Endpoints (Sanctum Token)

Method	URL	Keterangan
GET	`/v1/user`	Data user yang sedang login
POST	`/v1/logout`	Logout & cabut token
GET	`/v1/dashboard`	Data dashboard mobile
POST	`/v1/profile/update`	Update data profil
POST	`/v1/profile/avatar`	Upload foto avatar
POST	`/v1/profile/password`	Ganti password
DELETE	`/v1/profile/delete`	Hapus akun
POST	`/v1/mobile/log`	Kirim log error dari mobile (rate limit: 60/menit)
POST	`/v1/devices/register`	Daftarkan device token untuk FCM push notification
DELETE	`/v1/devices/unregister`	Hapus device token

Autentikasi

Gunakan Bearer token dari response /v1/login:

Authorization: Bearer <sanctum-token>

ETag pada `/v1/mobile/sync`

Endpoint sync mendukung conditional GET:

GET /api/v1/mobile/sync
→ 200 OK
  ETag: "abc123..."
  { "status": "success", "data": {...} }

GET /api/v1/mobile/sync
If-None-Match: "abc123..."
→ 304 Not Modified

Aplikasi mobile sebaiknya simpan ETag dari response sebelumnya dan kirim ulang di header If-None-Match untuk menghemat bandwidth.

Health Check Status

GET /api/health mengembalikan:

200 healthy — semua check OK
200 warn — ada check yang warn (mis. disk >90%), aplikasi masih berfungsi
503 degraded — ada check yang fail, koneksi backend bermasalah

Mobile sebaiknya treat 200 warn sebagai healthy dan hanya menampilkan banner peringatan saat 503.

Panduan Pengembangan

1. Persiapan Environment

Pastikan tools berikut terpasang:

Node.js 20+
Java JDK 17 (untuk Android build)
Android SDK dengan platform-tools (adb)
Expo CLI: npm install -g expo-cli

2. Instalasi & Menjalankan Dev Server

cd mobile
npm install
npx expo start

Gunakan Expo Go di HP atau emulator untuk melihat perubahan secara real-time.

3. Sinkronisasi API URL

Aplikasi mendeteksi host API berdasarkan lingkungan:

Development: IP lokal komputer otomatis terdeteksi
Production: domain diatur di ConfigContext.tsx

4. Build APK (Android)

Opsi A — Build & Install ke HP (HP harus terhubung via USB):

npx expo run:android --variant release

Opsi B — Build APK tanpa HP (via Gradle langsung):

cd android && ./gradlew assembleRelease

Output APK: android/app/build/outputs/apk/release/app-release.apk

Opsi C — EAS Build (Cloud, direkomendasikan untuk production):

npx eas build --platform android --profile production

Push Notification (FCM)

Buat project di Firebase Console
Unduh google-services.json → letakkan di mobile/android/app/
Saat user login, app otomatis memanggil POST /api/v1/devices/register dengan FCM token
Saat logout, app memanggil DELETE /api/v1/devices/unregister
Push notification dikirim dari backend via Firebase Admin SDK

Konfigurasi Remote (Mobile Settings)

Admin dapat mengubah konfigurasi aplikasi mobile dari panel admin tanpa update APK:

Akses: Admin Panel → System Settings → Mobile Settings

Konfigurasi yang bisa dikontrol remote:

Warna tema (primary, secondary, accent)
Base URL API
FCM topic untuk broadcast
Toggle biometric login
Kill switch (paksa update)
Pesan maintenance khusus mobile

Aplikasi menarik konfigurasi ini via GET /api/v1/mobile/sync setiap kali dibuka.

Known Issues (Supply Chain)

npm audit melaporkan 4 moderate advisory di rantai dependensi:

postcss < 8.5.10 (GHSA-qx2v-qp2m-jg93)
↑ via @expo/metro-config
  ↑ via @expo/cli
    ↑ via expo

Reachable hanya di build tooling (metro saat development), bukan di runtime bundle yang ter-deploy ke device. Fix membutuhkan bump Expo SDK ke versi terbaru (breaking change). Dilacak di SECURITY.md root project.

Developed with ❤️ by biiproject Tech Team 2026

README.md

biiproject Mobile