AI Weather Agent

Aplikasi web AI yang memberikan informasi cuaca terkini untuk wilayah Jakarta, Bogor, Bekasi, Depok, dan Tangerang menggunakan OpenAI API dan peta interaktif dengan Leaflet.js.

Fitur

• 🗺️ Peta Cuaca Interaktif: Visualisasi cuaca real-time dengan Leaflet.js
• 🤖 AI Chatbot: Asisten cuaca cerdas menggunakan OpenAI GPT (dengan mode demo)
• 🌤️ Klasifikasi Cuaca: 5 jenis cuaca dengan warna yang berbeda
• ⏰ Time Slider: Tampilkan prediksi cuaca per 10 menit (6 slot waktu dalam 1 jam)
• 📍 Wilayah Lengkap: Jakarta, Bogor, Bekasi, Depok, Tangerang
• 📱 Responsive Design: Tampilan optimal di desktop dan mobile
• ⚡ Real-time Updates: Data cuaca diperbarui setiap 30 detik
• 🎨 Warna Klasifikasi: Merah (Hujan Lebat), Kuning (Hujan Sedang), Hijau (Hujan Ringan), Abu-abu (Berawan), Emas (Cerah)

Teknologi yang Digunakan

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Backend: Node.js, Express.js
• AI: OpenAI GPT-3.5-turbo
• Peta: Leaflet.js dengan OpenStreetMap
• Data: GeoJSON untuk wilayah Jakarta dan sekitarnya

Instalasi

1. Clone Repository

git clone https://github.com/habibb97/weatherbot
cd weatherbot

2. Install Dependencies

npm install

3. Setup Environment Variables

# Copy file environment example
cp env.example .env

# Edit file .env dan tambahkan API key OpenAI Anda
OPENAI_API_KEY=your_openai_api_key_here
PORT=3000

4. Jalankan Aplikasi

# Development mode
npm run dev

# Production mode
npm start

5. Akses Aplikasi

Buka browser dan kunjungi: http://localhost:3000

Cara Mendapatkan OpenAI API Key

1. Kunjungi OpenAI Platform
2. Buat akun atau login
3. Pergi ke API Keys
4. Klik "Create new secret key"
5. Copy API key dan paste ke file .env

Struktur Proyek

ai-weather-agent/
├── data/
│   └── jakarta-region.geojson    # Data GeoJSON wilayah
├── index.html                    # Halaman utama
├── styles.css                    # Styling CSS
├── script.js                     # JavaScript frontend
├── server.js                     # Backend Express server
├── package.json                  # Dependencies Node.js
├── env.example                   # Template environment variables
└── README.md                     # Dokumentasi

API Endpoints

POST /api/chat

Mengirim pesan ke AI chatbot

{
  "message": "Bagaimana cuaca di Jakarta hari ini?",
  "weatherData": {...}
}

GET /api/weather

Mendapatkan data cuaca GeoJSON

GET /api/health

Health check endpoint

Data Cuaca

Aplikasi menggunakan data dummy GeoJSON yang mencakup:

• Jakarta: Pusat, Utara, Selatan, Timur, Barat
• Bogor: Kota Bogor
• Bekasi: Kota Bekasi
• Depok: Kota Depok
• Tangerang: Tangerang dan Tangerang Selatan

Setiap wilayah memiliki data:

• Suhu (°C)
• Kelembaban (%)
• Kondisi cuaca
• Kecepatan angin (km/h)
• Tekanan udara (hPa)

Klasifikasi Cuaca

Kondisi	Warna	Deskripsi
Cerah	🟡 Emas	Cuaca cerah dengan sinar matahari penuh
Berawan	⚫ Abu-abu	Cuaca berawan dengan awan menutupi sebagian langit
Hujan Ringan	🟢 Hijau	Hujan ringan dengan intensitas rendah
Hujan Sedang	🟡 Kuning	Hujan sedang dengan intensitas sedang
Hujan Lebat	🔴 Merah	Hujan lebat dengan intensitas tinggi

Time Slider

Aplikasi menampilkan prediksi cuaca untuk 6 slot waktu dalam 1 jam ke depan:

• +0 menit: Waktu saat ini
• +10 menit: Prediksi 10 menit ke depan
• +20 menit: Prediksi 20 menit ke depan
• +30 menit: Prediksi 30 menit ke depan
• +40 menit: Prediksi 40 menit ke depan
• +50 menit: Prediksi 50 menit ke depan

Gunakan slider di bagian atas peta untuk melihat perubahan cuaca dari waktu ke waktu.

Penggunaan

1. Lihat Peta Cuaca: Klik pada area di peta untuk melihat detail cuaca
2. Time Slider: Gunakan slider untuk melihat prediksi cuaca per 10 menit
3. Chat dengan AI: Tanyakan tentang cuaca di chatbox
4. Quick Questions: Gunakan tombol pertanyaan cepat
5. Info Panel: Lihat detail cuaca di panel sebelah kanan

Contoh Pertanyaan

• "Bagaimana cuaca di Jakarta hari ini?"
• "Apakah akan hujan di Bogor?"
• "Berapa suhu di Bekasi sekarang?"
• "Prediksi cuaca besok untuk Depok"
• "Mana yang lebih panas, Jakarta atau Tangerang?"

Troubleshooting

Error: OpenAI API Key not found

• Pastikan file .env sudah dibuat
• Periksa nama variabel OPENAI_API_KEY
• Pastikan API key valid dan aktif

Error: Cannot load weather data

• Periksa file data/jakarta-region.geojson ada
• Pastikan server berjalan dengan benar

Chat tidak merespons

• Periksa koneksi internet
• Pastikan OpenAI API key valid
• Lihat console browser untuk error

Catatan: Aplikasi ini menggunakan data dummy untuk demonstrasi. Untuk penggunaan produksi, integrasikan dengan API cuaca real-time seperti OpenWeatherMap atau BMKG.