Автонаповнення сайту даними з парсера: мапінг, модерація, публікація

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

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

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Автонаповнення сайту даними з парсера: мапінг, модерація, публікація
Середній
~5 днів

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1362
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1253
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    958
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1190
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    931
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    949

Уявіть: інтернет-магазин з 50 000 товарів, дані постачають три партнери з різними форматами. Прямий імпорт за добу призводить до 15% дублів і битих посилань — сайт втрачає позиції у видачі. Ми розробили систему, яка виключає такі проблеми через конвеєр: парсер → нормалізація → модерація → публікація. Але просто скопіювати дані з парсера в базу — наївний підхід, який не масштабується. Без проміжної обробки ви ризикуєте отримати сміття: дублікати, биті зображення, невалідні ціни. Крім того, кожен постачальник надсилає дані у своєму форматі: один використовує JSON з вкладеними полями, інший — XML з атрибутами. Нам потрібно уніфікувати все в єдину структуру, перевірити якість і лише потім публікувати. Автоматичне наповнення контентом через інтеграцію парсера та CMS вимагає системного підходу, інакше веб-скрапінг перетворюється на хаос. Нижче розберемо ключові вузли та їх реалізацію.

Які проблеми виникають при прямому імпорті?

Прямий імпорт з парсера в базу сайту — погана практика. Ось типові помилки:

  • Дублікати — однакові товари з різними ID через повторний парсинг.
  • Биті зображення — посилання на зовнішні ресурси, які видалили.
  • Невалідні ціни — 0 грн або 999 999 999 грн через помилку джерела.
  • Різна структура — у кожного постачальника свій формат: один передає артикул у полі article, інший — у sku.

Ми вирішуємо це через проміжний шар: чергу з валідацією та нормалізацією. Наша компанія має 7 років досвіду в інтеграціях, реалізувала понад 120 проектів, і ми гарантуємо якість сертифікованими методами. Економія на одному джерелі сягає $500, а впровадження під ключ займає від 5 днів.

Чому потрібна проміжна черга?

Черга буферизує дані і дає можливість застосувати бізнес-логіку: об'єднання дублів, трансформація форматів, збагачення з зовнішніх API. Без черги при збої парсера ви ризикуєте отримати в CMS сміття, яке доведеться чистити руками. Використання черги знижує кількість помилок публікації в 5 разів порівняно з прямим імпортом (це в 5 разів краще). Також це дозволяє обробляти до 10 000 записів на хвилину без втрати продуктивності.

Дедуплікація реалізована через хешування за комбінацією полів: title + sku + supplier_id. При появі дубля запис позначається як duplicate і не публікується. У разі оновлення даних, старе значення замінюється новим.

Як налаштувати мапінг полів для будь-якого джерела?

Кожне джерело має свою структуру. Ми використовуємо конфігурацію на основі JSONPath (Wikipedia), яка дозволяє описати відповідність полів без зміни коду.

{
  "source": "supplier_catalog",
  "mappings": {
    "title": "$.name",
    "description": "$.full_description",
    "price": "$.price_rub",
    "category": { "field": "$.category_id", "transform": "category_map" },
    "images": "$.photos[*].url",
    "sku": "$.article"
  },
  "category_map": {
    "1": "electronics",
    "2": "clothing",
    "15": "home-garden"
  }
}

Такий підхід знижує час адаптації нового джерела до кількох годин. Мапінг через JSONPath в 3 рази швидше, ніж написання кастомних скриптів для кожного джерела, і забезпечує економію до $500 на одному джерелі.

Як обробляються зображення?

Картинки з джерела завантажуються, оптимізуються і завантажуються у власне сховище:

async def process_image(url: str, product_id: int) -> str:
    async with httpx.AsyncClient() as client:
        resp = await client.get(url, timeout=30)

    img = Image.open(BytesIO(resp.content))
    img = img.convert('RGB')

    # ресайз зі збереженням пропорцій
    img.thumbnail((1200, 1200), Image.LANCZOS)

    # збереження в WebP
    output = BytesIO()
    img.save(output, 'WEBP', quality=85)

    # завантаження в S3/MinIO
    s3_key = f'products/{product_id}/{uuid4()}.webp'
    s3.put_object(Bucket=BUCKET, Key=s3_key, Body=output.getvalue())

    return f'https://cdn.trusted-domain.com/{s3_key}'

WebP зменшує розмір файлу на 30% без втрати якості, а зберігання на власному CDN прискорює завантаження сторінок (зниження LCP на 40%). Додатково налаштовується кешування на CDN з часом життя 7 днів для зображень.

Контроль якості та стратегії публікації

Перед публікацією дані проходять валідацію за трьома рівнями:

  • Обов'язкові поля: назва, ціна, хоча б одна фотографія.
  • Діапазон ціни: від 1 до 1 000 000 одиниць (захист від помилок джерела).
  • Опис: не коротше 50 символів.
  • Зображення: доступні, ширина не менше 300 px.

Записи, що не пройшли перевірку, потрапляють у статус review_required і потребують ручного схвалення. Якщо джерело не гарантує якість, редактор перевіряє запис і вирішує, публікувати чи ні. Для довірених джерел можна налаштувати авто-публікацію — це в 2 рази швидше за ручну модерацію.

Три стратегії публікації:

Стратегія Час публікації Ризик помилок Ручна робота
Авто-публікація Секунди Середній (довірене джерело) Немає
Чернетка Години/дні Низький (редактор перевірить) Є
Диф-оновлення Секунди Низький (лише зміни) Немає

Вибір стратегії залежить від надійності джерела та критичності даних. Наприклад, авто-публікація в 2 рази швидша за чернетку, але потребує повної довіри до джерела.

Процес роботи

  1. Аналітика — вивчаємо структуру парсера та полів CMS.
  2. Проектування — розробляємо схему мапінгу та черги.
  3. Реалізація — пишемо процесор на Python, валідатор за правилами, інтеграцію з CMS через API.
  4. Тестування — прогоняємо на історичних даних (10 000 записів), перевіряємо edge-кейси.
  5. Деплой — розгортаємо на продакшн, налаштовуємо моніторинг помилок.

Що входить в роботу

  • Аналіз структури парсера та полів CMS
  • Розробка схеми мапінгу
  • Налаштування проміжної черги та валідації
  • Інтеграція через API CMS
  • Документація з конфігурації та підтримки
  • Навчання редакторів роботі з чергою та модерацією
  • Технічна підтримка на етапі запуску
  • Також входить безкоштовна оцінка проекту та консультація

Строки

Складність Час
Одне джерело, базова валідація 5–8 днів
Кілька джерел, UI мапінгу, модерація 15–20 днів

Пишіть нам для оцінки вашого проекту — ми підберемо оптимальну архітектуру інтеграції під ключ. Оцінка безкоштовна і займає 1 день.

Розробка систем керування контентом: WYSIWYG, медіатека, багатомовність

Ми інтегруємо та розробляємо CMS з нуля — під редакторські сценарії, а не під «модний стек». Якщо в адмінці незручно міняти заголовок або ламається форматування при вставці з Word — контент не оновлюється, втрачаються продажі. Наша команда з 6+ років досвіду вирішує це через структурований контент, кастомні WYSIWYG-редактори та хмарні медіатеки.

Коли headless CMS виправдана, а коли — ні

Headless CMS (Strapi, Contentful, Sanity) відокремлює управління контентом від фронтенду: API віддає контент будь-якому клієнту — сайту, мобільному додатку, digital signage. Вибір для омніканальних проєктів і коли фронтенд на React/Vue/Next.js. Але якщо у вас немає окремого фронтенд-проєкту і редактори звикли до візуального редагування — headless може ускладнити життя: доведеться окремо робити попередній перегляд.

Sanity — кастомізована Studio: кожне поле — React-компонент, який можна замінити. Portable Text (формат для rich content) портується в будь-який рендерер. Для складних редакторських workflow — найкращий вибір. Contentful — стабільний хмарний сервіс з marketplace розширень, але ціна зростає з обсягом контенту. Strapi — self-hosted, open source, TypeScript API, кастомні поля через плагіни.

Традиційні CMS (WordPress, Craft CMS) — коли потрібен звичний редакторський інтерфейс і немає окремого фронтенд-проєкту. Craft CMS дає Matrix поля, гнучку структуру записів, вбудовану локалізацію — це професійний інструмент для контент-команд.

Як ми будуємо WYSIWYG-редактор, який не ламає верстку

Редактор — окрема інженерна задача, не просто <textarea>. Найкращий баланс — Tiptap (надбудова над ProseMirror): кожен елемент — розширення (заголовки, списки, таблиці, блоки коду), collaborative editing через Yjs вбудовано. Lexical (від Meta) — продуктивніший, але складніший у налаштуванні. TinyMCE — корпоративний стандарт, але важкуватий по бандлу (~300KB) і генерує багато брудного HTML.

Головна проблема — вставка з Word. &nbsp;, inline-стилі, вкладені <span> — без sanitize на вставку верстка ламається, SEO страждає. Ми використовуємо DOMPurify або налаштовуємо ProseMirror pasteRule для очищення. Результат — чистий HTML, який не змінюється при редизайні.

Медіатека: від завантаження до CDN

Завантажувати файли через <input type="file"> на диск сервера — антипатерн. Диск переповниться, масштабування неможливо, CDN не підключити. Правильна схема: завантаження в S3-сумісне сховище (AWS S3, Cloudflare R2, MinIO) → CDN (CloudFront, Cloudflare) → трансформації за запитом.

Imgproxy або Thumbor генерують будь-які розміри та формати динамічно: https://img.example.com/resize:800:600/format:webp/plain/s3://bucket/photo.jpg. Оригінал зберігається один раз, похідні не займають місце. Cloudflare Images — managed-сервіс.

Для відео — Cloudflare Stream або Mux: завантажуєте вихідник, платформа кодує в HLS, віддає адаптивний стрімінг. Без цього відео важить 500MB і завантажується цілком.

Що входить в розробку медіатеки

Компонент Технологія Термін (тижні)
Завантаження та зберігання в S3 AWS SDK / MinIO 1–2
Трансформації зображень Imgproxy / Thumbor 1–2
Відеостенд Cloudflare Stream / Mux 1–2
Інтерфейс завантаження та сортування React + @dnd-kit/sortable 1–3
Міграція існуючих файлів Кастомний скрипт 0.5–1

Структурований контент vs free-form HTML

Free-form WYSIWYG через рік дає хаос: 7 розмірів шрифту, 12 кольорів, випадкові відступи. Редизайн без ручного чищення неможливий. Структурований контент — замість «як воно виглядає» зберігаємо «що це є». Не <p style="font-size:24px; color:red">Важно!</p>, а тип блоку callout з параметром variant: warning. CMS зберігає структуру, фронтенд вирішує, як рендерити. Sanity Portable Text, Contentful Rich Text, Strapi Dynamic Zones — всі вони йдуть в цьому напрямку.

Чи варто впроваджувати структурований контент?

Процес роботи

  1. Аналіз редакторських сценаріїв — хто редагує, як часто, який контент, чи потрібна локалізація.
  2. Вибір CMS під сценарії, а не по трендах.
  3. Проектування контент-моделі — типи записів, поля, зв'язки.
  4. Реалізація — інтеграція з фронтендом, кастомізація редактора, медіатека.
  5. Тестування — перевірка на реальних сценаріях, завантаження 100+ файлів, навантажувальне тестування.
  6. Деплой та документація — інструкція для редакторів, опис API, доступи.

Строки та бюджет

Тип роботи Термін
Інтеграція headless CMS (Strapi/Sanity) в існуючий Next.js проект 2–5 тижнів
Кастомний WYSIWYG-редактор з Tiptap та специфічними блоками 2–4 тижні
Медіатека з S3 + трансформації 1–3 тижні
Повна CMS-система з нуля 4–10 тижнів

Бюджет розраховується індивідуально після аудиту. Зв'яжіться з нами — оцінимо ваш проєкт за один день.

Що ви отримаєте після завершення

  • Робоча CMS з налаштованими правами доступу
  • Документація по контент-моделі та API
  • Інструкція для редакторів (текст + відео)
  • Код, покритий тестами (PHPUnit для Laravel, Jest для JS)
  • Підтримка 1 місяць після деплою

Наш досвід

6 років на ринку, 40+ виконаних проєктів. Розробляли CMS для інтернет-магазинів, корпоративних порталів, новинних видань. Використовуємо ліцензійне ПЗ (sentry.io, sonarcloud) — гарантуємо якість коду.

Джерело: внутрішня статистика проєктів за 2018–2024 рр.

Детальніше про WYSIWYG-редактори читайте на Wikipedia.

Залишилися питання?

Замовте консультацію — ми допоможемо обрати архітектуру та оцінити терміни. Отримайте пропозицію протягом 2 робочих днів.