Реализация веб-интерфейса для управления ботами-парсерами

Реализация веб-интерфейса для управления ботами-парсерами

Веб-интерфейс превращает 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 рабочих дней.