Разработка базы знаний и Q&A на сайте: от схемы до деплоя

Как мы ускоряем поддержку клиентов с помощью базы знаний

Представьте: у вас на сайте несколько сотен статей техподдержки, клиенты не находят ответы, запросы в поддержку дублируются. База знаний с нормальным поиском и разделом вопросов-ответов решают эту боль — но только если реализованы правильно, с учётом производительности и юзабилити. Мы занимаемся такими проектами не первый год: спроектировали и внедрили базы знаний для десятков компаний — от стартапов до enterprise-уровня. Одна из ключевых проблем — скорость поиска: пользователь не готов ждать больше секунды. Решение — полнотекстовый индекс на стороне БД.

Проблемы, которые решаем

Первая проблема — N+1 запрос при загрузке списка статей с категориями. Вторая — медленный LIKE-поиск по телу статьи. Третья — отсутствие обратной связи: клиенты не могут оценить полезность статьи, а команда не знает, какие материалы нужно улучшить. Типичная ситуация: на сайте 15 000 статей, поиск работает через LIKE ‘%query%’, ответ — 5–10 секунд. После миграции на PostgreSQL tsvector время отклика падает до 10 миллисекунд.

Как мы проектируем схему базы данных

Иерархия категорий строится через self-reference parent_id. Для каждого уровня можно хранить иконку и порядок сортировки. Статьи привязываются к категории, получают slug и numeric счётчики.

CREATE TABLE kb_categories (
    id SERIAL PRIMARY KEY,
    parent_id INTEGER REFERENCES kb_categories(id),
    name VARCHAR(150) NOT NULL,
    slug VARCHAR(150) NOT NULL UNIQUE,
    icon VARCHAR(50),
    sort_order INTEGER NOT NULL DEFAULT 0
);

CREATE TABLE kb_articles (
    id SERIAL PRIMARY KEY,
    category_id INTEGER REFERENCES kb_categories(id),
    title VARCHAR(255) NOT NULL,
    slug VARCHAR(255) NOT NULL UNIQUE,
    excerpt TEXT,
    body TEXT NOT NULL,
    body_search TSVECTOR GENERATED ALWAYS AS (
        to_tsvector('russian', title || ' ' || body)
    ) STORED,
    helpful_yes INTEGER NOT NULL DEFAULT 0,
    helpful_no INTEGER NOT NULL DEFAULT 0,
    views_count INTEGER NOT NULL DEFAULT 0,
    is_published BOOLEAN NOT NULL DEFAULT true,
    sort_order INTEGER NOT NULL DEFAULT 0,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

CREATE INDEX ON kb_articles USING gin(body_search);
CREATE INDEX ON kb_articles(category_id, is_published, sort_order);

CREATE TABLE faq_items (
    id SERIAL PRIMARY KEY,
    category VARCHAR(100),
    question TEXT NOT NULL,
    answer TEXT NOT NULL,
    sort_order INTEGER NOT NULL DEFAULT 0
);

Поле body_search — generated column, что исключает рассинхрон данных. Индекс GIN обеспечивает поиск со скоростью <10 мс на 10K статей. Для вопросов-ответов отдельная таблица — так проще управлять порядком и делать категории.

Как реализовать полнотекстовый поиск на PostgreSQL?

Мы используем plainto_tsquery('russian', $query) и ранжируем ts_rank. Контроллер на Laravel:

class KnowledgeBaseController extends Controller {
    // Полнотекстовый поиск
    public function search(Request $request): JsonResponse {
        $query = trim($request->input('q', ''));
        if (strlen($query) < 2) {
            return response()->json(['data' => [], 'query' => $query]);
        }

        $articles = KbArticle::published()
            ->whereRaw(
                "body_search @@ plainto_tsquery('russian', ?)",
                [$query]
            )
            ->selectRaw("*, ts_rank(body_search, plainto_tsquery('russian', ?)) as rank", [$query])
            ->orderByDesc('rank')
            ->limit(10)
            ->get(['id', 'title', 'slug', 'excerpt', 'category_id', 'rank']);

        return response()->json([
            'data' => KbArticleResource::collection($articles),
            'query' => $query,
        ]);
    }

    // Статья с трекингом просмотров
    public function show(string $slug): JsonResponse {
        $article = KbArticle::published()
            ->with('category')
            ->where('slug', $slug)
            ->firstOrFail();

        // Инкрементировать просмотры (асинхронно)
        dispatch(fn() => $article->increment('views_count'))->afterResponse();

        // Связанные статьи той же категории
        $related = KbArticle::published()
            ->where('category_id', $article->category_id)
            ->where('id', '!=', $article->id)
            ->orderByDesc('views_count')
            ->limit(5)
            ->get(['id', 'title', 'slug']);

        return response()->json([
            'article' => KbArticleResource::make($article),
            'related' => $related,
        ]);
    }

    // Оценить полезность статьи
    public function helpful(Request $request, KbArticle $article): JsonResponse {
        $request->validate(['helpful' => 'required|boolean']);

        $session = $request->session()->getId();
        $key = "helpful:{$article->id}:{$session}";

        if (Cache::has($key)) {
            return response()->json(['already_voted' => true]);
        }

        Cache::put($key, true, now()->addDays(30));

        if ($request->boolean('helpful')) {
            $article->increment('helpful_yes');
        } else {
            $article->increment('helpful_no');
        }

        return response()->json([
            'yes' => $article->fresh()->helpful_yes,
            'no' => $article->fresh()->helpful_no,
        ]);
    }
}

Метод show использует afterResponse() — просмотры считаются без замедления ответа. Кеш голосования исключает накрутку. В ответе отдаём связанные статьи — это повышает время на сайте.

React-компоненты: аккордеон вопросов-ответов и поиск

Фронтенд собираем на React или Vue — без разницы. Покажу вариант на React.

Аккордеон вопросов-ответов

import { useState } from 'react';

interface FaqItem {
  id: number;
  question: string;
  answer: string;
}

function FaqAccordion({ items, category }: { items: FaqItem[]; category: string }) {
  const [openId, setOpenId] = useState<number | null>(null);

  return (
    <section>
      <h2>{category}</h2>
      <dl>
        {items.map(item => (
          <div key={item.id} className={`faq-item ${openId === item.id ? 'open' : ''}`}>
            <dt>
              <button
                onClick={() => setOpenId(openId === item.id ? null : item.id)}
                aria-expanded={openId === item.id}
                aria-controls={`faq-answer-${item.id}`}
              >
                {item.question}
                <span aria-hidden>{openId === item.id ? '−' : '+'}</span>
              </button>
            </dt>
            <dd id={`faq-answer-${item.id}`} hidden={openId !== item.id}>
              <div dangerouslySetInnerHTML={{ __html: item.answer }} />
            </dd>
          </div>
        ))}
      </dl>
    </section>
  );
}

Реализован по Accessibility guidelines: aria-expanded, aria-controls, hidden. В ответе может быть HTML (изображения, ссылки).

Поиск с debounce

function KbSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<KbArticle[]>([]);

  useEffect(() => {
    if (query.length < 2) {
      setResults([]);
      return;
    }

    const timer = setTimeout(async () => {
      const { data } = await api.get('/api/kb/search', {
        params: { q: query },
      });
      setResults(data.data);
    }, 300);

    return () => clearTimeout(timer);
  }, [query]);

  return (
    <div className="kb-search">
      <input
        type="search"
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="Поиск по базе знаний..."
        aria-label="Поиск по базе знаний"
      />
      {results.length > 0 && (
        <ul className="kb-search__results" role="listbox">
          {results.map(article => (
            <li key={article.id} role="option">
              <a href={`/help/${article.slug}`}>
                <strong>{article.title}</strong>
                <p>{article.excerpt}</p>
              </a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Debounce 300 мс предотвращает лишние запросы. Используем role="listbox" и role="option" для доступности.

Что делать, если нужно быстро найти ответ?

Поиск с автодополнением — это минимум. Дополнительно можно внедрить фильтрацию по категориям, сортировку по популярности и дате. В сложных случаях подключаем Elasticsearch, но для 95% проектов достаточно PostgreSQL tsvector.

Сколько времени займёт разработка?

Итого: от 4 до 5 дней на стандартную базу знаний с разделом вопросов-ответов. Срок может увеличиться, если нужна интеграция с внешними системами или кастомная аналитика.

Сравнение способов поиска

---
version: '3.8'
services:
  postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: knowledge_base
      POSTGRES_USER: kb_user
      POSTGRES_PASSWORD: secret
    ports:
      - '5432:5432'
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata: