📡 Telekomünikasyon Ağ Optimizasyonu - Kadıköy Bölgesi

Kadıköy bölgesinde mobil şebeke iyileştirme projesinin interaktif visualizasyonu. Problem analizi, çözüm stratejileri, bütçe yönetimi ve sonuçları görselleştiren Next.js tabanlı web uygulaması.

🎯 Proje Özellikleri

• Problem Haritası: Bölgedeki kapsama ve hız sorunlarının görsel temsili
• Çözüm Stratejileri: Her sorun için optimize edilmiş çözüm önerileri
• Bütçe Yönetimi: CAPEX, OPEX ve ROI analizi
• Başarı Metrikleri: Segment bazlı başarı oranları ve istatistikler
• Interaktif Arayüz: Türkçe destekli, karanlık tema ile modern kullanıcı deneyimi

📋 Gereksinimler

Projeyi çalıştırmak için aşağıdakilere ihtiyacınız vardır:

• Node.js 18.17 veya üzeri
• npm 9 veya üzeri (Node.js ile birlikte yüklenir)

🚀 Kurulum Adımları

1. Projeyi İndirin

# Proje dosyasını indirin ve açın
cd TelecomVisualization_Project

2. Bağımlılıkları Yükleyin

npm install

Bu komut package.json'da belirtilen tüm gerekli paketleri yükleyecektir:

• React 18.2.0
• Next.js 14.0.0
• TypeScript 5.3.0
• Tailwind CSS 3.4.0

3. Geliştirme Sunucusunu Başlatın

npm run dev

Çıktı şöyle görünecektir:

> next dev

✓ Ready in 1436ms

Local:        http://localhost:3000

4. Projeyi Tarayıcıda Açın

Tarayıcınızda şu adresi açın:

http://localhost:3000

📚 Kullanım Rehberi

Sekmeler (Tabs)

Uygulamada dört ana sekme bulunmaktadır:

1️⃣ 🔴 Problem Sekmesi

• Kadıköy bölgesinin haritası ve mevcut telekomünikasyon sahaları
• Tespit edilen 10 sorunu ve detaylarını görüntüle
• Her sorun türü (kapsama, hız, kapasite) renkli gösterimi
• Segment bazlı (VIP, Yüksek, Orta, Düşük) müşteri gruplandırması

2️⃣ ✅ Çözüm Sekmesi

• Her sorun için önerilen çözümler
• Çözülebilen (✓) ve çözülemeyen (✗) sorunlar
• Yeni saha ve mobil saha kurulum noktaları
• Kazanılan puan ve başarı oranı

3️⃣ 💰 Bütçe Sekmesi

• CAPEX (Sermaye Harcaması): 30M TL
• OPEX (İşletme Gideri): 5M TL
• ROI Analizi: Yatırım getirisi ve maliyet metrikleri
• Detaylı harcama dağılımı

4️⃣ 📊 Sonuçlar Sekmesi

• Segment bazlı başarı grafikleri
• Toplamda elde edilen puan ve başarı oranı
• VIP müşteri memnuniyet oranı
• Gelecek dönem önerileri

📂 Proje Yapısı

TelecomVisualization_Project/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Ana sayfa şablonu
│   │   ├── page.tsx            # Giriş sayfası
│   │   └── globals.css         # Global stiller
│   └── components/
│       └── TelecomProjectVisualization.tsx  # Ana bileşen
├── public/
│   └── next.js                 # Next.js konfigürasyonu
├── package.json                # Proje bağımlılıkları
├── tsconfig.json               # TypeScript ayarları
├── tailwind.config.js          # Tailwind CSS ayarları
├── postcss.config.js           # PostCSS ayarları
└── README.md                   # Bu dosya

🛠️ Mevcut Komutlar

# Geliştirme sunucusunu başlat (sıcak yükleme ile)
npm run dev

# Üretim için derle
npm run build

# Üretim sunucusunu başlat
npm start

# Kod kalitesini kontrol et
npm run lint

💻 Sistemler Arası Farklılıklar

macOS / Linux

npm install
npm run dev
# Tarayıcı otomatik açılmayabilir, http://localhost:3000 a gidin

Windows

npm install
npm run dev
# Aynı şekilde http://localhost:3000 a gidin

🌐 Port Değişikliği

Eğer 3000 portu kullanımda ise, Next.js otomatik olarak 3001 portunu kullanacaktır.

Manuel port belirtmek için:

# macOS / Linux
PORT=3001 npm run dev

# Windows (CMD)
set PORT=3001 && npm run dev

# Windows (PowerShell)
$env:PORT=3001; npm run dev

📊 Veri Yapısı

Problem Türleri

• coverage: Kapsama sorunu (📵)
• speed: Hız sorunu (🐌)
• capacity+speed: Kapasite ve hız sorunu (⚠️)
• temp-coverage: Geçici kapsama sorunu (📅)

Müşteri Segmentleri

• VIP (Sarı): 80 puan potansiyel
• Yüksek Getirili (Yeşil): 150 puan potansiyel
• Orta Getirili (Mavi): 200 puan potansiyel
• Düşük Getirili (Gri): 320 puan potansiyel

Toplam KPI

• Toplam Potansiyel Puan: 750
• Elde Edilen Puan: 570 (%76 başarı)
• Çözülen Sorun: 8/10 (%80)
• Çözülen Müşteri: 330 kişi

🔧 Sorun Giderme

Problem: Port 3000 zaten kullanımda

Çözüm: Next.js otomatik olarak 3001 portundan başlayacaktır veya farklı bir port belirleyin.

Problem: npm install başarısız oluyor

Çözüm:

# npm cache temizle
npm cache clean --force

# Yeniden dene
npm install

Problem: Sayfalar yüklemiyor

Çözüm:

• Tarayıcı cache temizle (Ctrl+Shift+Delete)
• Geliştirme sunucusunu yeniden başlat (Ctrl+C → npm run dev)

📦 Bağımlılıklar

Paket	Sürüm	Amaç
next	14.0.0	Web framework
react	18.2.0	UI library
react-dom	18.2.0	React DOM rendering
typescript	5.3.0	Type safety
tailwindcss	3.4.0	CSS framework

🚀 Üretim Dağıtımı

Vercel'de Dağıt (Önerilen)

# Vercel CLI yükle
npm i -g vercel

# Projeyi dağıt
vercel

Diğer Sunucularda

# Derle
npm run build

# Başlat
npm start

📝 Lisans

Bu proje eğitim ve ticari amaçlar için kullanılabilir.

👨‍💻 Geliştirici Notları

• Next.js 14 AppRouter kullanılmıştır
• TypeScript ile tam tip uyumluluğu sağlanmıştır
• Tailwind CSS ile responsive tasarım yapılmıştır
• Tüm veriler bileşen içinde statik olarak tanımlanmıştır (API entegrasyonu yapılmadı)

📞 Destek

Herhangi bir sorun yaşarsanız:

1. Terminal çıktısını kontrol edin
2. Node.js versiyonunu kontrol edin: node --version
3. npm versiyonunu kontrol edin: npm --version
4. Cache temizle: npm cache clean --force
5. node_modules sil ve yeniden yükle: rm -rf node_modules && npm install

---

Son Güncelleme: Aralık 2025