Temel HTML Scraping: İlk Adımlar

23 Şub 2025

Web scraping ilk bakışta göz korkutucu görünebilir, ancak her beceride olduğu gibi bunu öğrenmenin en iyi yolu uygulamalı pratik yapmaktır. Bu ilk üç bölümde, statik HTML sayfalarından veri çıkarmanın temellerini keşfedeceğiz.

Bölüm 1: HTML Scraper Chad

Yolculuğumuz mümkün olan en basit senaryoyla başlıyor - temel bir HTML sayfasından metin çıkarmak. Bu bölüm sizi şu temel kavramlarla tanıştırır:

  • Web sayfalarını almak için HTTP istekleri gönderme
  • HTML içeriğini bir parser içine yükleme
  • CSS selectors kullanarak temel DOM seçimi

Örnek önemsiz görünebilir (sonuçta sadece bir “hello world”!), ancak bundan sonra gelecek her şeyin temelini oluşturur.

<!-- Example HTML structure -->
<div class="content">
  <p>Some text we want to extract</p>
</div>

İşte üzerinde çalışacağımız şeyden küçük bir örnek:

// Basic concepts (not the solution!)
import * as cheerio from 'cheerio';

// Loading HTML content
const $ = cheerio.load(htmlContent);

// Using CSS selectors
const text = $('p').text();  // Selects all <p> tags
const specific = $('.content p').text();  // More specific selection

Bölüm 2: Yapılandırılmış Veri

Sahte bir e-ticaret ürün sayfasına geçtiğimizde işler daha da ilginç hale geliyor. Burada benzer yapılara sahip birden çok öğeyle karşı karşıyayız:

<!-- Example product structure (simplified) -->
<div class="product">
  <h2>Product Name</h2>
  <span class="price">$99.99</span>
  <div class="specs">
    <ul>
      <li>Size: M</li>
      <li>Color: Blue</li>
    </ul>
  </div>
</div>

Bunun gibi yapılandırılmış verilerle çalışırken şunları düşünmek isteyeceksiniz:

// Conceptual approach (not the solution!)
$('.product').each((index, element) => {
  // For each product, we might want to:
  // 1. Extract the basic info
  const name = $(element).find('h2').text();

  // 2. Parse nested data
  const specs = $(element).find('.specs li');

  // 3. Structure the output
  const data = {
    name,
    specs: specs.map(/* ... */),
  };
});

Profesyonel ipucu: Herhangi bir kod yazmadan önce HTML yapısını analiz etmeye zaman ayırın. Verinin nasıl organize edildiğindeki kalıplara bakın - tutarlı class isimleri var mı? Parent ve child öğeler birbiriyle nasıl ilişkili?

Bölüm 3: AI Destekli Scraping

Şimdi işler ilginçleşiyor! Önceki alıştırmalar bize geleneksel scraping tekniklerini öğretmiş olsa da, Bölüm 3 modern bir yaklaşımı tanıtıyor: AI destekli web scraping. Bir kâbus senaryosuyla karşı karşıyayız - tutarsız HTML yapıları, gizlenmiş class isimleri ve birbirine karışmış birden fazla framework deseni.

Bu alıştırmayı özel kılan şeye bakalım:

<!-- Traditional product structure -->
<div data-testid="product-container-1" class="_3xj_item">
  <h2 data-qa="name">Red Sneakers</h2>
  <span data-price-current="5999">$59.99</span>
</div>

<!-- React-style component -->
<div class="ProductCard-root-1a2b3c">
  <div class="ProductCard-title-4d5e6f">Pink Walking Shoes</div>
  <div class="ProductCard-pricing-7g8h9i">$84.99</div>
</div>

<!-- Vue-style template -->
<div data-v-abcdef class="product">
  <h2 data-v-abcdef>Navy Boat Shoes</h2>
  <span data-v-abcdef>$79.99</span>
</div>

Geleneksel scraping yaklaşımları burada zorlanırdı çünkü:

  • Class isimleri rastgeleleştirilmiş veya framework’e özeldir
  • Veri yapıları ürünler arasında değişir
  • Farklı framework’ler farklı desenler kullanır
  • Anlamsal anlam markup içinde kaybolur

İşte burada AI imdada yetişiyor. Kırılgan selector’lar yazmak yerine, ne istediğimizi doğal dille tarif edebilir ve pattern matching işini AI’a bırakabiliriz. Bu bölümdeki temel kavramlar şunlardır:

  • Web scraping için prompt engineering
  • Anlamsal anlamı kavramak için AI kullanımı
  • Tutarsız veri yapılarını ele alma
  • Framework’e özgü markup ile çalışma
  • Farklı desenler arasında veri tutarlılığını koruma

AI sihirli değildir, ancak pattern recognition ve uyum gerektiren görevlerde çok başarılıdır. Bu da onu, tutarlı markup desenlerinin garanti edilemediği modern web uygulamalarını scrape etmek için özellikle değerli kılar.

AI Kullanımı Hakkında Bir Not

AI desteğinin tamamen otomatik çözümler anlamına gelmediğini unutmayın. En iyi sonuçlar şu unsurların birleşiminden gelir:

  • Net problem tanımı
  • İyi yapılandırılmış prompt’lar
  • Veri doğrulama
  • İnsan denetimi

Sizin göreviniz, AI’ın hem yapıyı hem de çıkarmaya çalıştığınız şeyin amacını anlamasına yardımcı olacak prompt’lar oluşturmaktır.

Geleneksel web scraping bilgisini modern AI yetenekleriyle birleştirmeye hazır mısınız? En dağınık HTML’lerle bile başa çıkmada AI’ın nasıl yardımcı olabileceğini birlikte keşfedelim!

İpuçları

  1. Farklı CSS selectors ile denemeler yapın:
// Different ways to select elements
$('.class')           // By class
$('#id')             // By ID
$('div > p')         // Direct children
$('div p')           // All descendants
$('[data-type="x"]') // By attribute
  1. Çıktı formatını değiştirmeyi deneyin
  2. Hata yönetimi ve edge case’ler hakkında düşünün
  3. Çözümünüzün daha büyük veri kümeleriyle nasıl ölçeklenebileceğini değerlendirin

Başlamak için ihtiyacınız olan tüm kodlar proje reposunda bulunuyor. Onu clone edin, ortamınızı kurun ve scraping yapmaya başlayın!

git clone https://github.com/jonaylor89/housefly.git
cd housefly
npm install

Bölüm sunucularını yerelde başlatın — her bölüm kendi portunda çalışır (3001–3011):

turbo dev

Ardından scraper’ınızı exercises/chapter-NN/starter/src/index.ts içinde düzenleyin ve doğrulayın:

npm run validate -- <chapter>

İpucu mu arıyorsunuz? Aşamalı yönlendirme için npm run hint -- <chapter> komutunu çalıştırın. Her alıştırmanın kaynak HTML’i apps/chapter{n}/ dizininde, referans çözümler ise exercises/chapter-NN/solution/src/ içinde bulunur. Yapıyı inceleyin, yaklaşımınızı planlayın ve unutmayın - her uzman bir zamanlar acemiydi.

İsteklerinizi sorumlu bir şekilde ele almayı unutmayın:

// Basic error handling example
async function fetchPage(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.text();
  } catch (error) {
    console.error('Failed to fetch page:', error);
    throw error;
  }
}

İyi scraping’ler!