Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Kategoriler
Son Yazılar

JavaScript ve Mock API ile İnteraktif Ürün Arama Uygulaması

Günümüz dijital dünyasında kullanıcılar, aradıkları bilgilere veya ürünlere anında ulaşmak ister. Bu beklenti, özellikle e-ticaret siteleri ve içerik platformları için interaktif arama uygulamalarını vazgeçilmez kılıyor. Peki, modern web geliştirme teknikleriyle, özellikle JavaScript ve bir Mock API kullanarak, hızlı ve etkili bir ürün arama uygulamasını nasıl hayata geçirebiliriz? Bu makalede, bu sorunun cevabını adım adım, pratik örnekler ve ileri düzey ipuçlarıyla keşfedeceğiz. Kullanıcı dostu arama deneyimleri tasarlamak artık çok daha kolay!

Günümüzün rekabetçi dijital pazarında, kullanıcı deneyimi (UX) bir uygulamanın veya web sitesinin başarısında kritik bir rol oynamaktadır. Kullanıcılar, web sitelerinde gezinirken sezgisel, hızlı ve verimli bir deneyim beklerler. Özellikle ürün veya bilgi arayışında olduklarında, karmaşık menüler arasında kaybolmak veya yavaş yanıt veren bir arama motoruyla karşılaşmak, hayal kırıklığına ve potansiyel müşteri kaybına yol açabilir. İşte tam da bu noktada, JavaScript ve bir Mock API kullanarak geliştireceğimiz interaktif ürün arama uygulamaları devreye girer. Bu tür uygulamalar, kullanıcıların ihtiyaç duyduğu ürünleri veya bilgileri anında, dinamik ve kullanıcı dostu bir arayüzle bulmalarını sağlar.

Peki, bir interaktif ürün arama uygulamasının temel faydaları nelerdir? İlk olarak, geliştirilmiş kullanıcı deneyimi sunar. Kullanıcılar arama çubuğuna yazdıkları her harf veya seçtikleri her filtre ile sonuçları anında güncellenmiş olarak gördüklerinde, uygulamanın onlarla etkileşime girdiğini hissederler. Bu, web sitesinde geçirilen süreyi artırır ve kullanıcı memnuniyetini yükseltir. İkinci olarak, artırılmış dönüşüm oranları sağlar. Kullanıcılar aradıkları ürünü kolayca bulduklarında, satın alma veya hedeflenen eylemi gerçekleştirme olasılıkları önemli ölçüde artar. Hızlı ve doğru arama sonuçları, kararsız müşterileri bile harekete geçirebilir. Üçüncü olarak, verimlilik ve erişilebilirlik açısından avantajlar sunar. Geleneksel sayfa yenilemeli arama yöntemlerine kıyasla, JavaScript tabanlı çözümler sadece gerekli veriyi çekerek ağ trafiğini azaltır ve performansı artırır. Ayrıca, doğru yapılandırıldığında, bu uygulamalar engelli kullanıcılar için de daha erişilebilir bir deneyim sunabilir.

Bir e-ticaret sitesini düşünelim: Müşterileriniz yüzlerce farklı ürünü barındıran bir katalog içinde spesifik bir kulaklık modeli veya belirli bir bedende elbise arıyor olabilirler. Eğer arama çubuğuna “kablosuz kulaklık” yazdıklarında sonuçlar anında listelenmiyorsa ve sayfanın her seferinde tamamen yenilenmesi gerekiyorsa, sabırları çabucak tükenebilir. Ancak interaktif bir arama uygulamasıyla, “kablosuz” yazdıkları anda ilgili ürünler belirmeye başlar ve “kulaklık” kelimesi tamamlandığında daha da spesifik sonuçlar gösterilir. Kategori, fiyat aralığı veya marka gibi filtreler eklediklerinde de liste saniyeler içinde güncellenir. Bu, hem zamandan tasarruf ettirir hem de kullanıcıya “aradığımı buldum” hissini verir. Bu makale boyunca, işte bu dinamik ve verimli deneyimi adım adım nasıl inşa edeceğimizi öğreneceğiz. Sıfırdan başlayarak, temel JavaScript, DOM manipülasyonu ve Mock API kullanımıyla kendi interaktif ürün arama uygulamanızı geliştireceksiniz. Böylece, kullanıcılarınızın dijital platformunuzda geçirdikleri zamanı daha keyifli ve verimli hale getireceksiniz.

Temel Kavramlar ve Ortam Hazırlığı: JavaScript, DOM ve Mock API İle Tanışın

İnteraktif bir ürün arama uygulaması oluşturmak için temel web teknolojileri olan JavaScript, HTML DOM ve bir Mock API hakkında sağlam bir anlayışa sahip olmamız gerekiyor. Bu bölümde, bu temel kavramları detaylıca inceleyecek ve geliştirme ortamımızı nasıl hazırlayacağımızı adım adım ele alacağız.

JavaScript’in Gücü ve Rolü: Web’i Canlandıran Dil

JavaScript, web sayfalarına etkileşim ve dinamizm kazandıran bir programlama dilidir. Başlangıçta sadece tarayıcı tarafında (client-side) çalışmak üzere tasarlanmış olsa da, Node.js gibi teknolojiler sayesinde günümüzde sunucu tarafında (server-side) da yaygın olarak kullanılmaktadır. Bizim uygulamamızda JavaScript, kullanıcının arama çubuğuna yazdığı metni algılayacak, bir veri kaynağından ürün bilgilerini çekecek, bu bilgileri işleyecek ve web sayfasının içeriğini dinamik olarak güncelleyecektir. Yani, kullanıcı arama yaptıkça sayfanın yeniden yüklenmesine gerek kalmadan sonuçları ekranda gösterecek olan beynimiz JavaScript olacaktır. Modern JavaScript (ES6+), modüler yapısı, async/await gibi asenkron programlama yetenekleri ve daha temiz sözdizimi ile geliştirme süreçlerini oldukça kolaylaştırmıştır.

HTML DOM: Web Sayfalarının Yapı Taşı

Document Object Model (DOM), HTML ve XML belgeleri için bir programlama arayüzüdür. Bir web sayfasını mantıksal bir ağaç yapısı olarak temsil eder ve JavaScript’in bu ağaçtaki öğelere (elementlere) erişmesine ve onları değiştirmesine olanak tanır. Uygulamamızda, arama sonuçlarını göstereceğimiz bir HTML div elementine sahip olacağız. JavaScript, Mock API’den aldığı ürün verilerini kullanarak bu div içerisine yeni HTML elementleri (örneğin, her ürün için bir kart) oluşturacak ve bunları DOM’a ekleyecektir. Bu sayede, arama sonuçları dinamik olarak güncellenmiş olacak. Örneğin, document.getElementById(), document.querySelector(), element.innerHTML, element.appendChild() gibi DOM manipülasyon metotlarını sıkça kullanacağız.

Mock API Nedir ve Neden Kullanırız?

Bir Mock API, gerçek bir backend sunucusu hazır olana kadar veya test/prototipleme amaçları için kullanılan sahte bir API’dir. Geliştirme sürecinde gerçek bir backend’in kurulmasını beklemek yerine, Mock API ile hızlıca bir veri kaynağı oluşturabilir ve frontend geliştirmemize odaklanabiliriz. Bu, zaman kazandırır ve geliştirme hızını artırır. Bizim senaryomuzda, ürün verilerimizi içeren basit bir JSON dosyasını Mock API olarak kullanacağız. Bu verileri web sunucusu üzerinden sunmak için basit bir araç olan JSON Server’ı tercih edebiliriz, ya da daha basit bir başlangıç için sadece bir db.json dosyası oluşturup bunu doğrudan fetch API ile yerel olarak okuyabiliriz. Her iki durumda da, temel amaç aynıdır: uygulamanın veri ihtiyacını karşılamak.

JSON Server Kurulumu ve Basit Bir Veri Yapısı:

Eğer Mock API olarak JSON Server kullanmak isterseniz, terminalinizde şu komutları çalıştırarak kurulum yapabilirsiniz:


npm install -g json-server

Daha sonra projenizin ana dizininde db.json adında bir dosya oluşturup içine örnek ürün verilerini ekleyebilirsiniz. İşte basit bir db.json örneği:


{
  "products": [
    {
      "id": 1,
      "name": "Kablosuz Kulaklık",
      "category": "Elektronik",
      "price": 1200,
      "image": "images/kulaklik.jpg",
      "description": "Yüksek ses kalitesi ve uzun pil ömrü sunan kablosuz kulaklık."
    },
    {
      "id": 2,
      "name": "Akıllı Saat",
      "category": "Elektronik",
      "price": 2500,
      "image": "images/saat.jpg",
      "description": "Sağlık takibi ve bildirim özellikleri ile modern akıllı saat."
    },
    {
      "id": 3,
      "name": "Deri Ceket",
      "category": "Giyim",
      "price": 1800,
      "image": "images/ceket.jpg",
      "description": "Şık ve dayanıklı gerçek deri ceket."
    },
    {
      "id": 4,
      "name": "Masaüstü Bilgisayar",
      "category": "Elektronik",
      "price": 15000,
      "image": "images/bilgisayar.jpg",
      "description": "Yüksek performanslı oyun ve iş bilgisayarı."
    },
    {
      "id": 5,
      "name": "Keten Pantolon",
      "category": "Giyim",
      "price": 450,
      "image": "images/pantolon.jpg",
      "description": "Yazlık ve rahat keten pantolon."
    }
  ]
}

Bu db.json dosyasını JSON Server ile çalıştırmak için ise şu komutu kullanmanız yeterlidir:


json-server --watch db.json --port 3000

Bu komut, products verilerinize http://localhost:3000/products adresinden erişmenizi sağlayacak bir REST API oluşturur. Frontend uygulamanız bu adrese istek göndererek ürün verilerini çekebilecektir. Böylece, gerçek bir backend'i beklemeye gerek kalmadan veri akışını simüle etmiş oluruz. Bu temel bileşenlerle, interaktif arama uygulamamızın altyapısını başarıyla kurmuş olacağız.

Uygulama Geliştirmenin İlk Adımları: HTML, CSS ve Veri Çekme

Artık temel kavramları anladığımıza göre, interaktif ürün arama uygulamamızın iskeletini inşa etmeye başlayabiliriz. Bu bölümde, uygulamanın temel HTML yapısını oluşturacak, mobil uyumluluğu göz önünde bulundurarak bazı temel CSS stilleri ekleyecek ve JavaScript kullanarak Mock API'den ürün verilerini nasıl çekeceğimizi ve sayfamızda nasıl listeleyeceğimizi öğreneceğiz.

Temel HTML Yapısı: Kullanıcı Arayüzünün Omurgası

Uygulamamızın kullanıcı arayüzü (UI) için basit ama işlevsel bir HTML yapısı oluşturacağız. Bu yapı, bir arama çubuğu, kategori filtreleri (isteğe bağlı ama faydalı), ürünlerin görüntüleneceği bir alan ve bazı temel bilgilendirme metinlerini içerecektir. Aşağıdaki HTML kodunu index.html adında bir dosyaya kaydedebilirsiniz:





    
    
    İnteraktif Ürün Arama
    


    

        
Ürün Arama Uygulaması

Bu yapıda dikkat etmeniz gereken bazı önemli noktalar var: meta name="viewport" etiketi, mobil cihazlarda sayfanın doğru ölçeklenmesini sağlar ve mobil uyumluluğun temelidir. searchInput ve categoryFilter gibi ID'ler, JavaScript üzerinden bu elementlere kolayca erişebilmemizi sağlayacak. productList ID'li div ise dinamik olarak ürün kartlarımızı ekleyeceğimiz yer olacak. noResults div'i ise arama sonucu bulunamadığında kullanıcıya bilgi vermek için kullanılacak.

Mobil Uyumlu CSS Stilleri: Tasarımı Her Ekrana Adapte Etmek

Kullanıcıların büyük çoğunluğunun mobil cihazlar üzerinden internete eriştiği günümüzde, web uygulamalarının mobil uyumlu olması elzemdir. CSS kullanarak bu uygulamamıza temel bir görünüm kazandıracak ve flexbox ile media query kullanarak farklı ekran boyutlarına uyum sağlamasını sağlayacağız. style.css adında bir dosya oluşturup aşağıdaki stilleri ekleyebilirsiniz:


/* Temel Sıfırlamalar ve Yazı Tipi */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 25px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    font-size: 2.5em;
}

/* Arama ve Filtre Alanı */
.search-area {
    display: flex;
    gap: 15px; /* Elemanlar arası boşluk */
    margin-bottom: 30px;
    flex-wrap: wrap; /* Küçük ekranlarda alt alta gelmesi için */
    justify-content: center;
}

#searchInput, #categoryFilter {
    padding: 12px 18px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1em;
    flex: 1; /* Esnekliği sayesinde genişlemesini sağlar */
    min-width: 200px; /* Minimum genişlik */
    max-width: 400px;
}

#searchInput:focus, #categoryFilter:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Ürün Listesi */
.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Esnek sütunlar */
    gap: 25px;
}

/* Ürün Kartı Stilleri */
.product-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #e0e0e0;
}

.product-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-info h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #34495e;
    font-size: 1.3em;
}

.product-info p {
    margin-bottom: 5px;
    color: #666;
    font-size: 0.95em;
}

.product-info .category {
    font-weight: bold;
    color: #007bff;
}

.product-info .price {
    font-size: 1.4em;
    font-weight: bold;
    color: #28a745;
    margin-top: auto; /* Fiyatı alta hizalar */
}

/* Sonuç Bulunamadı Mesajı */
.no-results {
    text-align: center;
    color: #777;
    font-size: 1.2em;
    padding: 40px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    margin-top: 30px;
}

/* Mobil Uyumlu Tasarım İçin Media Query */
@media (max-width: 768px) {
    .container {
        padding: 15px;
        margin: 10px auto;
    }

    h1 {
        font-size: 2em;
        margin-bottom: 20px;
    }

    .search-area {
        flex-direction: column; /* Küçük ekranlarda alt alta */
        gap: 10px;
    }

    #searchInput, #categoryFilter {
        max-width: none; /* Tam genişlik kaplaması için */
    }

    .product-list {
        grid-template-columns: 1fr; /* Tek sütunlu düzen */
        gap: 15px;
    }

    .product-card img {
        height: 180px;
    }
}

Bu CSS kodunda display: grid ve repeat(auto-fill, minmax(280px, 1fr)) kullanarak ürün kartlarının ekran genişliğine göre otomatik olarak yerleşmesini sağladık. Ayrıca, @media (max-width: 768px) kuralıyla mobil cihazlar için özel stiller tanımlayarak arama çubuğunu ve kategori filtresini alt alta getirdik ve ürün kartlarını tek sütun halinde gösterdik. Bu sayede uygulamanız farklı cihazlarda sorunsuz bir deneyim sunar.

JavaScript ile Veri Çekme ve İlk Ürün Listeleme

Şimdi sıra JavaScript'e geldi. script.js dosyasında, Mock API'den ürün verilerini çekecek ve bunları HTML sayfamıza dinamik olarak ekleyecek kodu yazacağız. fetch API, modern web tarayıcılarında HTTP istekleri yapmak için kullanılan güçlü ve esnek bir araçtır. async/await sözdizimi, asenkron işlemleri senkron bir kod gibi okunur hale getirir, bu da kodumuzun daha temiz ve anlaşılır olmasını sağlar.


// DOM elementlerini seçiyoruz
const searchInput = document.getElementById('searchInput');
const categoryFilter = document.getElementById('categoryFilter');
const productList = document.getElementById('productList');
const noResultsMessage = document.getElementById('noResults');

let allProducts = []; // Tüm ürünleri saklayacağımız dizi

// Mock API'den ürün verilerini çeken fonksiyon
async function fetchProducts() {
    try {
        // Mock API adresimiz (JSON Server kullanıyorsanız http://localhost:3000/products)
        // Eğer JSON Server kullanmıyorsanız ve sadece db.json dosyasını kullanacaksanız,
        // bir live server eklentisi kullanmanız ve adresi ona göre ayarlamanız gerekebilir.
        const response = await fetch('http://localhost:3000/products'); 
        if (!response.ok) {
            throw new Error(HTTP hata kodu: ${response.status});
        }
        allProducts = await response.json();
        populateCategories(allProducts); // Kategorileri doldur
        displayProducts(allProducts); // Tüm ürünleri başta göster
    } catch (error) {
        console.error("Ürünler çekilirken bir hata oluştu:", error);
        productList.innerHTML = 
Ürünler yüklenirken bir sorun oluştu. Lütfen daha sonra tekrar deneyin.
;
    }
}

// Ürünleri DOM'a listeleyen fonksiyon
function displayProducts(productsToDisplay) {
    productList.innerHTML = ''; // Önceki ürünleri temizle

    if (productsToDisplay.length === 0) {
        noResultsMessage.style.display = 'block'; // Sonuç yoksa mesajı göster
        return;
    } else {
        noResultsMessage.style.display = 'none'; // Sonuç varsa mesajı gizle
    }

    productsToDisplay.forEach(product => {
        const productCard = document.createElement('div');
        productCard.classList.add('product-card');
        productCard.innerHTML = ${product.name}
            

                
${product.name}

                
Kategori: ${product.category}

                
${product.description.substring(0, 70)}...

                
${product.price} TL

            
;
        productList.appendChild(productCard);
    });
}

// Kategori filtresini dolduran fonksiyon
function populateCategories(products) {
    const categories = [...new Set(products.map(product => product.category))]; // Tekrar edenleri kaldır
    categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category;
        option.textContent = category;
        categoryFilter.appendChild(option);
    });
}

// Uygulama yüklendiğinde ürünleri çek
document.addEventListener('DOMContentLoaded', fetchProducts);

Bu kod bloğu, sayfa yüklendiğinde fetchProducts fonksiyonunu çağırarak Mock API'den verileri çeker. Ardından, displayProducts fonksiyonu çekilen ürünleri alır ve her bir ürün için bir HTML kartı oluşturarak productList div'ine ekler. populateCategories fonksiyonu ise ürünlerden benzersiz kategorileri alarak kategori filtresini dinamik olarak doldurur. noResultsMessage div'ini de kullanarak arama sonucu bulunamadığında kullanıcıya bilgi verdik. Böylece, uygulamamızın temel veri çekme ve listeleme işlevselliğini tamamlamış olduk.

Uzman İpucu: Ürün resimlerinin yüklenmesi performans sorunlarına yol açabilir. Bu durumu önlemek için, CSS'de img { display: block; max-width: 100%; height: auto; } gibi temel responsive kurallarını uygulamanın yanı sıra, JavaScript tarafında resimler için "lazy loading" (tembel yükleme) tekniğini düşünebilirsiniz. Bu, sadece kullanıcının görüş alanına giren resimlerin yüklenmesini sağlayarak ilk yükleme süresini optimize eder. HTML img etiketine loading="lazy" özelliğini eklemek çoğu modern tarayıcıda bu özelliği otomatik olarak etkinleştirir.

Dinamik Arama ve Filtreleme Fonksiyonları: Kullanıcı Deneyimini Nasıl Zenginleştiririz?

Uygulamamızın temel yapısı hazır ve ürünler listeleniyor. Şimdi sıra, kullanıcıların tam olarak aradıklarını bulmalarını sağlayacak dinamik arama ve filtreleme işlevselliğini eklemeye geldi. Bu özellikler, uygulamanın interaktifliğini ve kullanılabilirliğini önemli ölçüde artıracak, böylece kullanıcılar için çok daha tatmin edici bir deneyim sunacaktır.

Arama Çubuğu Entegrasyonu: Anında Sonuçlar İçin input Eventi

Arama çubuğuna yazılan her karakterde ürün listesinin güncellenmesi, modern web uygulamalarında standart bir beklentidir. Bu dinamikliği sağlamak için JavaScript'teki input olay dinleyicisini kullanacağız. input eventi, bir veya

Aşağıdaki içerikler de ilgilinizi çekebilir:

E-posta Bülteni
Yazılım Topluluğuna Katılın
En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim.