बुनियादी HTML Scraping: पहले कदम

शुरुआत में web scraping डराने वाला लग सकता है, लेकिन किसी भी कौशल की तरह इसे सीखने का सबसे अच्छा तरीका व्यावहारिक अभ्यास है। इन पहले तीन अध्यायों में, हम स्थिर HTML पृष्ठों से डेटा निकालने की बुनियादी बातों को समझेंगे।

अध्याय 1: The HTML Scraper Chad

हमारी यात्रा सबसे सरल संभव स्थिति से शुरू होती है - एक साधारण HTML पृष्ठ से पाठ निकालना। यह अध्याय आपको इन मुख्य अवधारणाओं से परिचित कराता है:

वेब पृष्ठ प्राप्त करने के लिए HTTP requests करना
HTML सामग्री को parser में लोड करना
CSS selectors का उपयोग करके बुनियादी DOM चयन

हालाँकि उदाहरण तुच्छ लग सकता है (आख़िरकार यह सिर्फ़ एक “hello world” है!), फिर भी यही आगे आने वाली हर चीज़ की नींव बनाता है।

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

यहाँ उसका एक छोटा-सा नमूना है, जिस पर हम काम कर रहे हैं:

// 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

अध्याय 2: संरचित डेटा

जैसे ही हम एक mock e-commerce product page में गहराई से उतरते हैं, चीज़ें और दिलचस्प हो जाती हैं। यहाँ हमें समान संरचना वाले कई elements का सामना करना पड़ता है:

<!-- 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>

ऐसे संरचित डेटा के साथ काम करते समय, आपको इन बातों पर सोचना चाहिए:

// 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(/* ... */),
  };
});

प्रो टिप: कोई भी code लिखने से पहले, HTML संरचना का विश्लेषण करने के लिए समय निकालें। देखें कि डेटा किस तरह व्यवस्थित है - क्या class names एक जैसे और लगातार उपयोग में हैं? parent और child elements के बीच संबंध कैसे बने हुए हैं?

अध्याय 3: AI-सहायित Scraping

अब बात सच में रोचक हो जाती है! जहाँ पिछले challenges ने हमें पारंपरिक scraping तकनीकें सिखाईं, वहीं अध्याय 3 एक आधुनिक तरीका प्रस्तुत करता है: AI-सहायित web scraping। यहाँ हम एक डरावनी स्थिति का सामना कर रहे हैं - असंगत HTML संरचनाएँ, छिपे हुए class names, और कई frameworks के patterns, सब कुछ एक साथ मिला हुआ।

आइए देखें कि यह challenge खास क्यों है:

<!-- 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>

यहाँ पारंपरिक scraping तरीके संघर्ष करेंगे क्योंकि:

Class names यादृच्छिक हैं या framework-specific हैं
अलग-अलग products के बीच डेटा संरचनाएँ बदलती हैं
अलग-अलग frameworks अलग-अलग patterns का उपयोग करते हैं
markup में semantic meaning खो जाता है

यहीं पर AI मदद के लिए आता है। नाज़ुक selectors लिखने की बजाय, हम साधारण भाषा में बता सकते हैं कि हमें क्या चाहिए और pattern matching का काम AI पर छोड़ सकते हैं। इस अध्याय की मुख्य अवधारणाओं में शामिल हैं:

web scraping के लिए prompt engineering
semantic meaning समझने के लिए AI का उपयोग
असंगत डेटा संरचनाओं को संभालना
framework-specific markup से निपटना
अलग-अलग patterns में डेटा की एकरूपता बनाए रखना

हालाँकि AI कोई जादू नहीं है, लेकिन यह pattern recognition और अनुकूलन की ज़रूरत वाले कामों में बहुत अच्छा है। यही कारण है कि आधुनिक web applications की scraping में यह खास तौर पर उपयोगी बन जाता है, जहाँ एकसमान markup patterns की गारंटी नहीं दी जा सकती।

AI उपयोग पर एक टिप्पणी

याद रखें कि AI सहायता का मतलब पूरी तरह स्वचालित समाधान नहीं होता। सबसे अच्छे परिणाम इन चीज़ों के संयोजन से मिलते हैं:

समस्या की स्पष्ट परिभाषा
अच्छी तरह संरचित prompts
डेटा सत्यापन
मानवीय निगरानी

आपकी चुनौती ऐसे prompts तैयार करना होगी जो AI को उस चीज़ की संरचना और आशय, दोनों समझने में मदद करें जिसे आप निकालना चाहते हैं।

क्या आप पारंपरिक web scraping ज्ञान को आधुनिक AI क्षमताओं के साथ जोड़ने के लिए तैयार हैं? आइए समझें कि AI सबसे उलझे हुए HTML से निपटने में भी कैसे मदद कर सकता है!

संकेत

अलग-अलग CSS selectors के साथ प्रयोग करें:

// Different ways to select elements
$('.class')           // By class
$('#id')             // By ID
$('div > p')         // Direct children
$('div p')           // All descendants
$('[data-type="x"]') // By attribute

आउटपुट प्रारूप में बदलाव करके देखें
त्रुटि प्रबंधन और edge cases के बारे में सोचें
विचार करें कि बड़े datasets के साथ आपका समाधान कैसे scale करेगा

शुरू करने के लिए आपको जितना भी code चाहिए, वह सब project repository में है। उसे clone करें, अपना environment set up करें, और scraping शुरू करें!

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

अध्याय servers को local रूप से शुरू करें — हर अध्याय अपने अलग port (3001–3011) पर चलता है:

turbo dev

फिर exercises/chapter-NN/starter/src/index.ts में अपना scraper संपादित करें और उसे validate करें:

npm run validate -- <chapter>

संकेत चाहिए? क्रमिक मार्गदर्शन के लिए npm run hint -- <chapter> चलाएँ। हर challenge का source HTML apps/chapter{n}/ directory में उपलब्ध है, और reference solutions exercises/chapter-NN/solution/src/ में हैं। संरचना का अध्ययन करें, अपना तरीका योजनाबद्ध करें, और याद रखें - हर विशेषज्ञ कभी शुरुआती था।

याद रखें कि अपने requests को ज़िम्मेदारी से संभालें:

// 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;
  }
}

शुभ scraping!