203 lines
6.2 KiB
Markdown
203 lines
6.2 KiB
Markdown
# 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**:
|
|
|
|
```http
|
|
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
|
|
|
|
```bash
|
|
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):**
|
|
```bash
|
|
npx expo run:android --variant release
|
|
```
|
|
|
|
**Opsi B — Build APK tanpa HP (via Gradle langsung):**
|
|
```bash
|
|
cd android && ./gradlew assembleRelease
|
|
```
|
|
|
|
Output APK: `android/app/build/outputs/apk/release/app-release.apk`
|
|
|
|
**Opsi C — EAS Build (Cloud, direkomendasikan untuk production):**
|
|
```bash
|
|
npx eas build --platform android --profile production
|
|
```
|
|
|
|
---
|
|
|
|
## Push Notification (FCM)
|
|
|
|
1. Buat project di [Firebase Console](https://console.firebase.google.com)
|
|
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*
|