Ahmad_Rizal_Habibullah
/
projek_padi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
projek_padi/mobile_TA/MOBILE_SETUP.md

7.6 KiB
Raw Permalink Blame History

📱 Mobile App Integration - Setup Guide

Panduan lengkap mengintegrasikan API Classification ke aplikasi Flutter Anda.

✅ File yang Dibuat/Diupdate

File Baru:

  1. lib/services/classification_service.dart - Service untuk komunikasi dengan API
  2. MOBILE_SETUP.md - Guide ini

File yang Diupdate:

  1. lib/dashboard_klasifikasi.dart - Integrasi API + error handling
  2. lib/screen/result_screen.dart - Display hasil API termasuk disease info
  3. pubspec.yaml - Tambah permission_handler

🔧 Konfigurasi Server URL

PENTING: Update URL server sesuai environment Anda!

File: lib/services/classification_service.dart

Edit line 7:

static const String _baseUrl = 'http://10.0.2.2:8000/api/classification';

Pilih satu sesuai kebutuhan:

Environment URL Keterangan
Emulator Android http://10.0.2.2:8000/api/classification Default (Android emulator akses host via 10.0.2.2)
Emulator iOS http://127.0.0.1:8000/api/classification iOS emulator akses localhost langsung
Device Fisik (WiFi) http://192.168.x.x:8000/api/classification Ganti x.x dengan IP komputer Anda
Testing Lokal http://127.0.0.1:8000/api/classification Jika Flutter di desktop

Cara Cari IP Komputer Anda:

Windows:

ipconfig
# Cari "IPv4 Address" misalnya: 192.168.1.100

Mac/Linux:

ifconfig
# Cari "inet" misalnya: 192.168.1.100

📦 Install Dependencies

Buka terminal di folder mobile_TA/padi_app/:

flutter pub get

Atau jika menggunakan Android Studio:

Tools → Flutter → Flutter Pub Get

🚀 Menjalankan Aplikasi

Terminal 1: Python API Server

cd "d:\PROJECT TA\rice leaf diseases dataset"
python api_server.py

Terminal 2: Laravel Web Server

cd "d:\PROJECT TA\web_TA"
php artisan serve

Terminal 3: Flutter App

Emulator Android:

cd "d:\PROJECT TA\mobile_TA\padi_app"
flutter run

Device Fisik:

flutter run -d <device_id>
# Dapatkan device_id dengan: flutter devices

🎯 Fitur yang Sudah Terintegrasi

✅ Image Picker

  • Upload dari galeri
  • Upload dari kamera
  • Preview gambar sebelum klasifikasi

✅ API Integration

  • Kirim gambar ke server Laravel
  • Dapatkan hasil prediksi dengan confidence score
  • Dapatkan informasi disease (gejala, penanganan, severity)

✅ Error Handling

  • Network error messages
  • Timeout handling
  • Validation feedback

✅ Result Display

  • Confidence score dengan progress bar
  • Severity badge dengan warna
  • Analisis semua kelas
  • Detail gejala dan penanganan

✅ Loading Indicator

  • Menunjukkan proses klasifikasi sedang berlangsung

📱 Screen Flow

Home Screen
  ↓ [Pilih/ambil foto]
  ↓
Dashboard Klasifikasi
  ↓ [Klasifikasi Sekarang]
  ↓ [Loading...]
  ↓
Result Screen
  ├─ Disease Info
  ├─ Confidence Score
  ├─ Severity Level
  ├─ Symptoms
  ├─ Treatment
  ├─ All Predictions
  └─ Product Recommendations

🔌 API Endpoints Used

Aplikasi menggunakan 2 endpoint:

1. Test Connection (Opsional)

GET /api/classification/test

2. Classify & Save Image

POST /api/classification/classify-and-save
Body:
  - image: File
  - notes: String (optional)

Response:
{
  "success": true,
  "data": {
    "predicted_class": "Bacterialblight",
    "confidence": "95.23%",
    "disease_info": {
      "name": "...",
      "symptoms": [...],
      "treatment": [...]
    }
  }
}

🧪 Testing

Test dengan Gambar Manual:

  1. Buka app
  2. Tap tombol upload
  3. Pilih/ambil foto daun padi
  4. Tap "Klasifikasi Sekarang"
  5. Tunggu hasil

Expected Behavior:

  • Loading spinner muncul
  • Setelah 1-2 detik, hasil ditampilkan
  • Detail penyakit terlihat lengkap
  • Confidence score di atas 80% untuk prediksi yang baik

⚠️ Troubleshooting

Error: "Network error - Check your connection"

Solusi:

  1. Pastikan tanto Python API server maupun Laravel server berjalan
  2. Update URL di classification_service.dart sesuai environment
  3. Pastikan device/emulator bisa akses server: 
    curl http://10.0.2.2:8000/api/classification/test

Error: "Request timeout"

Solusi:

  1. Cek kecepatan koneksi
  2. Model CNN memang butuh 1-2 detik untuk prediksi
  3. Pastikan model file (.keras/.h5) ada di server

Error: "Model API is not loaded"

Solusi:

  1. Lihat output Python API server
  2. Pastikan file model ada: rice_leaf_disease_model.keras
  3. Restart Python API server

Image tidak bisa dipilih

Solusi:

  1. Check permissions di AndroidManifest.xml atau Info.plist
  2. Pastikan permission_handler package installed
  3. Grant camera & storage permissions di app

📂 Struktur File

lib/
├── main.dart                    # Main app
├── dashboard_klasifikasi.dart   # 🔥 Updated - Image picker + API call
├── screen/
│   ├── result_screen.dart      # 🔥 Updated - Display API results
│   ├── login.dart
│   ├── home_screen.dart
│   └── ... (screens lainnya)
├── services/
│   └── classification_service.dart  # ✨ NEW - API service
└── ... (files lainnya)

🎓 Customization

1. Ubah UI Warna

Edit di dashboard_klasifikasi.dart dan result_screen.dart:

backgroundColor: const Color(0xFF0F703A),  // Warna hijau

2. Ubah Max Upload Size

Di server Laravel, edit ClassificationController.php:

'image' => 'image|mimes:jpeg,png,jpg|max:10240' // 10MB

3. Tambah Loading Spinner Custom

Di dashboard_klasifikasi.dart, replace:

CircularProgressIndicator(...)

dengan spinner pilihan Anda

4. Persist Classification History

Tambah SharedPreferences untuk menyimpan history:

// Di classification_service.dart
final prefs = await SharedPreferences.getInstance();
await prefs.setString('last_classification', jsonEncode(result.toJson()));

🔐 Security Notes

  1. API URL jangan hardcode untuk production - Gunakan env files
  2. Validate image size sebelum upload - Sudah ada di service
  3. Handle sensitive data - Jangan log classification results
  4. Use HTTPS di production - Ubah http:// ke https://

📞 Quick Reference

Common Commands

# Get dependencies
flutter pub get

# Run app
flutter run

# Run di device tertentu
flutter run -d <device_id>

# List devices
flutter devices

# Clean build
flutter clean
flutter pub get

API Call Example

final service = ClassificationService();
final result = await service.classifyAndSave(imageFile);
print(result.diseaseInfo.name);

✨ Features Added

Feature Location Status
Image Picker dashboard_klasifikasi.dart ✅
API Classification services/classification_service.dart ✅
Error Handling dashboard_klasifikasi.dart ✅
Loading State dashboard_klasifikasi.dart ✅
Disease Display result_screen.dart ✅
Confidence Score result_screen.dart ✅
Symptoms/Treatment result_screen.dart ✅
All Predictions result_screen.dart ✅
History Tracking Not implemented ⏳
Offline Mode Not implemented ⏳

🚀 Next Steps

  1. ✅ Setup Flutter project
  2. ✅ Install dependencies
  3. ✅ Create ClassificationService
  4. ✅ Integrate with HomeScreen
  5. → Configure server URL for your environment
  6. → Run Python API + Laravel servers
  7. → Test with real images
  8. → Deploy to Play Store / App Store (future)

Status: ✅ Ready to Use Last Updated: March 9, 2026 Version: 1.0