Kharisma
/
TKK_E32231105
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
TKK_E32231105/QUICK_START.md

5.3 KiB
Raw Blame History

🚀 Quick Start Guide - TelurKu

Hal yang Sudah Dibuat ✅

1. Landing Page

  • Tampilan awal dengan logo TelurKu
  • Tombol "Masuk" dan "Daftar Akun Baru"
  • Design dengan gradient background

2. Login Page

  • Form dengan email dan password
  • Tombol "Lupa Password?" (placeholder untuk fitur nanti)
  • Link ke halaman signup
  • Error handling dan loading state

3. Signup Page

  • Form: Nama, Email, Password, Konfirmasi Password
  • Checkbox terms & conditions
  • Validation lengkap
  • Link ke halaman login

4. Home/Dashboard Page

  • Greeting dengan nama user
  • Card "Panen Hari Ini" dengan jadwal
  • Card "Kondisi Kandang" dengan jadwal
  • User profile menu dengan logout

5. Firebase Integration

  • Firebase Auth untuk login/signup
  • Cloud Firestore ready (belum digunakan)
  • Auth Provider untuk state management
  • Multi-platform support (Android, iOS, Web)

🎯 Langkah Selanjutnya (URGENT)

1. Setup Firebase ⚡

File: FIREBASE_SETUP.md

Ikuti panduan untuk:

  • ✅ Buat project di Firebase Console
  • ✅ Setup Android (download google-services.json)
  • ✅ Setup iOS (download GoogleService-Info.plist)
  • ✅ Update lib/firebase_options.dart dengan credentials

2. Siapkan Assets 📁

Buat folder struktur:

assets/
├── images/
│   └── logo.png (SIAPKAN LOGO TELURKU)
└── icons/

3. Test Aplikasi 🧪

# Bersihkan project
flutter clean

# Get dependencies
flutter pub get

# Run aplikasi
flutter run

📋 Struktur Project

lib/
├── main.dart                   # Entry point + Firebase setup
├── firebase_options.dart       # Firebase credentials (UPDATE INI!)
├── providers/
│   └── auth_provider.dart      # Authentication logic
├── screens/
│   ├── landing_page.dart       # Landing page
│   ├── login_page.dart         # Login form
│   ├── signup_page.dart        # Register form
│   └── home_page.dart          # Dashboard
└── models/                     # (akan ditambahkan nanti)

🔐 Fitur Yang Sudah Ada

Authentication

  • ✅ Sign Up (email + password)
  • ✅ Login (email + password)
  • ✅ Logout
  • ✅ Error handling
  • ⏳ Reset Password (placeholder route tersedia)

UI/UX

  • ✅ Landing page
  • ✅ Login form
  • ✅ Signup form
  • ✅ Dashboard dengan user info
  • ✅ Gradient background
  • ✅ Responsive design

State Management

  • ✅ Provider untuk Auth
  • ✅ Loading states
  • ✅ Error messages
  • ✅ Auto-redirect based on login status

🎨 Design System

Colors

  • Primary Yellow: #F4D03F (TelurKu brand)
  • Orange: #FF9800 (accent)
  • Green: Soft green untuk background
  • Grey: Various shades untuk text

Typography

  • Heading: 32-48px, Bold
  • Body: 14-16px, Regular
  • Caption: 12-14px, Regular

Components

  • Rounded corners: 12-20px
  • Shadows: Subtle (0.1 opacity)
  • Buttons: 56px height minimum

📱 Testing Checklist

  • Landing page tampil saat app dibuka
  • Klik "Masuk" → Login page muncul
  • Klik "Daftar Akun Baru" → Signup page muncul
  • Dari signup → klik link "Daftar" → user terdaftar di Firebase
  • Dari login → masukkan credentials yang sudah signup → berhasil login
  • Setelah login → Home page dengan greeting
  • Klik profile → logout → kembali ke landing page

🐛 Troubleshooting

Firebase Error

PlatformException: Platform exception from Firebase

Solusi:

  • Update firebase_options.dart dengan credentials yang benar
  • Pastikan google-services.json ada di android/app/

Assets Not Found

FileSystemException: Cannot open file

Solusi:

  • Buat folder assets/images/
  • Pastikan pubspec.yaml sudah mengaktifkan assets
  • Restart aplikasi dengan flutter run

Hot Reload Error

Hot reload failed

Solusi:

  • Gunakan flutter clean
  • Gunakan Hot Restart (Shift+Ctrl+F5)

📚 Dependencies

firebase_core: ^3.3.0          # Firebase
firebase_auth: ^5.1.4          # Authentication
cloud_firestore: ^5.1.0        # Database
provider: ^6.1.0               # State management
google_fonts: ^6.2.1           # Fonts

💡 Tips & Tricks

  1. Hot Reload: Tekan r di terminal untuk reload code
  2. Hot Restart: Tekan Shift + R untuk restart state
  3. Clean Build: flutter clean && flutter pub get
  4. Debug: Lihat error stack di bottom panel VS Code
  5. Firebase Console: Monitor user dari https://console.firebase.google.com

📞 Next Phase (Belum Dikerjakan)

  1. Dashboard Features

    • Real-time data dari Firestore
    • Charts untuk statistik panen
    • Notifikasi jadwal

  2. Fitur Panen

    • Input data panen
    • History panen
    • Export laporan

  3. Fitur Kandang

    • Input kondisi kandang
    • Alert kesehatan
    • Inventory feed/obat

  4. User Profile

    • Edit profile
    • Foto profile
    • Settings

  5. Database

    • Firestore rules
    • Data validation
    • Backup strategy

✅ Done!

Login & Signup sudah fully functional dengan Firebase! Tinggal setup Firebase credentials dan siap untuk phase 2.

Good luck! 🍀