feat: add expo mobile application source code
This commit is contained in:
@@ -0,0 +1,202 @@
|
||||
# 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*
|
||||
Reference in New Issue
Block a user