அடிப்படை HTML Scraping: முதல் படிகள்

Web scraping முதலில் பார்க்கும்போது கொஞ்சம் அச்சமூட்டுவதாக தோன்றலாம். ஆனால் எந்தத் திறனாக இருந்தாலும், அதை செய்முறையாகப் பயிற்சி செய்து கற்றுக்கொள்வதே சிறந்த வழி. இந்த முதல் மூன்று அதிகாரங்களில், நிலையான HTML பக்கங்களில் இருந்து தரவைப் பிரித்தெடுக்கும் அடிப்படைகளை நாம் ஆராயப்போகிறோம்.

அதிகாரம் 1: HTML Scraper Chad

எங்கள் பயணம் மிக எளிய சூழலிலிருந்தே தொடங்குகிறது - ஒரு அடிப்படை HTML பக்கத்திலிருந்து உரையைப் பிரித்தெடுப்பது. இந்த அதிகாரம் பின்வரும் மையக் கருத்துகளை உங்களுக்கு அறிமுகப்படுத்தும்:

web pages-ஐ பெற 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: ஒழுங்கமைந்த தரவு

ஒரு மாதிரி e-commerce product page-ஐ நாம் அணுகும் போது விஷயங்கள் இன்னும் சுவாரஸ்யமாகின்றன. இங்கு, ஒரே மாதிரியான அமைப்பைக் கொண்ட பல கூறுகளை நாம் சந்திக்கிறோம்:

<!-- 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 கூறுகள் ஒன்றுடன் ஒன்று எப்படித் தொடர்புபட்டுள்ளன?

அதிகாரம் 3: AI-உதவியுடன் Scraping

இப்போது தான் விஷயம் சுவாரஸ்யமாகிறது! முந்தைய சவால்கள் பாரம்பரிய scraping நுட்பங்களை கற்றுத்தந்திருந்தாலும், அதிகாரம் 3 ஒரு நவீன அணுகுமுறையை அறிமுகப்படுத்துகிறது: AI-உதவியுடன் web scraping. இங்கு நாம் எதிர்கொள்வது ஒரு கெட்ட கனவு போன்ற சூழல் - ஒருமைப்பாடற்ற HTML அமைப்புகள், மறைக்கப்பட்ட class names, மற்றும் பல framework patterns எல்லாம் ஒன்றாக கலந்துள்ளன.

இந்தச் சவாலை சிறப்பாக்குவது என்ன என்பதைப் பார்ப்போம்:

<!-- 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 ஆகவோ உள்ளன
தரவு அமைப்புகள் product-க்களுக்கு இடையே மாறுபடுகின்றன
வேறு framework-கள் வேறு patterns-ஐ பயன்படுத்துகின்றன
markup-இல் semantic அர்த்தம் தொலைந்து போகிறது

அங்குதான் AI உதவிக்குத் வருகிறது. எளிதில் உடையும் selectors எழுதுவதற்குப் பதிலாக, நமக்கு என்ன வேண்டும் என்பதை இயல்பான மொழியில் விவரிக்கலாம்; pattern matching-ஐ AI கையாளட்டும். இந்த அதிகாரத்தின் முக்கியக் கருத்துகள்:

web scraping-க்கான prompt engineering
semantic அர்த்தத்தைப் புரிந்து கொள்ள AI-ஐ பயன்படுத்துதல்
ஒருமைப்பாடற்ற தரவு அமைப்புகளை கையாளுதல்
framework-specific markup-ஐ சமாளித்தல்
வெவ்வேறு patterns-இடையே தரவு ஒருமைப்பாட்டை பராமரித்தல்

AI மந்திரம் அல்ல என்றாலும், pattern recognition மற்றும் தழுவிக் கொள்ளும் திறன் தேவைப்படும் பணிகளில் அது மிகவும் சிறப்பாக செயல்படும். அதனால், ஒரே மாதிரியான markup patterns இருக்கும் என்று உறுதி செய்ய முடியாத நவீன web applications-ஐ scrape செய்வதில் இது குறிப்பாக மதிப்புமிக்கதாகிறது.

AI பயன்பாட்டைப் பற்றிய ஒரு குறிப்பு

AI உதவி உள்ளது என்பதனால் தீர்வுகள் முழுவதும் தானியக்கமாகிவிடும் என்று அர்த்தமில்லை என்பதை நினைவில் கொள்ளுங்கள். சிறந்த முடிவுகள் பின்வருவன இணைந்தால் தான் கிடைக்கும்:

தெளிவான பிரச்சினை வரையறை
நன்றாக அமைக்கப்பட்ட prompts
தரவு சரிபார்ப்பு
மனித மேற்பார்வை

நீங்கள் பிரித்தெடுக்க முயற்சிப்பதன் அமைப்பையும் நோக்கத்தையும் AI புரிந்து கொள்ள உதவும் prompts உருவாக்குவதே உங்கள் சவாலாக இருக்கும்.

பாரம்பரிய web scraping அறிவையும் நவீன AI திறன்களையும் இணைக்கத் தயாரா? மிகவும் குழப்பமான HTML-ஐ கூட AI எப்படி சமாளிக்க உதவுகிறது என்பதைப் பார்ப்போம்!

குறிப்புகள்

வெவ்வேறு 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

வெளிப்பாட்டு வடிவத்தை மாற்றிப் பார்க்கவும்
பிழை கையாளுதல் மற்றும் விளிம்பு நிலைகள் குறித்து சிந்திக்கவும்
பெரிய datasets-உடன் உங்கள் தீர்வு எப்படிப் பரவலாகப் பயன்படும் என்பதை கருத்தில் கொள்ளவும்

தொடங்குவதற்கு தேவையான எல்லா code-மும் project repository-இல் உள்ளது. அதை clone செய்து, உங்கள் environment-ஐ அமைத்து, scraping-ஐ தொடங்குங்கள்!

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

அதிகார server-களை உள்ளூராகத் தொடங்குங்கள் — ஒவ்வொரு அதிகாரமும் தனித்த port-இல் (3001–3011) இயங்கும்:

turbo dev

பிறகு exercises/chapter-NN/starter/src/index.ts-இல் உங்கள் scraper-ஐத் திருத்தி, அதை validate செய்யுங்கள்:

npm run validate -- <chapter>

குறிப்புகள் வேண்டுமா? படிப்படியான வழிகாட்டலுக்காக npm run hint -- <chapter>-ஐ இயக்குங்கள். ஒவ்வொரு சவாலுக்கும் source HTML, apps/chapter{n}/ அடைவில் கிடைக்கும்; 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!