197 lines
6.7 KiB
Markdown
197 lines
6.7 KiB
Markdown
# Perbaikan Sistem Mobile SPK Kontrakan
|
|
|
|
## Masalah yang Ditemukan
|
|
1. Data di mobile tidak sesuai dengan data di web
|
|
2. Endpoint API tidak benar (menggunakan GET dengan query parameters, harusnya POST dengan body)
|
|
3. Model data tidak sesuai dengan response API dari backend
|
|
4. Tampilan tidak menunjukkan sistem rekomendasi dengan ranking dan scoring
|
|
5. Tidak ada tampilan untuk top recommendations di home screen
|
|
|
|
## Perbaikan yang Dilakukan
|
|
|
|
### 1. Perbaikan API Endpoints
|
|
**File: `lib/screens/recommendation_screen.dart`**
|
|
- ✅ Mengubah endpoint dari `/api/saw/kontrakan` menjadi `/api/saw/calculate/kontrakan`
|
|
- ✅ Mengubah method dari GET (dengan query params) menjadi POST (dengan body)
|
|
- ✅ Mengirim parameters dalam request body menggunakan JSON
|
|
|
|
**File: `lib/services/kontrakan_service.dart`**
|
|
- ✅ Menambahkan method `getRecommendations()` untuk mendapatkan rekomendasi SAW
|
|
- ✅ Menggunakan POST method dengan JSON body sesuai dengan API backend
|
|
|
|
**File: `lib/services/laundry_service.dart`**
|
|
- ✅ Menambahkan method `getRecommendations()` untuk laundry
|
|
- ✅ Implementasi yang sama dengan kontrakan service
|
|
|
|
### 2. Perbaikan Model Data
|
|
**File: `lib/models/laundry.dart`**
|
|
- ✅ Mengubah nama field dari `jarak` menjadi `jarakKampus` (sesuai API)
|
|
- ✅ Mengubah `hargaKiloan` dan `hargaSatuan` menjadi `hargaPerKg` (sesuai API)
|
|
- ✅ Mengubah `estimasiSelesai` menjadi `waktuProses` (sesuai API)
|
|
- ✅ Menambahkan field `deskripsi`, `fotoUtama`, `galeri` yang hilang
|
|
- ✅ Menambahkan `avgRating` dan `totalReviews` untuk rating display
|
|
- ✅ Menambahkan class `GaleriLaundry` untuk galeri photos
|
|
- ✅ Menambahkan getter `primaryPhoto` untuk mendapatkan foto utama
|
|
- ✅ Memperbaiki getter `formattedHarga` untuk format Rupiah
|
|
|
|
**File: `lib/models/kontrakan.dart`**
|
|
- ✅ Sudah sesuai dengan API response
|
|
|
|
### 3. Pembuatan Widget Komponen
|
|
**File: `lib/widgets/kontrakan_card.dart` (BARU)**
|
|
- ✅ Widget card untuk menampilkan kontrakan
|
|
- ✅ Mendukung tampilan ranking dan skor (untuk sistem rekomendasi)
|
|
- ✅ Menampilkan badge ranking dengan warna berbeda (emas, perak, perunggu)
|
|
- ✅ Menampilkan persentase skor SAW
|
|
- ✅ Tampilan foto, harga, jumlah kamar, jarak kampus, dan rating
|
|
- ✅ Clickable untuk navigasi ke detail screen
|
|
|
|
**File: `lib/widgets/laundry_card.dart` (BARU)**
|
|
- ✅ Widget card untuk menampilkan laundry
|
|
- ✅ Sama seperti kontrakan card dengan design yang konsisten
|
|
- ✅ Menampilkan harga per kg dan waktu proses
|
|
|
|
### 4. Improved Home Screen
|
|
**File: `lib/screens/improved_home_screen.dart` (BARU)**
|
|
- ✅ Home screen baru yang fokus pada sistem rekomendasi
|
|
- ✅ Menampilkan "Top 5 Kontrakan Terbaik" berdasarkan SAW
|
|
- ✅ Setiap kartu menampilkan ranking dan skor
|
|
- ✅ Quick action button untuk laundry
|
|
- ✅ Pull-to-refresh untuk reload rekomendasi
|
|
- ✅ Bottom navigation yang konsisten
|
|
- ✅ Design modern dengan gradient header
|
|
- ✅ Loading state yang informatif
|
|
|
|
### 5. Update Entry Points
|
|
**File: `lib/main.dart`**
|
|
- ✅ Menggunakan `ImprovedHomeScreen` sebagai home default
|
|
- ✅ Splash screen tetap berfungsi untuk auth check
|
|
|
|
**File: `lib/login.dart`**
|
|
- ✅ Navigate ke `ImprovedHomeScreen` setelah login sukses
|
|
- ✅ Import statement sudah diupdate
|
|
|
|
## Struktur Sistem Rekomendasi
|
|
|
|
### Flow Data:
|
|
```
|
|
1. Mobile App → POST /api/saw/calculate/kontrakan (dengan filter opsional)
|
|
2. Backend → Proses SAW → Return ranked results dengan skor
|
|
3. Mobile App → Parse results → Tampilkan dengan ranking & skor
|
|
```
|
|
|
|
### Response Format dari API:
|
|
```json
|
|
{
|
|
"success": true,
|
|
"data": {
|
|
"kriteria": [...],
|
|
"hasil": [
|
|
{
|
|
"id": 1,
|
|
"nama": "Kontrakan ABC",
|
|
"ranking": 1,
|
|
"skor": 0.95,
|
|
"nilai": {...},
|
|
"normalisasi": {...},
|
|
"data": {
|
|
"id": 1,
|
|
"nama": "Kontrakan ABC",
|
|
"harga": 500000,
|
|
...
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
### Tampilan di Mobile:
|
|
- **Home Screen**: Top 5 rekomendasi dengan badge ranking (🏆 #1, #2, #3, dll)
|
|
- **Recommendation Screen**: Full list dengan filter dan ranking
|
|
- **Card**: Menampilkan ranking badge + skor persentase di bagian atas card
|
|
|
|
## Cara Menggunakan
|
|
|
|
### 1. Pastikan Backend Running
|
|
```bash
|
|
cd spk_kontrakan
|
|
php artisan serve
|
|
```
|
|
|
|
### 2. Cek Database
|
|
Pastikan data kontrakan dan laundry sudah ada di database dengan field yang benar:
|
|
- `kontrakan`: harga, jumlah_kamar, jarak_kampus, fasilitas
|
|
- `laundry`: harga_per_kg, jarak_kampus, waktu_proses
|
|
|
|
### 3. Konfigurasi URL
|
|
**File: `lib/config/app_config.dart`**
|
|
```dart
|
|
// Untuk Android Emulator
|
|
static const String baseUrl = 'http://10.0.2.2:8000/api';
|
|
|
|
// Untuk Real Device (ganti dengan IP komputer Anda)
|
|
static const String baseUrl = 'http://192.168.1.100:8000/api';
|
|
```
|
|
|
|
### 4. Run Flutter App
|
|
```bash
|
|
cd spk_mobile
|
|
flutter pub get
|
|
flutter run
|
|
```
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Login berhasil → Redirect ke Improved Home Screen
|
|
- [ ] Home screen menampilkan Top 5 Kontrakan dengan ranking
|
|
- [ ] Setiap card menampilkan badge ranking (🏆 #1, #2, #3)
|
|
- [ ] Setiap card menampilkan skor dalam persentase
|
|
- [ ] Pull-to-refresh berfungsi reload data
|
|
- [ ] Click card → Navigate ke detail screen
|
|
- [ ] Button "Lihat Semua" → Navigate ke Recommendation Screen
|
|
- [ ] Recommendation Screen menampilkan semua hasil dengan filter
|
|
- [ ] Filter berfungsi (harga, jarak, kamar, fasilitas)
|
|
- [ ] Laundry button navigate ke Laundry List
|
|
- [ ] Bottom navigation berfungsi semua tab
|
|
|
|
## Keunggulan Sistem Baru
|
|
|
|
1. **Data Konsisten**: Mobile dan web menggunakan API dan logika yang sama
|
|
2. **Visual Ranking**: User langsung melihat mana kontrakan/laundry terbaik
|
|
3. **Sistem Scoring**: Transparansi dengan menampilkan skor SAW
|
|
4. **User Experience**: Design modern, intuitive, dan informatif
|
|
5. **Performance**: Caching dengan CachedNetworkImage untuk loading foto lebih cepat
|
|
|
|
## Troubleshooting
|
|
|
|
### Data tidak muncul?
|
|
1. Cek API response di console: `flutter run --verbose`
|
|
2. Pastikan baseUrl benar di `app_config.dart`
|
|
3. Test API menggunakan Postman: `POST http://localhost:8000/api/saw/calculate/kontrakan`
|
|
|
|
### Foto tidak muncul?
|
|
1. Pastikan foto ada di folder `public/storage` backend
|
|
2. Jalankan: `php artisan storage:link`
|
|
3. Cek URL foto di CachedNetworkImage (ada prefix storage/)
|
|
|
|
### Ranking tidak sesuai?
|
|
1. Cek bobot kriteria di database `kriteria` table
|
|
2. Pastikan metode SAW berjalan dengan benar di backend
|
|
3. Test SAW calculation manual di web
|
|
|
|
## Next Steps (Opsional)
|
|
|
|
1. **Favorites**: Implementasi favorite kontrakan/laundry
|
|
2. **Reviews**: Tampilkan dan submit review dari mobile
|
|
3. **Booking**: Integrasi booking flow yang lengkap
|
|
4. **Maps**: Tampilkan lokasi di Google Maps
|
|
5. **Notifications**: Push notification untuk booking updates
|
|
6. **Offline Mode**: Cache data untuk offline viewing
|
|
|
|
---
|
|
|
|
**Dibuat oleh**: GitHub Copilot
|
|
**Tanggal**: 31 Januari 2026
|
|
**Versi**: 1.0
|