🎬 Film / Dizi Arama Uygulaması

“API ile Film Aradım, 404 Duygusal Hata Aldım”

Bir film aramak istedim…
API dedi ki: “Beni yanlış anladın.” 😅

JavaScript öğrenirken bir noktada şunu fark ediyorsun:
👉 Statik veri sıkıcı.
👉 Gerçek veri = gerçek dünya.

İşte bu proje tam burada devreye giriyor:
Kullanıcı film adını yazıyor → API’dan gerçek film verisi geliyor.
Eğer gelmezse?
💔 404 duygusal hasar.

🎯 Projenin Amacı Ne?

Bu projede şunları yapıyoruz:

• Kullanıcıdan film adı alıyoruz
• Bir API’ye istek atıyoruz
• Gelen veriyi ekrana yazdırıyoruz
• Film yoksa → üzülüyoruz ama kontrollü 😄

Kısaca:

Frontend + API + JavaScript aklı

🧠 Bu Projede Neler Öğreneceğiz?

✔ fetch() nedir, ne yer ne içer
✔ API ile nasıl konuşulur
✔ async / await ile kafayı bozmadan asenkron yazmak
✔ Hata yakalama (try / catch)
✔ “Bir şey ters giderse kullanıcıya ne göstereceğiz?” sorusu

🎥 Kullanacağımız API (Örnek)

Genelde bu projede OMDb API kullanılır.

🎬 OMDb API → Film & dizi bilgileri
(Title, year, poster, imdb puanı vs.)

📌 Mantık önemli, API değişebilir.
Bugün OMDb, yarın başka API.
Öğrendiğin şey baki.

🖥️ Basit HTML Yapısı (Sahne Kuruluyor)

<input type="text" id="searchInput" placeholder="Film adı yaz..." />
<button id="searchBtn">Ara</button>

<div id="result"></div>

🧠 Burada ne var?

• Kullanıcı yazı yazacak
• Butona basacak
• Sonuçlar result div’ine düşecek

🚀 JavaScript Zamanı (Aksiyon Başlıyor)

1️⃣ Butona Tıklamayı Yakalayalım

const button = document.getElementById("searchBtn");

button.addEventListener("click", searchMovie);

🧠 Ne oluyor?

• Butona tıklanınca searchMovie fonksiyonu çalışacak
• Kullanıcı: “Ara”
• JS: “Tamam, ben bakıyorum.”

2️⃣ Asıl Fonksiyon: searchMovie

async function searchMovie() {
  const movieName = document.getElementById("searchInput").value;
  const resultDiv = document.getElementById("result");

  if (!movieName) {
    resultDiv.innerHTML = "Bir film adı yaz lütfen 🎬";
    return;
  }

  try {
    const response = await fetch(
      `https://www.omdbapi.com/?t=${movieName}&apikey=API_KEY`
    );

    const data = await response.json();

    if (data.Response === "False") {
      resultDiv.innerHTML = "Film bulunamadı 😢";
      return;
    }

    resultDiv.innerHTML = `
      <h2>${data.Title}</h2>
      <p>Yıl: ${data.Year}</p>
      <p>IMDb: ${data.imdbRating}</p>
      <img src="${data.Poster}" alt="${data.Title}" />
    `;
  } catch (error) {
    resultDiv.innerHTML = "Bir şeyler ters gitti… 😵";
    console.error(error);
  }
}

🧠 Kodun Mantığını Parça Parça Açalım

🔹 async / await neden var?

Çünkü:

• API’dan veri hemen gelmez
• JavaScript beklerken donmasın isteriz

👉 await =

“Dur, veri gelsin… sonra devam et.”

🔹 try / catch neden önemli?

Çünkü:

• İnternet gidebilir
• API çöker
• Kullanıcı “aaaa” diye kalmasın

catch (error) {
  console.log("Hayat bazen zor...");
}

😄 Gerçek hayat simülasyonu.

🔹 data.Response === "False" olayı

Bazı API’lar:

• HTTP olarak başarılı döner
• Ama içerik olarak “bulamadım” der

⚠️ Bu yüzden sadece fetch yetmez,
gelen datayı da kontrol etmelisin.

⚠️ En Sık Yapılan Hatalar

🚫 API key’i yanlış yazmak
🚫 await unutmak
🚫 response.json() dememek
🚫 Hata mesajı göstermemek
🚫 Kullanıcı boş input girince kontrol etmemek

💡 Küçük Ama Altın İpuçları

✨ Loading mesajı ekle (“Aranıyor… 🎬”)
✨ Enter tuşu ile arama yap
✨ Film bulunamazsa komik mesaj göster
✨ IMDb puanına göre renk ver
✨ Favorilere ekleme özelliği ekle

🎬 Final Sahnesi

Bu proje sana şunları kazandırır:

✅ Gerçek API deneyimi
✅ Asenkron JavaScript mantığı
✅ Hata yönetimi alışkanlığı
✅ “Ben JS ile gerçek şeyler yapıyorum” hissi 😎

Bir geliştirici, API’dan veri çekebiliyorsa…
artık yalnız değildir.