346 lines
7.2 KiB
Markdown
346 lines
7.2 KiB
Markdown
# 🔌 INTEGRASI API FLASK KE FLUTTER - SELESAI ✅
|
|
|
|
## ✅ Yang Sudah Dibuat
|
|
|
|
### 1. **pubspec.yaml** - Updated dengan dependencies
|
|
|
|
```yaml
|
|
dependencies:
|
|
http: ^1.1.0 # HTTP Client untuk API
|
|
intl: ^0.19.0 # Date formatting
|
|
```
|
|
|
|
### 2. **lib/services/ml_service.dart** - API Service
|
|
|
|
- `healthCheck()` - Verifikasi API running
|
|
- `getMetadata()` - Ambil daftar produk & kategori
|
|
- `prediksiStok()` - Single prediction
|
|
- `batchPrediksi()` - Multiple predictions
|
|
|
|
### 3. **lib/models/prediction_model.dart** - Data Models
|
|
|
|
- `PredictionRequest` - Request model
|
|
- `PredictionResult` - Response model
|
|
- `PredictionHistory` - History model
|
|
|
|
### 4. **lib/pages/prediction_page.dart** - UI Complete
|
|
|
|
- Form input lengkap (tanggal, produk, kategori, harga)
|
|
- Loading indicator saat API call
|
|
- Display hasil prediksi
|
|
- Riwayat prediksi dengan clear history
|
|
- Error handling lengkap
|
|
|
|
### 5. **lib/main.dart** - Updated Entry Point
|
|
|
|
- Hubung ke PredictionPage
|
|
- Theme configuration
|
|
|
|
---
|
|
|
|
## 🚀 CARA MENGGUNAKAN
|
|
|
|
### Step 1: Install Dependencies
|
|
|
|
```bash
|
|
cd finalproject
|
|
flutter pub get
|
|
```
|
|
|
|
### Step 2: Update API URL (PENTING!)
|
|
|
|
Edit `lib/services/ml_service.dart`:
|
|
|
|
```dart
|
|
static const String baseUrl = 'http://YOUR_IP:5000';
|
|
```
|
|
|
|
Ganti `YOUR_IP` dengan:
|
|
|
|
- **Localhost:** `http://localhost:5000` (jika testing di emulator/simulator PC sama)
|
|
- **Local Network:** `http://192.168.1.X:5000` (ganti X dengan IP dari `ipconfig`)
|
|
- **Production:** URL cloud API (Heroku, AWS, etc.)
|
|
|
|
### Step 3: Start Flask API
|
|
|
|
```bash
|
|
cd ml_model
|
|
python app.py
|
|
```
|
|
|
|
Output:
|
|
|
|
```
|
|
* Running on http://0.0.0.0:5000
|
|
```
|
|
|
|
### Step 4: Run Flutter App
|
|
|
|
```bash
|
|
cd finalproject
|
|
flutter run
|
|
```
|
|
|
|
Atau di Android Studio:
|
|
|
|
- Press `F5` atau click Run button
|
|
|
|
### Step 5: Test Aplikasi
|
|
|
|
1. App akan loading metadata (daftar produk/kategori)
|
|
2. Akan muncul pesan: **"✅ API Connected!"** jika API terbuka
|
|
3. Isi form: Tanggal, Produk, Kategori, Harga
|
|
4. Click **PREDIKSI** button
|
|
5. Lihat hasil di bawah
|
|
|
|
---
|
|
|
|
## 📋 STRUKTUR FILE YANG DIBUAT
|
|
|
|
```
|
|
lib/
|
|
├── main.dart ✅ UPDATED - Entry point
|
|
├── services/
|
|
│ └── ml_service.dart ✅ NEW - API Service
|
|
├── models/
|
|
│ └── prediction_model.dart ✅ NEW - Data Models
|
|
└── pages/
|
|
└── prediction_page.dart ✅ NEW - Prediction UI
|
|
|
|
pubspec.yaml ✅ UPDATED - Dependencies
|
|
```
|
|
|
|
---
|
|
|
|
## 🔗 API ENDPOINTS YANG DIGUNAKAN
|
|
|
|
| Method | Endpoint | Purpose |
|
|
| ------ | ----------------- | ------------------------------ |
|
|
| GET | `/health` | Cek API running |
|
|
| GET | `/metadata` | Ambil daftar produk & kategori |
|
|
| POST | `/prediksi` | Single prediction |
|
|
| POST | `/batch-prediksi` | Batch predictions |
|
|
|
|
---
|
|
|
|
## 📝 CONTOH FLOW
|
|
|
|
```
|
|
User Input:
|
|
├─ Tanggal: 2025-04-15
|
|
├─ Produk: Gula Pasir 1kg
|
|
├─ Kategori: Gula
|
|
└─ Harga: 12500
|
|
|
|
↓
|
|
|
|
Flutter App (PredictionPage):
|
|
├─ Validasi input
|
|
├─ Call MLService.prediksiStok()
|
|
└─ Display results
|
|
|
|
↓
|
|
|
|
Python API (app.py):
|
|
├─ Terima request
|
|
├─ Load model & encoders
|
|
├─ Preprocess data
|
|
├─ Run prediction
|
|
└─ Return JSON response
|
|
|
|
↓
|
|
|
|
Response ke Flutter:
|
|
{
|
|
"status": "success",
|
|
"prediksi": {
|
|
"jumlah_unit": 5,
|
|
"nilai_raw": 5.29,
|
|
"estimasi_total_harga": 62500
|
|
},
|
|
"model_info": {
|
|
"akurasi_r2": -0.0035,
|
|
"error_mae": 2.51
|
|
}
|
|
}
|
|
|
|
↓
|
|
|
|
Flutter Display:
|
|
✅ Hasil Prediksi
|
|
├─ Estimasi Jumlah: 5 unit
|
|
├─ Nilai Prediksi: 5.29 unit
|
|
├─ Estimasi Total Harga: Rp 62500
|
|
├─ Model Accuracy (R²): -0.0035
|
|
└─ Error (MAE): 2.51 unit
|
|
```
|
|
|
|
---
|
|
|
|
## ⚠️ TROUBLESHOOTING
|
|
|
|
### Error: "Connection refused"
|
|
|
|
```
|
|
❌ Problem: API tidak running atau URL salah
|
|
✅ Solution:
|
|
1. Pastikan Flask API running: python app.py
|
|
2. Cek URL di MLService: http://localhost:5000
|
|
3. Cek firewall allow port 5000
|
|
```
|
|
|
|
### Error: "Failed to connect to 192.168.x.x"
|
|
|
|
```
|
|
❌ Problem: Phone tidak bisa reach API di lokal network
|
|
✅ Solution:
|
|
1. Pastikan phone & PC di network yang sama (WiFi)
|
|
2. Gunakan IP dari ipconfig bukan localhost
|
|
3. Disable VPN di phone
|
|
4. Test: curl http://192.168.x.x:5000/health
|
|
```
|
|
|
|
### Error: "No response from server"
|
|
|
|
```
|
|
❌ Problem: API response timeout (>30 detik)
|
|
✅ Solution:
|
|
1. Check API logs untuk error
|
|
2. Cek request ke API:
|
|
curl -X POST http://localhost:5000/prediksi \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"tanggal":"2025-04-15","produk":"Gula Pasir 1kg","kategori":"Gula","harga":12500}'
|
|
3. Increase timeout di MLService (default 30s)
|
|
```
|
|
|
|
### App muncul pesan: "❌ API tidak terbuka!"
|
|
|
|
```
|
|
❌ Problem: App tidak bisa connect ke API
|
|
✅ Solution:
|
|
1. Buka Terminal/CMD
|
|
2. Go to ml_model folder
|
|
3. Run: python app.py
|
|
4. Tunggu sampai melihat: "Running on http://..."
|
|
5. Back ke Flutter app, swipe down atau restart app
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 FITUR-FITUR
|
|
|
|
✅ **Form Input Lengkap**
|
|
|
|
- Date picker untuk tanggal
|
|
- Dropdown untuk produk (8 pilihan)
|
|
- Dropdown untuk kategori (8 pilihan)
|
|
- Input harga satuan
|
|
|
|
✅ **Form Validation**
|
|
|
|
- Cek semua field wajib diisi
|
|
- Cek harga positif
|
|
|
|
✅ **Loading State**
|
|
|
|
- Loading indicator saat fetch metadata
|
|
- Loading indicator saat submit prediksi
|
|
- Disable button saat loading
|
|
|
|
✅ **Hasil Display**
|
|
|
|
- Jumlah unit prediksi
|
|
- Nilai raw prediksi
|
|
- Estimasi total harga
|
|
- Model accuracy & error
|
|
|
|
✅ **History Tracking**
|
|
|
|
- Simpan riwayat prediksi
|
|
- Display dengan timestamp
|
|
- Tombol clear history
|
|
|
|
✅ **Error Handling**
|
|
|
|
- API connection error
|
|
- Invalid input error
|
|
- Server error
|
|
- Network timeout
|
|
|
|
✅ **API Health Check**
|
|
|
|
- Verifikasi API running saat app start
|
|
- Notification jika API tidak terbuka
|
|
- Auto retry metadata loading
|
|
|
|
---
|
|
|
|
## 📱 TESTING CHECKLIST
|
|
|
|
- [ ] API running: `python app.py` di ml_model folder
|
|
- [ ] Dependencies installed: `flutter pub get`
|
|
- [ ] Update URL di MLService (jika tidak localhost)
|
|
- [ ] Run app: `flutter run`
|
|
- [ ] Lihat "✅ API Connected!" notification
|
|
- [ ] Isi form dengan data valid
|
|
- [ ] Click PREDIKSI button
|
|
- [ ] Lihat hasil prediksi
|
|
- [ ] Add to history
|
|
- [ ] Clear history
|
|
- [ ] Test error cases (invalid product, empty field)
|
|
|
|
---
|
|
|
|
## 🔄 DEPLOYMENT SELANJUTNYA
|
|
|
|
### Untuk Local Testing:
|
|
|
|
✅ API di localhost atau local IP
|
|
✅ Flutter app di emulator/simulator/device
|
|
|
|
### Untuk Production:
|
|
|
|
⬜ Deploy Flask API ke cloud (Heroku/AWS/Railway)
|
|
⬜ Update baseUrl di MLService ke production URL
|
|
⬜ Build APK/AAB: `flutter build apk --release`
|
|
⬜ Upload ke Google Play Store
|
|
|
|
---
|
|
|
|
## 📞 QUICK REFERENCE
|
|
|
|
### File Penting:
|
|
|
|
- Backend API: `ml_model/app.py` (Flask)
|
|
- Frontend Service: `lib/services/ml_service.dart` (Flutter)
|
|
- Frontend UI: `lib/pages/prediction_page.dart` (Flutter)
|
|
|
|
### Commands:
|
|
|
|
```bash
|
|
# Start API
|
|
cd ml_model && python app.py
|
|
|
|
# Test API
|
|
curl http://localhost:5000/health
|
|
|
|
# Run Flutter
|
|
flutter run
|
|
|
|
# Build APK
|
|
flutter build apk --release
|
|
```
|
|
|
|
### API URL untuk berbagai skenario:
|
|
|
|
- Emulator/Simulator lokal: `http://localhost:5000`
|
|
- Device lokal: `http://192.168.1.X:5000` (ganti X)
|
|
- Production: `https://your-api.herokuapp.com` atau IP server
|
|
|
|
---
|
|
|
|
**Status:** ✅ INTEGRASI SELESAI & SIAP RUN
|
|
**Next Step:** `flutter run` di terminal & test aplikasi!
|
|
|
|
Generated: 2026-04-01
|