У цьому посібнику я проведу вас через основи вебскрапінгу з TypeScript. Ми розглянемо все: від налаштування проєкту до виконання складніших завдань вебскрапінгу, як-от обробка кількох сторінок. Наприкінці ви зможете легко й упевнено створювати власні скрипти для вебскрапінгу на TypeScript. Розпочнімо!

Чому варто обрати TypeScript для вебскрапінгу?

TypeScript має кілька переваг над звичайним JavaScript, особливо у великих проєктах. Ось кілька ключових причин, чому TypeScript є чудовим вибором для вебскрапінгу:

• Strong Typing: Строга типізація TypeScript допомагає уникати багатьох помилок, які часто виникають у JavaScript. Це особливо важливо для великих проєктів вебскрапінгу, де обробляється багато даних.
• Code Readability: TypeScript надає анотації типів, щоб зробити код читабельнішим і простішим у підтримці. Це може заощадити ваш час під час налагодження або коли ви повертаєтеся до проєкту.
• Сумісність із бібліотеками JavaScript: TypeScript повністю сумісний із JavaScript, тож ви й надалі можете використовувати популярні бібліотеки JavaScript, як-от Axios and Cheerio для вебскрапінгу.

Хоча Python традиційно є найпопулярнішою мовою для вебскрапінгу, типобезпека TypeScript і інтеграція з бібліотеками JavaScript роблять його чудовим вибором для розробників, які добре знають цю мову.

Prerequisites

Перш ніж почати, на вашій машині потрібно налаштувати кілька речей:

Node.js: Ensure that Node.js is installed on your computer. You can download the latest version from the Node.js official website.

TypeScript: Вам потрібно встановити TypeScript глобально у вашій системі. Зробити це можна, виконавши таку команду в терміналі:

npm install -g typescript

Text Editor/IDE: Використовуйте будь-яке IDE, що підтримує TypeScript, наприклад Visual Studio Code.

Коли все буде налаштовано, можна починати писати свій вебскрапер!

Налаштування вашого проєкту

Створіть папку проєкту: Спочатку створіть нову теку для свого проєкту. Відкрийте термінал і виконайте:

mkdir web-scraper-typescript
cd web-scraper-typescript

Ініціалізація проєкту: Run the following command to set up a new Node.js project:

npm init -y

This command will generate a package.json file.

Initialize TypeScript: Далі ініціалізуйте TypeScript у своєму проєкті, виконавши:

npx tsc - init

This will create a tsconfig.json file that contains configuration options for TypeScript.

Install Dependencies: Для вебскрапінгу ми використаємо два ключові пакети: Axios для надсилання HTTP-запитів і Cheerio для парсингу HTML. Встановіть їх за допомогою таких команд:

npm install axios cheerio
npm install - save-dev @types/node @types/cheerio

The @types/ packages provide TypeScript definitions for Node.js and Cheerio, enabling code completion and type checking.

Створення вашого першого вебскрапера

Тепер, коли ваше середовище налаштовано, настав час написати свій перший вебскрапер. У цьому прикладі ми збиратимемо інформацію про товари з інтернет-магазину. Ось кроки:

Крок 1: Зробіть HTTP GET-запит

Перший крок — отримати HTML-вміст сторінки, яку ви хочете зібрати. Ми використаємо Axios для виконання HTTP GET-запиту.

import axios from "axios";
async function scrapeSite() {
const response = await axios.get("https://www.example.com");
const html = response.data;
console.log(html);
}
scrapeSite();

У цьому коді:

• axios.get() використовується для виконання GET-запиту.
• response.data містить HTML-вміст сторінки.

Крок 2: Розбір HTML-вмісту

Коли ми отримали HTML, його потрібно розібрати, щоб витягти дані. Саме тут на допомогу приходить Cheerio. Cheerio — це швидкий, легкий HTML-парсер, що імітує синтаксис jQuery.

import axios from "axios";
import { load } from "cheerio";
async function scrapeSite() {
const response = await axios.get("https://www.example.com");
const html = response.data;
const $ = load(html);
// Extract data using Cheerio
const title = $("h1").text();
console.log(title);
}
scrapeSite();

У цьому коді:

• load(html) ініціалізує Cheerio з HTML-вмістом.
• $(“h1”).text() вибирає перший
  

  елемент і отримує його текст.

Крок 3: Витягніть дані з конкретних елементів

Тепер, коли ми знаємо, як парсити HTML, давайте витягнемо конкретні дані про товар, такі як назва, ціна та URL кожного товару. Припустімо, що кожен товар міститься в одному

import axios from "axios";
import { load } from "cheerio";
async function scrapeSite() {
const response = await axios.get("https://www.example.com/products");
const html = response.data;
const $ = load(html);
$("div.product").each((і, продукт) => {
const name = $(product).find("h2").text();
const price = $(product).find(".price").text();
const url = $(product).find("a").attr("href");
console.log(`Product Name: ${name}`);
console.log(`Price: ${price}`);
console.log(`URL: ${url}`);
});
}
scrapeSite();

Here:

• $(“div.product”).each() перебирає всі елементи товарів на сторінці.
• find() використовується для знаходження конкретних дочірніх елементів, як-от назви продукту, ціни та URL.

Крок 4: Зберігання даних у масиві

Якщо ви хочете зберегти зібрані дані для подальшої обробки (наприклад, для експорту в CSV-файл), можна додати їх до масиву. Створімо тип Product і збережімо витягнуті дані в масиві:

import axios from "axios";
import { load } from "cheerio";
type Product = {
name: string;
price: string;
url: string;
};
async function scrapeSite() {
const response = await axios.get("https://www.example.com/products");
const html = response.data;
const $ = load(html);
const products: Product[] = [];
$("div.product").each((і, продукт) => {
const name = $(product).find("h2").text();
const price = $(product).find(".price").text();
const url = $(product).find("a").attr("href");
const productData: Product = {
name: name,
price: price,
url: url
};
products.push(productData);
});
console.log(products);
}
scrapeSite();

Крок 5: Збереження даних у CSV

Можна використовувати бібліотеки на кшталт fast-csv, щоб зберігати зібрані дані у файл CSV. Спочатку встановіть пакет fast-csv:

npm install fast-csv

Потім змініть свій вебскрапер, щоб зберігати дані у CSV:

import axios from "axios";
import { load } from "cheerio";
import { writeToPath } from "@fast-csv/format";
type Product = {
name: string;
price: string;
url: string;
};
async function scrapeSite() {
const response = await axios.get("https://www.example.com/products");
const html = response.data;
const $ = load(html);
const products: Product[] = [];
$("div.product").each((і, продукт) => {
const name = $(product).find("h2").text();
const price = $(product).find(".price").text();
const url = $(product).find("a").attr("href");
const productData: Product = {
name: name,
price: price,
url: url
};
products.push(productData);
});
writeToPath("products.csv", products, { headers: true })
.on("error", (error) => console.error(error));
}
scrapeSite();

This script will save the scraped data to a file called products.csv.

Крок 6: Вебскрапінг кількох сторінок (пагінація)

На багатьох сайтах товари розміщені на кількох сторінках. Щоб зібрати дані з кількох сторінок, вам потрібно переходити за посиланнями пагінації. Це можна зробити, перевіряючи наявність посилання на сторінку “Next” і збираючи дані з неї.

Ось як можна виконати вебскрапінг кількох сторінок:

import axios from "axios";
import { load } from "cheerio";
async function scrapeSite() {
let currentPage = 1;
const products: Product[] = [];
while (currentPage <= 5) {
const response = await axios.get(`https://www.example.com/products?page=${currentPage}`);
const html = response.data;
const $ = load(html);
$("div.product").each((і, продукт) => {
const name = $(product).find("h2").text();
const price = $(product).find(".price").text();
const url = $(product).find("a").attr("href");
const productData: Product = {
name: name,
price: price,
url: url
};
products.push(productData);
});
currentPage  ;
}
writeToPath("products.csv", products, { headers: true })
.on("error", (error) => console.error(error));
}
scrapeSite();

У цьому прикладі ми використовуємо цикл while, щоб зібрати дані з п'яти сторінок продуктів.

Advanced Techniques

Обробка динамічних сторінок за допомогою Puppeteer

Якщо вміст сторінки динамічно завантажується через JavaScript, Cheerio може бути недостатнім. У таких випадках для вебскрапінгу даних можна використати Puppeteer, headless-браузер. Puppeteer може виконувати JavaScript і надавати доступ до кінцевого вмісту.

Install Puppeteer:

npm install puppeteer

Потім можна написати скрипт для збирання даних із динамічно відрендерених сторінок.

Як уникати виявлення та блокування

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

• Rotate User Agents: Використовуйте різні рядки user-agent щоб ваші запити виглядали так, ніби вони надходять із різних браузерів.
• Proxy Rotation: Використовуйте проксі, щоб приховати свою IP-адресу. Перегляньте мій список найкращі ротаційні проксі.
• Throttling Requests: Обмежте частоту запитів, щоб не спровокувати системи обмеження частоти запитів.

Conclusion

TypeScript — потужний інструмент для вебскрапінгу, що дає переваги суворої типізації, легкої інтеграції з бібліотеками JavaScript і масштабованості для великих проєктів. Дотримуючись цього покрокового посібника, ви навчилися налаштовувати середовище, писати базові скрапери, збирати дані з кількох сторінок і зберігати їх у файл CSV.

Тепер, коли базові речі вже розглянуто, ви можете перейти до складніших технік, наприклад обробки динамічних сторінок за допомогою Puppeteer і уникнення виявлення через проксі. Надійні можливості TypeScript зроблять ваші проєкти з вебскрапінгу надійнішими та простішими в підтримці. Успішного вебскрапінгу!