JavaScript Tabanlı Web Siteleri için RSS Beslemeleri Nasıl Oluşturulur?

Dinamik JavaScript Destekli Web Siteleri için RSS Akışları Oluşturma

RSS beslemeleri, favori web sitelerindeki yeni bilgileri takip etmek isteyen tüketiciler için hayati bir araçtır. Pek çok statik web sitesi kolaylıkla RSS beslemelerini bünyesinde barındırabilirken, JavaScript destekli siteler için bir tane geliştirmek belirgin engeller getirir. Bu web siteleri sıklıkla sayfa oluşturulduktan sonra yüklenen dinamik içeriğe güvenir ve bu da tipik RSS teknolojilerini etkisiz hale getirir.

PolitePol veya RSS.app gibi yaygın araçlar statik sitelerde iyi çalışır ancak JavaScript ağırlıklı web sitelerinde sorun yaşar. Bu, geliştiricilerin, içeriğinin tamamını yüklemeden hemen sonra göstermeyen sayfalar için RSS beslemesi sağlamasını zorlaştırır.

Bu sorunu çözmek için geliştiricilerin sıklıkla daha karmaşık çözümlere başvurması gerekir. Bunlar, ısmarlama komut dosyaları oluşturmayı veya JavaScript'in bir sayfada içeriği dinamik olarak nasıl ürettiğini dikkate alan web kazıma tekniklerini kullanmayı içerir. Bu yöntemleri anlamak, örnekte gösterilene benzer web sitelerinde RSS beslemelerini etkinleştirmek için kritik öneme sahiptir.

Grameenphone'un web sitesinin verileri dinamik olarak yükleyen basın bülteni kısmı bu stratejilere mükemmel bir örnektir. Bu makalede, JavaScript ve çağdaş web kazıma tekniklerini kullanarak bu tür web siteleri için RSS beslemesinin nasıl oluşturulacağına bakacağız.

JavaScript RSS Akışı Komut Dosyalarının Nasıl Çalıştığını Anlamak

İlk komut dosyası, JavaScript ağırlıklı bir web sitesinden içerik çıkarmak için Node.js, Cheerio ve RSS modüllerini kullanıyor. Buradaki asıl sorun, birçok modern web sitesinin materyali JavaScript kullanarak dinamik olarak yüklemesi ve standart kazıma yöntemlerinin her şeyi yakalamasını zorlaştırmasıdır. Hedef web sitesinin ham HTML'sini almak için komut dosyası önce Axios üzerinden bir HTTP isteği gönderir. HTML'yi getirdikten sonra Cheerio, onu jQuery'ye benzer bir şekilde ayrıştırmak ve işlemek için kullanılır. Bu, bir RSS beslemesinin oluşturulması için gerekli olan, basın bültenleri gibi sayfanın belirli bölümlerine erişmemize ve bunları almamıza olanak tanır.

İçerik kazındıktan sonra RSS beslemesi uyumlu bir formata dönüştürülür. Cheerio işlevi $('.press-release-item').each() özellikle kullanışlıdır çünkü her basın bültenini inceler ve başlık ve URL gibi önemli ayrıntıları çıkarır. Kazınan veriler daha sonra kullanılarak RSS beslemesine eklenir. feed.item() RSS kütüphanesinden yöntem. Bu komut dosyasındaki son adım, aşağıdaki komutu çalıştırarak tam RSS XML'sini oluşturmaktır: feed.xml(). Bu XML, abonelerin yeni basın bültenlerinden haberdar olmak için kullanabileceği XML'dir. Bu strateji, içeriğin dinamik olarak yüklendiği ancak yapının istikrarlı ve öngörülebilir olduğu web siteleri için iyi çalışır.

İkinci yaklaşım, JavaScript ağırlıklı web sayfalarıyla etkileşimde uzmanlaşmış, başsız bir tarayıcı olan Puppeteer'ı kullanıyor. Puppeteer, betiğin gerçek bir tarayıcı oturumunu taklit etmesini sağlar; bu, içeriği çıkarmadan önce JavaScript'in tamamen yüklenmesini beklediği anlamına gelir. Bu, özellikle materyalin ilk HTML sayfa yüklemesinden sonra dinamik olarak oluşturulduğu Grameenphone basın bülteni alanı gibi sayfalar için çok önemlidir. Komut dosyası başlangıçta bir Puppeteer tarayıcı örneğini açar ve sayfa.goto() Yöntem. Sayfa tamamen yüklendikten sonra, komut dosyası onu değerlendirir ve aşağıdakiler gibi yaygın DOM manipülasyon yöntemlerini kullanarak ilgili materyali çeker: sorguSeçiciTümü.

Puppeteer, daha karmaşık ve dinamik web sayfalarını yönetme konusunda Cheerio gibi temel kazıma araçlarından daha iyi performans gösterir. İlgili verileri topladıktan sonra, ilk komut dosyasına benzer bir süreçten geçerek çıktıyı bir RSS beslemesi olarak biçimlendirir. Bu yöntem, materyali eşzamansız olarak yükleyen veya daha gelişmiş JavaScript çerçeveleri kullanan web siteleri için en uygunudur ve modern web sitelerinden RSS beslemeleri oluşturmak için çok yönlü bir alternatif sunar. İster Cheerio ister Puppeteer kullanılıyor olsun, her iki seçenek de dinamik olarak yüklenen içeriğin kullanıcı tüketimi için uygun bir RSS formatına dönüştürülmesini sağlar.

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 Yoğun Web Siteleri için Dinamik RSS Akışları Oluşturma

Bir RSS beslemesi için dinamik olarak görüntülenen içeriği yakalamak, JavaScript destekli web siteleriyle çalışırken bazen ihmal edilen bir zorluktur. Statik sayfaların aksine, JavaScript destekli web siteleri, malzemenin bazı kısımlarını ilk sayfa talebinden sonra yükler ve tipik kazıma yaklaşımlarını değersiz hale getirir. Web siteleri React, Angular ve Vue.js gibi yeni çerçevelerle daha etkileşimli hale geldikçe geliştiriciler dinamik içerik üretimini yönetecek yeni çözümler istiyor.

Bu siteler için bir RSS beslemesi oluşturmak amacıyla geliştiriciler, gerçek bir kullanıcı deneyimini simüle eden Puppeteer ile başsız sörf gibi çözümleri deneyebilir. Başka bir yol da, eğer varsa, web sitesinin kendisi tarafından sağlanan API'leri kullanmaktır. Mevcut web sitelerinin çoğu, ön uçta görüntülenen verileri döndüren JSON veya RESTful API'lerini kullanıma sunar. Bu API'leri kullanarak, sayfanın nasıl göründüğü konusunda endişelenmeden, yapılandırılmış verilere anında erişebilirsiniz. API'ler ayrıca, bir web sitesi yapısı değiştiğinde bozulabilen web kazımaya göre daha kararlı olma avantajına da sahiptir.

Ayrıca API kullanımını sunucu tarafı oluşturma (SSR) ile birleştirmek etkili bir RSS oluşturma yöntemi olabilir. Next.js gibi SSR çerçeveleri, sunucudaki sayfaları önceden görüntüleyebilir ve dinamik olarak yüklenen öğeler de dahil olmak üzere tamamen tamamlanmış HTML'yi yakalamanıza olanak tanır. Bu HTML daha sonra bir RSS beslemesine dönüştürülebilir. Bu çözümler geliştiricilere sürekli değişen JavaScript çerçeveleri ve dinamik içerik yükleme algoritmalarıyla çalışırken esneklik ve ölçeklenebilirlik sunar.