جاوا اسکرپٹ سے رینڈر کیا گیا مواد

جدید ویب ایپلیکیشنز شاذ و نادر ہی مکمل HTML فراہم کرتی ہیں - اس کے بجائے، مواد کو متحرک طور پر لوڈ کیا جاتا ہے اور جاوا اسکرپٹ کے ذریعے رینڈر کیا جاتا ہے۔ یہ ویب اسکریپنگ کے لیے منفرد چیلنجز پیش کرتا ہے جن سے ہم ان دو ابواب میں نمٹیں گے۔

باب 4: متحرک نیوز فیڈ

ہمارا پہلا چیلنج ایک نیوز فیڈ کو اسکریپ کرنا شامل ہے جہاں مضامین جاوا اسکرپٹ کے ذریعے متحرک طور پر لوڈ ہوتے ہیں۔ یہ کئی اہم تصورات متعارف کراتا ہے:

• Playwright کے ساتھ برائوزر آٹومیشن
• متحرک مواد لوڈ ہونے کا انتظار
• جاوا اسکرپٹ سے رینڈر شدہ DOM عناصر کا سنبھالنا

صفحے کا ڈھانچہ کچھ اس طرح نظر آتا ہے:

<div class="news-feed">
  <article class="news-item">
    <h2>بریکنگ نیوز ٹائٹل</h2>
    <p>مضمون کا مواد...</p>
    <div class="meta">
      <span>مصنف: مصنف کا نام</span>
      <time datetime="2024-03-08T12:00:00Z">8 مارچ 2024</time>
    </div>
  </article>
  <!-- زیادہ مضامین متحرک طور پر لوڈ ہوتے ہیں -->
</div>

جامد HTML اسکریپنگ سے اہم فرق:

// cheerio.load() کے بجائے، ہم Playwright استعمال کرتے ہیں
const browser = await chromium.launch();
const page = await browser.newPage();

// مواد رینڈر ہونے کا انتظار
await page.waitForSelector('.news-item');

// page.$$eval() استعمال کرتے ہوئے زندہ DOM سے ڈیٹا نکالنا
// یہ callback فنکشن کو برائوزر کے سیاق میں چلاتا ہے
// تاکہ منتخب کنندہ سے میل کھانے والے تمام عناصر کو ایک ساتھ جانچ سکے
const items = await page.$$eval('.news-item', elements => {
  // میل کھانے والے عناصر پر Array.map() کی طرح کام کرتا ہے
  // سیریلائز کے قابل جاوا اسکرپٹ آبجیکٹس واپس کرتا ہے
  // متعدد عناصر سے ڈیٹا نکالنے کے لیے بہترین
});

باب 5: لامحدود سکرول گیلری

متحرک مواد کے علم پر بنا کر، ہم اور بھی پیچیدہ منظرنامے سے نمٹتے ہیں - لامحدود سکرول والی فوٹو گیلری۔ یہ متعارف کراتا ہے:

• سست لوڈ شدہ مواد کا سنبھالنا
• سکرول ایونٹس کا پتا لگانا اور متحرک کرنا
• غیر ہم آہنگ لوڈنگ اسٹیٹس کا انتظام
• پیچیدہ UI پیٹرن سے ڈیٹا نکالنا

یہاں چیلنج یہ ہے کہ مواد بتدریج لوڈ ہوتا ہے جیسے جیسے صارف سکرول کرتا ہے:

<div class="photo-gallery">
  <div class="photo-card">
    <img src="..." alt="فوٹو کا ٹائٹل" />
    <h2>فوٹو کا ٹائٹل</h2>
    <p>فوٹوگرافر: فوٹوگرافر کا نام</p>
    <div class="flex">
      <span>❤️ 42</span>
    </div>
  </div>
  <!-- زیادہ فوٹو سکرول پر لوڈ ہوتی ہیں -->
</div>

لامحدود سکرول سنبھالنے کے اہم تصورات:

// نیچے تک سکرول کریں جب تک کہ کوئی نیا مواد لوڈ نہ ہو
let previousHeight;
while (true) {
  previousHeight = await page.evaluate('document.body.scrollHeight');
  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  await page.waitForTimeout(1500); // مواد کا انتظار

  const newHeight = await page.evaluate('document.body.scrollHeight');
  if (newHeight === previousHeight) {
    break; // لوڈ کرنے کے لیے زیادہ مواد نہیں
  }
}

اہم تحدیدات

جاوا اسکرپٹ سے رینڈر شدہ مواد کے ساتھ کام کرتے وقت:

1. کارکردگی: متحرک مواد اسکریپنگ جامد HTML سے سست ہے
2. وسائل کا انتظام: برائوزر آٹومیشن زیادہ سسٹم ریسورس استعمال کرتا ہے
3. استحکام: لوڈنگ اسٹیٹس اور نیٹ ورک کنڈیشنز کو سنبھالنے کی ضرورت
4. ریٹ لمٹنگ: اعمال کے درمیان تاخیر لاگو کرنے پر غور کریں

بہترین طریقہ کار

1. مناسب انتظار کی حکمت عملیاں استعمال کریں:

// مخصوص عناصر کا انتظار
await page.waitForSelector('.selector');

// نیٹ ورک بے فعال کا انتظار
await page.waitForLoadState('networkidle');

// حسب ضرورت انتظار کی شرائط
await page.waitForFunction(() => {
  // حسب ضرورت جاوا اسکرپٹ شرط
});

2. مضبوط ایرر ہینڈلنگ لاگو کریں:

try {
  await page.goto(url);
  // ... اسکریپنگ لاجک
} catch (error) {
  console.error('اسکریپنگ ناکام:', error);
} finally {
  await browser.close(); // ہمیشہ صفائی کریں
}

3. قابل اعتماد کے لیے دوبارہ کوشش کے طریقہ کار لاگو کرنے پر غور کریں
4. بڑے ڈیٹا سیٹس کے ساتھ کام کرتے وقت میموری کا استعمال مانیٹر کریں
5. مطابقت کے لیے نکالے گئے ڈیٹا کو توثیق کریں

آپ کے حل کا امتحان

ٹیسٹ ماحول موک APIs فراہم کرتا ہے جو حقیقی دنیا کی حالات کو نقل کرتے ہیں:

• متغیر لوڈنگ اوقات
• نیٹ ورک تاخیر
• صفحہ بندی کی میکانکس
• ایرر اسٹیٹس

ان تبدیلیوں کو آزمائیں:

1. سکرول ٹائمنگ میں تبدیلی کریں
2. مختلف اسکرین سائزز کو سنبھالیں
3. سست نیٹ ورک کنڈیشنز کے ساتھ ٹیسٹ کریں
4. ڈیٹا کی سالمیت کو توثیق کریں

متحرک مواد سنبھالنے کے لیے تیار ہیں؟ چیلنج کوڈ اور ٹیسٹ ماحول ریپازٹری میں موجود ہیں۔

ریفرنس امپلیمینٹیشن کے لیے _solved/chapter4/ اور _solved/chapter5/ میں حل شدہ مثالیں چیک کریں۔ یاد رکھیں - جدید ویب اسکریپنگ HTML ڈھانچہ اور ایپلیکیشن رفتار دونوں کو سمجھنے کے بارے میں ہے۔

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