2026-09-10 08:07:10 +00:00
|
|
|
|
# Hava Durumu Uygulaması
|
2026-09-10 08:07:05 +00:00
|
|
|
|
|
2026-09-10 08:07:10 +00:00
|
|
|
|
İstanbul, Ankara, İzmir ve Antalya şehirlerinin canlı hava durumunu gösteren modern web uygulaması.
|
|
|
|
|
|
|
|
|
|
|
|
## Özellikler
|
|
|
|
|
|
|
|
|
|
|
|
- 4 şehir: İstanbul, Ankara, İzmir, Antalya
|
|
|
|
|
|
- Gerçek zamanlı sıcaklık, nem ve rüzgar verileri
|
|
|
|
|
|
- 2x2 ızgara düzeni
|
|
|
|
|
|
- Koyu mavi temalı modern arayüz
|
|
|
|
|
|
- Her 3 saniyede otomatik güncelleme
|
|
|
|
|
|
- Responsive tasarım (mobil uyumlu)
|
|
|
|
|
|
|
|
|
|
|
|
## Kurulum
|
|
|
|
|
|
|
|
|
|
|
|
1. Bağımlılıkları yükle:
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm install
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
2. Sunucuyu başlat:
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm start
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
3. Tarayıcıda aç:
|
|
|
|
|
|
```
|
|
|
|
|
|
http://localhost:3000
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Proje Yapısı
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
hava-durumu/
|
|
|
|
|
|
├── package.json # Proje yapılandırması
|
|
|
|
|
|
├── server.js # Express sunucu
|
|
|
|
|
|
├── routes/
|
|
|
|
|
|
│ └── api.js # Hava durumu API rotaları
|
|
|
|
|
|
├── public/
|
|
|
|
|
|
│ ├── index.html # Ana sayfa (2x2 grid)
|
|
|
|
|
|
│ ├── css/
|
|
|
|
|
|
│ │ └── style.css # Koyu mavi tema stilleri
|
|
|
|
|
|
│ └── js/
|
|
|
|
|
|
│ └── app.js # Canlı güncelleme mantığı
|
|
|
|
|
|
└── README.md # Bu dosya
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## API Endpoints
|
|
|
|
|
|
|
|
|
|
|
|
- `GET /api/hava` - Tüm şehirlerin hava durumunu getir
|
|
|
|
|
|
- `GET /api/hava/:id` - Tek şehir hava durumu (istanbul, ankara, izmir, antalya)
|
|
|
|
|
|
|
|
|
|
|
|
## Teknolojiler
|
|
|
|
|
|
|
|
|
|
|
|
- **Backend:** Node.js, Express.js
|
|
|
|
|
|
- **Frontend:** Vanilla JavaScript, CSS3
|
|
|
|
|
|
- **Veri:** Simüle edilmiş hava durumu verileri (gerçek zamanlı dalgalanma)
|
|
|
|
|
|
|
|
|
|
|
|
## Ekran Görüntüsü
|
|
|
|
|
|
|
|
|
|
|
|
- Koyu mavi gradient arka plan
|
|
|
|
|
|
- Mavi (#4a9eff) vurgular
|
|
|
|
|
|
- Hover efektleri ile interaktif kartlar
|
|
|
|
|
|
- Her kartta sıcaklık, nem ve rüzgar bilgisi
|
|
|
|
|
|
|
|
|
|
|
|
## Geliştirici
|
|
|
|
|
|
|
|
|
|
|
|
Numex AI - Türkiye'nin Yerli Yapay Zeka Asistanı
|