بنیادی 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 صلاحیات کے ساتھ ملانے کے لیے تیار ہیں؟ آئیے دیکھتے ہیں کہ 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;
  }
}

خوش اسکریپنگ!