அடிப்படை 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-பாணி கூறு -->
<div class="ProductCard-root-1a2b3c">
  <div class="ProductCard-title-4d5e6f">பிங்க் நடைபயிற்சி காலணிகள்</div>
  <div class="ProductCard-pricing-7g8h9i">$84.99</div>
</div>

<!-- Vue-பாணி வார்ப்புரு -->
<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 திறன்களுடன் இணைக்க தயாரா? கெட்டித்தனமான HTML உடன் கூட AI எவ்வாறு சமாளிக்க முடியும் என்பதைக் கண்டுபிடிப்போம்!

குறிப்புகள்

வெவ்வேறு CSS தேர்வாளர்களுடன் பரிசோதனை செய்யுங்கள்:

// கூறுகளைத் தேர்ந்தெடுக்கும் வெவ்வேறு வழிகள்
$('.class')           // வர்க்கம் மூலம்
$('#id')             // ID மூலம்
$('div > p')         // நேரடி குழந்தைகள்
$('div p')           // அனைத்து வழித்தோன்றல்கள்
$('[data-type="x"]') // பண்புக்கூறு மூலம்

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

தொடங்குவதற்குத் தேவையான அனைத்து குறியீடும் திட்ட களஞ்சியத்தில் உள்ளது. இதை குளோன் செய்து, உங்கள் சூழலை அமைத்து, ஸ்கிராப்பிங் தொடங்குங்கள்!

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

மகிழ்ச்சியான ஸ்கிராப்பிங்!