Как мы ускоряем поддержку клиентов с помощью базы знаний
Представьте: у вас на сайте несколько сотен статей техподдержки, клиенты не находят ответы, запросы в поддержку дублируются. База знаний с нормальным поиском и разделом вопросов-ответов решают эту боль — но только если реализованы правильно, с учётом производительности и юзабилити. Мы занимаемся такими проектами не первый год: спроектировали и внедрили базы знаний для десятков компаний — от стартапов до 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.
Сколько времени займёт разработка?
| Этап | Срок (рабочие дни) | Что входит |
|---|---|---|
| Проектирование БД + API | 1–2 | ER-диаграмма, миграции, Laravel контроллеры |
| Фронтенд базовый | 1–2 | Страницы категорий, статья, поиск |
| Аккордеон вопросов-ответов | 0.5–1 | React-компонент, Schema.org разметка |
| Рейтинг полезности | 0.5–1 | API голосования, кеш, учёт просмотров |
| Интеграция + тесты | 1 | Feature тесты, оптимизация запросов |
Итого: от 4 до 5 дней на стандартную базу знаний с разделом вопросов-ответов. Срок может увеличиться, если нужна интеграция с внешними системами или кастомная аналитика.
Сравнение способов поиска
| Критерий | LIKE '%query%' | PostgreSQL tsvector | Elasticsearch |
|---|---|---|---|
| Время на 10K статей | ~5 с | <10 мс | <5 мс |
| Ранжирование | Нет | ts_rank | BM25 |
| Морфология | Нет | русская морфология | полноценная |
| Сложность реализации | 0 | 1 день | 2–3 дня |
Пример конфигурации Docker Compose для PostgreSQL
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:
Документация PostgreSQL по полнотекстовому поиску: https://www.postgresql.org/docs/current/textsearch.html
Что входит в результат работы
- Исходный код на Laravel 11 / React 18 (TypeScript)
- Миграции и сидеры для тестовых данных
- Postman-коллекция или Swagger для API
- Документация по развёртыванию (Docker compose или инструкция для хостинга)
- Доступы к репозиторию, демо-стенду
- 2 недели гарантии на баги (бесплатно)
Почему выбирают нас
- 7+ лет опыта в веб-разработке, из них 5+ на Laravel и React
- Выполнили 30+ проектов, связанных с базами знаний, документацией и порталами
- Гарантируем отсутствие орфографических ошибок и валидную HTML/CSS разметку
- Сертификаты Laravel Certified, AWS Cloud Practitioner
Свяжитесь с нами для обсуждения проекта — мы оценим вашу задачу и предложим оптимальное решение. Закажите демо-версию, чтобы увидеть результат на работающем проекте.