Як скрапувати веб-сайт за допомогою techukraine.net Web Scraping API

Автор

Веб-скрейпінг – це процес вилучення цінної інформації з глобальної мережі Інтернет. Коли ви виконуєте пошук у Google, спеціальний сканер (веб-бот) аналізує майже весь контент в мережі, відбираючи дані, що відповідають вашому запиту.

Сама концепція вільного доступу до інформації та знань для кожного стала поштовхом до створення Всесвітньої павутини. Однак, важливо пам’ятати, що дані, які ви намагаєтеся отримати, повинні бути дозволені для публічного використання.

Яку користь приносить веб-скрейпінг?

Ми живемо в епоху великих даних. За допомогою веб-скрейпінгу можна перетворити необроблені дані на корисну інформацію, яку можна застосувати для різноманітних цілей. Наприклад, аналізувати поведінку користувачів продукту, щоб покращити його, тобто створити цикл зворотного зв’язку.

Компанії, що займаються електронною комерцією, можуть використовувати веб-скрейпінг для вивчення цінової політики конкурентів та розробки власної стратегії. Крім того, веб-скрейпінг використовується для збору даних про погоду та новин.

Проблеми

#1. Обмеження IP-адреси

Деякі веб-ресурси обмежують кількість запитів на отримання даних, які можна зробити за певний період часу, відстежуючи вашу IP-адресу або геолокацію. Це робиться для захисту від шкідливих атак на веб-сайт.

#2. Капча

Капча – це механізм, що розрізняє реальну людину і бота, який намагається отримати доступ до веб-сайту. Веб-сайти використовують капчу для запобігання спаму, а також для контролю кількості запитів від скреперів.

#3. Рендеринг на стороні клієнта

Це одна з найбільших перешкод для веб-скреперів. Сучасні веб-сайти використовують фреймворки для фронтенду, які дозволяють створювати односторінкові додатки. Більшість таких додатків не мають контенту на сервері. Натомість вони генерують вміст динамічно за допомогою JavaScript на стороні клієнта. Це ускладнює завдання для скреперів, оскільки їм важко визначити, який саме контент містить веб-сторінка. Щоб отримати потрібний контент, необхідно відтворити певний JavaScript на стороні клієнта.

API techukraine.net

API для веб-скрейпінгу дозволяє розв’язати більшість проблем, пов’язаних із цим процесом, оскільки він бере на себе всю складну роботу. Розглянемо API від techukraine.net та дізнаємося, як його використовувати для веб-скрейпінгу.

API techukraine.net пропонує просту послідовність дій, що складається з трьох кроків:

  • Вкажіть URL-адресу для скрейпінгу
  • Задайте необхідні параметри конфігурації
  • Отримайте дані

Сервіс може автоматично зібрати потрібну веб-сторінку та надати необроблені HTML-дані у вигляді рядка або файлу HTML, доступного за посиланням, залежно від вашого вибору.

Застосування API

У цьому посібнику ми розглянемо, як використовувати API techukraine.net за допомогою NodeJS – середовища виконання JavaScript. Якщо ви ще не встановили NodeJS, зробіть це перед тим, як продовжувати.

  • Виконайте команду npm init -y в терміналі у вашій робочій папці. Це створить файл package.json.
  • У файлі package.json змініть значення параметра main на index.mjs, якщо воно відрізняється від заданого за замовчуванням. Також, можете додати параметр type та задати йому значення module.
{
  “type”: “module”
}
  • Додайте залежність axios, виконавши команду npm i axios у терміналі. Ця залежність допоможе нам робити запити до певних URL-адрес.
  • Ваш файл package.json повинен виглядати приблизно так:
{
  "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"
  }
}
  • Імпортуйте axios у файл index.mjs наступним чином. Тут використовується ключове слово import, оскільки це модуль ES. У випадку commonJS файлу використовувалося б ключове слово require.
import axios from ‘axios’
  • Базова URL-адреса для всіх наших запитів до API techukraine.net буде однаковою для кожної кінцевої точки. Тому її можна зберігати у константі.
const baseUrl="https://api.techukraine.net.com"
  • Вкажіть URL-адресу, з якої необхідно отримати дані.
let toScrapeURL = "https://developer.mozilla.org/en-US/"
  • Створіть асинхронну функцію та ініціалізуйте axios всередині неї.
async function getData() {
    const res = await axios({})
    return res
}
  • У параметрах конфігурації axios необхідно вказати метод як post, URL-адресу з кінцевою точкою, заголовок x-api-key, значенням якого буде ваш API-ключ, отриманий від techukraine.net, та об’єкт data, який буде відправлений API. Ваш API-ключ можна отримати на сторінці dash.techukraine.net.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
    }
})
  • Об’єкт data містить такі властивості:
    • url: URL-адреса веб-сторінки, яку потрібно зібрати.
    • output: формат, у якому будуть представлені дані – у вигляді вбудованого рядка або файлу HTML. Значення за замовчуванням – вбудований рядок.
    • device: тип пристрою, на якому ви бажаєте відкрити веб-сторінку. Можливі значення: “desktop”, “mobile” та “tablet”. Значення за замовчуванням – “desktop”.
    • renderJS: логічне значення, що вказує, чи потрібно відтворювати javascript. Цей параметр корисний, коли ви маєте справу з рендерингом на стороні клієнта.
  • Викличте асинхронну функцію та отримайте дані. Ви можете використовувати IIFE (негайно викликану функцію).
(async () => {
    const data = await getData()
    console.log(data.data)
})()
  • Відповідь буде виглядати приблизно так:
{
  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.techukraine.net.com/tests/web-scraping/pbn0v009vksiszv1cgz8o7tu.html'
}

Аналіз HTML

Для аналізу HTML-коду можна використовувати npm-пакет під назвою node-html-parser та витягувати потрібні дані з HTML. Наприклад, щоб отримати заголовок веб-сторінки, можна скористатися таким кодом:

import { parse } from ‘node-html-parser’
const html = parse(htmlData) // htmlData - це необроблений HTML-рядок, отриманий від API techukraine.net.

Крім того, якщо вам потрібні лише метадані з веб-сайту, ви можете скористатися кінцевою точкою API метаданих techukraine.net. У цьому випадку вам навіть не потрібно аналізувати HTML.

Переваги використання API techukraine.net

В односторінкових додатках контент часто не відображається сервером, а генерується браузером за допомогою JavaScript. Тому, якщо ви збираєте дані з вихідної URL-адреси без відтворення JavaScript, потрібного для відображення контенту, ви отримаєте лише елемент-контейнер без контенту. Розглянемо приклад.

Ось демонстраційний веб-сайт, створений за допомогою React і Vitejs. Спробуйте зібрати дані з цього сайту за допомогою API techukraine.net зі значенням false для параметра renderJS. Що ви отримаєте?

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

Ви отримаєте лише кореневий контейнер без контенту. Тут на допомогу приходить опція renderJS. Тепер спробуйте зібрати дані з того ж сайту, задавши для параметра renderJS значення true. Що ви отримаєте?

<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>

Ще одна перевага використання API techukraine.net – це можливість застосування ротаційного проксі-сервера, що дозволяє уникнути блокування IP-адреси веб-сайтом. Функція проксі включена до преміум-плану API techukraine.net.

Висновок

Використання API для веб-скрейпінгу дає можливість зосередитися безпосередньо на даних, не заглиблюючись у технічні складності. Крім того, API techukraine.net надає додаткові можливості, такі як перевірка непрацюючих посилань, скрейпінг метаданих, збір статистики завантаження веб-сайту, створення знімків екрана, перевірка статусу сайту та багато іншого – все в рамках одного API. Більше інформації ви можете знайти в офіційній документації API techukraine.net.