Реалізація веб-інтерфейсу для управління ботами-парсерами
Веб-інтерфейс перетворює CLI-інструмент або API на продукт, який можуть використовувати нетехнічні співробітники. Інтерфейс управління парсерами включає список завдань, конфігурацію, запуск/зупинку, перегляд результатів та моніторинг помилок.
Ключові екрани
Дашборд — зведена статистика: кількість активних парсерів, зібраних записів за добу, відсоток успішних запусків, останні помилки.
Список парсерів — таблиця з колонками: назва, джерело, статус (активний/пауза/помилка), останній запуск, наступний запланований запуск.
Карточка парсера — конфігурація, історія запусків з логами, перегляд останніх зібраних даних.
Дані — таблиця результатів з фільтрацією, пошуком, експортом у CSV.
Стек
- React + TypeScript з Vite
- TanStack Query — отримання даних та автооновлення статусів
- TanStack Table — таблиці з сортуванням та фільтрацією
- Recharts — графіки статистики
- WebSocket / SSE — оновлення прогресу в реальному часі
Компонент статусу в реальному часі
import { useEffect, useState } from 'react';
interface RunProgress {
status: 'pending' | 'running' | 'completed' | 'failed';
processed: number;
total: number;
errors: number;
}
function ScraperRunProgress({ runId }: { runId: number }) {
const [progress, setProgress] = useState<RunProgress | null>(null);
useEffect(() => {
const es = new EventSource(`/api/v1/runs/${runId}/progress`);
es.onmessage = (e) => setProgress(JSON.parse(e.data));
es.onerror = () => es.close();
return () => es.close();
}, [runId]);
if (!progress) return <Spinner />;
const pct = progress.total > 0
? Math.round(progress.processed / progress.total * 100)
: 0;
return (
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>{progress.processed} / {progress.total}</span>
<span className="text-red-500">{progress.errors} помилок</span>
</div>
<Progress value={pct} />
</div>
);
}
Конфігуратор парсера
Форма з полями: URL джерела, розклад (cron-picker), заголовки, налаштування прокси, маппінг полів (drag-and-drop з знайдених полів до полів схеми).
Терміни
Веб-інтерфейс управління з дашбордом, таблицею результатів та моніторингом: 6–10 робочих днів.