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

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

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

Чим корисний веб-скрапінг?

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

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

Виклики

#1. Обмеження IP

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

#2. Captcha

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

#3. Візуалізація на стороні клієнта

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

  9 найкращих антивірусних рішень для малого та середнього бізнесу

API techukraine.net

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

API techukraine.net має простий триетапний процес для вас:

  • Укажіть URL-адресу для копіювання
  • Надайте деякі параметри конфігурації
  • Отримати дані

Він може скопіювати веб-сторінку замість вас, а потім повернути необроблені дані HTML у вигляді рядка або у файлі HTML, до якого можна отримати доступ за посиланням, залежно від того, який спосіб вам підходить.

Використання API

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

  • Виконайте команду npm init -y у терміналі в поточній папці або каталозі. Він створить для вас файл package.json.
  • У файлі package.json змініть значення основного ключа на index.mjs, якщо за умовчанням це щось інше. Крім того, ви також можете додати тип ключа та встановити його значення рівним модулю.
{
  “type”: “module”
}
  • Додайте залежність під назвою axios, виконавши команду npm i axios у терміналі. Ця залежність допомагає нам робити запити на вибірку до певних кінцевих точок.
  • Ваш 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-адреса для всіх наших запитів до techukraine.net API буде однаковою для кожної кінцевої точки. Отже, ви можете зберігати його в константі.
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, і, нарешті, об’єкт даних, який буде надіслано до techukraine.net 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
    }
})
  • Як бачите, об’єкт даних має такі властивості:
    • url: URL-адреса веб-сторінки, яку потрібно скопіювати.
    • вихід: формат, у якому дані представлені вам, вбудовані у вигляді рядка або у файлі HTML. Вбудований рядок є значенням за замовчуванням.
    • пристрій: тип пристрою, на якому ви хочете відкрити веб-сторінку. Він приймає три значення: “настільний комп’ютер”, “мобільний пристрій” і “планшет”, де “настільний комп’ютер” є значенням за умовчанням.
    • 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 is the raw html string you get from the techukraine.net API.

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

  Що таке атака «людина посередині»?

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

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

Ось демонстраційний веб-сайт, створений за допомогою react і vitejs. Очистіть цей сайт за допомогою techukraine.net API із значенням 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>

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

  Знімайте та редагуйте уповільнене відео на WP8.1

Заключні слова

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