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

Материал из Поле цифровой дидактики
← Предыдущая правкаСледующая правка →
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
<div class="container">
    <h1>📰 Агрегатор ленты VK</h1>
    <div class="subtitle">FastAPI + SQLite + современный интерфейс для сбора и анализа постов ВКонтакте</div>
    <!-- Цели проекта -->
    <div class="card">
        <h2><span class="icon">🎯</span> Цели проекта</h2>
        <ul>
            <li><strong>Автоматизация сбора данных</strong> — создать инструмент, который по запросу пользователя получает посты из заданной группы VK через официальный API.</li>
            <li><strong>Структурированное хранение</strong> — организовать хранение постов в SQLite с полями: дата, текст, лайки, комментарии, ссылка на оригинал.</li>
            <li><strong>Удобный интерфейс</strong> — реализовать веб-страницу с карточками постов, поиском по тексту и адаптивной вёрсткой.</li>
            <li><strong>Масштабируемость</strong> — создать архитектуру, позволяющую легко добавлять новые источники и расширять функциональность (графики, прогнозы).</li>
            <li><strong>Образовательная ценность</strong> — продемонстрировать навыки работы с FastAPI, асинхронными запросами, SQLAlchemy и веб-шаблонами.</li>
    <!-- Описание функционала -->
    <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>
       
[[Файл:Vk-pc-iphone.jpg|центр|]]
    <div class="card">
        <h2><span class="icon">🔄</span> Структура Проекта</h2>
        <ul>
[[Файл:Struktura.jpg|500px|center|thumb|Общая структура проекта в VSC]]
[[Файл:vk_parser.jpg|500px|center|thumb|Cкрипт Python для работы с VK]]
[[Файл:Mainpy.jpg|500px|center|thumb|Скрипт работы с API токеном]]
[[Файл:Models.jpg|500px|center|thumb|Скрипт models.py]]
[[Файл:Req.jpg|500px|center|thumb|Требования]]
<p>ui.html:</p>
<pre style="background-color:#4c4c4c; color:#fff; padding:15px; border-radius:10px; overflow-x:auto;">
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ru">
<html lang="ru">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <title>Агрегатор ленты VK — описание проекта</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Агрегатор ленты VK</title>
     <style>
     <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
         body {
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: #f8fafc;
             background: #f0f2f5;
             color: #1e293b;
             padding: 20px;
             margin: 0;
             color: #1a1a1a;
            padding: 30px 20px;
         }
         }
         .container {
         .container {
             max-width: 1000px;
             max-width: 1200px;
             margin: 0 auto;
             margin: 0 auto;
         }
         }
         h1 {
         h1 {
            font-size: 2rem;
             text-align: center;
             text-align: center;
             margin-bottom: 10px;
             margin-bottom: 30px;
             color: #0f172a;
             color: #2c3e50;
        }
        .subtitle {
            text-align: center;
            color: #475569;
            margin-bottom: 40px;
            font-size: 1.1rem;
         }
         }
         .card {
         .search-form {
             background: white;
             background: white;
             border-radius: 24px;
            padding: 20px;
             box-shadow: 0 8px 20px rgba(0,0,0,0.05);
             border-radius: 12px;
            padding: 24px 28px;
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             margin-bottom: 30px;
             margin-bottom: 30px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        .search-form input {
            flex: 2;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
             transition: 0.2s;
             transition: 0.2s;
            border: 1px solid #e2e8f0;
         }
         }
         .card h2 {
         .search-form input:focus {
             font-size: 1.5rem;
            outline: none;
             margin-top: 0;
            border-color: #3498db;
             margin-bottom: 20px;
            box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
             color: #0f172a;
        }
        .search-form button {
            background: #3498db;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
             font-size: 16px;
            font-weight: 500;
            transition: background 0.2s;
        }
        .search-form button:hover {
            background: #2980b9;
        }
        .reset-btn {
            background: #95a5a6;
        }
        .reset-btn:hover {
            background: #7f8c8d;
        }
        .posts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
        }
        .post-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .post-card:hover {
            transform: translateY(-4px);
             box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }
        .post-header {
             padding: 16px;
            background: #fafbfc;
            border-bottom: 1px solid #eef2f6;
             display: flex;
             display: flex;
            justify-content: space-between;
             align-items: center;
             align-items: center;
            gap: 12px;
         }
         }
         .card h3 {
         .source-badge {
             font-size: 1.2rem;
             font-size: 12px;
             margin: 20px 0 10px;
            font-weight: bold;
             color: #1e293b;
            background: #4c75a3;
            color: white;
            padding: 4px 8px;
             border-radius: 20px;
            text-transform: uppercase;
        }
        .date {
            font-size: 12px;
             color: #6c757d;
        }
        .post-content {
            padding: 16px;
         }
         }
         ul, p {
         .post-text {
            font-size: 14px;
             line-height: 1.5;
             line-height: 1.5;
            color: #2c3e50;
            margin-bottom: 16px;
            word-break: break-word;
         }
         }
         code {
         .post-footer {
             background: #f1f5f9;
            padding: 12px 16px;
             padding: 2px 6px;
             background: #fafbfc;
             border-radius: 8px;
             border-top: 1px solid #eef2f6;
             font-family: monospace;
            display: flex;
             font-size: 0.9rem;
             justify-content: space-between;
             align-items: center;
             font-size: 13px;
         }
         }
         .badge {
         .stats {
             background: #eef2ff;
             display: flex;
            color: #1e40af;
             gap: 16px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
             font-weight: 500;
            display: inline-block;
         }
         }
         .grid {
         .stats span {
             display: flex;
             display: flex;
             flex-wrap: wrap;
             align-items: center;
             gap: 20px;
             gap: 4px;
             margin: 20px 0;
             color: #5a6874;
         }
         }
         .grid-item {
         .read-more {
             flex: 1;
             color: #3498db;
            background: #f8fafc;
             text-decoration: none;
             border-radius: 16px;
             font-weight: 500;
             padding: 16px;
             font-size: 13px;
             border-left: 4px solid #3b82f6;
         }
         }
         .grid-item strong {
         .read-more:hover {
             display: block;
             text-decoration: underline;
            margin-bottom: 8px;
            color: #0f172a;
         }
         }
         hr {
         .empty-message {
             border: none;
             text-align: center;
             border-top: 1px solid #e2e8f0;
            padding: 60px 20px;
             margin: 20px 0;
            background: white;
        }
             border-radius: 12px;
        .icon {
             color: #7f8c8d;
             font-size: 1.8rem;
             font-size: 18px;
         }
         }
         @media (max-width: 640px) {
         @media (max-width: 640px) {
             .grid {
             .search-form {
                 flex-direction: column;
                 flex-direction: column;
                align-items: stretch;
             }
             }
             .card {
             .search-form input, .search-form button {
                 padding: 20px;
                 width: 100%;
             }
             }
         }
         }
Строка 107: Строка 235:
</head>
</head>
<body>
<body>
<div class="container">
    <div class="container">
    <h1>📰 Агрегатор ленты VK</h1>
        <h1>📱 Агрегатор ленты VK</h1>
    <div class="subtitle">FastAPI + SQLite + современный интерфейс для сбора и анализа постов ВКонтакте</div>


    <!-- Описание функционала -->
        <div class="search-form">
    <div class="card">
            <form method="get" action="/" style="display: contents;">
        <h2><span class="icon">⚙️</span> Как это работает</h2>
                <input type="text" name="q" placeholder="Поиск по тексту постов..." value="{{ q }}">
        <p>Сервер на <code>FastAPI</code> получает посты из указанной группы VK, сохраняет их в <code>SQLite</code> и отображает в веб‑интерфейсе с удобной фильтрацией. Весь сбор выполняется асинхронно в фоне, не блокируя интерфейс.</p>
                <button type="submit">🔍 Найти</button>
                {% if q %}
                <a href="/" class="reset-btn" style="background:#95a5a6; padding:12px 24px; border-radius:8px; color:white; text-decoration:none; text-align:center;">Сбросить</a>
                {% endif %}
            </form>
        </div>


         <div class="grid">
         <div class="posts-grid">
             <div class="grid-item">
            {% for post in posts %}
                 <strong>📦 Сбор постов</strong>
             <div class="post-card">
                 GET-запрос <code>/fetch?group_id=...&count=20</code> запускает фоновую задачу. API VK возвращает текст, лайки, комментарии и дату — всё сохраняется в базу.
                 <div class="post-header">
                    <span class="source-badge">{{ post.source.upper() }}</span>
                    <span class="date">{{ post.date.strftime('%d.%m.%Y %H:%M') }}</span>
                </div>
                 <div class="post-content">
                    <div class="post-text">
                        {{ post.text[:350] }}{% if post.text|length > 350 %}...{% endif %}
                    </div>
                </div>
                <div class="post-footer">
                    <div class="stats">
                        <span>❤️ {{ post.likes }}</span>
                        <span>💬 {{ post.comments }}</span>
                    </div>
                    <a href="{{ post.url }}" target="_blank" class="read-more">Открыть пост →</a>
                </div>
             </div>
             </div>
             <div class="grid-item">
            {% else %}
                 <strong>🗄️ Хранение</strong>
             <div class="empty-message">
                SQLAlchemy + SQLite. Таблица <code>posts</code> содержит поля: источник, внешний ID, дата, текст, ссылка, лайки, комментарии. Дубликаты исключаются.
                 📭 Пока нет постов. Запустите сбор через <code style="background:#f1f1f1; padding:4px 8px; border-radius:4px;">/fetch?group_id=1</code>
            </div>
            <div class="grid-item">
                <strong>🔍 Поиск и фильтрация</strong>
                На главной странице есть поиск по тексту постов. Работает через SQL-оператор <code>LIKE</code> — мгновенно показывает только нужные записи.
             </div>
             </div>
            {% endfor %}
         </div>
         </div>
     </div>
     </div>
</body>
</html>
</pre>


    <!-- Первичная страница -->
    <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">
     <div class="card">
         <h2><span class="icon">💡</span> Рекомендации по работе</h2>
         <h2><span class="icon">💡</span> Рекомендации по работе</h2>
Строка 168: Строка 296:
     <!-- Выводы и итоги -->
     <!-- Выводы и итоги -->
     <div class="card">
     <div class="card">
         <h2><span class="icon">📌</span> Выводы</h2>
         <h2><span class="icon"></span> Выводы</h2>
         <ul>
         <ul>
             <li>✔️ Проект представляет собой законченный веб‑агрегатор ленты VK с современным бэкендом на FastAPI.</li>
             <li>✔️ Проект представляет собой законченный веб‑агрегатор ленты VK с современным бэкендом на FastAPI.</li>
Строка 180: Строка 308:
     </div>
     </div>
</div>
</div>
</body>
</html>

Версия от 23:28, 26 марта 2026

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

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

🎯 Цели проекта

  • Автоматизация сбора данных — создать инструмент, который по запросу пользователя получает посты из заданной группы VK через официальный API.
  • Структурированное хранение — организовать хранение постов в SQLite с полями: дата, текст, лайки, комментарии, ссылка на оригинал.
  • Удобный интерфейс — реализовать веб-страницу с карточками постов, поиском по тексту и адаптивной вёрсткой.
  • Масштабируемость — создать архитектуру, позволяющую легко добавлять новые источники и расширять функциональность (графики, прогнозы).
  • Образовательная ценность — продемонстрировать навыки работы с FastAPI, асинхронными запросами, SQLAlchemy и веб-шаблонами.

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

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

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

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

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

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

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

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

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


    🔄 Структура Проекта

      Общая структура проекта в VSC
      Cкрипт Python для работы с VK
      Скрипт работы с API токеном
      Скрипт models.py
      Требования

      ui.html:

      <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Агрегатор ленты VK</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f2f5;
            padding: 20px;
            color: #1a1a1a;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        .search-form {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        .search-form input {
            flex: 2;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: 0.2s;
        }
        .search-form input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
        }
        .search-form button {
            background: #3498db;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background 0.2s;
        }
        .search-form button:hover {
            background: #2980b9;
        }
        .reset-btn {
            background: #95a5a6;
        }
        .reset-btn:hover {
            background: #7f8c8d;
        }
        .posts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
        }
        .post-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .post-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }
        .post-header {
            padding: 16px;
            background: #fafbfc;
            border-bottom: 1px solid #eef2f6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .source-badge {
            font-size: 12px;
            font-weight: bold;
            background: #4c75a3;
            color: white;
            padding: 4px 8px;
            border-radius: 20px;
            text-transform: uppercase;
        }
        .date {
            font-size: 12px;
            color: #6c757d;
        }
        .post-content {
            padding: 16px;
        }
        .post-text {
            font-size: 14px;
            line-height: 1.5;
            color: #2c3e50;
            margin-bottom: 16px;
            word-break: break-word;
        }
        .post-footer {
            padding: 12px 16px;
            background: #fafbfc;
            border-top: 1px solid #eef2f6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
        }
        .stats {
            display: flex;
            gap: 16px;
        }
        .stats span {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #5a6874;
        }
        .read-more {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
            font-size: 13px;
        }
        .read-more:hover {
            text-decoration: underline;
        }
        .empty-message {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 12px;
            color: #7f8c8d;
            font-size: 18px;
        }
        @media (max-width: 640px) {
            .search-form {
                flex-direction: column;
                align-items: stretch;
            }
            .search-form input, .search-form button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📱 Агрегатор ленты VK</h1>

        <div class="search-form">
            <form method="get" action="/" style="display: contents;">
                <input type="text" name="q" placeholder="Поиск по тексту постов..." value="{{ q }}">
                <button type="submit">🔍 Найти</button>
                {% if q %}
                <a href="/" class="reset-btn" style="background:#95a5a6; padding:12px 24px; border-radius:8px; color:white; text-decoration:none; text-align:center;">Сбросить</a>
                {% endif %}
            </form>
        </div>

        <div class="posts-grid">
            {% for post in posts %}
            <div class="post-card">
                <div class="post-header">
                    <span class="source-badge">{{ post.source.upper() }}</span>
                    <span class="date">{{ post.date.strftime('%d.%m.%Y %H:%M') }}</span>
                </div>
                <div class="post-content">
                    <div class="post-text">
                        {{ post.text[:350] }}{% if post.text|length > 350 %}...{% endif %}
                    </div>
                </div>
                <div class="post-footer">
                    <div class="stats">
                        <span>❤️ {{ post.likes }}</span>
                        <span>💬 {{ post.comments }}</span>
                    </div>
                    <a href="{{ post.url }}" target="_blank" class="read-more">Открыть пост →</a>
                </div>
            </div>
            {% else %}
            <div class="empty-message">
                📭 Пока нет постов. Запустите сбор через <code style="background:#f1f1f1; padding:4px 8px; border-radius:4px;">/fetch?group_id=1</code>
            </div>
            {% endfor %}
        </div>
    </div>
</body>
</html>


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

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

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

      Выводы

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

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

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