261 lines
8.1 KiB
Markdown
261 lines
8.1 KiB
Markdown
# 🚀 Quick Start Guide - Halaman Beranda Wisata
|
||
|
||
## Ringkasan Singkat
|
||
|
||
Telah dibuat tampilan **Halaman Beranda yang lengkap** dengan 8 card wisata, search, dan filter kategori. Semuanya sudah siap digunakan dan responsif untuk Android mobile.
|
||
|
||
## 📂 File-File yang Dibuat
|
||
|
||
### 1. Model Data (`lib/models/`)
|
||
- **`destination_model.dart`** - Definisi model data untuk wisata
|
||
- **`destination_data.dart`** - List 8 wisata dengan semua informasi
|
||
|
||
### 2. Pages (`lib/pages/`)
|
||
- **`home_page.dart`** - Halaman Beranda (Main Page)
|
||
- Grid 2 kolom dengan 8 card
|
||
- Search bar real-time
|
||
- Filter kategori
|
||
- Hasil count
|
||
|
||
- **`destination_detail_page.dart`** - Halaman Detail Wisata
|
||
- Informasi lengkap wisata
|
||
- Collapsing app bar
|
||
- Action buttons (Share & View AR)
|
||
|
||
### 3. Widgets (`lib/widgets/`)
|
||
- **`destination_card_widget.dart`** - Card Wisata Reusable
|
||
- Gambar landscape dengan overlay
|
||
- Rating & kategori badge
|
||
- Nama, deskripsi, lokasi, tombol detail
|
||
- Animasi tap smooth
|
||
|
||
- **`placeholder_image_widget.dart`** - Widget untuk placeholder image
|
||
|
||
### 4. Screens (`lib/screens/`)
|
||
- **`beranda_screen.dart`** - Screen wrapper dengan bottom navigation
|
||
- Tab Beranda, Favorit, Profil
|
||
- Navigasi antar halaman
|
||
|
||
### 5. Dokumentasi & Script
|
||
- **`DOKUMENTASI_HALAMAN_BERANDA.md`** - Dokumentasi lengkap
|
||
- **`ASSET_IMAGES_GUIDE.md`** - Panduan membuat asset images
|
||
- **`generate_placeholders.py`** - Script generate placeholder images
|
||
|
||
## ⚡ Quick Setup (5 Menit)
|
||
|
||
### Step 1: Generate Images
|
||
```bash
|
||
cd c:\FINAL_PROJECT_TA\TA_WISATA_LMJ_1
|
||
python generate_placeholders.py
|
||
```
|
||
Output: 8 placeholder images di `android/wisata_app/assets/images/`
|
||
|
||
### Step 2: Update Dependencies (jika perlu)
|
||
```bash
|
||
cd android/wisata_app
|
||
flutter pub get
|
||
```
|
||
|
||
### Step 3: Run Aplikasi
|
||
```bash
|
||
flutter run
|
||
```
|
||
|
||
### Step 4: Navigate to Beranda
|
||
Login terlebih dahulu, kemudian navigasi ke halaman Beranda untuk melihat card wisata.
|
||
|
||
## 🎨 Preview Halaman
|
||
|
||
### Halaman Beranda (Home Page)
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ Jelajahi Lumajang │
|
||
│ Temukan keindahan wisata alam │
|
||
├─────────────────────────────────┤
|
||
│ [🔍 Cari wisata favoritmu...] ✕ │
|
||
├─────────────────────────────────┤
|
||
│ Filter Kategori │
|
||
│ [Semua] [🏔️Gunung] [🏖️Pantai] [💧Danau]
|
||
├─────────────────────────────────┤
|
||
│ Ditemukan 8 wisata │
|
||
├─────────────┬───────────────────┤
|
||
│ ┌─────────┐ │ ┌─────────────────┤
|
||
│ │ Gunung │ │ │ Gunung Semeru │
|
||
│ │Lemongan │ │ │ ⭐ 4.9 │
|
||
│ │ │ │ └─────────────────┤
|
||
│ │ Gunung │ │ Lokasi terbaik... │
|
||
│ │Lemongan │ │ 📍 Ranu Pani │
|
||
│ │📍 Lokasi│ │ [Lihat Detail] │
|
||
│ │[Detail] │ └─────────────────┘
|
||
│ └─────────┘
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
### Halaman Detail Wisata
|
||
```
|
||
┌──────────────────────────────────┐
|
||
│ ← [Gambar Wisata Fullscreen] │
|
||
│ dengan gradient overlay │
|
||
├──────────────────────────────────┤
|
||
│ Gunung Semeru ⭐ 4.9│
|
||
│ [Gunung] │
|
||
│ 📍 Ranu Pani │
|
||
├──────────────────────────────────┤
|
||
│ Tentang Tempat Ini │
|
||
│ Gunung Semeru adalah gunung │
|
||
│ tertinggi di Pulau Jawa... │
|
||
├──────────────────────────────────┤
|
||
│ Informasi Wisata │
|
||
│ 🏷️ Kategori: Gunung │
|
||
│ 📍 Lokasi: Ranu Pani, Lumajang │
|
||
│ ⭐ Rating: 4.9 / 5.0 │
|
||
├──────────────────────────────────┤
|
||
│ Lihat Model 3D │
|
||
│ 🔍 assets/models/gunung_semeru │
|
||
├──────────────────────────────────┤
|
||
│ [Bagikan] [🔍 Lihat AR] │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
## 🎯 Fitur-Fitur
|
||
|
||
### ✅ Grid Card
|
||
- 2 kolom responsive
|
||
- 8 card wisata
|
||
- Rounded corners 20px
|
||
- Shadow elevation 8
|
||
- Gambar landscape fullscreen
|
||
|
||
### ✅ Search Bar
|
||
- Real-time filtering
|
||
- Clear button otomatis
|
||
- Placeholder: "Cari wisata favoritmu..."
|
||
|
||
### ✅ Filter Kategori
|
||
- Gunung (Coklat)
|
||
- Danau (Biru)
|
||
- Pantai (Teal)
|
||
- Tombol "Semua" untuk reset
|
||
|
||
### ✅ Animasi
|
||
- Tap animation (scale)
|
||
- Smooth transitions
|
||
- Shadow effects
|
||
|
||
### ✅ Halaman Detail
|
||
- Informasi lengkap
|
||
- Deskripsi panjang
|
||
- Action buttons
|
||
- Collapsing header
|
||
|
||
## 🎨 Warna yang Digunakan
|
||
|
||
| Element | Warna | Hex |
|
||
|---------|-------|-----|
|
||
| Primary Green | Hijau Alam | #1F8F5F |
|
||
| Mountain Category | Coklat | #8B7355 |
|
||
| Lake Category | Biru | #2196F3 |
|
||
| Beach Category | Teal | #4ECDC4 |
|
||
| Rating Badge | Orange | #E28D42 |
|
||
| Background | Putih/Beige | #F7F4EA |
|
||
|
||
## 📝 Bahasa
|
||
|
||
Semua teks menggunakan **Bahasa Indonesia**:
|
||
- Header, label, button, placeholder
|
||
- Kategori: Gunung, Danau, Pantai
|
||
- Lokasi dalam format "Kota, Lumajang"
|
||
|
||
## 🔗 Data 8 Wisata
|
||
|
||
1. **Gunung Lemongan** (Gunung) - Rating 4.8
|
||
2. **Gunung Semeru** (Gunung) - Rating 4.9
|
||
3. **Pantai Watu Godeg** (Pantai) - Rating 4.6
|
||
4. **Pantai Watu Pecak** (Pantai) - Rating 4.5
|
||
5. **Puncak B29** (Gunung) - Rating 4.7
|
||
6. **Ranu Kumbolo** (Danau) - Rating 4.8
|
||
7. **Ranu Pani** (Danau) - Rating 4.7
|
||
8. **Ranu Regulo** (Danau) - Rating 4.6
|
||
|
||
## 💡 Tips Penggunaan
|
||
|
||
### Testing Search
|
||
1. Buka halaman Beranda
|
||
2. Ketik "Gunung" di search bar
|
||
3. Akan menampilkan 3 wisata (Lemongan, Semeru, B29)
|
||
|
||
### Testing Filter
|
||
1. Klik tombol "Gunung"
|
||
2. Akan menampilkan hanya gunung
|
||
3. Klik lagi untuk deselect
|
||
|
||
### Testing Detail Page
|
||
1. Tap salah satu card
|
||
2. Akan buka halaman detail dengan info lengkap
|
||
3. Tap "Lihat AR" untuk membuka model 3D (placeholder)
|
||
|
||
## 🔧 Kustomisasi
|
||
|
||
### Menambah Wisata Baru
|
||
Edit `lib/models/destination_data.dart`:
|
||
```dart
|
||
Destination(
|
||
id: 9,
|
||
nama: 'Wisata Baru',
|
||
deskripsi: 'Deskripsi singkat...',
|
||
lokasi: 'Lokasi',
|
||
rating: 4.5,
|
||
kategori: 'gunung', // atau 'danau', 'pantai'
|
||
gambar: 'assets/images/wisata_baru.jpg',
|
||
modelPath: 'assets/models/wisata_baru.glb',
|
||
deskripsiLengkap: 'Deskripsi panjang...',
|
||
)
|
||
```
|
||
|
||
### Mengubah Warna
|
||
Edit `lib/main.dart`:
|
||
```dart
|
||
const seed = Color(0xFF1F8F5F); // Ubah color code
|
||
```
|
||
|
||
## ✨ Fitur Tambahan yang Bisa Dikembangkan
|
||
|
||
- [ ] Favorit/Bookmark wisata
|
||
- [ ] Rating & review dari user
|
||
- [ ] Share ke social media
|
||
- [ ] Integrasi dengan maps
|
||
- [ ] Booking/reservasi
|
||
- [ ] Push notifications
|
||
- [ ] Offline mode
|
||
- [ ] Multi-language support
|
||
|
||
## 📱 Kompatibilitas
|
||
|
||
- **Platform**: Android Mobile
|
||
- **Min SDK**: API Level 21 (Flutter default)
|
||
- **Target**: API Level 33+
|
||
- **Responsive**: Semua ukuran layar mobile
|
||
|
||
## 🐛 Troubleshooting
|
||
|
||
| Problem | Solution |
|
||
|---------|----------|
|
||
| Images not showing | Run `flutter pub get` dan periksa folder assets |
|
||
| Filter tidak bekerja | Periksa kategori di destination_data.dart |
|
||
| Animation lag | Run dengan `flutter run --release` |
|
||
| Build error | Delete `build/` folder dan rebuild |
|
||
|
||
## 📚 Dokumentasi Lengkap
|
||
|
||
Lihat file `DOKUMENTASI_HALAMAN_BERANDA.md` untuk dokumentasi lengkap dan detail.
|
||
|
||
## 🎉 Done!
|
||
|
||
Halaman Beranda sudah siap! Tinggal:
|
||
1. Generate images dengan script Python
|
||
2. Customize sesuai kebutuhan
|
||
3. Implementasikan AR viewer untuk tombol "Lihat AR"
|
||
4. Tambahkan fitur favorit dan lainnya
|
||
|
||
**Selamat mengembangkan aplikasi wisata AR Lumajang! 🚀**
|