JavaScript അടിസ്ഥാനമാക്കിയുള്ള വെബ്‌സൈറ്റുകൾക്കായി RSS ഫീഡുകൾ എങ്ങനെ സൃഷ്ടിക്കാം

ഡൈനാമിക് ജാവാസ്ക്രിപ്റ്റ്-പവർ ചെയ്യുന്ന വെബ്‌സൈറ്റുകൾക്കായി ആർഎസ്എസ് ഫീഡുകൾ നിർമ്മിക്കുന്നു

തങ്ങളുടെ പ്രിയപ്പെട്ട വെബ്‌സൈറ്റുകളിൽ നിന്നുള്ള പുതിയ വിവരങ്ങൾ അറിയാൻ ആഗ്രഹിക്കുന്ന ഉപഭോക്താക്കൾക്കുള്ള ഒരു സുപ്രധാന ഉപകരണമാണ് RSS ഫീഡുകൾ. പല സ്റ്റാറ്റിക് വെബ്‌സൈറ്റുകളും ആർഎസ്എസ് ഫീഡുകൾ എളുപ്പത്തിൽ സംയോജിപ്പിച്ചേക്കാം, ജാവാസ്ക്രിപ്റ്റ്-പവർ സൈറ്റുകൾക്കായി ഒന്ന് വികസിപ്പിക്കുന്നത് വ്യത്യസ്തമായ തടസ്സങ്ങൾ കൊണ്ടുവരുന്നു. ഈ വെബ്‌സൈറ്റുകൾ പേജ് സൃഷ്‌ടിച്ചതിന് ശേഷം ലോഡ് ചെയ്‌ത ഡൈനാമിക് ഉള്ളടക്കത്തെ പതിവായി ആശ്രയിക്കുന്നു, ഇത് സാധാരണ RSS സാങ്കേതികവിദ്യകളെ നിഷ്ഫലമാക്കുന്നു.

PolitePol അല്ലെങ്കിൽ RSS.app പോലുള്ള സാധാരണ ടൂളുകൾ, സ്റ്റാറ്റിക് സൈറ്റുകളിൽ നന്നായി പ്രവർത്തിക്കുന്നു, പക്ഷേ JavaScript-ഹെവി വെബ്‌സൈറ്റുകൾക്ക് ബുദ്ധിമുട്ടാണ്. ലോഡുചെയ്യുമ്പോൾ തന്നെ അവരുടെ എല്ലാ ഉള്ളടക്കവും പ്രദർശിപ്പിക്കാത്ത പേജുകൾക്കായി ഒരു RSS ഫീഡ് നൽകുന്നത് ഡവലപ്പർമാർക്ക് ഇത് ബുദ്ധിമുട്ടാക്കുന്നു.

ഈ പ്രശ്നം പരിഹരിക്കുന്നതിന്, ഡെവലപ്പർമാർ പലപ്പോഴും കൂടുതൽ സങ്കീർണ്ണമായ പരിഹാരങ്ങൾ പരിശോധിക്കേണ്ടതുണ്ട്. ബെസ്‌പോക്ക് സ്‌ക്രിപ്‌റ്റുകൾ സൃഷ്‌ടിക്കുന്നതോ വെബ് സ്‌ക്രാപ്പിംഗ് ടെക്‌നിക്കുകൾ ഉപയോഗിക്കുന്നതോ ഇതിൽ ഉൾപ്പെടുന്നു, അത് JavaScript എങ്ങനെയാണ് ഒരു പേജിൽ ഉള്ളടക്കം ഡൈനാമിക് ആയി നിർമ്മിക്കുന്നത് എന്നതിനെ കണക്കിലെടുക്കുന്നു. ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലുള്ള വെബ്‌സൈറ്റുകളിൽ RSS ഫീഡുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നതിന് ഈ രീതികൾ മനസ്സിലാക്കുന്നത് വളരെ പ്രധാനമാണ്.

ഗ്രാമീൺഫോണിൻ്റെ വെബ്‌സൈറ്റിൻ്റെ പ്രസ് റിലീസ് ഭാഗം, ഡാറ്റ ചലനാത്മകമായി ലോഡ് ചെയ്യുന്നു, ഈ തന്ത്രങ്ങളുടെ മികച്ച ഉദാഹരണമാണ്. ഈ ലേഖനത്തിൽ, ജാവാസ്ക്രിപ്റ്റും സമകാലിക വെബ് സ്ക്രാപ്പിംഗ് ടെക്നിക്കുകളും ഉപയോഗിച്ച് അത്തരം വെബ്‌സൈറ്റുകൾക്കായി ഒരു RSS ഫീഡ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഞങ്ങൾ നോക്കാം.

JavaScript RSS ഫീഡ് സ്ക്രിപ്റ്റുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസ്സിലാക്കുന്നു

ഒരു JavaScript-ഹെവി വെബ്‌സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം സ്‌ക്രാപ്പ് ചെയ്യുന്നതിന് ആദ്യ സ്‌ക്രിപ്റ്റ് Node.js, Cheerio, RSS മൊഡ്യൂളുകൾ ഉപയോഗിക്കുന്നു. ഇവിടെയുള്ള പ്രധാന പ്രശ്നം, പല ആധുനിക വെബ്‌സൈറ്റുകളും JavaScript ഉപയോഗിച്ച് മെറ്റീരിയൽ ചലനാത്മകമായി ലോഡുചെയ്യുന്നു, ഇത് സ്റ്റാൻഡേർഡ് സ്‌ക്രാപ്പിംഗ് രീതികൾക്ക് എല്ലാം പിടിച്ചെടുക്കുന്നത് ബുദ്ധിമുട്ടാക്കുന്നു. ടാർഗെറ്റ് വെബ്‌സൈറ്റിൻ്റെ റോ HTML വീണ്ടെടുക്കാൻ, സ്‌ക്രിപ്റ്റ് ആദ്യം Axios-ലൂടെ ഒരു HTTP അഭ്യർത്ഥന അയയ്‌ക്കുന്നു. HTML ലഭ്യമാക്കിയ ശേഷം, jQuery-യ്ക്ക് സമാനമായ രീതിയിൽ അതിനെ പാഴ്‌സ് ചെയ്യാനും കൈകാര്യം ചെയ്യാനും Cheerio ഉപയോഗിക്കുന്നു. ഒരു RSS ഫീഡ് സൃഷ്‌ടിക്കുന്നതിന് ആവശ്യമായ പ്രസ് റിലീസുകൾ പോലുള്ള പേജിൻ്റെ നിർദ്ദിഷ്‌ട വിഭാഗങ്ങൾ ആക്‌സസ് ചെയ്യാനും വീണ്ടെടുക്കാനും ഇത് ഞങ്ങളെ അനുവദിക്കുന്നു.

ഉള്ളടക്കം സ്‌ക്രാപ്പ് ചെയ്‌തുകഴിഞ്ഞാൽ, അത് ഒരു RSS ഫീഡ്-അനുയോജ്യമായ ഫോർമാറ്റിലേക്ക് പരിവർത്തനം ചെയ്യപ്പെടും. ചീരിയോ ഫംഗ്‌ഷൻ $('.press-release-item').each() ഇത് ഓരോ പ്രസ് റിലീസിലും പ്രവർത്തിക്കുകയും ശീർഷകം, URL എന്നിവ പോലുള്ള നിർണായക വിശദാംശങ്ങൾ എക്‌സ്‌ട്രാക്‌റ്റുചെയ്യുകയും ചെയ്യുന്നതിനാൽ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. സ്‌ക്രാപ്പ് ചെയ്‌ത ഡാറ്റ പിന്നീട് RSS ഫീഡിലേക്ക് ചേർക്കുന്നു feed.item() RSS ലൈബ്രറിയിൽ നിന്നുള്ള രീതി. ഈ സ്ക്രിപ്റ്റിലെ അവസാന ഘട്ടം എക്സിക്യൂട്ട് ചെയ്തുകൊണ്ട് പൂർണ്ണമായ RSS XML സൃഷ്ടിക്കുക എന്നതാണ് feed.xml(). പുതിയ പ്രസ് റിലീസുകളെക്കുറിച്ച് അറിയിക്കാൻ സബ്‌സ്‌ക്രൈബർമാർക്ക് ഉപയോഗിക്കാൻ കഴിയുന്നത് ഈ XML ആണ്. ഉള്ളടക്കം ചലനാത്മകമായി ലോഡുചെയ്യുമ്പോൾ ഈ തന്ത്രം വെബ്‌സൈറ്റുകൾക്ക് നന്നായി പ്രവർത്തിക്കുന്നു, എന്നാൽ ഘടന സുസ്ഥിരവും പ്രവചിക്കാവുന്നതുമാണ്.

രണ്ടാമത്തെ സമീപനം JavaScript-ഹെവി വെബ്‌പേജുകളുമായി സംവദിക്കുന്നതിൽ പ്രത്യേകമായ ഒരു തലയില്ലാത്ത ബ്രൗസറായ Puppeteer ഉപയോഗിക്കുന്നു. ഒരു യഥാർത്ഥ ബ്രൗസർ സെഷൻ അനുകരിക്കാൻ പപ്പറ്റീർ സ്‌ക്രിപ്‌റ്റിനെ പ്രാപ്‌തമാക്കുന്നു, അതായത് ഉള്ളടക്കം എക്‌സ്‌ട്രാക്‌റ്റുചെയ്യുന്നതിന് മുമ്പ് JavaScript പൂർണ്ണമായി ലോഡുചെയ്യുന്നത് വരെ അത് കാത്തിരിക്കുന്നു. ആദ്യ HTML പേജ് ലോഡിന് ശേഷം മെറ്റീരിയൽ ചലനാത്മകമായി ജനറേറ്റുചെയ്യുന്ന ഗ്രാമീണഫോൺ പ്രസ് റിലീസ് ഏരിയ പോലുള്ള പേജുകൾക്ക് ഇത് വളരെ പ്രധാനമാണ്. സ്ക്രിപ്റ്റ് തുടക്കത്തിൽ ഒരു പപ്പറ്റീർ ബ്രൗസർ ഉദാഹരണം തുറക്കുകയും ടാർഗെറ്റ് URL-ലേക്ക് നാവിഗേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു page.goto() രീതി. പേജ് പൂർണ്ണമായും ലോഡുചെയ്‌തതിനുശേഷം, സ്‌ക്രിപ്റ്റ് അതിനെ വിലയിരുത്തുകയും സാധാരണ DOM കൃത്രിമത്വ രീതികൾ ഉപയോഗിച്ച് പ്രസക്തമായ മെറ്റീരിയൽ വലിക്കുകയും ചെയ്യുന്നു querySelectorAll.

കൂടുതൽ സങ്കീർണ്ണവും ചലനാത്മകവുമായ വെബ് പേജുകൾ കൈകാര്യം ചെയ്യുന്നതിൽ ചീറിയോ പോലുള്ള അടിസ്ഥാന സ്ക്രാപ്പിംഗ് ടൂളുകളെ പപ്പറ്റിയർ മറികടക്കുന്നു. പ്രസക്തമായ ഡാറ്റ സ്‌ക്രാപ്പ് ചെയ്‌ത ശേഷം, അത് ആദ്യ സ്‌ക്രിപ്‌റ്റിന് സമാനമായ ഒരു പ്രക്രിയയിലൂടെ കടന്നുപോകുന്നു, ഔട്ട്‌പുട്ട് ഒരു RSS ഫീഡിലേക്ക് ഫോർമാറ്റ് ചെയ്യുന്നു. മെറ്റീരിയൽ അസമന്വിതമായി ലോഡ് ചെയ്യുന്നതോ കൂടുതൽ വിപുലമായ JavaScript ചട്ടക്കൂടുകൾ ഉപയോഗിക്കുന്നതോ ആയ വെബ്‌സൈറ്റുകൾക്ക് ഈ രീതി ഏറ്റവും അനുയോജ്യമാണ്, ഇത് ആധുനിക വെബ്‌സൈറ്റുകളിൽ നിന്ന് RSS ഫീഡുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ബഹുമുഖ ബദൽ നൽകുന്നു. Cheerio അല്ലെങ്കിൽ Puppeteer ഉപയോഗിക്കുന്ന രണ്ട് ഓപ്ഷനുകളും, ചലനാത്മകമായി ലോഡുചെയ്‌ത ഉള്ളടക്കം ഉപയോക്തൃ ഉപഭോഗത്തിനായി ശരിയായ RSS ഫോർമാറ്റിലേക്ക് പരിവർത്തനം ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

const axios = require('axios');
const cheerio = require('cheerio');
const RSS = require('rss');

async function fetchPressReleases() {
  try {
    const { data } = await axios.get('https://www.grameenphone.com/about/media-center/press-release');
    const $ = cheerio.load(data);
    let releases = [];

    $('.press-release-item').each((i, el) => {
      const title = $(el).find('h3').text();
      const url = $(el).find('a').attr('href');
      releases.push({ title, url });
    });

    return releases;
  } catch (error) {
    console.error('Error fetching press releases:', error);
  }
}

async function generateRSS() {
  const feed = new RSS({ title: 'Press Releases', site_url: 'https://www.grameenphone.com' });
  const releases = await fetchPressReleases();

  releases.forEach(release => {
    feed.item({ title: release.title, url: release.url });
  });

  console.log(feed.xml());
}

generateRSS();

const puppeteer = require('puppeteer');
const RSS = require('rss');

async function fetchDynamicContent() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.grameenphone.com/about/media-center/press-release');

  const releases = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.press-release-item')).map(el => ({
      title: el.querySelector('h3').innerText,
      url: el.querySelector('a').href
    }));
  });

  await browser.close();
  return releases;
}

async function generateRSS() {
  const feed = new RSS({ title: 'Dynamic Press Releases', site_url: 'https://www.grameenphone.com' });
  const releases = await fetchDynamicContent();

  releases.forEach(release => {
    feed.item({ title: release.title, url: release.url });
  });

  console.log(feed.xml());
}

generateRSS();

JavaScript-ഹെവി വെബ്‌സൈറ്റുകൾക്കായി ഡൈനാമിക് RSS ഫീഡുകൾ സൃഷ്ടിക്കുന്നു

ഒരു RSS ഫീഡിനായി ചലനാത്മകമായി പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഉള്ളടക്കം ക്യാപ്‌ചർ ചെയ്യുന്നത് JavaScript-പവർ ചെയ്യുന്ന വെബ്‌സൈറ്റുകളിൽ പ്രവർത്തിക്കുമ്പോൾ ചിലപ്പോൾ അവഗണിക്കപ്പെടുന്ന ബുദ്ധിമുട്ടാണ്. സ്റ്റാറ്റിക് പേജുകളിൽ നിന്ന് വ്യത്യസ്തമായി, JavaScript-പവർ ചെയ്യുന്ന വെബ്‌സൈറ്റുകൾ പ്രാരംഭ പേജ് അഭ്യർത്ഥനയ്ക്ക് ശേഷം മെറ്റീരിയലിൻ്റെ ഭാഗങ്ങൾ ലോഡ് ചെയ്യുന്നു, സാധാരണ സ്ക്രാപ്പിംഗ് സമീപനങ്ങളെ വിലപ്പോവില്ല. React, Angular, Vue.js പോലുള്ള പുതിയ ചട്ടക്കൂടുകളുമായി വെബ്‌സൈറ്റുകൾ കൂടുതൽ സംവേദനാത്മകമായി വളരുമ്പോൾ, ഡൈനാമിക് ഉള്ളടക്ക നിർമ്മാണം കൈകാര്യം ചെയ്യാൻ ഡവലപ്പർമാർ പുതിയ പരിഹാരങ്ങൾ ആഗ്രഹിക്കുന്നു.

ഈ സൈറ്റുകൾക്കായി ഒരു RSS ഫീഡ് നിർമ്മിക്കുന്നതിന്, ഡെവലപ്പർമാർക്ക് പപ്പറ്റീറിനൊപ്പം തലയില്ലാത്ത സർഫിംഗ് പോലുള്ള പരിഹാരങ്ങൾ പരീക്ഷിക്കാൻ കഴിയും, ഇത് ഒരു യഥാർത്ഥ ഉപയോക്തൃ അനുഭവം അനുകരിക്കുന്നു. ലഭ്യമാണെങ്കിൽ, വെബ്സൈറ്റ് തന്നെ വിതരണം ചെയ്യുന്ന API-കൾ ഉപയോഗിക്കുക എന്നതാണ് മറ്റൊരു മാർഗം. നിലവിലുള്ള പല വെബ്‌സൈറ്റുകളും മുൻവശത്ത് പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഡാറ്റ നൽകുന്ന JSON അല്ലെങ്കിൽ RESTful API-കൾ തുറന്നുകാട്ടുന്നു. ഈ API-കൾ ഉപയോഗിച്ച്, പേജ് എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് ആശങ്കപ്പെടാതെ നിങ്ങൾക്ക് ഉടനടി ഘടനാപരമായ ഡാറ്റ ആക്‌സസ് ചെയ്യാൻ കഴിയും. വെബ് സ്‌ക്രാപ്പിംഗിനെക്കാൾ കൂടുതൽ സ്ഥിരതയുള്ളതാണെന്ന നേട്ടവും API-കൾക്കുണ്ട്, ഒരു വെബ്‌സൈറ്റ് ഘടന മാറ്റുമ്പോൾ അത് തകർന്നേക്കാം.

കൂടാതെ, സെർവർ-സൈഡ് റെൻഡറിംഗുമായി (എസ്എസ്ആർ) API ഉപയോഗം സംയോജിപ്പിക്കുന്നത് ഫലപ്രദമായ RSS ജനറേഷൻ രീതിയാണ്. Next.js പോലെയുള്ള എസ്എസ്ആർ ചട്ടക്കൂടുകൾക്ക് സെർവറിൽ പേജുകൾ പ്രീ-റെൻഡർ ചെയ്യാൻ കഴിയും, ഡൈനാമിക് ലോഡുചെയ്‌ത ഘടകങ്ങൾ ഉൾപ്പെടെ പൂർണ്ണമായും പൂർത്തിയാക്കിയ HTML ക്യാപ്‌ചർ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഈ HTML പിന്നീട് ഒരു RSS ഫീഡായി പരിവർത്തനം ചെയ്യാവുന്നതാണ്. മാറിക്കൊണ്ടിരിക്കുന്ന JavaScript ചട്ടക്കൂടുകളും ഡൈനാമിക് ഉള്ളടക്ക ലോഡിംഗ് അൽഗോരിതങ്ങളും ഉപയോഗിച്ച് പ്രവർത്തിക്കുമ്പോൾ ഈ പരിഹാരങ്ങൾ ഡവലപ്പർമാർക്ക് വഴക്കവും സ്കേലബിളിറ്റിയും വാഗ്ദാനം ചെയ്യുന്നു.