biiproject-kit-v1/mobile/README.md

biiproject Mobile

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)

1. Buat project di Firebase Console
2. Unduh google-services.json → letakkan di mobile/android/app/
3. Saat user login, app otomatis memanggil POST /api/v1/devices/register dengan FCM token
4. Saat logout, app memanggil DELETE /api/v1/devices/unregister
5. 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