Агрегатор ленты VK: различия между версиями

Материал из Поле цифровой дидактики
Следующая правка →
Новая страница: «test»
 
Нет описания правки
Строка 1: Строка 1:
test
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Агрегатор ленты VK — описание проекта</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f8fafc;
            color: #1e293b;
            margin: 0;
            padding: 30px 20px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        h1 {
            font-size: 2rem;
            text-align: center;
            margin-bottom: 10px;
            color: #0f172a;
        }
        .subtitle {
            text-align: center;
            color: #475569;
            margin-bottom: 40px;
            font-size: 1.1rem;
        }
        .card {
            background: white;
            border-radius: 24px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.05);
            padding: 24px 28px;
            margin-bottom: 30px;
            transition: 0.2s;
            border: 1px solid #e2e8f0;
        }
        .card h2 {
            font-size: 1.5rem;
            margin-top: 0;
            margin-bottom: 20px;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .card h3 {
            font-size: 1.2rem;
            margin: 20px 0 10px;
            color: #1e293b;
        }
        ul, p {
            line-height: 1.5;
        }
        code {
            background: #f1f5f9;
            padding: 2px 6px;
            border-radius: 8px;
            font-family: monospace;
            font-size: 0.9rem;
        }
        .badge {
            background: #eef2ff;
            color: #1e40af;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            display: inline-block;
        }
        .grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        .grid-item {
            flex: 1;
            background: #f8fafc;
            border-radius: 16px;
            padding: 16px;
            border-left: 4px solid #3b82f6;
        }
        .grid-item strong {
            display: block;
            margin-bottom: 8px;
            color: #0f172a;
        }
        hr {
            border: none;
            border-top: 1px solid #e2e8f0;
            margin: 20px 0;
        }
        .icon {
            font-size: 1.8rem;
        }
        @media (max-width: 640px) {
            .grid {
                flex-direction: column;
            }
            .card {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>📰 Агрегатор ленты VK</h1>
    <div class="subtitle">FastAPI + SQLite + современный интерфейс для сбора и анализа постов ВКонтакте</div>
 
    <!-- Описание функционала -->
    <div class="card">
        <h2><span class="icon">⚙️</span> Как это работает</h2>
        <p>Сервер на <code>FastAPI</code> получает посты из указанной группы VK, сохраняет их в <code>SQLite</code> и отображает в веб‑интерфейсе с удобной фильтрацией. Весь сбор выполняется асинхронно в фоне, не блокируя интерфейс.</p>
 
        <div class="grid">
            <div class="grid-item">
                <strong>📦 Сбор постов</strong>
                GET-запрос <code>/fetch?group_id=...&count=20</code> запускает фоновую задачу. API VK возвращает текст, лайки, комментарии и дату — всё сохраняется в базу.
            </div>
            <div class="grid-item">
                <strong>🗄️ Хранение</strong>
                SQLAlchemy + SQLite. Таблица <code>posts</code> содержит поля: источник, внешний ID, дата, текст, ссылка, лайки, комментарии. Дубликаты исключаются.
            </div>
            <div class="grid-item">
                <strong>🔍 Поиск и фильтрация</strong>
                На главной странице есть поиск по тексту постов. Работает через SQL-оператор <code>LIKE</code> — мгновенно показывает только нужные записи.
            </div>
        </div>
    </div>
 
    <!-- Первичная страница -->
    <div class="card">
        <h2><span class="icon">🏠</span> Главная страница</h2>
        <p>После запуска сервера открывается интерфейс с карточками последних 50 постов. Каждая карточка содержит:</p>
        <ul>
            <li>🏷️ Метку источника (VK)</li>
            <li>📅 Дату публикации</li>
            <li>📝 Текст (обрезается до 350 символов)</li>
            <li>❤️ Количество лайков</li>
            <li>💬 Количество комментариев</li>
            <li>🔗 Ссылку на оригинальный пост ВКонтакте</li>
        </ul>
        <p>Карточки адаптируются под мобильные устройства и имеют эффект наведения.</p>
        <!-- Можно вставить скриншот, если есть -->
        <div style="background: #f1f5f9; text-align: center; padding: 20px; border-radius: 16px; margin-top: 15px;">
            <span class="badge">📸 Пример главной страницы</span><br>
            <span style="color: #475569;">(Скриншот интерфейса с карточками постов)</span>
        </div>
    </div>
 
    <!-- Рекомендации по использованию -->
    <div class="card">
        <h2><span class="icon">💡</span> Рекомендации по работе</h2>
        <ul>
            <li><strong>Сбор постов:</strong> перейдите по адресу <code>/fetch?group_id=durov&count=10</code> (вместо <code>durov</code> укажите ID или короткое имя группы). Сервер запустит парсинг в фоне.</li>
            <li><strong>Проверка результата:</strong> откройте главную страницу <code>/</code> или JSON-список <code>/posts</code>.</li>
            <li><strong>Поиск:</strong> на главной странице введите слово и нажмите «Найти» — отфильтруются посты, содержащие это слово.</li>
            <li><strong>Автоматизация:</strong> можно добавить планировщик (например, APScheduler) для регулярного сбора новых постов без ручного запуска.</li>
        </ul>
        <div style="background: #eef2ff; border-radius: 12px; padding: 16px; margin-top: 10px;">
            <p style="margin: 0;">✅ <strong>Совет:</strong> для теста используйте публичную группу с большим количеством постов (например, <code>group_id=1</code> — официальный паблик ВК).</p>
        </div>
    </div>
 
    <!-- Выводы и итоги -->
    <div class="card">
        <h2><span class="icon">📌</span> Выводы</h2>
        <ul>
            <li>✔️ Проект представляет собой законченный веб‑агрегатор ленты VK с современным бэкендом на FastAPI.</li>
            <li>✔️ Реализована полноценная работа с внешним API, асинхронный сбор данных и хранение в SQLite.</li>
            <li>✔️ Интерфейс интуитивно понятен: карточки постов, поиск, кнопка сброса фильтров.</li>
            <li>✔️ Архитектура позволяет легко добавить новые источники (Telegram, Twitter) — достаточно написать соответствующий парсер.</li>
            <li>✔️ Проект может служить основой для более сложных аналитических систем: добавления графиков активности, прогнозирования времени публикаций, тэггинга и т.д.</li>
        </ul>
        <hr>
        <p style="font-style: italic; color: #475569;">🎓 Проект выполнен в рамках учебной задачи и демонстрирует навыки работы с FastAPI, SQLAlchemy, асинхронными запросами и веб‑интерфейсами.</p>
    </div>
</div>
</body>
</html>

Версия от 21:35, 26 марта 2026

<!DOCTYPE html> <html lang="ru"> <head> 

   <meta charset="UTF-8">
   <title>Агрегатор ленты VK — описание проекта</title>
   <style>
       body {
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background: #f8fafc;
           color: #1e293b;
           margin: 0;
           padding: 30px 20px;
       }
       .container {
           max-width: 1000px;
           margin: 0 auto;
       }
       h1 {
           font-size: 2rem;
           text-align: center;
           margin-bottom: 10px;
           color: #0f172a;
       }
       .subtitle {
           text-align: center;
           color: #475569;
           margin-bottom: 40px;
           font-size: 1.1rem;
       }
       .card {
           background: white;
           border-radius: 24px;
           box-shadow: 0 8px 20px rgba(0,0,0,0.05);
           padding: 24px 28px;
           margin-bottom: 30px;
           transition: 0.2s;
           border: 1px solid #e2e8f0;
       }
       .card h2 {
           font-size: 1.5rem;
           margin-top: 0;
           margin-bottom: 20px;
           color: #0f172a;
           display: flex;
           align-items: center;
           gap: 12px;
       }
       .card h3 {
           font-size: 1.2rem;
           margin: 20px 0 10px;
           color: #1e293b;
       }
       ul, p {
           line-height: 1.5;
       }
       code {
           background: #f1f5f9;
           padding: 2px 6px;
           border-radius: 8px;
           font-family: monospace;
           font-size: 0.9rem;
       }
       .badge {
           background: #eef2ff;
           color: #1e40af;
           padding: 4px 10px;
           border-radius: 20px;
           font-size: 0.8rem;
           font-weight: 500;
           display: inline-block;
       }
       .grid {
           display: flex;
           flex-wrap: wrap;
           gap: 20px;
           margin: 20px 0;
       }
       .grid-item {
           flex: 1;
           background: #f8fafc;
           border-radius: 16px;
           padding: 16px;
           border-left: 4px solid #3b82f6;
       }
       .grid-item strong {
           display: block;
           margin-bottom: 8px;
           color: #0f172a;
       }
       hr {
           border: none;
           border-top: 1px solid #e2e8f0;
           margin: 20px 0;
       }
       .icon {
           font-size: 1.8rem;
       }
       @media (max-width: 640px) {
           .grid {
               flex-direction: column;
           }
           .card {
               padding: 20px;
           }
       }
   </style>

</head> <body>

📰 Агрегатор ленты VK

FastAPI + SQLite + современный интерфейс для сбора и анализа постов ВКонтакте

⚙️ Как это работает

Сервер на FastAPI получает посты из указанной группы VK, сохраняет их в SQLite и отображает в веб‑интерфейсе с удобной фильтрацией. Весь сбор выполняется асинхронно в фоне, не блокируя интерфейс.

               📦 Сбор постов
               GET-запрос /fetch?group_id=...&count=20 запускает фоновую задачу. API VK возвращает текст, лайки, комментарии и дату — всё сохраняется в базу.

               🗄️ Хранение
               SQLAlchemy + SQLite. Таблица posts содержит поля: источник, внешний ID, дата, текст, ссылка, лайки, комментарии. Дубликаты исключаются.

               🔍 Поиск и фильтрация
               На главной странице есть поиск по тексту постов. Работает через SQL-оператор LIKE — мгновенно показывает только нужные записи.

🏠 Главная страница

После запуска сервера открывается интерфейс с карточками последних 50 постов. Каждая карточка содержит:

  • 🏷️ Метку источника (VK)
  • 📅 Дату публикации
  • 📝 Текст (обрезается до 350 символов)
  • ❤️ Количество лайков
  • 💬 Количество комментариев
  • 🔗 Ссылку на оригинальный пост ВКонтакте

Карточки адаптируются под мобильные устройства и имеют эффект наведения.

           📸 Пример главной страницы

           (Скриншот интерфейса с карточками постов)

💡 Рекомендации по работе

  • Сбор постов: перейдите по адресу /fetch?group_id=durov&count=10 (вместо durov укажите ID или короткое имя группы). Сервер запустит парсинг в фоне.
  • Проверка результата: откройте главную страницу / или JSON-список /posts.
  • Поиск: на главной странице введите слово и нажмите «Найти» — отфильтруются посты, содержащие это слово.
  • Автоматизация: можно добавить планировщик (например, APScheduler) для регулярного сбора новых постов без ручного запуска.

✅ Совет: для теста используйте публичную группу с большим количеством постов (например, group_id=1 — официальный паблик ВК).

📌 Выводы

  • ✔️ Проект представляет собой законченный веб‑агрегатор ленты VK с современным бэкендом на FastAPI.
  • ✔️ Реализована полноценная работа с внешним API, асинхронный сбор данных и хранение в SQLite.
  • ✔️ Интерфейс интуитивно понятен: карточки постов, поиск, кнопка сброса фильтров.
  • ✔️ Архитектура позволяет легко добавить новые источники (Telegram, Twitter) — достаточно написать соответствующий парсер.
  • ✔️ Проект может служить основой для более сложных аналитических систем: добавления графиков активности, прогнозирования времени публикаций, тэггинга и т.д.

🎓 Проект выполнен в рамках учебной задачи и демонстрирует навыки работы с FastAPI, SQLAlchemy, асинхронными запросами и веб‑интерфейсами.

</body> </html>

Источник — http://digida.mgpu.ru/index.php?title=Агрегатор_ленты_VK&oldid=45353