Javascript İle Tarayıcı Tabanlı Bir Karşılaştırmalı Fiyat Analiz Aracı Nasıl Yapılır?

Ön Hazırlık ve Gereksinimler

Projeye başlamadan önce modern bir tarayıcı (Chrome, Firefox veya Edge) ve temel bir kod editörüne (VS Code önerilir) sahip olmanız yeterlidir. JavaScript projelerinde yerel bir sunucu simülasyonu için "Live Server" eklentisini kullanmanız, kod değişikliklerini anlık görmeniz açısından kritiktir.

• Modern bir kod editörü (VS Code).
• Temel HTML5 ve CSS bilgisi.
• JavaScript'in temel sözdizimi ve asenkron programlama (fetch API, async/await) hakkında bilgi.

Adım 1: Veri Yapısını Oluşturma

Fiyat analizi aracımızın temelinde, farklı mağazalardan gelen verilerin standart bir formatta işlenmesi yatar. İlk olarak, verilerimizi temsil edecek bir dizi (array) yapısı kuralım.

const urunListesi = [
  { id: 1, isim: "Akıllı Telefon", magaza: "TeknoMarket", fiyat: 15000 },
  { id: 2, isim: "Akıllı Telefon", magaza: "HızlıAl", fiyat: 14850 },
  { id: 3, isim: "Akıllı Telefon", magaza: "GlobalStore", fiyat: 15200 }
];

Bu kod bloğunda, urunListesi adında bir dizi oluşturduk. Her nesne (object), ürünün adını, mağaza ismini ve fiyatını tutar. Bu yapı, veritabanından veya bir API'den gelen verileri taklit eder.

Adım 2: Fiyatları Karşılaştırma ve Sıralama

Verileri kullanıcıya sunmadan önce en uygun fiyatı bulmak için bir sıralama algoritmasına ihtiyacımız vardır. JavaScript'in yerleşik sort() metodunu kullanarak fiyatları küçükten büyüğe sıralayabiliriz.

function fiyataGoreSirala(veriler) {
  return veriler.sort((a, b) => a.fiyat - b.fiyat);
}

const siraliListe = fiyataGoreSirala(urunListesi);
console.log(siraliListe);

Burada sort fonksiyonu, iki öğeyi (a ve b) karşılaştırarak fiyat farkına göre dizilim yapar. Bu işlem, kullanıcıya en ucuz ürünü en üstte göstermek için temel oluşturur.

Adım 3: DOM Manipülasyonu ile Verileri Ekrana Yazdırma

Verilerimizi HTML sayfasında bir tablo içerisinde göstermek, kullanıcı deneyimi açısından en verimli yöntemdir. Aşağıdaki kod, JavaScript kullanarak dinamik olarak bir tablo satırı oluşturur.

const tabloGovdesi = document.querySelector("#fiyatTablosu tbody");

function tabloyuGuncelle(veriler) {
  tabloGovdesi.innerHTML = "";
  veriler.forEach(urun => {
    const satir = `
      ${urun.isim}
      ${urun.magaza}
      ${urun.fiyat} TL
    `;
    tabloGovdesi.innerHTML += satir;
  });
}

Bu fonksiyon, innerHTML kullanarak her ürün için bir HTML satırı oluşturur ve tabloya ekler. forEach döngüsü, dizideki her öğeyi tek tek işler.

Adım 4: Karşılaştırma Yöntemleri Karşılaştırma Tablosu

Adım 5: Güvenlik ve Hata Yönetimi

Tarayıcı tabanlı araçlarda en büyük risk, harici kaynaklardan gelen verilerin güvenliğidir. Kullanıcıdan alınan veya API'den çekilen verilerde XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olunmalıdır.

Kritik Uyarı: Kullanıcı girdilerini veya harici API verilerini doğrudan innerHTML içine yerleştirmek, XSS saldırılarına kapı aralar. Verileri ekrana basmadan önce her zaman sanitize (temizleme) edin veya textContent özelliğini tercih edin.

function guvenliEkle(urun) {
  const tr = document.createElement("tr");
  const tdIsim = document.createElement("td");
  tdIsim.textContent = urun.isim; // XSS engelleme
  tr.appendChild(tdIsim);
  tabloGovdesi.appendChild(tr);
}

textContent kullanımı, tarayıcının veriyi HTML olarak değil, düz metin olarak yorumlamasını sağlar. Bu, kötü niyetli kodların çalışmasını engellemek için en basit ve etkili yöntemdir.

Adım 6: Dinamik Filtreleme Özelliği

Kullanıcıların belirli bir mağazayı veya fiyat aralığını seçebilmesi için bir filtreleme mekanizması ekleyelim. Bu, aracınızı profesyonel bir seviyeye taşır.

function filtrele(veriler, maxFiyat) {
  return veriler.filter(urun => urun.fiyat


Adım 7: Performans Optimizasyonu ve Büyük Veri Setleri

Fiyat analizi aracınızda yüzlerce ürün verisi olduğunda, DOM manipülasyonu yavaşlamaya başlayabilir. Her güncellemede tüm tabloyu yeniden oluşturmak yerine, "DocumentFragment" kullanarak tarayıcı üzerindeki yeniden boyama (reflow) işlemlerini minimize etmelisiniz. Bu yöntem, bellek üzerinde sanal bir düğüm oluşturur ve tek seferde DOM'a ekler.

function tabloyuGuncelle(urunler) {
  const fragment = document.createDocumentFragment();
  const tbody = document.querySelector("#fiyatTablosu tbody");
  
  // Mevcut içeriği temizle
  tbody.innerHTML = "";

  urunler.forEach(urun => {
    const tr = document.createElement("tr");
    tr.innerHTML = `${urun.isim}${urun.fiyat} TL`;
    fragment.appendChild(tr);
  });

  tbody.appendChild(fragment);
}

Ayrıca, büyük veri setlerinde filtreleme yaparken filter metodunun performansını artırmak için "Debounce" tekniğini kullanmanız önerilir. Kullanıcı her tuşa bastığında filtreleme yapmak yerine, yazmayı bıraktıktan sonra işlemi tetiklemek CPU yükünü ciddi oranda düşürür.

function debounce(func, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

const aramaKutusu = document.querySelector("#arama");
aramaKutusu.addEventListener("input", debounce((e) => {
  console.log("Filtreleniyor:", e.target.value);
}, 300));






Adım 8: Hata Ayıklama ve Geliştirici Araçları

Uygulamanız karmaşıklaştıkça, veri akışını takip etmek zorlaşabilir. Tarayıcı konsolunu sadece console.log için değil, verilerin yapısını doğrulamak için de kullanın. Özellikle API'den gelen verilerin beklenen şemaya uygun olup olmadığını kontrol etmek için console.table metodunu kullanabilirsiniz.

Hata Ayıklama İpuçları:

  
Network Tabı: Eğer veriler bir API'den geliyorsa, "Network" sekmesinden JSON yanıtlarının doğru dönüp dönmediğini kontrol edin.
  
Breakpoint Kullanımı: Kodunuzun belirli bir noktasında duraklama yapmak için debugger; anahtar kelimesini kodun içine yerleştirin.
  
Try-Catch Blokları: Veri işleme sırasında oluşabilecek beklenmedik hataları yakalamak için mutlaka hata yönetimi kullanın.


try {
  const veriler = JSON.parse(localStorage.getItem("urunler"));
  if (!veriler) throw new Error("Veri bulunamadı!");
  tabloyuGuncelle(veriler);
} catch (hata) {
  console.error("Veri işleme hatası:", hata.message);
  document.querySelector("#hataMesaji").textContent = "Veriler yüklenirken bir sorun oluştu.";
}

Bu yapı, kullanıcıya doğrudan teknik hata kodlarını göstermek yerine, daha anlaşılır bir mesaj iletmenizi sağlar. Profesyonel bir araç, hataları gizleyen değil, onları yönetebilen bir mimariye sahip olmalıdır.