7.2 KiB

Raw Permalink Blame History

🔌 INTEGRASI API FLASK KE FLUTTER - SELESAI ✅

✅ Yang Sudah Dibuat

1. pubspec.yaml - Updated dengan dependencies

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

cd finalproject
flutter pub get

Step 2: Update API URL (PENTING!)

Edit lib/services/ml_service.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

cd ml_model
python app.py

Output:

 * Running on http://0.0.0.0:5000

Step 4: Run Flutter App

cd finalproject
flutter run

Atau di Android Studio:

Press F5 atau click Run button

Step 5: Test Aplikasi

App akan loading metadata (daftar produk/kategori)
Akan muncul pesan: "✅ API Connected!" jika API terbuka
Isi form: Tanggal, Produk, Kategori, Harga
Click PREDIKSI button
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:

# 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

7.2 KiB Raw Permalink Blame History