बेसिक HTML स्क्रैपिंग: पहले कदम

वेब स्क्रैपिंग पहली बार में डरावनी लग सकती है, लेकिन किसी भी कौशल की तरह, इसे व्यावहारिक अभ्यास के माध्यम से सीखना सबसे अच्छा है। इन पहले तीन अध्यायों में, हम स्टेटिक HTML पेजों से डेटा निकालने की बुनियादी बातों का पता लगाएंगे।

अध्याय 1: HTML स्क्रैपर चाड

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

• वेब पेजों को प्राप्त करने के लिए HTTP अनुरोध करना
• HTML सामग्री को पार्सर में लोड करना
• CSS सेलेक्टरों का उपयोग करके बेसिक DOM चयन

जबकि उदाहरण तुच्छ लग सकता है (यह सिर्फ एक "हैलो वर्ल्ड" है!), यह उन सभी चीजों की नींव स्थापित करता है जो इसके बाद आती हैं।

<!-- उदाहरण HTML संरचना -->
<div class="content">
  <p>कुछ टेक्स्ट जिसे हम निकालना चाहते हैं</p>
</div>

यहां उस चीज़ का स्वाद है जिसके साथ हम काम कर रहे हैं:

// बुनियादी अवधारणाएं (समाधान नहीं!)
import * as cheerio from 'cheerio';

// HTML सामग्री लोड करना
const $ = cheerio.load(htmlContent);

// CSS सेलेक्टरों का उपयोग
const text = $('p').text();  // सभी <p> टैग का चयन करता है
const specific = $('.content p').text();  // अधिक विशिष्ट चयन

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

जैसे ही हम मॉक ई-कॉमर्स उत्पाद पेज में गोता लगाते हैं, चीजें अधिक दिलचस्प हो जाती हैं। यहां, हम समान संरचनाओं वाले कई तत्वों का सामना करते हैं:

<!-- उदाहरण उत्पाद संरचना (सरलीकृत) -->
<div class="product">
  <h2>उत्पाद का नाम</h2>
  <span class="price">$99.99</span>
  <div class="specs">
    <ul>
      <li>साइज़: M</li>
      <li>रंग: नीला</li>
    </ul>
  </div>
</div>

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

// वैचारिक दृष्टिकोण (समाधान नहीं!)
$('.product').each((index, element) => {
  // हर उत्पाद के लिए, हम चाह सकते हैं:
  // 1. बुनियादी जानकारी निकालना
  const name = $(element).find('h2').text();

  // 2. नेस्टेड डेटा को पार्स करना
  const specs = $(element).find('.specs li');

  // 3. आउटपुट को संरचित करना
  const data = {
    name,
    specs: specs.map(/* ... */),
  };
});

प्रो टिप: कोई भी कोड लिखने से पहले, HTML संरचना का विश्लेषण करने के लिए समय निकालें। डेटा कैसे व्यवस्थित है, इसमें पैटर्न की तलाश करें - क्या लगातार क्लास नाम हैं? पैरेंट और चाइल्ड एलिमेंट्स कैसे संबंधित हैं?

अध्याय 3: AI-सहायता प्राप्त स्क्रैपिंग

अब चीजें दिलचस्प हो जाती हैं! जबकि पिछली चुनौतियों ने हमें पारंपरिक स्क्रैपिंग तकनीकें सिखाईं, अध्याय 3 एक आधुनिक दृष्टिकोण प्रस्तुत करता है: AI-सहायता प्राप्त वेब स्क्रैपिंग। हम एक दुःस्वप्न परिदृश्य का सामना करते हैं - असंगत HTML संरचनाएं, अस्पष्ट क्लास नाम, और कई फ्रेमवर्क पैटर्न सभी एक साथ मिले हुए।

आइए देखते हैं कि इस चुनौती को क्या विशेष बनाता है:

<!-- पारंपरिक उत्पाद संरचना -->
<div data-testid="product-container-1" class="_3xj_item">
  <h2 data-qa="name">लाल स्नीकर</h2>
  <span data-price-current="5999">$59.99</span>
</div>

<!-- React-style कंपोनेंट -->
<div class="ProductCard-root-1a2b3c">
  <div class="ProductCard-title-4d5e6f">गुलाबी वॉकिंग शूज़</div>
  <div class="ProductCard-pricing-7g8h9i">$84.99</div>
</div>

<!-- Vue-style टेम्प्लेट -->
<div data-v-abcdef class="product">
  <h2 data-v-abcdef>नेवी बोट शूज़</h2>
  <span data-v-abcdef>$79.99</span>
</div>

पारंपरिक स्क्रैपिंग दृष्टिकोण यहां संघर्ष करते हैं क्योंकि:

• क्लास नाम यादृच्छिक या फ्रेमवर्क-विशिष्ट हैं
• उत्पादों के बीच डेटा संरचनाएं भिन्न होती हैं
• विभिन्न फ्रेमवर्क अलग-अलग पैटर्न का उपयोग करते हैं
• मार्कअप में सिमेंटिक अर्थ खो जाता है

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

• वेब स्क्रैपिंग के लिए प्रॉम्प्ट इंजीनियरिंग
• सिमेंटिक अर्थ समझने के लिए AI का उपयोग
• असंगत डेटा संरचनाओं को संभालना
• फ्रेमवर्क-विशिष्ट मार्कअप से निपटना
• विभिन्न पैटर्न में डेटा स्थिरता बनाए रखना

जबकि AI जादू नहीं है, यह पैटर्न पहचान और अनुकूलन की आवश्यकता वाले कार्यों में उत्कृष्ट है। यह इसे आधुनिक वेब एप्लिकेशन को स्क्रैप करने के लिए विशेष रूप से मूल्यवान बनाता है जहां सुसंगत मार्कअप पैटर्न की गारंटी नहीं दी जा सकती।

AI उपयोग पर एक नोट

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

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

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

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

संकेत

1. विभिन्न CSS सेलेक्टरों के साथ प्रयोग करें:

// तत्वों का चयन करने के अलग तरीके
$('.class')           // क्लास द्वारा
$('#id')             // ID द्वारा
$('div > p')         // प्रत्यक्ष बच्चे
$('div p')           // सभी वंशज
$('[data-type="x"]') // विशेषता द्वारा

2. आउटपुट फॉर्मेट को संशोधित करने की कोशिश करें
3. त्रुटि हैंडलिंग और किनारे के मामलों के बारे में सोचें
4. विचार करें कि आपका समाधान बड़े डेटासेट के साथ कैसे स्केल हो सकता है

शुरुआत करने के लिए आवश्यक सभी कोड प्रोजेक्ट रिपॉजिटरी में है। इसे क्लोन करें, अपना वातावरण सेट करें, और स्क्रैपिंग शुरू करें!

git clone https://github.com/jonaylor89/housefly.git
cd hosuefly

संकेतों की तलाश कर रहे हैं? प्रत्येक चुनौती के लिए स्रोत HTML apps/chapter{n}/ निर्देशिका में उपलब्ध है। और काम करने वाले हल किए गए उदाहरण भी _solved/chapter{n}/ में उपलब्ध हैं। संरचना का अध्ययन करें, अपने दृष्टिकोण की योजना बनाएं, और याद रखें - हर विशेषज्ञ कभी एक शुरुआती था।

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

// बुनियादी त्रुटि हैंडलिंग उदाहरण
async function fetchPage(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP त्रुटि! स्थिति: ${response.status}`);
    }
    return await response.text();
  } catch (error) {
    console.error('पेज प्राप्त करने में विफल:', error);
    throw error;
  }
}

खुश स्क्रैपिंग!