MIF_E31231623/QUICK_START_GUIDE.md

🚀 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

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)

cd android/wisata_app
flutter pub get

Step 3: Run Aplikasi

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:

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:

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! 🚀