Jak oškrábat web pomocí etechblog.cz Web Scraping API

Obsah

Web scraping, neboli extrahování dat z webových stránek, je proces získávání užitečných informací z celosvětové sítě internetu. Při vyhledávání na Googlu prochází robot (tzv. webový prohledávač) téměř veškerý dostupný obsah online a vybírá pro vás relevantní informace.

Myšlenka, že data a vědomosti by měly být volně dostupné všem, vedla ke vzniku internetu. Nicméně, data, která chcete získat, musí být schválena pro veřejné použití.

K čemu je web scraping užitečný?

Žijeme v digitálním věku, kde je dat nespočet. S pomocí web scrapingu je možné nezpracovaná data transformovat do užitečných informací. Tyto informace se pak dají využít k různorodým účelům, například k analýze uživatelů produktů a následnému vylepšování produktů na základě získané zpětné vazby.

E-commerce společnosti mohou web scraping používat ke zkoumání cenových strategií konkurence a na základě toho si nastavit vlastní ceny. Kromě toho se web scraping využívá také při získávání informací o počasí nebo zpráv.

Výzvy

#1. Omezení IP adres

Některé webové stránky omezují počet požadavků, které můžete odeslat za účelem získání dat v určitém časovém intervalu. To dělají prostřednictvím sledování IP adres nebo geolokace. Tento mechanismus slouží jako ochrana proti škodlivým útokům na jejich webové stránky.

#2. Captcha

Captchas slouží k odlišení skutečných uživatelů od robotů, kteří se snaží získat přístup na web. Webové stránky je používají k eliminaci spamu a regulaci množství scraperů, kteří se na web snaží dostat.

#3. Vykreslování na straně klienta

Jedná se o jednu z největších překážek pro web scrapery. Moderní webové stránky využívají frontendové frameworky, které vytvářejí jednostránkové aplikace. U většiny z nich není obsah generován na serveru, ale dynamicky pomocí JavaScriptu na straně klienta. To ztěžuje scraperům rozpoznání obsahu webové stránky. Abyste obsah získali, musíte spustit klientský JavaScript.

Wdzwdz API

Web scraping API řeší většinu problémů, se kterými se můžete při web scrapingu setkat, jelikož vše potřebné obstará za vás. Podíváme se na API od etechblog.cz a ukážeme si, jak ho můžete použít.

Použití Wdzwdz API je jednoduché a skládá se ze tří kroků:

Zadejte URL adresu, ze které chcete data získat.
Nastavte požadované konfigurační parametry.
Získejte data.

API od etechblog.cz dokáže extrahovat data z webové stránky a vrátit je jako surová HTML data, a to buď jako řetězec, nebo v HTML souboru, ke kterému lze přistupovat pomocí odkazu, podle toho, jaká varianta vám vyhovuje.

Použití API

V tomto tutoriálu se naučíte, jak používat etechblog.cz API pomocí NodeJS – runtime prostředí pro JavaScript. Než budete pokračovat, ujistěte se, že máte NodeJS ve svém systému nainstalované.

Spusťte příkaz npm init -y v terminálu v aktuální složce nebo adresáři. Vytvoří se soubor package.json.

Uvnitř souboru package.json změňte hodnotu klíče main na index.mjs, pokud je výchozí hodnota jiná. Alternativně můžete také přidat klíč type a nastavit jeho hodnotu na module.

{
  "type": "module"
}

Přidejte závislost s názvem axios spuštěním příkazu npm i axios v terminálu. Tato závislost nám pomůže odesílat požadavky na specifické koncové body.

Váš package.json by měl vypadat nějak takto:

{
  "name": "webscraping",
  "version": "1.0.0",
  "description": "",
  "main": "index.mjs",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Murtuzaali Surti",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.1.3"
  }
}

Importujte axios do souboru index.mjs. Používá se klíčové slovo import, protože se jedná o ES modul. Pokud by se jednalo o CommonJS soubor, bylo by použito klíčové slovo require.

import axios from 'axios'

Základní URL adresa pro všechny naše požadavky na API etechblog.cz bude stejná pro každý koncový bod, proto si ji můžeme uložit do konstanty.

const baseUrl="https://api.etechblog.cz.com"

Zadejte URL adresu webové stránky, ze které chcete data získat.

let toScrapeURL = "https://developer.mozilla.org/en-US/"

Vytvořte asynchronní funkci a v ní inicializujte axios.

async function getData() {
    const res = await axios({})
    return res
}

V konfiguraci axios byste měli zadat metodu jako post, URL adresu spolu s koncovým bodem, hlavičku s názvem x-api-key, jejíž hodnota bude API klíč poskytnutý etechblog.cz, a nakonec datový objekt, který bude odeslán na API etechblog.cz. API klíč můžete získat na adrese dash.etechblog.cz.com.

const res = await axios({
    method: "post",
    url: `${baseUrl}/webscraping`,
    headers: {
        "x-api-key": "your api key"
    },
    data: {
        url: toScrapeURL,
        output: 'file',
        device: 'desktop',
        renderJS: true
    }
})

Jak můžete vidět, datový objekt obsahuje následující vlastnosti:
- url: URL adresa webové stránky, kterou chcete oškrábat.
- output: Formát, ve kterém chcete data získat, buď přímo jako řetězec, nebo v HTML souboru. Výchozí hodnota je vložený řetězec.
- device: Typ zařízení, ve kterém chcete webovou stránku otevřít. Přijímá tři hodnoty: desktop, mobile a tablet, přičemž desktop je výchozí hodnota.
- renderJS: Booleovská hodnota, která určuje, zda chcete vykreslovat JavaScript, či nikoli. Tato možnost je užitečná při práci s vykreslováním na straně klienta.

Zavolejte asynchronní funkci a získejte data. Můžete použít IIFE (Immediately Invoked Function Expression).

(async () => {
    const data = await getData()
    console.log(data.data)
})()

Odpověď by měla vypadat přibližně takto:

{
  timestamp: 1669358356779,
  apiStatus: 'success',
  apiCode: 200,
  meta: {
    url: 'https://murtuzaalisurti.github.io',
    device: 'desktop',
    output: 'file',
    blockAds: true,
    renderJS: true,
    test: { id: 'mvan3sa30ajz5i8lu553tcckchkmqzr6' }
  },
  data: 'https://api-assets.etechblog.cz.com/tests/web-scraping/pbn0v009vksiszv1cgz8o7tu.html'
}

Analýza HTML

Pro analýzu HTML můžete použít npm balíček s názvem node-html-parser a extrahovat z něj potřebná data. Pokud chcete například získat název webové stránky, můžete použít následující kód:

import { parse } from 'node-html-parser'
const html = parse(htmlData) // htmlData je syrový HTML řetězec, který získáte z API etechblog.cz.

Alternativně, pokud vás zajímají pouze metadata z webu, můžete použít API endpoint pro metadata etechblog.cz. V takovém případě není potřeba HTML ani parsovat.

Výhody používání etechblog.cz API

U jednostránkových aplikací není obsah vykreslován serverem, ale prohlížečem za pomoci JavaScriptu. Pokud tedy získáte data z původní adresy URL, aniž byste vykreslili JavaScript potřebný k vygenerování obsahu, získáte jen prázdný kontejner. Ukažme si příklad:

Zde je ukázková webová stránka vytvořená pomocí React a vitejs. Zkuste oškrábat tento web s API etechblog.cz, ale s parametrem renderJS nastaveným na false. Co jste získali?

<body>
    <div id="root"></div>
<body>

Vidíte, že existuje pouze kořenový kontejner bez jakéhokoliv obsahu. Právě zde vstupuje do hry možnost renderJS. Nyní zkuste oškrábat stejný web, ale s možností renderJS nastavenou na true. Co dostanete?

<body>
    <div id="root">
        <div class="App">
            <div>
                <a href="https://vitejs.dev" target="_blank">
                    <img src="/vite.svg" class="logo" >
                </a>
                <a href="https://reactjs.org" target="_blank">
                    <img src="/assets/react.35ef61ed.svg" class="logo react" >
                </a>
            </div>
            <h1>Vite + React</h1>
            <div class="card">
                <button>count is 0</button>
                <p>Edit <code>src/App.jsx</code> and save to test HMR</p>
            </div>
            <p class="read-the-docs">Click on the Vite and React logos to learn more</p>
        </div>
    </div>
</body>

Další výhodou použití etechblog.cz API je možnost využití rotujících proxy, díky čemuž si můžete být jisti, že vaše IP adresa nebude zablokována. Wdzwdz API nabízí funkci proxy v rámci prémiového plánu.

Závěrem

Použitím webového API se můžete soustředit pouze na samotné získávání dat bez toho, aby vás zatěžovaly technické detaily. Etechblog.cz API navíc poskytuje další funkce, jako je kontrola nefunkčních odkazů, scraping metadat, statistiky načítání webových stránek, pořizování snímků obrazovky, zjišťování stavu webu a mnoho dalšího. To vše v rámci jediného API. Pro více informací se prosím podívejte do oficiální dokumentace k API etechblog.cz.